职业概述

2 年以上前端开发经验,主攻 Vue3 / TypeScript / uni-app 技术栈,持续参与中后台系统、跨端 App/小程序、数据可视化大屏、低代码配置平台等项目建设。不是停留在页面开发层面的前端,更偏向能独立负责模块设计、公共能力抽象、复杂交互实现和多端交付的工程型开发。

具备从需求理解、技术方案拆解、组件封装、联调上线到后续优化的完整交付经验。做过多端分销商城、业务中台、3D 可视化、工作流/图表/ER 编辑器等复杂场景,能把业务需求沉淀为可复用组件与配置能力,而不是简单堆页面。

核心竞争力

  • 熟练使用 HTML、CSS、JavaScript、TypeScript、Vue2、Vue3、Pinia、Vite、Vue Router,具备完整的工程化开发能力。了解Vue3源码。
  • 有较强的抽象能力,能把业务页面中的重复逻辑沉淀为表格、表单、弹窗、富文本、预览、导出等通用组件,提升研发效率和可维护性。
  • 具备跨端开发经验,使用 uni-app 落地 App 和小程序,处理多端差异、应用市场上架、移动端交互适配,引入CI/CD + Android WebView以优化App发布流程。
  • 有复杂可视化项目经验,使用 ECharts、Mars2D、Three.js、WebSocket 实现地图联动、实时大屏、历史数据回放和 3D 监控场景,不只会画图表,更能处理数据与交互联动。
  • 有低代码平台和编辑器开发经验,参与 ECharts 编辑器、ER 编辑器、Workflow 编辑器、动态表单设计器的实现,理解配置驱动和可视化编排场景。
  • 熟悉中后台系统设计,能独立拆分模块边界,处理权限、路由、状态管理、接口封装、组件抽象、复杂表单和业务流程编排。
  • 掌握前端性能优化策略,包括懒加载、文件分片上传等。
  • 具备 AI 开发环境搭建经验:掌握 OpenCode AI 编程工具的部署与配置,能在 Trae AI 编辑器中通过终端灵活配置阿里云百炼、火山引擎 Coding Plan 等平台,结合 Anthropic Skills(代理技能) 封装标准化工作流程,利用智能代理自动化能力,以 AI 驱动高效开发与代码质量优化。
  • 持续输出技术博客,已沉淀 60+ 篇学习与项目总结文章,能够把实践问题抽象为可复用经验,学习和复盘能力较强。

工作经历

成都康儿丝网络科技有限公司 2024.09 - 至今

前端开发工程师

1. 参与公司多个核心业务系统建设,覆盖中后台、数据可视化、App 与小程序等多类项目,承担核心模块设计与实现工作。

2. 独立负责天枢系统前端开发,按业务域拆分订单、库存、结算等模块,抽离公共逻辑并沉淀为可配置组件,提高系统可维护性和后续扩展能力。

3. 参与地理经济可视化监控平台开发,基于 Vue3、Ant Design Vue、ECharts、Mars2D 构建地图与图表联动的数据展示系统。

4. 参与公司内部编辑器能力建设,落地 ECharts 编辑器、ER 编辑器、Workflow 编辑器和动态表单设计器,推动页面开发向配置驱动演进。

5. 参与 App 与小程序项目重构及发布流程优化,负责核心功能开发、性能优化、联调上线和问题排查。

成都数字家园科技有限公司 2023.07 - 2023.12

前端开发实习

1. 参与多个可视化大屏和管理系统项目开发,负责业务页面实现、接口联调和图表交互。

2. 使用 Vue3 + ECharts 落地数据展示和动态交互,提升图表组件的复用性与渲染表现。

3. 二次封装 Element Plus 通用组件,沉淀动态表单、通用表格等基础能力,为后续项目复用打下基础。

代表项目

FateVerse(开源项目)
项目时间
2023.05 - 至今
项目定位
面向企业场景的快速开发基础平台,围绕权限体系、自定义查询、流程编排、动态表单、代码生成等能力建设,强调平台化复用与可配置化交付。
核心职责
1. 负责并持续推进平台前端核心能力建设,基于 Vue3 + Vite + Pinia + Element Plus 搭建权限控制、动态路由、请求拦截、状态管理与消息通知等基础设施,支撑多业务模块统一接入与演进。
2. 深度参与基于 G6 的自定义查询 ER 编辑器升级与重构,在 Vue3 体系下落地节点拖拽、关系建模、字段配置、预览校验、历史操作与上线发布等复杂交互,持续优化可视化建模体验。
3. 参与搭建 Workflow 流程设计器、动态表单设计器与 ECharts 编辑器,采用配置驱动方式抽象表单组件、流程节点、权限联动与渲染逻辑,提升系统从功能开发向平台能力输出的复用度。
4. 二次封装 Element Plus,沉淀 Table、Form 等通用组件,以及 Tinymce 富文本、CodeMirror 编辑器、文件上传、图标、表格导出等基础能力,降低重复开发成本并统一交互规范。
5. 负责用户、通知公告等核心业务模块开发与接口联调,落地部门树筛选、角色/岗位绑定、富文本公告、站内信列表与 WebSocket 实时提醒等场景。
技术栈
Vue3 Vite Pinia Vue Router Element Plus Axios ECharts AntV G6 Tinymce Vue-Codemirror VueDraggable
开源链接
Demo:http://fateverse.odliken.cn/
Gitee 前端:https://gitee.com/fateverse/fateverse-vue
Gitee 后端:https://gitee.com/fateverse/fateverse
ER Topology 可视化编辑器
项目时间
2023.09 - 至今
项目描述
该项目面向复杂多表查询与关系建模场景,基于 Vue3 与 AntV G6 搭建可视化 ER Topology 编辑平台,将原本依赖人工维护表关系、字段配置和查询规则的开发方式升级为图形化、结构化、可回显的建模流程。系统以“关系设计 + 字段配置 + 拓扑持久化”为核心,支持数据表拖拽建模、表间关系连线、字段级查询条件与展示方式配置、拓扑预览与保存发布,能够承载复杂查询模型从设计、调整到落地的完整闭环,显著提升多表查询配置效率、模型可维护性与业务表达准确性。
责任描述
1. 主导 ER Topology 编辑器核心能力建设,完成节点面板、编辑画布、属性面板、字段配置弹窗及保存/预览/发布链路开发,推动复杂查询配置从静态表单模式升级为可视化建模模式;
2. 深度定制 G6 节点、边及交互行为,支持节点拖拽建模、锚点拉线建边、节点折叠展开、字段滚动浏览、MiniMap 导航、框选多选、缩放适配、自动布局等核心编辑能力;
3. 将表关联规则内聚到编辑器内核,实现关系合法性校验、重复节点拦截与连线约束控制,提升拓扑配置准确性,降低错误关系流入后续业务链路的风险;
4. 抽象字段级元数据配置模型,支持查询条件、控件类型、展示类型、字典映射、日期格式、图片参数等多维配置,增强编辑器对复杂查询场景的表达能力;
5. 设计基于快照的历史状态管理机制,实现新增、拖拽、连线、删除、复制粘贴等操作的撤销/重做,并通过标准化 JSON 序列化支撑拓扑持久化与回显编辑。
技术栈
Vue3 AntV G6
隧道云监控可视化平台
项目时间
2023.12 - 2024.05
项目描述
该项目面向地下隧道场景的监控、运维与可视化管理需求,基于 Vue3、Three.js、Pinia、Element Plus 搭建以“隧道三维可视化 + 实时监测 + 业务配置管理”为核心的智慧监控平台。将原本分散的设备信息、环境指标与运行数据统一沉淀到可交互场景中,形成从数据接入、场景呈现到业务操作的完整闭环,显著提升复杂运维场景下的信息可读性、操作效率与系统可维护性。
责任描述
1.主导前端整体架构设计与核心模块建设,基于 Vue3 + Vite 搭建项目工程体系,完成路由组织、状态管理、接口分层、公共组件沉淀与环境配置规范,提升项目可扩展性与团队协作效率;
2.负责三维可视化核心能力开发,基于Three.js完成隧道模型加载、设备点位渲染、场景预览、信息面板联动,并基于图片热区建模与坐标映射实现总览图到目标隧道的精准交互跳转,推动复杂业务从传统页面展示升级为可视化场景表达;
3.负责监控大屏建设,围绕风机、风压、风速、有害气体、用电量等核心指标,基于 ECharts 搭建实时监测看板与趋势分析图表,并实现告警信息展示及监控数据弹窗下钻。
4.深度参与隧道管理、站点管理、设备管理、用户管理、模拟预览等核心业务模块开发,打通二维管理界面与三维场景、大屏看板之间的数据联动与操作闭环;
5.封装统一数据通信与鉴权方案,构建基于 Axios、Token 鉴权、路由守卫的前端访问链路,并结合 WebSocket 实现实时消息推送与监控场景动态更新;
技术栈
Vue3 Vite Vue Router Pinia Three.js Element Plus Axios Echarts WebSocket
地理经济可视化监控平台
项目时间
2025.02 - 2025.06
项目描述
面向某区网格化治理与经济运行分析场景,负责建设集财源流动、市场主体动态、重点项目推进、企业诉求分析于一体的可视化监控平台。项目基于 Vue3 + Vite 构建,融合Mars2D地图能力与 ECharts 数据分析能力,多业务弹窗联动及大屏全屏自适应展示,提升区域经济运行监测与资源统筹的数字化水平。
责任描述
1.完成首页总览、地图监控页、街道/部门/企业三级钻取页等业务模块开发,沉淀可复用弹窗、图表、全屏容器、通用表格等基础组件。
2.基于Mars2D参与地图可视化开发,实现街道GeoJSON面渲染、地图缩放分级展示、重点企业/机关房产/楼宇园区等点位标注,以及街道级地图钻取与信息联动展示。
4.参与大屏工程化建设,基于 Vite 完成别名管理、SVG图标注册、Mock支持与全屏缩放适配。
5.参与移动端页面协作开发,基于 TDesign 完成部分移动端业务页面与交互适配工作。
开发环境
WebStorm GIT
技术栈
Vue3 TypeScript Vite Pinia Ant Design Vue Axios Mars2D ECharts TDesign
川魅酒旗舰店
项目时间
2025.05-至今
项目描述
面向品牌直营与渠道推广场景的多端分销电商系统,覆盖 App、小程序、平台管理端、商家管理端。系统承载商品、订单、分销、积分、收益等核心链路,对前端一致性、跨端适配和业务流程完整性要求较高。
我的价值
负责多端核心业务功能开发与联调,处理商品、订单、收益、推荐官体系等关键流程;参与 App 打包、提审、上架流程,解决移动端兼容与发布环节问题。
技术亮点
项目接入了阿里云人脸识别功能,支持付款时进行人脸识别校验;同时处理多端一致性、分销规则落地、接口状态流转、移动端交互细节和上线交付链路,体现了对业务闭环和工程落地的把控能力。
技术栈
Vue3 uni-app uView plus TDesign
天枢系统
项目时间
2024.09 - 至今
项目描述
面向业务运营和供应链管理的中后台系统,包含基础平台、开发运营系统和业务系统,覆盖商品、订单、库存、结算、报表等模块。
我的价值
独立负责系统前端建设,从项目初始化、模块拆分到业务页面落地都由我推进;按业务域划分模块,抽离通用逻辑,封装多类可复用组件,降低后续重复开发成本。
技术亮点
这个项目体现的不是“做过后台”,而是具备中后台架构思维,能处理模块边界、组件抽象、复杂表单和业务流程的组织方式,让系统可以持续迭代而不是越做越乱。
技术栈
Vue3 TypeScript Vite Pinia Element Plus Ant Design Vue
科研项目管理平台
项目时间
2024.01 - 2024.08
项目描述
本项目旨在实现科研项目全生命周期的数字化管理。平台覆盖科研项目需求征集、项目立项、项目验收、项目资金管理、文档归档等环节;以项目生命周期为主流程,每个环节使用 Flowable 工作流引擎构建子流程驱动项目流程,确保各环节高效流转。平台集成自定义 BPMN 流程编辑器,支持项目审批流程的灵活设计与优化。
责任描述
1. 负责需求征集、项目立项/验收/归档、专项资金、费用管理等多个页面的开发及接口对接;
2. 负责开发 Workflow 编辑器和动态表单编辑器,支持节点动态调整与审批人分配,优化流程,缩短审批时间;
3. 封装 Tinymce 富文本编辑器、文件预览和表格导出等组件,减少重复代码开发,提高开发效率;
4. 二次封装 Element Plus 组件,降低代码冗余程度,提高维护效率。
开发环境
WebStorm Nodejs Mastergo Swagger 文档 GIT
技术栈
Vue3 Element Plus Vite Pinia Axios Vue Router Tinymce
研究生工位管理系统
项目时间
2024.10 - 2025.01
项目描述
面向高校研究生院的数字化管理平台,围绕工位分配、审批、统计、反馈和权限管理构建完整业务流程。
我的价值
负责工位管理、用户管理、审批流转、数据统计与反馈处理等核心模块建设,围绕“工位资源分配 - 审批 - 使用 - 维护”主链路梳理前端业务结构;落地基于 RBAC 的角色权限隔离、 楼宇/楼层/工位多层级数据展示与多条件筛选操作流,并支撑批量添加、清空、延期、清退等高频管理动作,提升系统在复杂校园场景下的可维护性、操作效率与业务闭环能力。
技术栈
Vue3 Vite Pinia Element Plus
排骨记账(App)
项目时间
2025.01 - 2025.04
项目描述
此项目是一款个人家庭财务管理的记账 App,主要有个人计划、群组记账、个人记账、报表统计、打卡系统和个人中心六个模块。个人中心清晰展示资产负债情况;个人计划支持邮件提醒;群组记账采用多账本模式,支持多场景独立记账,并自动将多人账单中每人的消费金额同步至个人账单;个人记账涵盖支出/收入记录,并提供多维度月支出预算管理,帮助精准控制开支;打卡系统支持自定义打卡类型与周期,结合报表统计功能,提供打卡完成率与趋势分析。
责任描述
1. 负责邮箱注册及登录;
2. 负责个人计划、群组记账、个人记账与打卡系统等模块的页面开发与接口对接;
3. 集成大量阿里巴巴矢量图标,提升用户选择体验;
4. 优化 App 发布流程,引入 CI/CD,结合原生 Android WebView 技术,渲染指定地址,打通 H5 与原生应用的通信桥梁,显著提升 App 的用户体验与响应速度;
5. 实现打卡数据的统计与可视化,支持用户查看打卡完成情况及历史趋势。
开发环境
HBuilderX IntelliJ IDEA Swagger 文档 Apipost7 GIT
技术栈
Vue3 uView Plus uni-app SCSS
演示地址
https://blog.odjbinail.cn/?p=4565
下载地址
http://download.odjbinail.cn/app/
速配商铺(小程序)
项目时间
2023.10 - 2023.12
项目描述
速配商铺是一款致力于连接店铺转让双方的小程序。通过小程序,店铺经营者可以方便快捷地发布店铺转让信息,包括店铺位置、面积、租金、转让原因、转让条件等;还提供了速配地图,为用户推荐附近店铺转让信息。用户可以根据需求进行筛选和浏览各类店铺转让等信息,轻松找到附近符合需求的店铺转让或出租等信息;还可以通过小程序直接与店铺经营者进行联系,了解更多店铺信息。
责任描述
1. 负责实现微信授权登录;
2. 带领团队完成项目开发并负责保障其质量优化工作;
3. 负责完成速配地图定位及自动地理定位任务,为用户推荐附近店铺信息;
4. 负责小程序的上线发布流程。
开发环境
HBuilderX 微信开发者工具 微信公众平台 蓝湖 Apipost7 GIT
技术栈
Vue2 uView UI uni-app SCSS
食瞳(小程序)
项目时间
2022.12 - 2023.02
项目描述
食瞳小程序主要为工厂代招商时,对 B 端用户展示工厂代工产品;其中主要有行业新闻、企业需求、需求&创意发布和个人中心等模块。B 端用户可以在小程序中发布自身的创意或者需求,也可以查看对应行业的情况和需求。
责任描述
1. 负责实现微信注册登录;
2. 负责首页产品展示模块、行业&需求模块与个人中心的页面开发与接口对接;
3. 负责小程序的上线发布流程。
开发环境
HBuilderX 微信开发者工具 微信公众平台 蓝湖 Apipost7 GIT
技术栈
Vue2 uView UI uni-app SCSS
高校学院官网开发
项目时间
2022.08 - 2022.11
项目描述
该项目是一个全面展示学校形象的响应式官网,主要有"学院概况"、"党群工作"、"师资队伍"、"教育教学"、"科学研究"、"学生工作"等栏目。其中"通知公告"、"党群动态"等栏目,可以让学生家长更好地了解学校。该官网除了展示学校信息和实现网站的中英文国际化之外,还有资料下载入口,满足用户的学习需求。同时该官网也配有 admin 后台管理网站,可以赋予不同用户的文章发布权限。
责任描述
1. 负责该官网的页面开发与接口对接,为了提高效率,全局采用 Element UI 组件库中的 Layout 进行布局;
2. 使用 DIV + CSS、JavaScript 实现导航栏的布局和动态交互展示效果;
3. 使用 Axios 调用后台接口请求数据,从而进行页面渲染;
4. 使用 Vue Router 进行路由跳转,实现单页面应用程序;
5. 使用 vue-i18n 插件实现网站的中英文国际化。
开发环境
WebStorm Nodejs 蓝湖 Swagger 文档 GIT
技术栈
Vue2 Element UI Vue CLI Axios Vue Router Vue I18n SCSS

在校经历

2020.09 - 2024.06
四川工商学院
计算机科学与技术 / 本科

在校期间系统自学前端技术,并将学习内容沉淀到个人博客。毕业后持续围绕 Vue3 工程化、可视化、跨端开发、模块抽象、复杂组件封装深入实践,形成了较强的自驱学习与持续输出能力。