深入大模型-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 JavaScript3.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 - 数据处理初始显示占位文本处理完成后