TypeScript

简单来说，它是一个旨在极大简化表单创建过程的软件开发工具。它利用图形化界面（通常是拖拽式操作）和预先构建好的组件，让用户（尤其是非专业开发者）能够快速、直观地设计和构建功能丰富的在线表单，而无需或只需编写极少量的传统代码。 技术选型： 核心库：react.js(18.3.1) react-dom(18.3.1) typescript(5.8.3) 路由：react-router-dom 状态库: zustand css框架：tailwindcss(3.4.17) 国际化：react-il8next UI组件库: antd 打包工具: vite 语法检查: eslint 核心特点: 可视化设计界面 : 1. 所见即所得： 用户在一个类似画布的界面上直接操作表单元素（如文本框、下拉框、单选框、复选框、日期选择器、子表单等）。 2. 拖拽操作： 通过鼠标将所需组件从组件库拖放到设计区域。 3. 实时预览： 设计过程中可以实时看到表单的最终呈现效果，无需编译或部署。 低代码/无代码: 配置取代编码： 表单的逻辑（如字段校验规则、条件显示/隐藏、数据联动、简单的计算）通常通过配置属性面板（如设置必填、格式、显示条件等）来实现，而不是编写复杂的JavaScript或后端代码。 丰富的组件库: 1. 提供大量预构建、可复用的表单字段组件（如输入框、选择器、日期时间、成员单选、子表单、多标签、过滤条件等） 2. 组件通常具有丰富的属性可配置（样式、校验、交互行为）。

1. 主要模块： 编辑器、图层布局器、组件库、模板库、素材库、内置控件库、代码生成器 2. 功能效果： 2.1. 以项目为配置单元，每个项目可以创建单个或多个页面； 2.2. 用户可通过在编辑器内拖拉拽的方式，将组件库内的组件放置到画布内进行调整配置，最终保存为数据可视化的大屏或移动端项目，该项目支持下载源码进行离线部署，也支持直接发布成外链进行访问； 2.3. 支持通过JS代码进行事件派发订阅、自定义组件等高级操作； 2.4. 支持用户自行维护组件库，按平台规范开发自定义组件、上传、使用； 2.5. 支持用户自行维护模板库，通过保存项目为模板以便快速搭投同类型项目； 2.6. 支持将页面导出为配置文件，通过配置文件新建页面； 2.7. 对于多页面项目，可以很方便地配置路由跳转； 2.8. 支持平台内部数据或API数据接入 2.9. 其他功能未一一列举 3. 职责： 本人负责整个低代码平台的架构搭建与核心代码开发，包括但不限于规范制定、技术更新、迁移评估、脚手架开发、组件库开发、性能优化、专利转化： 3.1. 本项目从零开始，对竞品进行了相关调研，与领导、PM进行多次讨论，确定产品方向 3.2. 底层基础设计：图层协议及画布协议的设计、图层类/图层编组类的设计、配置栏控件协议、组件库组件的开发管理规范设计等； 3.3. 平台技术对接规范、开发规范等的编写； 3.4. 到本人离职前，该平台已实现“配置可视化+组件生态化+素材自由化”，已可覆盖交互不那么复杂的可视化大屏页面和移动端页面，能减轻50～60%的前端工作量。目前已推广应用到一部分项目线上，反馈良好 4. 技术栈： 该平台主要技术栈为Typescript + React + Nodejs 5. 难点： 5.1. 各类协议制定； 5.2. 图层操作（增、删、改、编组、取消编组、尺寸调整等）优化；

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

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

Maleon是一个“拖拽式、零编码的数据可视化开发平台”，可以低门槛、高效地开发出高水准的数据大屏。 系统功能： 1、账号中心：包括账号设置和我的企业，负责管理人员和调配 2、工作空间管理：支持创建多个工作空间，工作空间之间数据相互隔离，权限相互隔离 3、可视化大屏管理：对所创建的大屏进行统一管理。包括大屏的搜索排序分组，创建，编辑，预览发布分享重命名复制删除 4、数据源管理：支持数据库类，API类，文件类的添加 5、数据集管理：根据连接数据源中数据创建数据集合 6、画布编辑器：包括组件栏，画布，组件设置，页面设置，大屏操作栏

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. 我负责渲染引擎，流程引擎的开发，担任前端负责人

- 基于Vue3/TS/ts-node等技术栈搭建的一个前端页面可视化搭建工具 - 该项目由本人一个人开发完成，在公司内部开发前端项目时可以显著减少页面模块的胶水代码

地址：https://youdata.163.com/index/data-screen 项目概要：数据大屏 Pro 是一款先进的低代码编辑器，专注于提供数据大屏的展示功能。该平台以其成熟的特性和直观的用户界面，让用户能够通过拖拉拽的方式轻松完成数据大屏的创建。 功能特性：数据大屏 Pro 平台具备多个核心功能，包括组件加载、组件渲染周期、数据接入周期、事件周期、配置项注入、导入导出以及自定义组件等。这些功能共同构成了一个完整的数据可视化解决方案，使用户能够根据自己的需求进行定制和扩展。 用户体验：为了提高用户的使用体验，数据大屏 Pro 平台还提供了多种易用性操作功能，如多选、对齐、组合、动态图层、复制粘贴、快捷键以及锁定隐藏等。这些功能使得用户在操作数据大屏时更加得心应手，提高了工作效率。

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

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

负责平台技术选型、基础架构及方案设计，包含:工程化相关方案设计与落地、各模块方案设计与核心实现 动态表单开发，借助 Vee-validate，基于 hook 实现可维护性更高的动态表单及表单设计工具 低代码物料出码功能，基于 vue-json-pretty 封装物料协议数据预览与编辑 主导页面组装模块设计，选用通用 blocksuite 方案，使页面元素丰富且高度可定制 AI 数据建模及应用创建模块选用 nodejs 服务，借助 langChainjs 构建端到端语言模型服务 基于 monaco-editor 实现低代码编辑器复杂功能，包含自动补全、语法提示等 LSP 服务相关内容 主导封装 webpack plugin 及 loader 支持静态资源自动上传、源码脱敏防备、构建优化等 流程引擎及服务编排等内容实现，基于鼠标 move 事件封装 vue draggable 组件实现组件拖拽与页面内容编排 数据源支持 1000 万行表格数据渲染与编辑，通过 canvas 技术实现

1.可视化表单设计：平台提供直观易用的可视化界面，通过拖拽和配置的方式，用户可以自定义表单的字段、布局和样式，包括文本框、下拉框、日期选择器、复选框等各种表单元素。 2.逻辑和条件设置：平台支持在表单中添加逻辑和条件，例如字段之间的关联、计算公式、字段显示与隐藏的条件等。这样可以根据不同的条件自动调整表单的展现和行为。 3.数据集成和连接：平台允许将表单与其他系统或数据源进行集成，例如数据库、外部API等。这样可以实现表单数据的自动填充、数据查询和数据提交到其他系统的功能。 4.审批流程配置：除了表单设计，平台还提供了配置审批流程的功能。用户可以定义不同的审批节点、审批人员和审批条件，以及设置流程的自动化触发和流转规则。 5.表单版本管理：平台支持表单版本的管理，可以对表单进行修改、保存和发布。同时，系统还可以跟踪表单的历史修改记录，方便用户进行版本回溯和恢复。 6.权限和安全性：平台提供细粒度的权限控制，可以根据用户角色和组织结构设置表单的查看、编辑和提交权限。此外，平台应该具备数据的加密和安全传输机制，确保敏感数据的保护。 7.报表和统计分析：平台能够生成各类报表和统计分析，帮助用户了解表单的使用情况、数据统计和趋势分析，以便进行业务决策和优化。

1.自定义流程节点及审批人，实现可视化高效流程管理 2.将表单数据进行统计、合并、分析计算等 3.自定义流程配置以供上下游业务流转 4.拖拽设计数据可视化图表，对数据进行筛选、合并、统计等 5.组件封装、跟进版本迭代

1.项目包括 GIS、 BI看板、自定义应用任务流、BIM 模型 等功能 2.主要负责自定义应用 任务流程 组件库 为业务组提高开发效率、同时降低技术门槛：低代码平台不需要开发人员具备深入的编程知识，即使是非专业的开发人员也可以使用它来创建应用程序。这降低了技术门槛，使更多的人能够参与到应用程序开发中来。提供灵活性和可扩展性：低代码平台通常提供了各种预定义的组件和模块，可以快速构建应用程序的基础功能。同时，它也支持自定义代码的集成，允许开发人员在需要的时候进行个性化的扩展和定制 也减少维护成本 3.难点： 1、导入excel表格 以及 word 中的表格 并且对表格中内容进行编辑 2、表格中可以增加Form表单控件 使得导入的表格 在设计后 可直接在网页中提供用户填写 进而进行审核

这是一个低代码开发平台，支持PC、H5、PAD可视化界面开发。支撑平台90%的界面低代码开发。目前平台已开发模块：设备管理、WMS、MOM、质检等。这个平台我主要负责前端的框架以及低代码的核心逻辑开发，同时前期负责设备管理模块的的开发。

1.此项目由三个小项目组成，分别是课程编辑后台，课程展示h5，课程组件库 2.独立负责整个项目的前端开发工作 3.之前由于发布新课程需要开发人员编码才能完成，为了节省成本和时间，开发了此课程发布平台，运营人员只需要拖动组件，上传图片，添加事件就能完成整个课程的制作，一个课程只需要一两个小时就能完成，以前需要开发人员写两三天，大大节约了时间和成本 4.可定制化开发

1. 该项目使用的是webpack + react + mbox + antd技术栈进行开发。 2. PC端支持拖拽表单元素来为流程节点来设计不同的表单填写信息。 3. 移动端、PC端均可以对工单进行审批、驳回、修改等操作。 4. 支持通过iframe嵌入itsm系统，对外部提供交互api。

开发为企业部署的智能对话机器人（常见官网右下角的帮助机器人）。包括后台管理全部功能：意图配置，学习训练，sdk配置等等；智能对话机器人sdk全部开发。

低代码可视化搭建平台，实现拖拉拽生成页面，快速搭建后台管理网站，提高开发效率。 主要技术栈：Typescript，NodeJs，Redis，Mysql