← 返回博客首页　｜　Y2Ksoft 官网

芒果 ERP 代码审计实录：客户说主页很好看，我只改底层，不改视觉

一、先定边界：视觉不动，代码全部可查

茂井镇芒果 ERP 的原始页面已经包含销售渠道、基地、农户、品种、物候、农事、水肥、病虫害、采摘、库存、订单、物流、客户、销售、收支、结算、成本、利润和设置。页面设计也不是标准后台，而是暖金芒果色、Bento 卡片和数据看板混排。

如果直接套用通用模板，功能可能更快统一，但客户喜欢的东西会消失。因此这次把“页面视觉”和“底层实现”拆开处理：布局、颜色、字号、圆角、卡片和动效全部保留；数据、认证、权限、校验、持久化和构建方式重新做。

二、审计发现的真正问题

三、保留原视觉，具体是怎么做的

我们没有改动原来的主页 CSS 结构，而是把数据和事件层接上服务端。页面仍然使用原来的渲染函数、卡片样式和图表布局；登录框只补了标准 form 与无障碍标签，按钮和输入框位置不变。

主页 CSS 与修复前逐行对比，最终只有两处非视觉调整：登录背景 URL 从 Unsplash 换成本地下载的同一张图片；新增一个视觉隐藏的 .sr-only 工具类。260px 侧栏、暖金配色、Bento 看板、渐变、光晕和动效都没有重做。

四、20 个页面如何串成一条芒果产业链

数据模型不是把页面拼在一起，而是让记录之间能互相解释：基地影响产量，采摘形成库存，订单形成销售，销售进入收支，结算再扣除农资成本。最终利润报表不应该再依赖手工抄数。

五、权限不是隐藏按钮，而是服务端拒绝

这次把管理员、操作员和只读访客分开。前端会隐藏越权操作，但真正决定能不能保存的是服务端：访客不能写，操作员可以新增和编辑但不能删除，也不能修改系统参数；管理员拥有完整权限。保存失败时页面会提示并重新加载服务端数据，而不是悄悄丢掉记录。

数据写入采用临时文件加原子替换，刷新页面后数据还在；导出仍然保留 JSON 备份；修改密码后旧会话立即失效。

六、代码、手册和验收一起交付

最终交付不是只有一个 HTML。目录里包含服务端、种子数据、模块配置、前端、使用手册 HTML/PDF、标注截图、API 测试、权限/XSS E2E 和完整 CRUD 测试。所有 JavaScript 文件通过语法检查，20 个页面完成无障碍结构检查，外部资源请求为 0。

这次项目最重要的经验是：视觉保真不是“看一眼差不多”，而是可以被逐行比较的约束；代码安全也不是能不能运行，而是换一个用户、断一次网、刷新一次页面之后还成不成立。

七、4K 系统截图

01 · 登录页：保留原芒果暖金视觉

清空输入框后截图，登录卡片、背景图与原有动效保持不变。

02 · 数据看板：Bento 经营驾驶舱

KPI、渠道卡片、趋势图、品种占比、临期库存与未完成订单仍在原布局中。

03 · 销售渠道：6 大渠道经营分析

渠道名称、营收、订单、销量与增长率进入统一数据表。

04 · 基地管理：基地、品种与技术体系

基地面积、负责人、所属村、亩产与认证信息可维护。

05 · 农事记录：种植过程留痕

日期、地块、任务、工时和产量形成可追溯记录。

06 · 采摘入库：批次与等级

批次、糖度、等级、仓库与负责人串起采收环节。

07 · 库存管理：库存与临期提醒

在库数量、价值、库位和临期预警在看板联动。

08 · 利润报表：收入、支出与成本

利润和成本结构从业务数据计算，不再使用单独写死的数字。

09 · 系统设置：合作社与产业信息

保留原设置页面的信息组织方式，并接入权限与数据恢复。

八、这次留下的清单

• 客户明确指定的视觉风格，不能擅自重做。
• 业务数据必须离开浏览器本地存储。
• 角色权限必须由服务端兜底。
• 用户输入必须输出转义。
• 金额展示必须固定两位小数。
• 图表和登录背景不能依赖外网。
• 手册和测试是系统的一部分。
• 每次改动都要对比原视觉和真实浏览器。

芒果 ERP 的页面没有换脸，但底层已经变成一套可以继续维护、继续扩展、可以交给客户的服务端系统。