smartai_desk_pc/src/modules/report/conversation-znws/DialogZnwsContent.vue

<template>
  <div class="dialog-chat-answer-content">
    <div v-if="is_loading && type == 'znws'" class="loading"><a-spin></a-spin> <span>正在思考中...</span></div>
    <div class="answer-content-text answer-content-report" v-for="(item, index) in result_list" :key="index">
      <div class="answer-content" v-if="typeof item === 'string'" v-html="renderHtml(item)"></div>
      <HomeChart v-if="typeof item === 'object'" :data="item">
        <template #insertBtn>
          <a-button @click="toInsert(item)" :loading="loading" :disabled="loading">
            <img :src="InsertIcon" alt="" v-if="!loading" />
            <span>插入</span>
          </a-button>
        </template>
      </HomeChart>
    </div>
    <!-- <div class="answer-content-text answer-content-report" v-if="result_list && !result_list.length" :key="index">
      <div class="answer-content" v-html="暂无内容"></div>
    </div> -->
    <slot></slot>
    <div class="report-loading" v-if="answer_status === 1">
      <img src="../../../assets/chat-report/report-ing.png" alt="" />
      <!-- <span>报告生成中...</span> -->
    </div>
  </div>
  <!-- <div v-html="html_1"></div> -->
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import HomeChart from '../../chat_echart/HomeChart.vue';
import marked from '../../../3rd-libs/marked';
import InsertIcon from '../../../assets/ai-editor/insert-icon.svg';
import { createChartPic } from '../../../modules/conversation-dialog/api-dialog';
// 接收markdown数据，进行一些转换
const props = defineProps({
  /**
   * 内容类型
   */
  type: String,
  /**
   * 文本内容数组
   */
  result_list: Array,
  /**
   * 状态值
   */
  is_loading: Boolean,
  /**
   * 会话状态
   * */
  answer_status: Boolean
});

const emit = defineEmits(['insertEchart']);

const loading = ref(false);

const content_style = computed(() => {
  if (props.type === 'q') {
    return {
      background: 'var(--primary-default)',
      color: '#fff'
    };
  }
});

const renderHtml = (item) => {
  let renderContent = marked.parse(item);
  // renderContent = renderContent.replace(/^ {2}/gm, '&nbsp;&nbsp;&nbsp;&nbsp;');
  // renderContent = renderContent
  //   .replace(/<p>(.*?)<\/p>/gs, (match, content) => {
  //     return `<p class="indented" style="text-indent: 2em;">${content}</p>`;
  //     // return `<p>${content}</p>`
  //   })
  //   .replace(/<br\s*\/?>([^<]*)/g, (match, content) => {
  //     if (content.trim() === '') return match;
  //     return `<br/><span style="display:inline-block;text-indent:2em;">${content}</span>`;
  //   });
  // renderContent = renderContent
  //   .replace(/<pre><code>/gs, '<p style="text-indent: 2em;">')
  //   .replace(/<\/code><\/pre>/gs, '</p>');
  return renderContent;
};

const toInsert = async (item) => {
  loading.value = true;
  const params = {
    type: 'table',
    data: item.origin_chart
  };
  const res = await createChartPic(params);
  // console.log(res.data.chart_buf);
  emit('insertEchart', res.data.chart_buf);
  loading.value = false;
};
onMounted(() => {});
</script>

<style lang="css" scoped>
.dialog-chat-answer-content {
  position: relative;
  background-color: var(--color-bg-1);
  color: var(--color-text-1);
  border-radius: 12px;

  /* padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px; */
}

.answer-content-report .answer-content * p {
  text-indent: 2em !important;
}

.answer-content * p {
  text-indent: 2em !important;
}

p {
  text-indent: 2em !important;
}

.dialog-chat-answer-content code {
  overflow-x: auto;
}

.answer-content-text {
  line-height: 24px;
}

.loading {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>
<style>
.answer-content-text table {
  border-collapse: collapse;
}

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

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

.refferences {
  background: rgb(238, 243, 254);
  border: 1px solid rgb(255, 255, 255);
  box-shadow: rgba(29, 48, 91, 0.2) 0px 1px 1px 0px;

  padding: 2px 6px;
  cursor: pointer;
}

.refferences:hover {
  background-color: var(--primary-default);
  color: #fff;
}

.indented br + * {
  display: inline-block;
  text-indent: 2em;
}
.report-loading {
  margin-top: 10px;
}
.report-loading img {
  width: 32px;
}
</style>