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

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.效果展示