AI辅助大屏开发：避坑指南与高效技巧

一、大屏开发与CRUD本质不同，策略截然分开

要理解大屏开发，必须认清一个核心差异：它和日常的CRUD页面完全是两套逻辑。

CRUD开发追求信息完整、一次性成型。后端提供明确的字段和接口，列表、表单、详情页的展示方式固定。AI按模板填空即可产出可用代码。

大屏则相反：数据源往往不完整，需求频繁变化。后端只给数据，图表样式、配色、布局全凭视觉和业务反复调试。第一版出来后，真正的开发工作才刚开始。

两种场景下AI的策略天差地别：CRUD的重点是“如何生成正确结果”，大屏的重点是“如何随意改动而不崩溃”。

二、先区分：哪些结构固化，哪些内容可调

大屏中有些部分一旦确定就很少变更，另一些则在整个迭代周期内不断调整。必须将这两类分离，才能在稳定的骨架上放心改动。

固化部分 — 用模板和规范锁定

类型与接口定义：后端提供的字段和接口路径一旦确认就固定。让AI直接填空——将字段映射为TypeScript类型，接口映射为API方法。一次生成，后续只有后端字段变更才需调整。

页面结构拓扑：大屏的Grid布局——顶部一排数字卡片，左侧大折线图，右侧上下两个图表——这个布局骨架基本不变。变化的是将某个图表切换为柱状图或饼图，而非重构整个布局。

整体主题：深色或浅色、主色调，所有颜色变量集中在一个文件中。确定后，不会每个图表一个色号。

文件结构：每个大屏的文件组织方式——index.tsx管理页面和Grid，store.ts（按需）管理数据，components/下每个图表独立文件，utils.ts处理数据转换。这种结构可跨大屏复用，无需每次重设计。

ECharts基座：封装一个组件统一处理loading、error、空数据、resize自适应。所有图表组件基于它渲染，避免每张图单独处理这些状态。这是最重要的安全网——AI生成的option出错时，基座能显示“图表渲染出错”，而非直接白屏。

拓扑示例：数据大屏

以一个实际大屏为例，文字描述如下：

页面布局：

┌──────────────────────────────────────────────────────────┐
│Header: 数据大屏 30s 刷新 · 深色 │
├──────────┬──────────┬──────────┬─────────────────────────┤
│StatCard │StatCard │StatCard │StatCard │
│总数 128│金额 5.2亿 │成交 3.1亿 │ 涨跌 +2.3% │
├────────────────────┬──────────────────────────────────────┤
│                    │                                      │
│ 收益率曲线 (折线图) │ ┌────────────────────────────────┐      │
│                    │ │   评级分布 (饼图)              │      │
│ 1Y ── 3Y ── 5Y ── │ │   AAA 45%  AA 30%  A 20%  BBB 5% │
│                    │ └────────────────────────────────┘      │
│                    │ ┌────────────────────────────────┐      │
│                    │ │   TOP10 成交 (表格)            │      │
│                    │ │   名称│ 金额 │ 涨跌             │      │
│                    │ └────────────────────────────────┘      │
└────────────────────┴──────────────────────────────────────┘

对应的组件树：

index.tsx ← Grid 布局骨架
├── StatCards ← 四个数字卡片（复用 ×4）
│   └── StatCard ← 单个卡片组件
├── YieldCurve ← 收益率折线图
│   └── EChartsBase ← option ← 基座兜底三态
├── RatingDist ← 评级分布饼图
│   └── EChartsBase ← option
└── Top10Table ← 成交 TOP10 表格
    └── SSearchTable

拆解为独立任务：

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

改一个间距、调一个色值——打开文件，手动改，保存。简单直接。

五、迭代才是真正的主战场

大屏的实际开发时间不在首次生成，而在之后无数次反复调整。

每一次改动都不能破坏既定的数据流模式，也不能牵连其他图表。改一个图表只动一个文件，改布局只动Grid，改数据只动转换函数。这才是理想状态。

六、ECharts基座：不依赖AI自觉的兜底防线

AI生成图表代码时，三个常见遗漏点：loading态、error态、空数据占位。指望AI主动“记得加”？十张图表总有一张遗漏。

最简解法是封装一个EChartsBase组件，内置三种状态。所有图表基于它渲染：

    option={option}
    loading={loading}
    error={error}
    empty={!data.length}
    height={300}
/>

AI无需记忆异常处理——这是基座的职责。AI只需正确传递props，基座会自动兜底所有异常状态。这才是可靠做法，而非依赖AI的“自觉”。

七、总结

大屏AI辅助开发的核心，不是“让AI一次性生成完美”，而是设计一套让AI“改不坏”的边界。

• 不变的锁进模板和规约，变化的放开让AI生成、人在迭代中调整
• 组件独立、数据分离、option外提、颜色集中——四条边界保障每次改动不牵连其他组件
• 小调整手动，单图大改造AI，架构决策人拍板
• EChartsBase基座兜底loading/error/empty，不依赖AI自觉

最终衡量标准很简单：删掉一个图表，页面还能否运行？改一个数据源，UI是否需要调整？如果答案都是肯定的，那么架构就是正确的。

来源：互联网