蓝拓erp系统 产品系统

项目地址：https://dev.elcuk-erp.com/
项目描述：基于 Vue 3 重构的企业级跨境电商 ERP 系统，将原有 jQuery 技术栈全面升级为现代化的
Nuxt 3 架构。系统涵盖财务管理、海外仓储、市场营销、产品采购、物流跟踪等核心业务模块，
服务于企业内部管理与跨境贸易全流程。

1. 架构设计与工程化建设
- 基于 Nuxt 3 构建现代化前后端分离架构，利用其服务端渲染特性提升首屏性能
- 使用 Fetch API 统一封装网络请求层，实现请求拦截、错误处理和状态管理
- 采用 @vueuse/router 实现路由参数与表格查询状态的同步，支持 URL 直访与状态持久化
2. 组件化与权限体系设计
- 基于 Vuex Store 与 Slot 插槽 封装可复用的权限控制组件，实现细粒度权限管理
- 将 EIMessageBox、EINotification、Moment.js 等通用工具封装为统一组件，提升代码复用率
- 利用 Tailwind CSS 构建原子化样式体系，确保 UI 一致性与开发效率
3. 性能优化与大数据处理
- 集成 ag-Grid 实现海量数据表格的虚拟滚动，支持10万+行数据的流畅渲染
- 针对复杂报表场景，设计数据转换层，将后端异构数据标准化为前端可渲染格式
- 通过 Nuxt 3 的服务端渲染优化，解决第三方库兼容性问题，提升页面加载速度

多页面项目状态同步与管理
问题：全局项目ID状态在多标签页场景下存在同步问题，切换项目导致其他页面数据不一致
解决方案：
- 利用 Nuxt 3 路由参数传递项目ID：/module/:projectId/page
- 在 app.vue 中统一从路由获取项目ID并存储至 Vuex Store
- 封装项目切换组件，切换时同步更新路由参数并触发页面刷新，确保状态一致性

四.服务端渲染的第三方库适配
问题：基于亚马逊 JSON Schema 的表单生成库在 Nuxt 3 服务端渲染环境下无法正常渲染
解决方案：
- 定位到该库仅支持客户端渲染的特性限制
- 使用 Nuxt 3 的 clientOnly 组件包装表单生成器
- 在组件生命周期钩子中延迟加载库资源，确保服务端渲染兼容性