smartai2dian0/src/modules/answer-refference/RefferenceFileBlocks.vue

<template>
  <div>
    <header class="client-formated-markdown-element-item client-formated-markdown-refference-header">
      <div>{{ $t('conversation.source') }}</div>

      <div class="btn-show-related-all" @click="showAllRelated">
        {{ $t('conversation.view_links') }} <icon-double-right />
      </div>
    </header>

    <RefferenceFileNameList :document_list="document_list" @showDocDetail="handleShowDocDetail" />

    <a-drawer
      :width="'90%'"
      :height="340"
      :visible="visible"
      :placement="position"
      data-flag="reffernce-file-block-drawer"
      :ok-text="$t('conversation.btn_ok')"
      :cancel-text="$t('conversation.btn_cancel')"
      :footer="false"
      @ok="handleOk"
      @cancel="handleCancel"
      unmountOnClose
    >
      <template #title> {{ $t('conversation.doc_details') }} </template>

      <div>
        <RefferenceDocDetail :targetDocument="targetDocument" @back="handleBackQA" />
      </div>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

import RefferenceFileNameList from './RefferenceFileNameList.vue';

import RefferenceDocDetail from './RefferenceDocDetail.vue';

const props = defineProps({
  doc_aggs: Array,
  chunks: Array
});

const visible = ref(false);
const position = ref('right');

const document_list = computed(() => {
  const doc_list = props.doc_aggs;
  const chunks = props.chunks;

  const res_list = [];

  if (Array.isArray(doc_list)) {
    const len = doc_list.length;
    for (let i = 0; i < len; i++) {
      if (i >= 3) {
        break;
      }

      const doc = doc_list[i];

      const res_doc = {
        doc_id: doc.doc_id,
        doc_name: doc.doc_name,
        count: doc.count,
        page: i
      };

      const cur_doc_id = doc.doc_id;

      const cur_doc_peaces = [];
      if (chunks && Array.isArray(chunks)) {
        chunks.forEach((item, index) => {
          const chunk_doc_id = item.document_id;

          if (cur_doc_id === chunk_doc_id) {
            cur_doc_peaces.push(item.content);
          }
        });
      }

      res_doc.content_ltks = cur_doc_peaces;

      res_list.push(res_doc);
    }
  }

  return res_list;
});

/**
 * 目标数据
 */
const targetDocument = ref({
  doc_aggs: props.doc_aggs,
  chunks: props.chunks
});

const handleClick = () => {
  visible.value = true;
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};

const handleShowDocDetail = (item) => {
  // TODO：组装参数数据
  const cur_tar = targetDocument.value;

  const obj = {
    doc_aggs: cur_tar.doc_aggs,
    chunks: cur_tar.chunks,
    doc_id: item.doc_id,
    doc_name: item.doc_name,
    count: item.count,
    content_ltks: item.content_ltks
  };

  targetDocument.value = obj;

  // 展示文档详情
  handleClick();
};

/**
 * 显示第一个
 */
const showAllRelated = () => {
  const item = document_list.value[0];

  const cur_tar = targetDocument.value;

  const obj = {
    doc_aggs: cur_tar.doc_aggs,
    chunks: cur_tar.chunks,
    doc_id: item.doc_id,
    doc_name: item.doc_name,
    count: item.count,
    content_ltks: item.content_ltks
  };

  targetDocument.value = obj;

  handleClick();
};

// 返回
const handleBackQA = () => {
  handleCancel();
};
</script>

<style scoped>
.btn-show-related-all {
  cursor: pointer;
}

.btn-show-related-all:hover {
  color: #00aea3;
}
</style>

<style>
div.arco-drawer-container[data-flag='reffernce-file-block-drawer'] .arco-drawer-body {
  height: calc(100vh - 48px - 65px);
  overflow: hidden;
}
</style>