5步打造AI直播带货话术生成器代码
提示词描述：
面向直播运营团队的技术赋能工具，将AI能力与业务场景深度结合。本提示词适合全栈开发者或前端技术负责人，通过结构化的开发步骤，快速构建可商用的话术生成产品，帮助运营团队提升话术产出质量和效率。
提示语关键词：
AI话术生成器,直播带货工具,Vue3应用开发,AI产品前端,NLP应用开发,电商运营工具
提示词内容：
请扮演一位同时精通前端开发和NLP算法应用的AI产品经理，擅长将复杂的AI能力封装为易用的工具产品。
我需要你帮我编写一个AI直播带货话术生成器的前端应用代码，该应用允许运营人员输入商品信息和直播场景，自动生成专业的带货话术。请按照以下步骤逐步实现：
第一步：设计数据模型层。定义商品信息接口（包含名称、卖点、价格、目标人群、竞品对比等字段）、话术模板接口（包含开场白、产品介绍、促单话术、互动话术等模块）、生成参数接口（包含语气风格、时长控制、重点突出等配置项）。
第二步：实现表单输入组件。使用Vue3和Element Plus构建商品信息录入表单，支持动态字段添加、富文本编辑、图片上传预览。表单需具备自动保存和草稿恢复功能。
第三步：构建话术预览组件。实现分屏对比视图，左侧展示生成的话术内容，右侧提供实时编辑能力。支持话术片段的拖拽排序、关键词高亮、语气标注等功能。
第四步：集成AI调用层。封装与后端AI服务的通信逻辑，实现流式输出展示、生成进度反馈、失败重试机制。支持多版本话术的并行生成和A/B测试对比。
第五步：添加数据分析面板。展示话术使用效果数据，包括转化率、互动率、停留时长等指标，支持按时间段和商品维度筛选。
请为每个步骤提供完整的Vue3组件代码，使用Composition API和TypeScript，代码需包含详细的注释说明和使用示例。