gangyan/chat_web_front/src/components/Introduction.vue

<template>
  <div style="margin-bottom: 20px">
    <div class="title">摘要</div>
    <div class="abstract" >
      <div class="text" v-html="transforMd(articleAbstract)"></div>

      <img v-show="!articleAbstract" src="../assets/images/message/messageLoad.gif" class="messageLoad"/>

      <div class="operates" v-show="articleAbstract">
        <div class="operateItem" @click="copyText(articleAbstract)">
          <img src="../assets/images/chat/copy.png" class="operateImg" />
          <span>复制</span>
        </div>
        <div class="operateItem" @click="refreshGuide('6')">
          <img src="../assets/images/chat/refresh.png" class="operateImg"/>
          <span>再试一次</span>
        </div>
      </div>
    </div>

    <div class="title">关键词</div>
    <div class="abstract">
      <div class="text" v-html="transforMd(articleKeywords)"> </div>
      <img v-show="!articleKeywords" src="../assets/images/message/messageLoad.gif" class="messageLoad"/>

      <div v-show="articleKeywords" class="operates">
        <div class="operateItem" @click="copyText(articleKeywords)">
          <img src="../assets/images/chat/copy.png" class="operateImg"/>
          <span>复制</span>
        </div>
        <div class="operateItem" @click="refreshGuide('8')">
          <img src="../assets/images/chat/refresh.png" class="operateImg"/>
          <span>再试一次</span>
        </div>
      </div>
    </div>

    <div class="title">章节速览</div>
    <div class="abstract">
      <div class="text" v-html="transforMd(articleParagraph)"></div>

      <img v-show="!articleParagraph" src="../assets/images/message/messageLoad.gif" class="messageLoad"/>

      <div v-show="articleParagraph" class="operates">
        <div class="operateItem" @click="copyText(articleParagraph)">
          <img src="../assets/images/chat/copy.png" class="operateImg"/>
          <span>复制</span>
        </div>
        <div class="operateItem" @click="refreshGuide('9')">
          <img src="../assets/images/chat/refresh.png" class="operateImg"/>
          <span>再试一次</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {copyToClip} from "@/utils";
import {ElMessage} from "element-plus";
import {fileGuidInfo} from "@/api";
import {computed, inject, ref, type Ref} from "vue";
import MarkdownIt from "markdown-it";
import {transforMd} from "@/utils/markdown";

const selectedFile = inject('selectedFile') as Ref<any>;

const emits=defineEmits(["refreshAbs","refreshCon"]);
const mardown=new MarkdownIt();
const refreshAbs=()=>{
  emits('refreshAbs');
}
const refreshCon=()=>{
  emits('refreshCon');
}

const articleAbstract=ref('');
const articleKeywords=ref('');
const articleParagraph=ref('');

// 监听选中文件变化，更新导读内容
import {watch} from "vue";
watch(() => selectedFile.value, (newFile) => {
  if (newFile) {
    articleAbstract.value = newFile.articleAbstract || '';
    let kw = newFile.articleKeywords || '';
    if (kw && (kw.indexOf('关键词：') > -1 || kw.indexOf('关键词:') > -1)) {
      kw = kw.substring(kw.indexOf('关键词：') + 4, kw.length);
      kw = kw.substring(kw.indexOf('关键词:') + 4, kw.length);
    }
    articleKeywords.value = kw;
    articleParagraph.value = newFile.articleParagraph || '';
  } else {
    articleAbstract.value = '';
    articleKeywords.value = '';
    articleParagraph.value = '';
  }
}, {immediate: true});
const copyText=(text)=>{
  copyToClip(text);
  ElMessage.success("复制成功");
}
const refreshGuide=async (type:string)=>{
  let fileBox= document.getElementById('file-content');
  if(fileBox) {
    let param = {
      type: type,
      context: fileBox.innerText,
      fileId: selectedFile.value?.fileId,
    }
    if(type==='6'){
      articleAbstract.value=''
    }
    if(type==='8'){
      articleKeywords.value= ''
    }
    if(type==='9'){
      articleParagraph.value= ''
    }
    try {
      let response = await fileGuidInfo(param);
      let responseData=JSON.parse(response.data);
      if(type==='6'){
        articleAbstract.value=responseData;
      }
      if(type==='8'){
        if(responseData&&(responseData.indexOf('关键词：')>-1||responseData.indexOf('关键词:')>-1)){
          responseData=responseData.substring(responseData.indexOf('关键词：')+4,responseData.length);
          responseData=responseData.substring(responseData.indexOf('关键词:')+4,responseData.length);
        }
        articleKeywords.value=responseData;
      }
      if(type==='9'){
        articleParagraph.value=responseData;
      }
    } catch (error: any) {
      ElMessage.error(error && error.message ? error.message : '未知错误');
    }
  }
}
</script>

<style lang="less" scoped>
.title{
  margin:12px 0 12px 20px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  line-height: 30px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.abstract{
  //width: 490px;
  /*
  height: 230px;
  */
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #D5DDFF;
  margin-left:20px;
  margin-right: 20px;
  padding:0 16px 16px 16px;
  .messageLoad {
    margin-top:20px;
    width: 80px;
    height: 32px;
  }
  .text{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    line-height: 28px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .operates {
    display: flex;
    margin-top: 18px;
    font-weight: 400;
    font-size: 14px;
    color: #858a94;
    .operateItem {
      cursor: pointer;
      margin-right: 16px;
      display: flex;
      align-items: center;
      .operateImg {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }
  }
}
</style>