电商商品轻量化管理后台产品系统Vibe Coding

针对中小电商及线下实体门店商品管理痛点开发。商家普遍面临三个核心问题：商品信息手工录入效率低、库存数据无直观统计、多人操作权限混乱。
本系统提供一套轻量化商品全生命周期管理方案：支持批量Excel导入商品信息，将原本1小时的录入工作压缩至5分钟；通过多角色权限隔离（管理员/运营），杜绝误操作与数据泄露风险；销售数据可视化统计让店主对经营状况一目了然。系统适配服装、食品、家居、数码等多品类线下线上小店，帮助店主用最低的技术成本实现门店数字化升级。

本系统围绕“管商品、控库存、看数据”三大核心场景，设计以下四大功能模块：
1. 权限登录模块：系统区分管理员与运营商两种角色。通过Vue路由守卫实现页面访问拦截，不同角色登录后展示专属操作菜单，有效防止越权操作，保障数据安全。
2. 商品管理模块：作为系统核心，以分页表格展示所有商品。支持新增、编辑、上下架、删除等基础操作，并提供按商品名称、类目、上下架状态的多条件组合筛选功能，方便运营人员在海量商品中快速定位目标。
3. 批量导入模块：针对手工录入痛点，提供Excel模板下载与批量上传功能。前端自动校验文件格式（.xlsx/.xls）与表头字段合规性，导入失败时精准提示错误行，极大提升商品初始化录入效率。
4. 数据看板模块：为管理者提供经营决策依据。顶部展示商品总数、在售数量、库存预警、本月新增四项核心统计卡片；下方搭配ECharts双轴折线图，同时展示近30天销售额与销量走势，直观反映商品销售趋势，辅助制定补货与促销计划。

本人独立负责本项目前端全流程开发，从需求拆解、UI设计到编码实现与部署测试，全部自主完成。
技术选型与实现细节：
• 框架与渲染：采用 Vue3 + Element UI 搭建后台管理界面，利用组件化思想封装复用性高的表格、弹窗与表单，确保代码可维护性。
• 权限控制：基于 Vue-Router 的路由守卫实现权限控制，通过全局前置守卫动态判断用户角色（管理员/运营），动态渲染可访问路由，实现菜单权限隔离。
• 批量处理：封装 Excel上传组件，利用前端库解析文件流，在内存中校验商品数据的字段完整性与格式合法性（如价格、库存必须为数字），校验通过后批量提交后端接口。
• 数据可视化：使用 ECharts 绘制双轴折线图，通过配置双Y轴（左轴销售额、右轴销量）直观对比两组数据趋势，解决了单一维度展示不全面的问题。
项目难点与解决方案：
• 难点一（文件解析）：大文件批量解析时，浏览器易卡顿。我采用分页读取与Web Worker思路，将解析任务与UI线程隔离，确保界面流畅。
• 难点二（动态路由）：不同角色菜单动态渲染时，需处理刷新页面路由丢失问题。我通过本地存储缓存角色信息 + 路由动态添加方法，确保用户刷新页面后仍保持正确权限状态。