一、小程序(uni-app+uView, 已上线, 可在微信小程序里搜索到)
项目特点:
开发工具为vscode连HBuilder, 运行到小程序开发者工具。
通过wx.getAccountInfoSync()区分环境, 调用不同环境接口。
接入了微信支付。
用wxml-to-canvas 插件, 将文字、图片和企业微信二维码图片, 拼接为一张海报图。
微调wxml-to-canvas插件, 等海报绘制完成后, 通过自定义事件通知父组件, 开始渲染。
接入了企业微信客服, 长按图片, 自动识别海报图内的企业微信二维码, 跳转入企业微信聊天窗。
小程序版本自动更新机制。
产品定制结果页分享到朋友圈, 微信群聊, 微信聊天。
根据在onLaunch里获取小程序太阳码scene值, 来区分获客来源, 比如用户扫产品包装上印刷的二
维码, 首次登录小程序。
采用image-cropper来裁剪头像, 支持放大缩小图片。
用了uni.$on和uni.$off来订阅裁剪后的图片。
小程序分包和压缩代码突破大小限制, 完成发布。
在某些机型上(iphone13), 如果频繁NavigateTo和redirectTo, 路由栈记录会乱掉, 而无法成功跳
转到目标页面. 解决方案是: 重要页面(例如, 商品详情页, 即下单页面)之前, 避免高频跳转, 避
免阻碍用户下单, 下单后, 再处理跳转逻辑.
通过globalData和localStorage完成页面后退时候的传参。
在navigateTo的fail回调中, 加入relaunch来兜底, 保证跳转失败时可以强行启动到某一页。
采集了用户埋点, 上报页面, 事件和接口数据。
权益页面, 双swiper联动(如下图红色打勾的swiper)。
二、PC端管理后台(React-umi/dva+ant Design)
项目特点:
封装了axios请求方法, 将相应的data resolve出去, 请求拦截(设置headers), 响应错误拦截并
toast错误, 全局loading, 超时重连。
使用xlsx插件, 解析excel文件。
在form表单中, 拖拽上传多份excel文件, 并分别解析为数据. 由于每个文件上传都是异步的, 因
此, setFileList里传入的是一个回调函数而非值。
使用xlsx插件, 下载当前表格数据为excel。
在form表单中内嵌 可行内编辑的table组件 , 提高数据录入效率。

1. 负责:PMS从零上线第一版

一、企业微信内嵌H5页面
项目特点:
根据用户数据权限, 对数据表格table中的数据, 进行过滤, 并支持下钻和上卷(下图左图)。
顶部筛选栏,点击”确认”更新查询条件, 并执行查询; 点击”重置”或者mask遮罩, 收起筛选栏,
不更新查询条件, 不执行查询(下图右图)。
二、PC端BI数据看板(react+antd pro)
项目特点 :
主要包括仪表盘配置和展现, 在线编写SQL语句并查询。
通过driver.js实现新功能引导。
实现了css毛玻璃效果。
通过react-full-screen实现了全屏效果。
通过react-split-pane-v2实现类似于codepen的分栏效果, 左栏编辑, 右栏预览。
通过react-monaco-editor实现代码编辑器。
对于时间折线图, 支持框选/刷选/套索选择某一时间区间进行放大缩小。
对于多个时间折线图, 支持横轴(时间轴)进行联动。
支持拖拽时间折线图的起止时间范围。
用了Split.js来分割左侧菜单栏, 支持拖拽菜单栏改变宽度。
页面左侧为tree组件, 支持搜索关键字, 且不显示不包含关键字的其他同级选项(下图左图)。
上述场景的另一个实现方案为: 高亮显示命中的选项, 且自动展开所有父节点(下图右图)。
对于rc-tree, 支持右键交互。
反向继承antd的Input.Search组件, 重写onInput事件, 保证input事件触发时且当前输入框内
容不为空时才触发onSearch事件的回调。
对于表单, 增加如下交互: 点击问号显示提示窗口,窗口固定不随滚动条滚动,并可在范围内拖拽。
又不影响下层表单输入。
点击tree组件的某一项, 新增一个tab。
右键单击tab组件, 可选择关闭\关闭所有tab页\关闭其他tab页。
单击tab, 定位到对应的tab页。
根据url, 自动定位到当前激活的tab页, 并高亮tree组件的对应项。
根据url自动新增tab, 并定位到当前tab。
Iframe内嵌url, 实现在本站点”一站式”查看所有第三方图表系统。
对于带查询条件的表格pro-table组件, 采用了antD-pro的lightFilter。
自定义lightFilter的查询条件浮窗及其交互, 例如, 输入查询关键字, 回车, 关闭弹窗, 更新url,
触发查询。
查询参数变更(回车/确认/重置)后,更新url地址栏(便于分享url给第三方)。
根据url地址栏参数,request后端接口。
lightFilter查询条件获取到url里的查询参数,并默认填入。
把接口返回的选项值hash化, 给容纳它的tag一个专属的背景颜色。
在当前设备上,用localStorage缓存列字段显隐\固定列\列排序配置。
支持表格行高切换, 切换为中等、紧凑、较高的行高。
使滚动条只在表格内容区域(不包括表头)内滚动,监听全屏/resize/侧边栏drag事件/表格row
行高设置变化事件/查询区高度变化,来动态改变表格高度,保证页面只出现1个滚动条。
如未登录, 登录后重定向到原url((且不丢失原queryString查询参数), 而非首页。
支持用户自行编辑sql查询where条件(and和or嵌套)。
通过echarts-gl和highcharts,实现了3D饼图。
离开页面时, 销毁3D饼图的webgl实例, 避免占用内存, 导致其他页面卡顿。
监听webgl上下文丢失事件, 并在上下文丢失后, reload页面, 重新加载webgl。
支持3D饼图自动旋转和手工拖拽旋转。
支持3D饼图hover和click后,饼图的扇区发生体积和位移变化。
支持3D饼图根据网页视口宽度变化后,自动resize。
三、架构看板(react+antv g6)
项目特点:
展现微服务架构下”领域-项目-服务-接口”之间的相互上下游依赖关系(有向调用链路)。
自定义布局, 将g2的circle packing打包图, 通过自研算法, 实现到g6, 来展现3层的包含关系。
对于上述布局, 需要在不排序的情况下, 使布局最大限度地紧凑(此处, 最终选择了d3的紧凑布局算法,python的circlify也支持3种算法, 但没有采用)。
同时采用了子图布局以支持”拖拽小圆自动改变包含其的大圆半径”, 即支持了d3的力导向布局。
支持右键选择某个服务节点上游或下游, 途径的所有服务链路。
支持按住shift加选、按住ctrl减选节点或边。
支持按照”已上线”和”草稿”状态, 来过滤画布上的微服务节点。
支持预置算法, 选中2个节点, 展示所有路径。
对于表格组件, 使用了draggable.js来拖动有序的table各行, 在drop时, 改变各行的顺序。
在组内可以拖拽, 在组间不能拖拽。且整个拖拽过程布局不会紊乱或闪烁, 且"添加虚拟行"能不阻
碍table的filter/sort/reset/query。
采用了vxe table组件, 实现可编辑表格, 支持右键完成新增\移除\复制\粘贴\更新。
也支持和快捷键(例如, shift+N)完成上述操作。
实现甘特图的拖拽条。
四、移动端H5页面(vue3+vant, 登录页、绑定银行卡、上传视频文件、个人中心、业绩预览页)
项目特点:
封装了省市区级联+锚点组件。
采用了自定义指令: v-focus、v-copy、v-longpress、v-debounce、v-emoji、v-lazyload。
上传视频, 并默认显示第一帧缩略图。上传图片并反显。
银行卡、身份证、手机号正则校验(不能包含表情包, 不能包含特殊字符)。
银行卡、身份证、手机号号位数分隔formatter。
使用了AES加/解密敏感信息, 如姓名、身份证号和手机号。
手机号、身份证号、姓名、住址、银行卡号中间******掩码。
采用了全局通用单例的toast、notification、modal方法。
搜索框和搜索建议, 采用了前端模糊搜索, 并高亮命中的关键字。
在编辑页面, 对于textarea组件, 通过nextTick来使光标置于最后一位。
列表实现下拉刷新, 上拉加载。
Tabs选项卡sticky吸顶布局。
使用better-scroll来优化滚动。
用socket协议来显示实时股价信息。
五、CRM PC端管理后台(react+antD)
项目特点:
微信扫码授权登录PC端管理后台。如用户尚未绑定过微信, 则首次扫码需要绑定。
路由重定向, 输入/重定向到首页。输入未知路由重定向到404。
左侧边栏SideBar, 与页面路由共享store里的数据, 例如, 刚设置完权限, 输入url访问时, 路由
就会实时生效, 左侧边栏菜单选项也会实时生效, 无需刷新, 也无需重新登录。
输入url访问时, 自动高亮侧边栏菜单。
对于菜单折叠/收起的状态, 进行localStorage数据持久化。
用useRef缓存当前页数, 实现列表页分页请求数据。
useImperativeHandle和fowardRef来调用子组件方法。
双录视频预览, 视频链接失效后自动轮训5次重新获取视频连接。
采用ProformDependency实现联动表单, 使用了editableProTable可编辑表格。
对于某一类常用的数据, 将其接口请求、数据操作(编辑/提交/撤回), 封装成自定义hooks。
全局请求和响应拦截, 并通过react-redux实现spinning。
用css实现: 1段落文本行数超过4行, 则最多显示4行. 2如果超过4行, 则在最后一行居中的
位置, 显示“查看更多”, 并且在之前显示...。点击“查看更多”跳转。3给...设置渐变效果。
用了css的white-space:pre-wrap支持flex布局将 空格占位纳入计算。
axios中携带if-none-match和if-modified-since为空串以强行清除协商缓存。
Modal弹窗通过react-draggable实现可拖拽, 通过react-resizable实现可改变弹窗大小。
六、移动端H5(vue2, 在线直播首页、列表页、详情页、顶部搜索条)
项目特点:
采用了响应式布局, calc(100vw/750)和rem结合, 保证了个屏幕尺寸下都能呈现出整洁的视觉效果。
通过Is动态组件, 针对设备横屏和竖屏,自动采用不同的布局和组件。
使用qrcode,html2canvas,canvas2image插件,实现“用户长按网页,将网页截图保存为svg,并
转化为图片, 保存图片到本地相册。
封装了一个图片并行下载器, 给定图片urls数组和并行数量parallelNum, 可以每下载完一张图片、
就继续下载后面的图片, 同时下载的图片数量不超过给定的parallelNum。
封装了下载重试方法, 失败重试直到达到最大重试次数maxTimes。
通过IntersectionObserver来实现1图片懒加载、2埋点统计、3上拉加载更多数据、4动画效果。
从a页面跳转到b页面, 缓存b页面滚动条位置。从cde页面跳转到b页面, 不缓存b页面滚动条
位置。
页面跳转都拼接时间戳, 避免缓存。
对于一级分类-五级分类, 封装了横向多层级tabs筛选区, 交互类似于文件夹, 点击筛选区各层级
的tab-item, 执行搜索, 更新列表页数据条目。
使用this.$parent和this.$refs调用组件方法。
使用了动态的路由模式匹配/:${channel}来区分当前客户。
用了lodash防抖。
采用了jquery的rotate插件实现大转盘抽奖活动页。
用localStorage来保存搜索历史记录。
七、PC端hr系统(vue2)
项目特点:
SSO单点登录. 采用web-worker轮询统一登录接口, 直到返回code, 用以去获取token和用户信息。
根据水印开关配置, 实现页面水印功能. 并且, 水印开关会引发router-view重载, 修改水印开关,
页面水印效果实时生效。此外, 用户移除水印后, 通过mutationObserver自动恢复水印。
用node批量给所有的js文件起始, 增加copyRight文档注释。
Vuei8n多语言, 并且用localStorage缓存用户本机上次设置的界面语言。
支持切换color-picker来吸颜色, 并自动生成当前theme 通过vuex分发给全部组件 。
通过element-UI的el-col的:xs :sm :md :lg :xl属性, 实现相应式布局。以及, 通过.hidden-
md-and-down, .hidden-lg-and-up来控制button元素响应式显隐。
通过range请求, 进行大文件分片下载。
采用了自定义指令v-draggable来拖动modal窗、v-resize来改变modal窗大小。
ppt、excel、doc、pdf文件预览。
用keep-alive缓存列表页, 包括: 顶部的查询条件区域、左侧el-tree过滤条件、分页、排序参数.
用keep-alive缓存表单编辑页。
采用webWorker对后台返回的数据(数据量为1000-70000之间), 进行处理, 再放到echarts图中进
行渲染, 避免同步数据处理时间过长, 阻塞UI线程。
禁用右键菜单contextMenu、禁用ctrl+F5、禁用ctrl+shift+C、禁用ctrl+shift+I. 对于resize
事件进行提示警告信息. 通过setTimeout进行防抖处理.
生产环境关闭devTool, 避免sourcemap文件造成代码(例如, api.js)文件泄漏。
实现了纯JS交互: 鼠标双击事件、圈选、复制粘贴整行/整列数据、复制粘贴某矩形区域数据。
实现了薪资计算的公式编辑器, 拖拽()+-*/符号到公式区, 并支持删除掉最后一项, 失焦后校
验公式有效性。
对于非table组件操作列的按钮, 使用了自定义指令v-permission, 来实现: 有权限则按钮显示,
无权限则按钮不显示。
封装了select组件来选择员工用户, 选项option支持图文布局, 可以显示头像、姓名、电话、部
门。
用了Promise.all来合并2个接口返回的列表。
用了Promise.any和abortController来中止并发请求中pending的请求。
通过css伪元素, 使select-options中的input框, 可以显示为: 1个彩色小圆点+空格+ 对应的状
态。
watch路由变化, 根据meta的name字段, 来高亮菜单。
通过beforeRouteEnter钩子来判断是否需要判断用户已登录。
八、年会3D抽奖应用(Node + Express + Three.js)
项目特点:
后台通过`Express`实现。
前端抽奖界面通过`Three.js`实现 3D 抽奖球,引用了`Three.js`的官方 3D 示例。
可将抽奖结果进行保存实时下载到 excel 中。
已抽取人员不在参与抽取,抽中的人员不在现场可以重新抽取。
刷新或者关掉服务器,会保存当前已抽取的数据,不会进行数据重置,只有点击界面上的重置按钮,
才能重置抽奖数据。
每次抽取的奖品总数和每次抽奖步长可配置。
抽取完所有奖品后还可以继续抽取特别奖(例如:现在抽取红包,追加的奖品等),此时默认一次抽
取一个。

一、PC端中台审核审批系统(angular)
项目特点:
根据接口返回的roles动态显示菜单。
采用了多语言方案i18n。
采用自定义指令, 实现按钮n秒后才可以点击。
封装了组件, 实现了: 多分类tabs下(每个tab下会展示一些服务), 填写单个服务的规格型号并分
别询价(单价)、可在当前tab或者切换tab来多选各个不同规格的服务、填写需要的服务数量、并
添加至购物车、计算订单优惠折扣、切换tab通过service缓存当前表单、并计算订单总价。
使用了模型驱动表单、resolver、guard、pipe、httpModule、拦截器、router、directive、
@Input/@Output、Subject、内容投影、hidden、ngFor/ngIf、i18n、service、
concatMap/mergeMap/exhaustMap/switchMap, zip/conmbineLatest/forkJoin。
二、PC端房估值系统(vue2)
项目特点:
使用addRoute动态路由、children嵌套路由。
watch路由变化, 来重新获取列表数据。
watch路由变化, 根据meta的某字段, 来决定是否显示右侧专栏。
通过媒体查询, 对官网页面, 实现了响应式布局, 兼容了移动端H5小屏幕, pad和pc端样式。
对于el-menu组件使用router模式, 自动高亮当前路由。
在beforeRouteLeave导航守卫钩子里通过json.stringify来判断用户是否修改了表单。
三、PC端Java项目初始化生成器(vue2)
项目特点:
在线填写Java项目配置表单, 提交后生成项目并下载压缩包。
在线预览包内md文档和代码使用了file-saver下载文件。
使用了jszip在网页端解压缩文件。 并且把文件夹和文件, 渲染为el-tree组件。
使用了markdown插件来在线预览md文件。
使用了codeMirror来预览java代码。
使用clipboard.js来实现在线复制、粘贴。

1. 负责:酒店管理系统PMS SaaS、CRM、财务系统、前端组件化、SaaS配置模板、SaaS配置向导、多
租户、搭建用户帮助中心体系(操作手册\FAQ\操作视频\新手引导\上线功能图文清单\400人工客服电话)、竞品分析、用户回访、前端数据埋点

1. 负责:供应商主数据MDM系统、0-1门店管理系统(核算门店业绩、房租/人力/维修成本归属和分摊,出具门店损益表)、web端费控和差旅报销产品、hr系统(组织人事模块、薪资模块、招聘模块、考
勤模块、APP端考勤、权限模块)、设置(表单/报表/权限/模板/招聘门户/通知)、BI仪表盘、无代
码aPaaS产品、自定义报表工具、预置报表/图表库、人力资源预算产品、蓝领招聘平台APP-熟仁直
聘
2. 熟练使用Growing IO/神策埋点工具,AB 测试工具。

1. 负责:参与制造业、医药和食品行业的项目,上线SAP财务成本核算模块。
2. 部分项目:日立集团财务推广项目、西铁城华南项目、沈阳辉山乳业项目、双立人刀具财务项目、
海正辉瑞药业项目、浙江海正药业项目、天津邦士食品(百吉福奶酪)、江苏正昌农机项目等。
3. 熟悉财务会计和管理会计各项业务流程、法定报表、管理报表,熟悉会计科目表和财务记账准则、
熟悉月结/年结,熟悉金税接口、银行接口和对账方案,了解财务和供应链的业务集成点。
4. 独立负责财务业务的系统功能实现,能很好地进行访谈调研、需求分析、重点方案专项讨论、设计、
验收测试、培训、上线。
产品原型和兴趣爱好作品集