AI开发ERP的10条新教训（2.0版）

> 2026年7月4日 | 作者：石像鬼 | 分类：AI编程 · 经验总结

---

一个月前写了10条血泪教训。现在做了41套系统，有了新坑。上一版讲的是"怎么让系统跑起来"，这一版讲的是"怎么让系统不丢人"。

坑1：赛博朋克暗色主题 = 自嗨

现象：花几个小时做了一套深色底+霓虹渐变+发光边框的"赛博朋克"主题。打开浏览器一看，白框透出来、文字对比度不够、图表看不清。 根因：Element Plus / Ant Design的组件默认是为浅色主题设计的。暗色主题不是改几个CSS变量就行——每个组件的每个状态都要改。Card、Dialog、Select、DatePicker、Table、Pagination...几十个组件，每个都有默认白色背景。 教训：不要自作聪明做暗色主题。 浅色SaaS风格是最安全的选择。如果真的要做暗色，从Element Plus官方暗色主题开始改，不要从零手写。

坑2：淘宝买的PSD设计稿 = 宝藏

现象：花十几块买了118张后台界面PSD，打开傻眼了——人家的设计水平完全在另一个层次。 教训：买设计稿比买教程值钱多了。 教程教你写代码，设计稿教你什么叫好看。十几块钱买118张专业设计师的作品，每一张都是配色/间距/排版/字体的活教材。比看100篇UI设计文章有用。

坑3：ECharts对象在computed里不能直接用

现象：登录后白屏，控制台报Cannot read property 'graphic' of null。 根因：

// 错误 — computed在组件创建时就执行，echarts此时是null
const hourOption = computed(() => ({
  series: [{ itemStyle: { color: new echarts.graphic.LinearGradient(...) } }]
}))

// 正确 — 纯色值，不依赖运行时对象
const hourOption = computed(() => ({
  series: [{ itemStyle: { color: '#f57c00' } }]
}))

教训：computed里不要用new操作符。Vue组件首次渲染时computed就执行了，此时onMounted还没跑，任何依赖运行时导入的对象都是null。gradient动画能在option里做就在option里做，做不了就纯色。

坑4：登录页=第一印象

现象：之前的系统登录页都是居中白色卡片+纯色背景。能用，但不好看。

46套系统之后我总结出登录页的标准公式：

- 背景：跟系统主色调一致的渐变（草绿系统=草绿渐变，暖金系统=暖金渐变）

- 卡片：400px宽，圆角16-20px，微阴影

- 顶部：emoji图标 + 系统名 + 一句话描述

- 中部：选门店→选账号→输密码，三步流程

- 底部：默认账号提示（方便演示）

教训：登录页是做给人看的，不是做给机器看的。客户打开第一眼就决定了对这个系统的印象。

坑5：种子数据 = 演示灵魂

现象：Dashboard打开空的，图表全是0，热销排行榜空白。 根因：种子数据不够"真实"。上一版已经说了日期要分散，这一版补充：

# 不仅要分散日期，还要：
# 1. 时间集中在营业时段（9:00-22:00）
# 2. 金额不是整数（63元不是60元）
# 3. 支付方式有变化（微信70%/支付宝20%/现金10%）
# 4. 订单类型有分布（堂食60%/外带30%/外卖10%）
# 5. 每单1-4件商品，热销品出现频率更高
# 6. 会员等级有梯度（普通60%/银卡25%/金卡15%）

教训：演示给客户看的时候，数据必须"有故事"——有高峰低谷、有热销冷门、有正常有异常。客户看到数据才觉得这是"活系统"，不是"空壳子"。

坑6：白色Element Plus组件透底

现象：页面底色改成草绿了，但有些组件还是白色背景，像打补丁。 根因：Element Plus的组件有自己独立的背景色，不是都继承全局CSS变量。 教训：改背景色的时候要全局搜索所有background: #fff和background: white，一个一个覆盖。特别是Dialog、SelectDropdown、DatePickerPanel、Popover这些浮层组件，经常漏。

坑7：Vite Proxy报错不直观

现象：前端正常启动但数据不出来，控制台报ERR_CONNECTION_REFUSED。 根因：后端没启动。Vite proxy不会提示你"后端没跑"，只会在API请求时返回连接失败。 教训：先验证后端再开前端。curl localhost:3161/api/dashboard/stats确认有数据返回，再npm run dev。不要反过来。

坑8：子Agent写的页面必须三步验证

现象：让子Agent写了一个页面，看起来没问题，构建也不报错，但路由一跳过去就白屏。 根因：子Agent不知道项目的具体API接口和字段名。它写的getProducts()可能实际叫getPosProducts()，它写的item.name可能实际字段是item.product_name。 教训：子Agent写的每个页面必须经过三步验证：

1. 构建检查：npx vite build不报错

2. 路由验证：从菜单点进去，不白屏

3. 数据验证：有数据渲染出来，不是空列表

三步全过才算通过。缺一步就是炸弹。

坑9：草绿+橘黄 = 茶饮ERP的最佳配色

现象：Ruipos-Tea换了三次配色才找到方向。 过程：

1. 赛博朋克暗色 — 完全翻车，Element Plus组件不适合暗色

2. 蓝白浅色SaaS — 能用，但是"泯然众人"，看起来像所有后台

3. 草绿底(#dcedc8)+橘黄功能色(#e65100)+深绿侧边栏(#1b5e20) — 对了

为什么对了：草绿让人联想到茶，橘黄是茶汤的颜色。这两种颜色放一起，不用看字就知道这是茶饮系统。色系本身就是品牌。 教训：配色要跟行业相关。 药店的绿色是GSP合规绿，茶饮的绿色是茶叶草绿，养老的暖金色是夕阳。每套系统的配色不是随便选的——它决定了用户的第一印象。

坑10：41套系统的终极教训

做得快不重要，做得像才重要。

28套的时候我追求数量，有人看了说"你做了好多系统"。但客户不会因为"你做了28套"就付钱。客户付钱是因为"这套系统看起来值这个钱"。

"像"比"多"重要100倍。一套做得像商业产品的系统，比10套功能后台值钱。

现在我做系统的标准变了：不追求模块数量，追求第一眼看上去"这不像自己写的"。

当你自己都觉得"这玩意儿像哪个公司出的SaaS"——那一刻才真正过了及格线。

---

标签：#AI编程 #踩坑实录 #ERP开发 #经验总结 #Vue3 #ElementPlus