一、大屏开发和 CRUD 本质上是两件事

CRUD 开发强调信息完整、一次性完成；后端提供字段和接口，列表、表单、详情展示确定，AI 按模板填空即可。不过，

大屏则面临信息不完整、频繁变更：后端只给数据源。图表外观、颜色、布局等需。第一版仅是起点，真正开发从此开始。怎么说呢，

两种场景下 AI 的策略截然不同：CRUD 注重“生成正确”。而大屏注重“随时可改”，说起来，

二、先分清：什么不变。什么在变

先识别哪些部分固定，哪些持续变化；拆分后可在稳固骨架上安全迭代。

不变的 — 用模板和规约锁住

• 类型与接口定义: 后端 MD 给定字段与方法，一旦确定就固定。AI 负责映射到 TypeScript 类型及 API 方法；后端字段变更才需触发，其实，
• 页面结构拓扑: 大屏 Grid 布局一旦定型通常不动。只调整内部组件类型或样式。
• 整体主题: 深色/浅色主题及主色调集中管理于一个文件，以防单个图表硬编码颜色导致风格不统一。
• 文件结构: 标准化目录如 index.tsx。store.ts,components/​*,utils.ts;跨项目复用，无需每次重新设计。
• ECharts 基座: 封装统一组件处理 loading、error、empty 与 resize；所有图表基于它渲染，避免单个 option 出错导致白屏。按理说，

说到拓扑示例，数据大屏

┌──────────────────────────────────────────────────────────┐
│ Header: 数据大屏 30s 刷新 · 深色 │
├──────────┬──────────┬──────────┬─────────────────────────┤
│ StatCard │ StatCard │ StatCard │ StatCard │
│ 总数 │ 金额 .2亿 │ 成交 .1亿 │ 涨跌 +% │
├────────────────────┬──────────────────────────────────────┤
│ │ ┌────────────────────────────────┐ │
│ │ │ │ │
│ │ │ 评级分布 │ │
│ │ └────────────────────────────────┘ │
│ 收益率曲线 ▲ ▲ ▼
├─────▲─────▲─────▲─────▲─────▲─────▼─────▼─────▼─────▼
│ AAA % | AA % | A % | BBB %
...

说到对应组件树。

index.tsx ← Grid 布局骨架
├── StatCards ← 四个数字卡片
| └── StatCard ← 单个卡片组件
├── YieldCurve ← 收益率折线图
| └── EChartsBase ← option ← 基座兜底三态
├── RatingDist ← 评级分布饼图
| └── EChartsBase ← option
└── Top10Table ← 成交 TOP10 表格
└── SSearchTable
Task 列表：
Task 数据接口 → types.ts + api/index.ts
Task 数据转换 → utils.ts
Task StatCard
Task YieldCurve
Task RatingDist
Task Top10Table
Task 页面骨架 + Store + Grid
组装所有组件
结构定型后只会有如下迭代：
• 替换曲线为面积图
• 新增国债期货行情
• 调整深色主题亮度
痛点：一次性产出无法满足频繁需求变化，需要快速迭代且保持稳定性。解决思路：- 定义“不变”与“变化”两类拆分任务；- 使用模板锁定主要结构；- 将可变部位交由 AI 自动化生成。

变化的 — AI生成。人手迭代中调试

• 图表类型与数量: 产品需求改变时仅替换实例，不影响骨架；AI 输出对应 option，对象人审核即可。
• 数据处理与 Store 架构: 因为接口增删或字段调整。仅更新 utils 或 Store 配置，而非修改 UI 层。
• ECharts Option 配置: 包含颜色间距动画等细节。由 AI 自动化生产 JSON，可直接复制粘贴至配置文件并微调。

三、四条边界让改动不炸

. 组件独立：删掉它，别的能不能跑

• No cross-import 娱乐ween chart components.
• Add or delete a component = modify only its JSX line and file.

. 数据与展示分离：改数据源。要不要动 UI

• The chart component never calls API directly.

. Option 外提：改配置不要翻 JSX

说到注意，

说到注意，

四、人机协同决策

• 人来做 小调整 —— 更改间距 / 色值 / 图表类型。架构决策 —— 数据流模式选择。风格判断 —— 色彩 & 字体感知。AI 来做 生成功能——option 对象。怎么说呢，数据转换函数——API 映射逻辑。全新/重构——目标定位到具体 TSX 文件。不找 AI 单行 CSS 修改等低成本任务。话说回来，

  五、迭代才是主战场

  **请**务必保持 **{** } 等标记对齐。否则会出现渲染异常，！，

  如果需要进一步细化，请写明 **节点** 等细节！，！，！

  # 场景	# 改什么	# 不改什么
  # 加/换图表
  	*

*

“Echarts 基座”

⚠️ ⚠️ ⚠️

 `?