深入大模型-42-大模型交互之前端代码详解JavaScript代码

文章目录

• 1 前端结构
• 2 HTML结构
• • 2.1 顶部导航栏
  • 2.2 主体(左侧面板和右侧聊天)
  • 2.3 左侧面板
  • • 2.3.1 阶段1：信息收集
    • 2.3.2 阶段2：数据处理
    • 2.3.3 阶段3：结果展示
  • 2.4 右侧聊天区
• 3 JavaScript
• • 3.1 核心状态管理
  • 3.2 辅助函数
  • • 3.2.1 API连接状态setApiStatus(connected)
    • 3.2.2 更新整个界面的状态显示updateUI()
    • 3.2.3 添加消息appendMsg(role,text)
    • 3.2.4 HTML转义escHtml(text)
    • 3.2.5 自动调整输入框的高度autoResize(el)
    • 3.2.6 控制输入区域的加载状态setLoading(flag)
  • 3.3 初始化init()
  • 3.4 发送消息sendMessage()
  • 3.5 阶段结果处理handleStageResult(result)
  • • 3.5.1 fillCard1(data)
    • 3.5.2 fillCard2(data)
    • 3.5.3 fillCard3(data)
    • 3.5.4 setCardState(cardId, state)
    • 3.5.5 setField(valId, dotId, value)
    • 3.5.4 整体代码handleStageResult(result)
  • 3.6 重置会话resetSession()

1 前端结构

这是一个三阶段任务助手的单页应用，采用左右分栏布局： 1、左侧面板：显示三个阶段的进度卡片(信息收集 → 数据处理 → 结果展示)。 2、右侧聊天：与AI助手对话交互。

2 HTML结构

2.1 顶部导航栏

(1)显示当前所在阶段(active/完成状态)。 (2)提供重置会话按钮。

2.2 主体(左侧面板和右侧聊天)

2.3 左侧面板

包含三个卡片，每个对应一个阶段： 1、卡片1 – 信息收集 显示三个字段：姓名、内容、时间 每个字段有圆点指示器（灰色=待收集，绿色=已填充）

2、卡片2 – 数据处理 初始显示占位文本 处理完成后