smartai_desk_pc/src/modules/smart-chat/DialogThinkContent.vue

<template>
  <div class="think">
    <a-button class="think-select" v-if="!show_think_page" @click="handleThinkClick">
      <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">
          <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 {
  /* background: #D6F8F8; */
  /* background: rgba(10, 129, 126, 0.06); */
  color: #2c2c2c;
  margin-bottom: 10px;
}

.think-select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px;
  background: rgba(10, 129, 126, 0.06);
  cursor: pointer;
  font-weight: 600;
  font-family: 思源黑体;
  font-size: 14px;
  color: #0a817e;
  padding: 2px 20px;
}
.think-select .down {
  margin-left: 10px;
  color: #0a817e;
}

.think_select span {
  color: #0a817e;
  font-size: 14px;
  font-weight: 600;
  font-family: 思源黑体;
  background: rgba(10, 129, 126, 0.06);
}

.think-select:hover {
  font-weight: 600;
  font-family: 思源黑体;
  color: #0a817e;
  background: rgba(10, 129, 126, 0.06);
  opacity: 0.8;
}

.think_content {
  /* background: #D6F8F8; */
  background: rgba(10, 129, 126, 0.06);
  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: 1px 20px;
  gap: 10px;
  cursor: pointer;
  border-radius: 12px;
  color: #0a817e;
  font-weight: 600;
  font-family: 思源黑体;
}

.content-title:hover {
  opacity: 0.8;
}

.content-title-left {
}

.content-text {
  padding: 0px 20px 10px 20px;
  margin-top: -10px;
  line-height: 24px;
}
</style>
<style>
.content-text table {
  border-collapse: collapse;
}

.content-text table,
.content-text th,
.content-text td {
  border: 1px solid rgb(184, 179, 179);
}

.content-text th,
.content-text td {
  padding: 8px;
  text-align: left;
}

.content-text .katex-display > .katex {
  white-space: pre-wrap !important;
}
</style>