数据大屏实战总结。核心论点：大屏开发的重心在迭代，不在初始生成所有。关键不是让 AI 生成更多代码，是让 AI 生成的代码经得起改。
一、大屏开发和 CRUD 本质上是两件事
CRUD 开发的特点是信息完整、一次性。后端给了字段和接口，列表、表单、详情怎么展示是确定的，AI 按模板填空就能用。
大屏的特点是信息不完整、疯狂改。后端只给数据源，图表长什么样、颜色对不对、布局怎么调------这些是视觉和业务反复看效果、来回改出来的。第一版生成出来，真正的开发才刚刚开始。
两种场景的 AI 策略完全不同：CRUD 重心在"怎么生成对"，大屏重心在"怎么随便改不炸"。
二、先分清：什么不变，什么在变
大屏里有一部分东西是定了就基本不改的。还有一部分是整个迭代周期都在来回变的。把这两类拆开，才能在稳定的骨架上安全地改。
不变的 --- 用模板和规约锁住
类型和接口定义：后端 MD 给的字段和接口路径，定了就是定了。这块 AI 填空就行------字段映射到 TypeScript 类型，接口映射到 API 方法。一次生成，后续后端有字段变更才动。
页面结构拓扑：大屏的 Grid 布局------上面一排数字卡片，左边一个大折线图，右边上下两个图表------这个布局定了之后通常不变。改的是里面某个图表换成柱状图或者饼图，不是换布局骨架。
整体主题：深色还是浅色，主色调是什么，颜色变量集中放在一个文件里。定了就不会一个图表一个色号。
文件结构 ：每个大屏的文件怎么组织------index.tsx 管页面和 Grid，store.ts（按需） 管数据，components/ 下每个图表一个文件，utils.ts 管数据转换。文件组织方式跨大屏复用，不用每次重新设计。
ECharts 基座：封装一个组件处理 loading、error、空数据、resize 自适应。所有图表组件基于它渲染，不用每张图单独处理这些状态。这是最重要的安全网------AI 生成 option 出错，基座兜底显示"图表渲染出错"而不是白屏。
拓扑示例：数据大屏
一个实际的大屏，用文字描述就是：
顶部一行四个数字卡片（总数、金额、成交、涨跌幅）。左半区一个收益率折线图，右半区上面是评级分布饼图，下面是成交 TOP10 表格。1920×1080，深色主题，30 秒刷新。
页面布局：
erlang
┌──────────────────────────────────────────────────────────┐
│ Header: 数据大屏 30s 刷新 · 深色 │
├──────────┬──────────┬──────────┬─────────────────────────┤
│ StatCard │ StatCard │ StatCard │ StatCard │
│ 总数 128 │ 金额 5.2亿 │ 成交 3.1亿 │ 涨跌 +2.3% │
├────────────────────┬──────────────────────────────────────┤
│ │ ┌────────────────────────────────┐ │
│ │ │ 评级分布 (饼图) │ │
│ 收益率曲线 (折线图) │ │ AAA 45% AA 30% A 20% BBB 5% │ │
│ │ └────────────────────────────────┘ │
│ 1Y ── 3Y ── 5Y ── │ ┌────────────────────────────────┐ │
│ │ │ TOP10 成交 (表格) │ │
│ │ │ 名称 │ 金额 │ 涨跌 │ │
│ │ └────────────────────────────────┘ │
└────────────────────┴──────────────────────────────────────┘对应的组件树：
vbnet
index.tsx ← Grid 布局骨架
├── StatCards ← 四个数字卡片（复用 ×4）
│ └── StatCard ← 单个卡片组件
├── YieldCurve ← 收益率折线图
│ └── EChartsBase ← option ← 基座兜底三态
├── RatingDist ← 评级分布饼图
│ └── EChartsBase ← option
└── Top10Table ← 成交 TOP10 表格
└── SSearchTable拆成 Task 就是：
css
Task 1 [api] 数据接口 → types.ts + api/index.ts
Task 2 [data-transform] 数据转换 → utils.ts
Task 3 [component-widget] StatCard（1 组件 ×4 实例）
Task 4 [component-chart] YieldCurve
Task 5 [component-chart] RatingDist
Task 6 [component] Top10Table
Task 7 [page-dashboard] 页面骨架 + Store + Grid 组装所有组件这个拓扑结构定了之后基本不变。迭代改的是"收益率曲线换成面积图"（Task 6 内部改 option）、"加一个国债期货行情"（新建 Task 9 图表组件）、"深色主题太暗了"（主题文件统一换色值）。结构不变，内容在变。
变化的 --- AI 生成，人在迭代中调
图表类型和数量：产品说"加个饼图""柱状图换成折线"，改的是图表实例，不是架构。AI 生成 option 对象，人决定要不要、长什么样。
数据处理和 Store 结构：数据怎么从 API 响应转换成图表格式，Store（按需） 怎么组织筛选条件和数据切片。大屏的接口数量和嵌套深度不同，数据流模式（简单/中等/复杂）也不同。这不是一次定死的，是随着接口到位逐步明确的。
Option 配置：ECharts 的 option 对象------颜色、间距、动画、tooltip 格式。这部分 AI 直接生成 JSON，人看效果调。
三、四条边界让改动不炸
大屏改得最多的就是换图表和调参数。如果改一个图表会牵连其他组件，迭代就变成了排雷。四条规则守住边界。
1. 组件独立：删掉它，别的能不能跑
图表组件之间不互相 import。每个图表只被页面组件引用，组件的删除就是删 JSX 里一行 + 删一个文件。加新图表也是在 Grid 里加一行，不碰已有图表。
2. 数据与展示分离：改数据源，要不要动 UI
图表组件内部不调接口 。数据从外面进来------要么 props 传，要么从 Store（按需） 订阅。数据转换逻辑放在独立的 utils.ts 里。后端接口字段变了，只改转换函数，图表组件不用动。
3. Option 外提：改配置不要翻 JSX
ECharts option 抽成独立变量或函数，不内联在 JSX 里。改图表配置------折线换柱状，调颜色------只改 option 定义处，不碰渲染部分。
4. 颜色集中管理：换主题只用改一处
所有色值引用一个 theme 文件，不在组件里硬编码。换主题只改一处，全局生效。
四、什么活交给人，什么活交给 AI
不是按"能不能"分配，是按"反复次数"和"出错成本"分配。
人来做
小调整------改个颜色、换个图表类型、调个间距。这种活人手动改更快，让 AI 读代码 + 理解上下文 + 定位修改点的成本超过手写。
架构决策------数据流用简单模式还是复杂模式、Store 要不要分片。这个需要人理解整体大屏的接口数量和嵌套关系，AI 只能查表建议。
风格判断------"这个颜色太暗了""这个字太小了"。视觉感受 AI 做不了。
AI 来做
生成 option 对象------ECharts 的 option 是 JSON，AI 生成 JSON 的能力没有问题。给一段文字描述（"折线图，三条线分别是 1Y/3Y/5Y 收益率，x 轴日期，y 轴百分比"），AI 直接出 option。
数据转换函数------API 返回的字段名和图表需要的格式之间的映射。AI 读 types.ts 和接口文档，生成转换逻辑。
单个图表大改 ------"收益率曲线换成面积图，加一个均线"。这是 D2 修改路径------定位到 YieldCurve.tsx 的 option 变量，替换配置。
新图表加入已有大屏------D1 修改路径。AI 生成新图表组件，人在 Grid 里加一行引用。不改已有图表。
什么时候不找 AI
改一个间距、调一个色值------打开文件，手动改，保存。
五、迭代才是主战场
大屏真正的开发时间不在第一次生成，在后面的反复调整。
| 场景 | 改什么 | 不改什么 |
|---|---|---|
| 加/换图表 | index.tsx Grid 区域新增或替换引用 |
已有图表组件、Store、API |
| 改图表配置 | components/{Chart}.tsx 的 option 变量 |
Store、API、其他图表 |
| 改主题/颜色 | 主题文件统一替换色值 | 各图表的 option 结构 |
| 加筛选条件 | store.ts 加字段，页面加 FilterBar |
图表组件的数据接收方式 |
| 加/减指标卡片 | index.tsx Grid 区域 |
Store、已有图表 |
| 改数据源/字段 | types.ts → API → 组件逐层跟踪 |
图表 option 结构 |
每次改动不改变既定数据流模式，不牵连其他图表。改一个图表只动一个文件，改布局只动 Grid，改数据只动转换函数。
六、ECharts 基座：不靠 AI 自觉的最后防线
AI 生成的图表代码有三个常见的遗漏：loading 态、error 态、空数据占位。如果你靠 AI 自觉去"记得加"，十张图表总有一张漏。
封装一个 EChartsBase 组件，内置这三种状态。所有图表组件基于它渲染：
tsx
<EChartsBase
option={option}
loading={loading}
error={error}
empty={!data.length}
height={300}
/>AI 不需要记得处理异常------这是基座的活。AI 只需要正确传 props，基座兜底一切异常状态。
七、总结
大屏 AI 辅助开发的核心不是"让 AI 一次生成对"，是设计一套让 AI 改不坏的边界。
- 不变的锁进模板和规约，变化的放开让 AI 生成、人在迭代中调整
- 组件独立、数据分离、option 外提、颜色集中------四条边界让每次改动不牵连其他组件
- 小调整手动，单图大改造 AI，架构决策人拍板
- EChartsBase 基座兜底 loading/error/empty，不靠 AI 自觉
最终衡量标准：删掉一个图表，页面还能不能跑？改一个数据源，UI 要不要动？<｜