smartai2dian0/src/modules/conversation-content/DialogThinkContent.vue

<template>
  <div class="think">
    <a-button class="think-select" v-if="!show_think_page" @click="handleThinkClick">
      <icon-robot class="robot" />
      <span>{{ show_think_title }}</span>
      <icon-down class="down" />
    </a-button>

    <div class="think_content" v-else>
      <!-- <div class="content-title"><icon-check-circle class="icon" /></div> -->
      <div class="content-title" @click="handleThinkClick">
        <div class="content-title-left">
          <icon-robot class="robot" />
          <span>{{ show_think_title }}</span>
        </div>
        <icon-up class="down" />
      </div>
      <div class="content-text" v-html="deep_answer"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
  deep_loading: Boolean,
  deep_answer: String
});
const show_think_page = ref(true);
const show_think_title = computed(() => {
  return props.deep_loading ? '思考中...' : '已完成推理';
});
const handleThinkClick = () => {
  show_think_page.value = !show_think_page.value;
};
</script>
<style scoped>
.think-select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px;
  background: var(--color-fill-2);
  cursor: pointer;
  .robot {
    color: #20b759;
    font-size: 16px;
  }
  .down {
    margin-left: 10px;
  }
}
.think_content {
  background: #f3f5fc;
  transition: all 0.2s ease;
  border-radius: 12px;
}

.content-title {
  height: 30px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  gap: 10px;
  cursor: pointer;
  color: var(--color-text-2);
}
.content-title:hover {
  background-color: var(--color-secondary-hover);
  color: var(--color-text-2);
}
.content-title-left {
  .robot {
    color: #20b759;
    margin-right: 10px;
    /* color: #668ff3; */
  }
}
.content-text {
  margin-left: 20px;
  border-left: 1px solid #ccc;
  padding: 10px 20px;
}
</style>