上周我主要完成了世界观选择与角色创建两个前置界面的开发，为用户提供了角色自定义入口。本周的工作重点转向主对话界面的完整实现，核心目标是构建一个AI自动判断回应角色并动态推进剧情的沉浸式多角色互动系统。

核心成果

序号	成果	说明
1	三栏布局重构	左侧角色信息 / 中间对话区 / 右侧剧情面板
2	AI驱动的多角色响应	用户输入后AI自动选择回应角色进行回应
3	剧情状态系统	剧情进度、任务、事件的实时追踪
4	多结局系统	根据用户不同反应最终达成不同结局
5	本地降级AI	无后端时的模拟响应机制
6	存档/读档功能	支持游戏进度保存与加载

页面布局设计

左侧边栏主要包括角色信息卡，包含属性等信息。以及盟友列表，敌对列表，这里调用characterCard组件，点击可查看角色具体信息。

状态面板有三种模式展示角色之间关系。

中间是主对话区域，用来展示角色与其他人物对话交互信息。正上方是故事背景，由大模型自动生成角色“穿书”的背景故事。中间是对话区域，即由大模型扮演的角色和用户进行对话以及回应，对话用气泡的形式展现。

右侧面板展现了当前剧情线，记录剧情的进展。当前目标，给初入这个世界的用户进行引导，方便用户更快了解这个世界。最新动态展示角色最新的操作。

组件详细说明

在这个界面我调用了之前实现的各个组件。

 CharacterCard - 角色卡片组件：

用于在左侧边栏展示游戏角色信息，是玩家与NPC交互的入口。

MessageBubble - 消息气泡组件：

在对话区展示用户与AI角色的对话记录，支持多种消息类型。

 LoadingSpinner - 加载状态组件：

在数据加载、AI响应等异步操作时提供视觉反馈。

RelationshipGraph - 关系网络图组件

可视化展示主角与各角色之间的关系网络。

 EventNotification - 事件通知组件

实时展示游戏中发生的重要事件，提供即时反馈。

StatusPanel - 状态面板组件

通过不同形式展示所有角色的详细状态信息。

组件间交互流程

对话触发角色更新流程：

用户输入 → MainChat.sendMessage()
                              ↓
              API调用获取响应
                              ↓
    ┌─────────┴─────────┐
     ↓                                                 ↓
MessageBubble                CharacterCard
(显示新消息)                      (更新关系值)
     ↓                                                 ↓
EventNotification            RelationshipGraph
(弹出事件通知)                   (更新关系网)

隐藏角色揭示流程：

剧情推进 → updateHiddenProgress()
                              ↓
       revealProgress >= 20%
                              ↓
    ┌─────────┴─────────┐
    ↓                                                  ↓
EventNotification              RelationshipGraph
("暗线显现"通知)                (在隐藏区显示)

核心功能实现

 多角色自动响应系统

核心设计理念：系统根据用户输入内容、当前剧情状态、角色关系等因素，自动判断应由哪个角色回应，并可能触发多角色轮流发言。

// AI响应生成逻辑
async sendMessage() {
  // 1. 添加用户消息
  this.messages.push(userMessage)
  
  // 2. 调用AI或本地模拟生成响应
  const responses = await this.getAIResponses(userInput)
  
  // 3. 依次添加AI响应（支持多角色）
  for (const resp of responses) {
    await this.delay(500) // 模拟打字延迟
    this.messages.push(resp)
  }
}

智能意图识别

根据用户输入关键词，自动匹配不同的回应策略：

意图类型	关键词	回应策略
打招呼	你好、嗨、hello	友好角色首先回应
求助	帮助、求助、帮忙	盟友主动提供帮助
询问	为什么、怎么、什么	了解相关情况角色进行解释
挑衅	找死、起开、打	不同角色根据关系情况进行回应
探索	看看、逛逛、周围	角色介绍世界环境

剧情状态系统

实时追踪以下剧情要素：

// 剧情状态数据结构
{
  currentArc: {        // 当前剧情线
    name: '初入世界',
    description: '你刚刚踏入这个世界'
  },
  mainProgress: 15,    // 主线进度百分比
  currentQuests: [     // 当前任务列表
    { id: 1, name: '了解这个世界', completed: false }
  ],
  recentEvents: []     // 最新事件动态
}

角色关系动态变化

用户行为会实时影响与各角色的关系值

示例：

用户帮助了盟友 → 盟友关系 +5
用户挑衅了敌对 → 敌对关系 -10
用户中立行为 → 部分角色关系微调

本地AI响应生成（降级方案）

由于前后端分离设计，目前后端API不可调用，无法自动生成剧情或者对用户进行回应来推动故事发展，因此系统使用本地模拟响应：

getLocalAIResponse(userInput) {
  const input = userInput.toLowerCase()
  
  if (input.includes('你好')) {
    // 友好角色回应
    return [{ sender: '盟友', content: '你好！' }]
  }
  
  if (Math.random() > 0.7 && 有敌对角色在场) {
    // 敌对插话
    responses.push({ sender: '敌对', content: '冷冷地...' })
  }
  
  return responses
}

暗线羁绊系统设计

隐藏角色是游戏的神秘元素，采用渐进式揭示机制：

// 隐藏角色状态
hiddenCharacter: {
  name: '神秘人',
  revealProgress: 0,  // 0-100%
}

三种显示状态

状态	显示方式	触发条件
完全隐藏	神秘脉冲卡片	revealProgress < 20%
部分揭示	显示名称+线索	20% ≤ revealProgress < 100%
完全显现	完整信息展示	revealProgress = 100%

揭示触发方式

// 1. 对话触发
updateHiddenProgress('神秘人', 15);

// 2. 关系值变化触发
if (relationshipChange) {
  updateHiddenProgress(name, Math.abs(delta) / 5);
}

// 3. 剧情进度触发
if (mainProgress > threshold) {
  tryRevealHint();  // 随机揭示
}

问题详情与解决方案

问题1：关系图收起后无法展开

问题现象

点击右侧面板“人物关系图”的“收起”按钮后，整个关系图模块完全消失，再次点击时无法重新展开。

问题原因分析

使用了 v-if 条件渲染来控制整个关系图模块的显示和隐藏：

v-if 的工作原理是条件性地渲染/销毁DOM元素：

• 当条件为 true 时：创建并渲染DOM元素

• 当条件为 false 时：从DOM树中移除该元素及其所有子元素

点击“收起”按钮时，showRelationshipGraph 被设置为 false，整个模块从DOM中被移除。由于没有提供“展开”的入口（按钮已经被移除），用户无法重新显示该模块。

解决方案

改用 v-show 指令控制显示隐藏：

1. v-show 仅切换CSS的 display 属性，不会销毁DOM元素

2. 按钮始终存在，可以随时切换显示状态

3. 按钮文字动态变化（收起/展开）

问题2：必须选中角色才能对话

问题现象

用户需要先在侧边栏点击选择一个角色，然后在输入框中发送消息。这违反了“AI自动管理多角色互动”的核心设计理念。

问题原因分析

原来deepseek给我提供的代码设计中，sendMessage() 方法要求 selectedCharacter 不为空才能发送消息，这种设计思路来源于传统RPG游戏的“点击NPC对话”模式，但本项目需要实现的是“用户自由输入，AI自动判断谁回应”的沉浸式体验。通过向deepseek重述项目目标以及我需要的前端具体功能，得到解决方案。

第一步：移除手动选择角色的限制

第二步：实现AI自动判断回应角色的逻辑

第三步：支持多角色轮流发言

效果对比

维度	修复前	修复后
用户操作	需先选择角色再输入	直接输入，AI自动判断
响应方式	单角色回应	支持多角色轮流发言
沉浸感	感觉像在操作菜单	感觉像在与真人对话
适用场景	定向对话	自由剧情推进

总结与思考

本周的核心收获是理解了AI驱动多角色互动系统的设计要点：

1. 用户无感交互：最好的交互是不需要用户思考“该和谁说话”，系统应自动判断

2. 角色差异化：每个角色应有独特的回应风格和性格特质

3. 剧情有记忆：系统需记住用户的过往选择，影响后续发展

4. 降级方案重要：后端不稳定时，本地模拟能保障基础体验

5. 反馈及时：打字延迟、进度条、事件通知都能增强沉浸感