<template>
|
<div v-if="shouldShowComponent" class="mt-10px">
|
<!-- 推理过程标题栏 -->
|
<div
|
class="flex items-center justify-between cursor-pointer p-8px rounded-t-8px bg-gradient-to-r from-blue-50 to-purple-50 border border-b-0 border-gray-200/60 hover:from-blue-100 hover:to-purple-100 transition-all duration-200"
|
@click="toggleExpanded"
|
>
|
<div class="flex items-center gap-6px text-14px font-medium text-gray-700">
|
<el-icon :size="16" class="text-blue-600">
|
<ChatDotSquare />
|
</el-icon>
|
<span>{{ titleText }}</span>
|
</div>
|
<el-icon
|
:size="14"
|
class="text-gray-500 transition-transform duration-200"
|
:class="{ 'transform rotate-180': isExpanded }"
|
>
|
<ArrowDown />
|
</el-icon>
|
</div>
|
|
<!-- 推理内容区域 -->
|
<div
|
v-show="isExpanded"
|
class="max-h-300px overflow-y-auto p-12px bg-white/70 backdrop-blur-sm border border-t-0 border-gray-200/60 rounded-b-8px shadow-sm"
|
>
|
<MarkdownView
|
v-if="props.reasoningContent"
|
class="text-gray-700 text-13px leading-relaxed"
|
:content="props.reasoningContent"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, computed } from 'vue'
|
import { ArrowDown, ChatDotSquare } from '@element-plus/icons-vue'
|
import MarkdownView from '@/components/MarkdownView/index.vue'
|
|
// 定义 props
|
const props = defineProps<{
|
reasoningContent?: string
|
content?: string
|
}>()
|
|
const isExpanded = ref(true) // 默认展开
|
|
/** 计算属性：判断是否应该显示组件（有思考内容时，则展示） */
|
const shouldShowComponent = computed(() => {
|
return !(!props.reasoningContent || props.reasoningContent.trim() === '')
|
})
|
|
/** 计算属性：标题文本 */
|
const titleText = computed(() => {
|
const hasReasoningContent = props.reasoningContent && props.reasoningContent.trim() !== ''
|
const hasContent = props.content && props.content.trim() !== ''
|
if (hasReasoningContent && !hasContent) {
|
return '深度思考中'
|
}
|
return '已深度思考'
|
})
|
|
/** 切换展开/收缩状态 */
|
const toggleExpanded = () => {
|
isExpanded.value = !isExpanded.value
|
}
|
</script>
|
|
<style scoped>
|
/* 自定义滚动条样式 */
|
.max-h-300px::-webkit-scrollbar {
|
width: 4px;
|
}
|
|
.max-h-300px::-webkit-scrollbar-track {
|
background: transparent;
|
}
|
|
.max-h-300px::-webkit-scrollbar-thumb {
|
background: rgba(156, 163, 175, 0.4);
|
border-radius: 2px;
|
}
|
|
.max-h-300px::-webkit-scrollbar-thumb:hover {
|
background: rgba(156, 163, 175, 0.6);
|
}
|
</style>
|
