AI群演请就位—个人博客（一）

2301_82171651

372人浏览 · 2026-04-09 16:17:16

2301_82171651 · 2026-04-09 16:17:16 发布

项目背景

随着大语言模型能力的提升，AI在内容生成与互动体验中的应用日益广泛。传统互动叙事类产品（如互动小说、角色扮演游戏）主要依赖预设脚本与有限分支选择，存在剧情固化、重复体验感强、角色缺乏真实感等问题。大语言模型的出现为解决上述问题提供了技术可能。通过让AI扮演不同角色并实时生成剧情，可以实现真正动态、个性化的叙事体验。本项目借鉴多角色博弈的逻辑框架，结合“穿书”这一深受年轻用户喜爱的网文题材，提出构建一个基于大模型的多智能体穿书互动系统。用户将“穿越”进入AI生成的剧情世界，与多个拥有独立身份、性格、目标和隐藏身份的AI角色进行实时互动，共同推进剧情发展，最终走向由用户行为决定的多元结局。

团队分工：

在我们团队中我主要负责以下功能的实现：

前端交互界面开发

设计沉浸式阅读/对话界面

开发世界选择与角色创建流程

实现多角色对话展示组件

设计状态面板功能

实施过程

1.技术选型：

在技术选型阶段，我不仅考虑了实现功能的最低成本路径，也充分评估了团队协作、后续维护、学习成本与扩展性。在询问ai以及通过b站的学习，我最终选择vue2。

技术	版本	用途	选型理由
Vue.js	2.6.14	前端框架	生态成熟、上手平滑、适合快速迭代的中大型项目
Vuex	3.6.2	状态管理	多角色状态复杂，需集中管理好感度、目标、对话等跨组件数据
Vue Router	3.5.1	路由管理	支持多页面视图切换，便于实现“世界选择→角色创建→剧情主界面→结局”流程
Element UI	2.15.14	UI组件库	提供丰富的表单、卡片、通知组件，加快开发效率
Axios	1.14.0	HTTP请求	支持拦截器、取消请求、超时重试，便于对接15+后端API
Chart.js	4.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/目录下的內容。