smart-ask-answer-web/src/views/smart-ask-answer/assistant/component/answer/think.vue

<template>
  <div v-if="content" class="think-process">
    <details class="think-details">
      <summary class="think-summary">深度思考</summary>
      <div class="think-content" v-html="parsedContent"></div>
    </details>
  </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, onMounted, reactive, watch} from "vue";
import { marked } from 'marked';
import DOMPurify from 'dompurify';

const props = defineProps({
  content: String
});
const state: any = reactive({
})

const parsedContent = computed(() => {
  if (!props.content) return '';
  return DOMPurify.sanitize(marked.parse(props.content));
});
</script>

<style lang="scss" scoped>
.think-process {
  margin: 1rem 0;
  border-left: 3px solid #e5e7eb;
  padding-left: 1rem;
  .think-details {
    background-color: #f9fafb;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    .think-summary {
      cursor: pointer;
      font-weight: 500;
      color: #4b5563;
      outline: none;
    }
    .think-content {
      margin-top: 0.5rem;
      padding: 0.5rem;
      color: #374151;
      white-space: pre-wrap;
      font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
      font-size: 0.875rem;
      line-height: 1.5;
    }
  }
}
</style>