当前位置：首页 > news >正文

典籍指数问答模块回答格式修改

news 2025/5/14 14:15:34

1.目标：将AI回答变为类似网上AI一样<think>部分可收缩且显示灰色

2.代码实现：

消息内容渲染部分：

 <div v-if="hasThinkContent(msg.content)" class="think-container"><div class="think-toggle"@click="toggleThink(msg.id)">{{ showThink[msg.id] ? '▲ 隐藏思考过程' : '▼ 显示AI思考过程' }}</div><div v-if="showThink[msg.id]"class="think-content"v-html="formatThinkContent(msg.content)"></div></div><!-- 显示正式回答 --><div class="ai-answer">{{ extractFinalAnswer(msg.content) }}</div></template>

在script部分添加：

// 新增响应式状态
const showThink = ref({})// 新增工具方法
const hasThinkContent = (content) => {return /<think>/.test(content)
}const extractFinalAnswer = (content) => {return content.replace(/<think>[\s\S]*<\/think>/, '').trim()
}const formatThinkContent = (content) => {const match = content.match(/<think>([\s\S]*)<\/think>/)if (match) {return match[1].replace(/\n/g, '<br>').replace(/ {2}/g, '&nbsp;&nbsp;')}return ''
}const toggleThink = (msgId) => {showThink.value[msgId] = !showThink.value[msgId]
}

添加样式：

.think-container {margin-bottom: 8px;border-radius: 4px;overflow: hidden;
}.think-toggle {font-size: 12px;color: #666;background-color: #f5f5f7;padding: 4px 8px;cursor: pointer;user-select: none;transition: background-color 0.2s;
}.think-toggle:hover {background-color: #ebebed;
}.think-content {font-size: 12px;color: #666;background-color: #f8f9fa;padding: 8px 12px;line-height: 1.5;border-left: 3px solid #e0e0e0;white-space: pre-wrap;
}.ai-answer {font-size: 14px;line-height: 1.6;color: #333;white-space: pre-wrap;
}

3.效果展示