追缴系统难点亮点 - 面试话术总汇
插件系统
面试话术： “为了解决业务模块日益膨胀导致的维护困难，我设计了一套基于 Vite 的前端插件化架构：
- 自动发现：利用 Vite 的
glob导入机制，实现了约定式的插件加载。只需将模块放入指定目录，系统即可自动识别，无需手动注册，极大降低了接入成本。 - 标准化协议：定义了包含
install、config、hooks的标准插件接口。插件不仅可以注册组件和路由，还能通过钩子机制切入到网络请求、用户登录等核心业务流中，实现了真正的非侵入式扩展。 - 动态管理：支持插件的按需加载和优先级排序。比如我们将‘基础 UI’、‘字典管理’等模块都重构为插件，使得主系统极其轻量，新功能的迭代效率提升了 40%。”
缓存
面试话术： “为了兼顾体验和性能，我设计了三层缓存体系：
- 视图层：基于
Keep-Alive和Pinia实现了可控的页面缓存。重点解决了‘关闭标签页后内存不释放’的问题，通过路由守卫和标签页操作联动，动态增删缓存列表，确保只有当前打开的页面才占用内存。 - 数据层：封装了
useCache钩子，给 LocalStorage 加上了过期时间(TTL)和命名空间能力。解决了原生 Storage 数据永久驻留导致脏数据的问题，并实现了多应用部署时的 Key 隔离。 - 静态层：结合 Vite 构建哈希和 Nginx 策略，实现了静态资源的强缓存与按需更新，配合 Gzip/Brotli 双重压缩，让首屏加载体积减少了 60%。”
权限控制
面试话术： “我的权限体系采用了四位一体的设计：
- 底层封装了
hasAuth等纯函数，统一从 Pinia Store 对比权限表； - 指令层提供了
v-auth，利用 Vue 指令生命周期直接操作 DOM，实现按钮级的极简控制； - 组件层封装了
<MaAuth>，利用插槽机制，解决了‘无权限时需要展示兜底文案’的复杂场景； - 逻辑层直接在 JS/TSX 中调用校验函数，实现了动态表格列、路由守卫等数据驱动场景的权限过滤。 这套方案既保证了安全（DOM 移除），又兼顾了开发体验（指令便捷）和交互细节（组件兜底）。”
双 Token 与文件下载
面试话术： “在请求封装这块，我主要解决了两个痛点。 一是并发刷新 Token，利用 Promise 和队列机制设计了一个并发锁，保证过期时只有一个请求去刷新 Token，其他并发请求挂起等待，刷新完自动重试，实现了完全无感知的续签体验。 二是文件下载的鲁棒性处理，特别处理了‘下载接口返回 JSON 错误’的边界情况，利用 FileReader 解析 Blob 中的错误信息，避免了用户下载到损坏文件的问题。”
性能优化
面试话术： “在性能优化上，我从构建阶段和运行阶段两端同时发力。 一方面通过路由懒加载，让页面做到‘按需加载’，只在访问某个路由时才加载对应代码；另一方面结合 vite-plugin-chunk-split 做构建分包，把第三方库和公共依赖抽离成独立 Chunk，最大化浏览器缓存命中率。 配合 Gzip/Brotli 预压缩和静态资源强缓存策略，首屏只需下载最小的业务代码，其余依赖由浏览器缓存复用，整体首屏和路由切换性能都有明显提升。”
图标系统
面试话术： “我封装了一个智能分发的图标组件，上层业务只需传一个字符串名字，底层自动识别是按需编译的 CSS 图标、在线 Web 图标还是本地 SVG，统一了开发体验。 针对内网部署场景，我设计了一个构建脚本。它能从几十万个 Iconify 图标中，按需提取项目用到的图标集，生成本地 JSON 文件，这样既享受了 Iconify 的生态，又不用依赖外网 CDN。 在运行时，我采用了懒加载策略。只有当用户需要展示某个图标集时（比如打开图标选择器），系统才会去请求本地的 JSON 资源并注册到 Iconify 运行时。这让首屏体积完全不受图标数量的影响，哪怕有 100MB 的图标库，首屏依然秒开。”
组件封装
面试话术： “在高性能组件封装方面，我主导设计了 MaProTable 和 MaForm 两个核心业务组件：
- 配置驱动（Schema-Driven）：我定义了一套 JSON Schema 协议，将页面开发从‘写模板’转变为‘写配置’。通过 TSX 实现了动态渲染，使得 90% 的 CRUD 页面开发效率提升了一倍。
- 逻辑与视图分离：利用 Vue Composition API，我将分页、搜索、表单校验等逻辑抽离为
useTable和useFormHooks。组件只负责渲染，逻辑层可独立复用，极大降低了代码耦合度。”
这是为你总结的**“面试过关”版话术**。把这三段话背熟，面试时自信地讲出来，逻辑清晰，细节到位。
视频
1. 混合架构视频流低延迟播放（核心技术点）
面试官问：你是怎么解决视频延迟问题的？
话术： “之前的系统是用 HLS 协议，延迟大概在 10 秒左右，根本没法做人工实时稽核。为了把延迟压到 1 秒以内，我采用了 HTTP-FLV + WebSocket 的方案。
具体实现上，我利用了 B 站开源的 flv.js 库。后端把 RTSP 流转换成 FLV 格式，通过 WebSocket 像水流一样实时推给前端。前端利用浏览器的 MSE（Media Source Extensions）技术，把数据流直接喂给
<video>标签播放。在组件封装上，我重点处理了连接的稳定性。比如实现了断线重连机制，以及心跳检测。并且在 Vue 组件销毁时（
onUnmounted），我会手动调用destroy()彻底销毁实例，防止内存泄漏。改造后，画面延迟稳定控制在 1 秒以内，完全满足了实时抓拍的需求。”
💡 关键词： flv.js、WebSocket、MSE、断线重连、内存管理。
2. 按需拉流与带宽成本优化（亮点：省钱+性能）
面试官问：你是怎么优化 4G 流量和页面性能的？
话术： “这个优化主要解决了两个问题：大量 Socket 消息导致的页面卡顿，以及 4G 设备昂贵的流量成本。
第一，在数据传输上，我把之前的‘全量推送’改成了‘差量更新’。后端只推状态发生变化的车位数据（比如某车从空变占用），前端收到后只更新局部数据，不重新渲染整个列表，大幅降低了 CPU 消耗。
第二，在视频拉流上，我设计了严格的按需加载机制。因为页面很长，用户一屏只能看几个视频，如果全部播放流量费太高。
我利用 Vue 3 的生命周期结合
IntersectionObserverAPI，去监听视频是否进入可视区域。只有当用户滚到那个位置，或者点击查看时，我才建立连接拉流；一旦滚出屏幕，立即断开连接。这就保证了同一个时间点，只有用户看得到的摄像头在消耗流量，极大节省了 4G 成本。”
💡 关键词： 差量更新、局部渲染、IntersectionObserver、可视区域、生命周期管理。
3. 核心计费逻辑（亮点：代码架构/设计模式）
面试官问：计费逻辑那么复杂，你是怎么设计的？
话术： “停车计费规则非常繁琐，有分时段计费、节假日免费、叠加优惠等等。之前的代码全是
if-else堆砌，每次加新活动都要动原代码，很容易出 Bug。为了解决这个问题，我用策略模式对核心算法进行了重构。
我定义了一个标准的计费接口，然后把‘工作日’、‘节假日’、‘会员’等不同场景，封装成一个个独立的策略类。
在运行时，系统根据用户的入场时间特征，动态选择对应的策略类来计算价格。这样设计之后，代码逻辑非常清晰，实现了计费规则的解耦。以后如果要加一个新的‘夜间免费’规则，我只需要新增一个策略类，完全不用修改原来的核心逻辑，显著提升了代码的可维护性和扩展性。”
💡 关键词： 策略模式、解耦、可扩展性、开闭原则、独立策略类。
面试最后的“定海神针”
如果面试官觉得你讲得不错，最后可能会问一句：“你觉得在这个项目里，你最大的挑战是什么？”
回答： “最大的挑战在于在有限的网络资源下保证用户体验。既要让稽核人员看到低延迟的实时画面（技术难点），又要帮客户控制 4G 流量成本（业务难点）。通过 flv.js 和 IntersectionObserver 的结合，我算是找到了一个技术优化的平衡点。”
祝你面试顺利！这三段话逻辑很顺，只要不慌，一定能过。