项目背景随着大语言模型能力的提升AI在内容生成与互动体验中的应用日益广泛。传统互动叙事类产品如互动小说、角色扮演游戏主要依赖预设脚本与有限分支选择存在剧情固化、重复体验感强、角色缺乏真实感等问题。大语言模型的出现为解决上述问题提供了技术可能。通过让AI扮演不同角色并实时生成剧情可以实现真正动态、个性化的叙事体验。本项目借鉴多角色博弈的逻辑框架结合“穿书”这一深受年轻用户喜爱的网文题材提出构建一个基于大模型的多智能体穿书互动系统。用户将“穿越”进入AI生成的剧情世界与多个拥有独立身份、性格、目标和隐藏身份的AI角色进行实时互动共同推进剧情发展最终走向由用户行为决定的多元结局。团队分工在我们团队中我主要负责以下功能的实现前端交互界面开发设计沉浸式阅读/对话界面开发世界选择与角色创建流程实现多角色对话展示组件设计状态面板功能实施过程1.技术选型在技术选型阶段我不仅考虑了实现功能的最低成本路径也充分评估了团队协作、后续维护、学习成本与扩展性。在询问ai以及通过b站的学习我最终选择vue2。技术版本用途选型理由Vue.js2.6.14前端框架生态成熟、上手平滑、适合快速迭代的中大型项目Vuex3.6.2状态管理多角色状态复杂需集中管理好感度、目标、对话等跨组件数据Vue Router3.5.1路由管理支持多页面视图切换便于实现“世界选择→角色创建→剧情主界面→结局”流程Element UI2.15.14UI组件库提供丰富的表单、卡片、通知组件加快开发效率Axios1.14.0HTTP请求支持拦截器、取消请求、超时重试便于对接15后端APIChart.js4.5.1数据可视化轻量、易定制用于展示角色状态变化趋势技术思考Vue 2 的组合式 API 支持有限因此我在组件中大量使用mixins和Vuex mapState/mapActions来提高复用性。前端页面规划根据我们小组的讨论与任务书的内容我的工作主要是设计以下5个核心页面世界选择页- 展示4种世界观支持选择角色创建页- 4种身份选择20自定义选项主对话界面- 群聊式展示支持8个角色同时显示状态面板页- 包括好感度信任值等数值的变化结局展示页- 动态生成结局支持分享在实现代码方面我主要通过DeepSeek的帮助完成。我将任务书中的任务要点以及我的个人分工核心职责负责所有用户可见界面的实现确保交互流畅、视觉沉浸、状态实时反馈。世界选择与角色创建模块需要开发世界类型选择界面实现古代宫廷、修仙世界、现代校 园、末世生存共四类世界观的选择卡片组件每个世界模板支持点击切换预览。同时实现用 户身份选择功能完成配角、主角、反派、路人共四种身份的选项组件每种身份需配置差 异化的初始文案。此外还需开发角色自定义界面实现初始属性等自定义选项的表单确保 表单校验完整。多角色对话展示模块需要实现群聊式对话组件设计类似聊天室的对话展示区能够区分 不同角色的头像、昵称和发言气泡同时支持最多八个角色的发言展示并具备滚动加载功 能。还需实现实时发言渲染功能通过 WebSocket 接收后端推送的角色发言实时渲染到界 面。用户输入框需要支持回车发送和最长五百字的文本输入。状态面板模块需要开发状态面板展示所有角色的好感度、信任值、隐藏身份暴露度、目 标完成度等状态指标。状态数值发生变化时需触发显示效果。 交互体验优化需要实现页面路由与导航功能使用 Vue Router 完成世界选择页面、剧情主 界面、结局页面三个主要页面的跳转。加载状态与错误提示方面需实现加载动画、网络错 误提示和重试机制共三种状态提示样式。与后端对接需要封装 axios 请求库对接后端提供的十五个以上 API 接口实现统一的错 误处理和请求拦截器。同时需要建立 WebSocket 连接接收 AI 角色自主推进时的实时消息 并实现断线重连机制和心跳保活功能。喂给A I 。由ai创建完整的vue项目通过询问ai我需要创建的项目文件得到以下项目文件结构其中assets/目录# 静态资源包括图片资源全局样式css变量等等components/# 组件文件夹包括状态面板组件角色卡片组件事件通知组件加载气泡组件等views/ # 页面视图这个文件夹中包括内容是我们项目前端主要看到的展示页面包括世界观的选择页面角色创建页面主对话界面以及结局展示界面router/# 路由配置store/ # Vuex状态管理其下modules目录下包括世界角色对话游戏状态模块index.js # Store主文件mutations.js # mutations分离文件api/ # API接口utils/ # 工具函数request.js # Axios封装 │ helpers.js # 辅助函数 │ constants.js # 常量定义 │ │validator.js # 数据验证 │ eventBus.js # 事件总线data/ # 本地数据以json数据形式存储plugins/ # 插件 element-ui.js # Element UI配置其余是一些基础环境配置以及变量声明。实施过程出现的问题及措施通过ai给我的代码框架我决定一步步来运行调试查找问题并不断完善。在这期间我遇到了如下问题这里主要是components/以及store/目录下的问题通过询问ai我才发现这些报错是TypeScript类型检查和ESLint代码规范检查发现的问题我一开始没有明确我的项目采用vue2技术栈Vue 2 的类型定义中没有GlobalComponents这个导出成员这是 Vue 3 的类型。在 Vue 2 项目中不应该使用这个类型。同时经由ai得到的代码并不是完善的如图中也出现了定义参数但没有使用以及使用的参数没被定义等情况// 修复移除未使用的 worldId 参数或者添加下划线前缀表示有意忽略 async loadNPCs({ commit }, worldId) { // 根据世界ID加载NPC // 如果确实不需要 worldId可以这样写 // const npcs this.state.world.currentWorld?.npcs || [] // 或者如果需要使用 worldId可以这样 let npcs [] if (worldId) { // 根据 worldId 获取对应的 NPC npcs this.state.world.currentWorld?.npcs || [] } else { npcs this.state.world.currentWorld?.npcs || [] }由于项目使用的是 Vue 2而 CharacterCard.vue 文件中可能包含了 TypeScript 相关的代码因此在 tsconfig.json 中配置{ compilerOptions: { target: es5, module: esnext, strict: true, jsx: preserve, importHelpers: true, moduleResolution: node, skipLibCheck: true, esModuleInterop: true, allowSyntheticDefaultImports: true, sourceMap: true, baseUrl: ., types: [webpack-env], paths: { /*: [src/*] }, lib: [esnext, dom, dom.iterable, scripthost] }, include: [ src/**/*.ts, src/**/*.tsx, src/**/*.vue, tests/**/*.ts, tests/**/*.tsx ], exclude: [node_modules] }大的框架代码在编译器中无报错后我便在命令行窗口中通过npm run serve命令运行此vue项目但出现了如下图报错ELIFECYCLE错误通常表示 npm 脚本执行过程中出现了问题可能的原因包括依赖未正确安装缺少必要的配置文件Node.js 版本不兼容端口被占用代码中有语法错误 通过调试代码检查验证后发现是因为缺少部分依赖的安装步骤一确认 package.json 包含所需依赖检查package.json中是否有以下依赖{ devDependencies: { vue/cli-plugin-babel: ~5.0.0, babel-plugin-component: ^1.1.1, babel-eslint: ^10.1.0 } }步骤2清理并重新安装依赖# 删除 node_modules 和 package-lock.json rm -rf node_modules package-lock.json # Windows 使用 rd /s /q node_modules del package-lock.json # 重新安装 npm install步骤3验证安装# 检查 babel-plugin-component 是否安装成功 npm list babel-plugin-component经过上述过程之后重新运行 npm run serve后可以看到运行成功基础框架成功运行后接下来我的任务是完成前端各个页面的实现完善views/目录下的內容。