🚀 简历项目经验模板

项目名称：高性能企业级低代码业务管理平台 (Vue3 + Vite + TypeScript)

技术栈： Vue 3, Vite, TypeScript, Pinia, Element Plus, BPMN.js, Vxe-table, WangEditor, ECharts(VChart)

📝 项目描述

本项目是一个面向复杂业务场景的自研管理后台，集成了工作流引擎、动态表单配置、可视化报表生成及多租户架构。项目旨在解决传统后台开发中“重复造轮子”的问题，通过高度配置化的手段，支撑了包括租赁业务、资方管理、风控中心在内的多条业务线，显著提升了 60% 以上的新业务上线效率。

🛠️ 核心职责与技术实现（亮点提取）

1. 基于 BPMN.js 的工作流自研引擎

• 深度集成 bpmn-js，实现了符合 BPMN 2.0 标准的可视化流程设计器。

• 亮点： 自定义流程属性面板（Properties Panel），支持业务节点、审批角色及流转条件的图形化配置；封装了流程预览组件（docx-preview），实现了审批流与业务文档的自动化关联。

2. 零代码/低代码表单与报表生成系统

• 基于 vform3-builds 搭建动态表单配置端，支持复杂表单逻辑的高级配置。

• 利用 vxe-table 的高性能渲染能力，结合 xlsx 和 js-table2excel，构建了配置化报表引擎，支持千万级数据的虚拟滚动展示及异步导出。

3. 复杂多租户与组织权限架构设计

• 设计并实现了一套基于 Tier 属性 的多租户隔离方案，通过前端路由守卫与 Pinia 状态管理，动态注入租户标识（Tenant ID）。

• 针对总部与分支机构的复杂组织树，实现了基于机构层级的动态权限过滤，确保数据在多级分公司间的严格物理隔离与逻辑穿透。

4. 高性能前端工程化实践

• 利用 Vite 插件（vite-plugin-compression、rollup-plugin-visualizer）进行构建优化，通过 CDN 引入 减少包体积，首屏加载速度提升约 40%。

• 集成 splitpanes 和 sortablejs 优化用户交互，实现了可拖拽、响应式的复杂看板布局。

---

💡 深度亮点（面试加分项）

你可以根据面试的具体职位，侧重描述以下三个“硬核”点：

亮点一：从“写页面”到“写引擎”的思维转变

• 描述： “我不只是在开发租赁系统，而是在开发一套能支持任何租赁流程的底层框架。”

• 面试话术： “我将业务逻辑抽象为节点、规则和模板。例如，通过配置 json 即可生成一套包含校验逻辑的报表，避免了为每个业务模块重复编写 .vue 文件。”

亮点二：BPMN 工作流的深度定制

• 描述： 很多候选人只会用现成的 UI 库，但你会操作底层的 XML 数据流。

• 面试话术： “在处理流程审批时，我不仅实现了图形化建模，还解决了 BPMN XML 数据与后端 API 字段的复杂映射问题，保证了流程在不同版本间的平滑迁移。”

亮点三：大数据量下的前端性能优化

• 描述： vxe-table 的引入说明你考虑过性能。

• 面试话术： “在报表中心模块，面对数万行数据的实时过滤和渲染，我选用了 vxe-table 配合虚拟滚动技术，解决了 DOM 过多导致的内存溢出和卡顿问题。”

---

1. 业务流程的“低代码化”与“资产化”

你的项目中包含了 bpmn-js 流程引擎 以及租赁业务流程设计。

• 业务结合点： 将租赁业务中的“进件、风控审批、合同签署、资方放款”等环节抽象为可配置的流程节点。

• 面试表述： “在处理租赁业务流程时，我没有采用硬编码的方式，而是通过集成 bpmn-js 构建了可视化流程中心。这使得业务人员能够根据不同的资方要求 动态调整审批路径，大大缩短了新租赁产品上线所需的开发周期。”

2. 复杂多租户下的“数据安全”与“组织穿透”

你的设计文档中详细描述了多租户和分支公司的隔离逻辑。

• 业务结合点： 利用 crypto-js 对敏感租户数据加密，并根据 tier 属性实现组织架构的数据权限控制。

• 面试表述： “针对多租户及分公司架构，我实现了基于机构层级（Tier）的动态权限方案。通过在 axios 请求拦截器中自动注入 tenantId，确保了分公司数据（如成都分公司、重庆分公司）在物理层面的严格隔离，同时支持总部对下级单位数据的汇总统计。”

3. 配置化报表与“资方管理”的闭环

你的项目涉及资方管理 和高度配置化的前端组件（如 vxe-table, xlsx）。

• 业务结合点： 资方（如银行、信托）通常需要不同的数据报表，你通过配置化生产报表来应对频繁的需求变更。

• 面试表述： “资方管理模块对数据准确性和展示格式要求极高。我利用 vxe-table 的高性能特性 封装了一套配置化报表引擎，支持根据不同资方的字段需求动态生成表单和表格。通过集成 xlsx 库，实现了前端一键导出符合资方格式要求的财务核算对账单。”

💡 面试中的业务亮点总结表

技术能力	对应业务痛点	产生的业务价值
BPMN.js 可视化设计	审批流程多变且复杂	业务流程变更无需代码重构，即配即用。
Tier 属性多租户设计	分公司数据容易混淆	实现了极低成本的 SaaS 化扩展能力。
配置化表单 (VForm3)	租赁申请单字段频繁调整	减少了 80% 的前端表单开发工作量。
VChart 可视化报表	风控数据不直观	为风控中心提供了实时的驾驶舱数据分析。

采用 Vue 3 + <script setup> 和 TypeScript，语法现代、IDE 提示好，便于维护。

• 使用 Element Plus 组件库，UI 统一、交互成熟（表格、抽屉、分页、表单等都用上了）。
• 图表模块化（chartOptions.ts、BaseChart、VChart）——图表配置抽象清晰，复用性高。
• 动态按需加载表单组件：import.meta.glob + async component，页面体积小、首次加载快、组件按需拉取。
• 配置驱动表单/动态字段处理：能根据 exData 等配置动态渲染表单，适配不同资方数据结构。
• 并行请求与容错：使用 Promise.allSettled 处理多接口并发，结果按 key 映射、单点失败不影响整体展示。
• 关注细节（示例）：过滤只读字段、清除 required 规则、正则与 helper 抽离、数值格式化等，体现实战经验。
• 良好的分层：utils/request、constants、组件目录结构清晰，便于扩展与团队协作。

可改进/提升点（短建议）

• 完善类型定义（替换 any），提升类型安全与可维护性。
• 为并发请求加取消（AbortController）或缓存，避免快速切换造成无用请求。
• 对大数据表格/图表场景做性能优化（预处理 tags -> Set、避免在渲染中做 heavy 运算）。
• 增加单元测试（chart config、data processors、表单验证）与文档，便于回归和新成员上手。
• 图表和表单的 error/空态、无障碍（a11y）处理可以补充。