接上篇完成了AI生成剧本的功能的初步开发，这一周对整个剧本工坊界面进行了重构，增加了更多可编辑的字段，同时完善了AI生成能力。

一、开篇反思：项目初期踩的最大误区 —— 乱用 AI，缺少任务拆分

最刚开始做 AI 生成剧本功能的时候，我陷入一个误区：想着直接丢全量需求给 AI 一次性生成完整剧本，省事不用拆分模块。 实际落地才发现问题一大堆：

1. 完整剧本包含骨架、角色、地点、道具、线索等十多个模块，所有上下文堆在一起，AI 上下文过载，频繁出现内容幻觉，生成内容前后矛盾；
2. 一次性生成全量数据，前端页面全部内容堆在一个大表单里，排版杂乱，用户没法单独修改某一块内容；
3. 一旦某一个环节生成出错，整条链路全部作废，没办法局部重新生成。

意识到问题后，我的第一思路：不能上来就写代码、调 AI 接口，先梳理整体业务链路，按依赖拆分任务。先敲定整套生成逻辑、模块先后依赖顺序，再去做前端页面设计、后端字段规范。同时怀疑早期频繁幻觉、token 消耗过快也和上下文太长有关，后续优化方向就锁定在任务拆分。

二、第一阶段：前端页面流程梳理，敲定工作台整体设计

确定要拆分生成任务后，第一步先和需求对齐前端交互逻辑，只做方案讨论，不动代码：

1. 确定两种生成模式

根据上一篇博客中的功能分析，用户需求是既要一键全量生成完整剧本，又能分步按需生成。

• 一键生成：用户填完基础信息（主题、人数、剧本类型、难度），后台内部按依赖顺序分步调用 AI，前端只展示生成进度，完成后分模块待确认；
• 分步生成：模块分依赖层级，前置模块没做完，下游模块置灰不可点击；无依赖的模块（骨架出完后的角色、剧情阶段）支持并行批量生成。

2. 页面布局改造思路

原来所有内容挤在一个页面表单里，修改查找麻烦，规划改成工作台三栏布局：

• 左侧：剧本管理 + 模块导航总栏，统一管控全剧本基础信息；
• 中间：选中模块的编辑区，一次只展示单个模块内容；
• 顶部：全局操作按钮（一键生成、分步生成、预览）；
• 右侧：辅助预览栏。

同时定下细节优化：

1. 原来铺满页面的生成卡片改成紧凑型按钮，一排 3 个，悬浮弹窗查看详情；
2. 单独新增剧本管理按钮，把剧本简介、类型等非骨架内容从原页面抽离进去；
3. 每个模块独立支持：单独 AI 重生、手动编辑、补充自定义提示词引导 AI 生成。

3. 配套阿里云 OSS 图片上传

剧本封面、角色头像需要图片上传，对接阿里云 OSS，系统已存密钥，前期完成图片上传联调，中途遇到一个奇怪 BUG：点击图片放大预览，本地资源管理器自动弹出，反复排查冲突后修复该问题。

梳理完所有交互方案，同步撰写《剧本工坊 AI 生成前端流程设计.md》开发文档，作为后续编码标准。

三、第二阶段：逐个落地模块，接连遇到各类小 BUG，逐个排查修复

按照文档开始落地开发，过程中接连踩各种细节问题，挨个记录解决思路：

1. 基础骨架字段缺失：一开始骨架模块丢失剧本名称、剧本类型、参与人数等原有字段，核对代码变更记录后补全；难度、剧本类型这类固定选项改成下拉枚举，避免用户随意输入格式混乱；封面图片单独换行排版，优化页面观感。
2. AI 生成按钮报错，后端无返回：前端点击生成无响应，查看后端日志能看到 AI 正常返回数据，但前端拿到空数组。排查方向锁定：后端返回 JSON 格式和前端实体结构不匹配，字段无法正常解析映射。
3. 角色阵列 UI 莫名消失：后端日志有生成数据，但前端页面角色模块空白，定位问题：后端结构化数据拆分逻辑缺失，AI 返回的完整 JSON 没有拆分填充到对应前端对象，后续规范统一数据解析逻辑。

这个阶段我总结了一个小规律：只要后端日志能拿到 AI 生成内容，问题基本卡在数据格式不统一、前后端字段对不上，不用反复排查 AI 调用链路。

四、第三阶段：核心难点 —— 管理端 & 用户端 AI 输出结构不一致，统一全场景字段

发现一个关键隐患：用户端剧本工坊生成字段，和管理员端场景配置的输出字段不一样，同样是基础骨架，两边定义的生成内容条目参差不齐，部分字段冗余、部分关键字段缺失，最终会导致 AI 生成内容落不到数据库。

我的处理逻辑分三步落地：

1. 逐个梳理所有 AI 生成场景：基础骨架、角色阵列、地点、道具、线索、真相、结局、锚点、角色能力事件；
2. 统一每个场景固定生成字段，比如基础骨架固定：剧本名称、标签、简介、世界观、背景、全局规则等；角色阵列绑定角色名、角色背景、人物关系；
3. 编写《管理端 - AI 场景字段统一规范.md》文档，校验所有字段 100% 覆盖数据库剧本表结构，没有缺字段、冗余字段。

文档落地后，后端按新规范统一 AI 返回 JSON 格式，前端根据规范做数据解析逻辑，保证 AI 生成内容能精准回填到对应模块 UI。

五、中途突发问题：AI 生成效果变差、token 暴涨、频繁幻觉 + 项目文件乱码

迭代中途出现两个异常问题：

1. 项目文件出现中文乱码

部分 TSX 源码夹杂鍙氦鏄?这类乱码字符，排查原因：编辑器、终端、脚本编码不统一，UTF-8 和 GBK 混存，多次修改文件导致编码污染。 处理动作：

• 全量清理工坊相关前端源码乱码内容；
• 统一项目文件保存格式为 UTF-8；
• 修复之前误把中文提示改成英文的文案，全部还原。

2. 对话 token 消耗飙升，但有效代码产出很少，AI 幻觉变多

复盘原因：

1. 单次对话上下文堆积过多历史需求、全量文档、多模块规范，每次调用 AI 都要加载海量历史内容；
2. 全链路同步优化（文档 + 前后端 + 数据库），大量内容用于核对字段、校验规范，这类内容占用 token 但不生成代码；
3. 乱码反复修复来回调试，额外消耗对话上下文。

优化方案：

1. 长任务拆分小需求，单次沟通只限定一个模块修改，比如本轮只改角色 UI，不动管理端、不新增文档；
2. 阶段性总结项目进度，新开对话承接后续开发，截断冗余历史上下文；
3. 建立《剧本工坊 - AI 生成链路当前进度.md》，记录已完成内容、待办清单，后续开发以文档为基准，减少重复核对成本。

六、第四阶段：收尾联调，梳理当前进度与剩余待办

经过多轮迭代，目前项目主链路已经跑通。

剩余待开发清单：

1. 结局、锚点、角色能力事件剩余模块改成结构化编辑器，对齐现有模块展示效果；
2. 剧本详情页、成品展示页字段和编辑器口径统一；
3. 全模块人工验收，逐个验证生成→解析→入库→前端回显全链路；
4. 同步管理员端 Prompt 模板脚本。

七、个人总结：本次项目学到的开发思路

1. 对接 AI 开发项目，拆分永远优先于编码：别想着一次性全量交付，按业务依赖拆分模块，既能减少 AI 上下文过载幻觉，也方便局部调试 BUG；
2. 前后端字段先行统一：先定文档、定字段规范，再写前后端代码，能规避 80% 的数据回显空值问题；
3. AI 耗 token 异常优先排查上下文：大部分 token 暴涨不是 AI 本身问题，是历史对话堆积、需求不分段导致；
4. 小问题分步记录：图片预览冲突、字段丢失这类零散 BUG，逐个记录原因，后续同类问题可以快速定位。