platformFront/src/views/KnowledgeGraphRetrievalTool/Entry.vue

<template>
  <div class="kgrt-entry" v-cloak v-loading="loading">
    <header class="entry-topbar">
      <button class="back" @click="handleBack">返回</button>
      <span class="title">知识溯源检索</span>
      <input type="text" v-model.trim="keyword" @keydown.enter="handleRetrieval(keyword)" />
      <button class="retrieval" @click="handleRetrieval(keyword)">检索</button>
    </header>
    <div class="entry-content">
      <div class="left" ref="leftRef">
        <div class="result-num" v-show="pagination.total">
          搜索结果：{{ pagination.total }}条
        </div>
        <ul class="main-content-list">
          <li v-for="(record, index) in records" :key="record.id">
            <div class="record-title" @click="changeRecordIsShow(index)">
              <h3 target="_blank" class="title-name">
                <i @click.stop="handleClick(record.name, record.category)" style="cursor: pointer;">
                  {{ record.name }}
                </i>
                <!-- <i class="distance">{{ record.distance }}</i> -->
                <i :class="record.isShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                  style="margin-left: auto; color: #2780ff"></i>
              </h3>
              <div class="category">{{ record.category }}</div>
            </div>
            <div :style="record.isShow ? { maxHeight: '10000px' } : { maxHeight: '0px' }" class="record-content-box">
              <div class="record-content-box-item1">
                <div class="menu">
                  <div style="font-weight: bold;margin-bottom: 20px;" v-show="record.props.length > 0">目录</div>
                  <div class="anchor" v-for="prop in record.props" :key="prop.id">
                    <a :href="'#anchor' + prop.id"
                      @click.prevent="handleAnchor('.entry-content', '#anchor' + prop.id)">{{ prop.prop_title
                      }}</a>
                    <!-- <el-button type="text" :targetId="'anchor' + prop.id">{{ prop.prop_title }}</el-button> -->
                  </div>
                </div>
                <div class="menu-content">
                  <div class="record-omit-content" v-for="prop in record.props" :key="prop.id">
                    <div class="prop-title" :id="'anchor' + prop.id"> {{ prop.prop_title }}</div>
                    <div class="prop-content">
                      <div v-if="prop.answer">
                        <i v-for="(answer, index) in prop.answer" :key="index">
                          <i v-html="answer.sentence"></i>
                          <i v-if="answer.flag" class="pdf-icon" @click="handlePdf(answer.flag, prop.references)">
                            {{ answer.flag }}&nbsp;PDF
                          </i>
                        </i>
                      </div>
                      <div v-else>
                        <i>{{ prop.prop_value }}</i>
                        <!-- <span class="pdf-icon" @click="handlePdf">PDF</span> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="literature" v-if="Array.isArray(record.files) && record.files.length > 0">
                <div>来源</div>
                <ul>
                  <li v-for="file in record.files" :key="file.file_name">
                    {{ file.index }}.<i class="file-type-icon" v-if="file.file_type">{{ file.file_type }}</i>{{
                      decodeURIComponent(file.file_name) }}
                  </li>
                </ul>
              </div>
            </div>


            <!-- <div class="record-edge">{{ record.edges.length }}</div> -->
          </li>
        </ul>
        <div class="pagination" v-if="pagination.total > 10">
          <el-pagination prev-text="上一页" next-text="下一页" background layout="prev, pager, next" :total="pagination.total"
            @current-change="handlePaginationChange">
          </el-pagination>
        </div>
      </div>
      <div class="right">
        <div class="aside">
          <div class="aside-title">
            <el-radio-group v-model="radio">
              <el-radio label="检索推荐">检索推荐</el-radio>
              <el-radio label="知识图谱">知识图谱</el-radio>
            </el-radio-group>
          </div>
          <!-- <ul class="aside-content">
            <li
              v-for="item in vectorSearch"
              :key="item.id"
              v-html="markdownToHtml(item.content)"
            ></li>
          </ul> -->
          <el-collapse v-model="activeName" accordion v-show="radio === '检索推荐'">
            <el-collapse-item v-for="item in vectorSearch" :key="item.id">
              <template slot="title">
                <div class="title" style="
                    /* font-weight: 600; */
                    font-size: 20px;
                    vertical-align: bottom;
                    color: #2f19ab;
                    white-space: nowrap;
                  ">
                  {{ item.title }}
                  <i class="distance" style="
                      font-size: 12px;
                      zoom: 0.8;
                      margin-left: 3px;
                      display: inline-block;
                      color: #2f9634;
                    ">{{ item.distance }}</i>
                </div>
              </template>
              <div style="padding: 0px 10px" class="markdown-body" v-html="markdownToHtml(item.content)"></div>
            </el-collapse-item>
          </el-collapse>
          <div class="knowledge-graph-window" v-show="radio === '知识图谱'">
            <iframe :src="knowledgeGraphLink" frameborder="0"></iframe>
          </div>
          <div class="pdf" v-show="pdfShow">

            <!-- <PdfViewer :pdfUrl="pdfUrl" :pdfPage="pdfPage" @closePdf="closePdf"></PdfViewer> -->
            <i class="el-icon-circle-close pdf2js-close-icon" @click="pdfShow = false"></i>
            <iframe style="width: 100%;height: 100%;" id="pdf2js"
              :src="pdf2jsUrl + '?file=' + encodeURIComponent(pdfProxy + decodeURIComponent(pdfUrl))">
            </iframe>
          </div>

        </div>
      </div>
    </div>
    <el-dialog title="文献引用" width="600px" custom-class="pdf-dialog" :modal="false"
      :visible.sync="pdfDialogData.visible">
      <pre style="white-space: pre-line;">{{ pdfDialogData.content }}</pre>
      <span class="view-pdf"
        @click="viewPdf(pdfDialogData.pdfUrl, pdfDialogData.page, pdfDialogData.reference)">查看PDF</span>
      <span class="reference-source">来源：{{ pdfDialogData.reference &&
        decodeURIComponent(pdfDialogData.reference.file_name)
      }}</span>
    </el-dialog>
  </div>

</template>
<script>
import $ from 'jquery'
import PdfViewer from "./PdfViewer.vue"
const markdown = require("markdown").markdown;
import config from "@api/config.js"
const knowledgeGraphAddr = config.knowledgeGraphAddr
// console.log(config.pdfProxy, knowledgeGraphAddr)
let timer1
let timer2
export default {
  data() {
    return {
      pdfProxy: config.pdfProxy,
      radio: "检索推荐",
      loading: false,
      keyword: "",
      distance: 1,
      records: [],
      pagination: {},
      activeName: "1",
      vectorSearch: [], // 检索推荐的数据
      knowledgeGraphLink: "",
      pdfUrl: "",
      pdfPage: 1,
      pdfShow: false,
      pdf2jsUrl: location.origin + '/pdf2js/web/viewer.html',
      pdfDialogData: {
        visible: false,
        content: "",
        pdfUrl: "",
        page: 1,
        oldPage: 1,
        reference: null,
      }

    };
  },
  components: {
    PdfViewer
  },

  methods: {
    handlePdf(flag, references) {
      // console.log(flag, references)
      if (Array.isArray(references)) {
        for (let i = 0; i < references.length; i++) {
          if (references[i].index === flag) {
            const pdfUrl = references[i].referrence
            // alert(pdfUrl)
            this.pdfDialogData.content = references[i].content
            this.pdfDialogData.pdfUrl = pdfUrl
            this.pdfDialogData.visible = true
            this.pdfDialogData.page = references[i].page_no
            this.pdfDialogData.reference = references[i]
            // alert(references.page_no)
            break
          }
        }
      }
    },


    viewPdf(pdfUrl, page, reference) {
      clearInterval(timer1)
      clearInterval(timer2)
      this.pdfPage = page || 1
      this.pdfDialogData.visible = false
      this.pdfShow = true;

      const iframeLoadEvent = async () => {
        const iframe = document.getElementById('pdf2js');
        const viewerApp = iframe.contentWindow.PDFViewerApplication;
        // console.log("PDFViewerApplication", viewerApp, viewerApp.eventBus)
        await viewerApp.initializedPromise //等待pdf查看器初始化完成
        // 监听 PDF 加载完成事件
        // viewerApp.page = this.pdfPage  // 传入需要让跳转页码的值

        // 监听目标页面渲染完成
        const onTargetPageRendered = (event) => {
          if (event.pageNumber === this.pdfPage) { // 目标页码
            let cycleIndex = 1
            viewerApp.page = this.pdfPage;
            // console.log(`第${this.pdfPage}页渲染完成！`);
            timer2 = setInterval(() => {
              viewerApp.page = this.pdfPage;
              const iframeDocument = document.getElementById('pdf2js').contentWindow.document;
              const pdfData = {
                htmlElements: [],
                textList: [],
                page: this.pdfPage,
                trunkId: this.pdfDialogData.reference.id
              }
              $(iframeDocument).find(`.pdfViewer .page[data-page-number="${this.pdfPage}"] .textLayer  span[role="presentation"]`).each((index, element) => {
                // console.log(index, $(element).text())
                pdfData.htmlElements.push(element)
                pdfData.textList.push($(element).text())
                // $(element).addClass("highlight")
              })
              if (pdfData.htmlElements.length === 0 && cycleIndex <= 500) {
                // console.log("1没有获取到文本！")
              } else {
                clearInterval(timer2)
                this.matchHighlight(pdfData)
              }
            }, 200)
            viewerApp.eventBus.off('pagerendered', onTargetPageRendered); // 移除监听
            viewerApp.eventBus.off('documentloaded', onTargetDocumentLoaded); // 移除监听
          }
        };
        const onTargetDocumentLoaded = () => {
          viewerApp.page = this.pdfPage  // 传入需要让跳转页码的值
          const iframeDocument = document.getElementById('pdf2js').contentWindow.document;
          let cycleIndex = 1
          timer1 = setInterval(() => {
            if (+$(iframeDocument).find("#pageNumber.toolbarField").val() !== this.pdfPage && cycleIndex <= 500) {
              viewerApp.page = this.pdfPage;
              cycleIndex++
              // console.log("viewerApp.page", viewerApp.page !== this.pdfPage)
            } else {
              // console.log("viewerApp.page", viewerApp.page === this.pdfPage, viewerApp.page, this.pdfPage)
              clearInterval(timer1)
            }
          }, 500)
        }
        viewerApp.eventBus.on('pagerendered', onTargetPageRendered);
        viewerApp.eventBus.on('documentloaded', onTargetDocumentLoaded);
      }
      if (!this.pdfUrl) {
        document.getElementById('pdf2js').addEventListener('load', iframeLoadEvent);
      }

      const isPdfUrlChange = this.pdfUrl !== pdfUrl;
      this.pdfUrl = pdfUrl

      this.$nextTick(() => {
        // 获取 iframe 元素
        // console.log("我是nextTick")
        const iframe = document.getElementById('pdf2js');
        if (isPdfUrlChange) { //pdf文件链接有改变，需要等待文件加载完毕
          // iframe.removeEventListener('load', iframeLoadEvent);
          // iframe.addEventListener('load', iframeLoadEvent);
        } else {

          const viewerApp = iframe.contentWindow.PDFViewerApplication;
          viewerApp.page = this.pdfPage  // 传入需要让跳转页码的值
          let cycleIndex = 1
          timer2 = setInterval(() => {
            viewerApp.page = this.pdfPage  // 传入需要让跳转页码的值
            const iframeDocument = document.getElementById('pdf2js').contentWindow.document;
            const pdfData = {
              htmlElements: [],
              textList: [],
              page: this.pdfPage,
              trunkId: this.pdfDialogData.reference.id
            }
            $(iframeDocument).find(`.pdfViewer .page[data-page-number="${page}"] .textLayer  span[role="presentation"]`).each((index, element) => {
              // console.log(index, $(element).text())
              pdfData.htmlElements.push(element)
              pdfData.textList.push($(element).text())
              // 移除之前的高亮
              $(element).removeClass("highlight")
            })
            if (pdfData.htmlElements.length === 0 && cycleIndex <= 500) {
              // console.log("2没有获取到文本！")
              cycleIndex++
            } else {
              clearInterval(timer2)
              this.matchHighlight(pdfData)
            }
          }, 200)
        }
      })
    },
    closePdf(data) {
      this.pdfShow = false
    },
    handleAnchor(parentClass, anchor) {
      // console.log(parentClass, anchor, $(anchor).offset().top)
      // $(parentClass).animate({
      //   scrollTop: $(anchor).offset().top - $(parentClass).offset().top
      // });  // 1000 表示滚动的动画持续时间（毫秒）

      const container = $(parentClass);
      const target = $(anchor);

      // 获取父容器当前滚动量
      const currentScroll = container.scrollTop();
      // 计算目标元素的原始偏移（需父容器有 position: relative）
      const targetOffset = target.position().top;

      // 最终滚动位置 = 原始偏移 + 当前已滚动量
      container.animate({ scrollTop: currentScroll + targetOffset });
    },
    matchHighlight: async function (pdfData) {
      try {
        // clearInterval(timer)

        const { data, success } = await this.$http.post(`/knowledge/saas/trunks/${pdfData.trunkId}/highlight`, pdfData.textList)
        // console.log(data)
        if (success) {
          // const iframeDocument = document.getElementById('pdf2js').contentWindow.document;
          // const divArray = $(iframeDocument).find(`.pdfViewer .page[data-page-number="${pdfData.page}"] .textLayer  span[role="presentation"]`).map(function () { return this; }).get()
          // console.log(pdfData, data, divArray)
          for (let i = 0; i < data.length; i++) {
            // console.log(data[i], pdfData.htmlElements[data[i]])
            // $(pdfData.htmlElements[data[i]]).css('backgroundColor', 'red');
            $(pdfData.htmlElements[data[i]]).addClass("highlight");

          }
        }
      } catch (e) {
        console.log(e)
      }
    },
    handleClick(name, category) {
      // this.getVectorSearch(name);
      // this.keyword = name;
      // this.getPaginatedSearch(this.keyword);
      // this.$router.replace({ query: { keyword: this.keyword } });
      this.getVectorSearch(name);
      this.knowledgeGraphLink = `${knowledgeGraphAddr}/knowledgeGraph.html?input=${name}&label=${category}&no-tree=true`;
    },
    markdownToHtml(text) {
      //将markdown文本转成html文本
      return markdown.toHTML(text);
    },
    handleBack() {
      this.$router.push({ name: "kgrt-retrieve" });
    },
    handleRetrieval(keyword) {
      this.getPaginatedSearch(keyword);
      // this.$route.query.keyword = keyword;
      this.$router.replace({ query: { keyword: keyword } });
    },
    changeRecordIsShow(index) {
      let copyData = JSON.parse(JSON.stringify(this.records[index]))
      copyData.isShow = !(copyData.isShow ? true : false)
      // this.records.splice(index, 1, copyData)
      this.$set(this.records, index, copyData)
      if (!copyData.isShow) return;
      if (copyData.isShow && !copyData.oneExpand) { //第一次展开才发送请求
        this.records[index].oneExpand = true
        this.getEbSearch(index)
      }

      // this.records[index].isShow = !this.records[index].isShow;
      // alert('我点击了!')
    },
    getEbSearch: async function (index) {
      try {
        const params = {
          "node_id": this.records[index].id,
          "props_ids": this.records[index].props.map(it => it.id),
          symptoms: this.$route.query.mw ? this.$route.query.mw.split(';') : []
          // "conversation_id": "string"
        }
        let res = await this.axios.post("/knowledge/text/eb_search", params)
        const { data, code, msg, success } = res.data
        if (success) {
          // Object.assign(this.records[index], data)
          // const copyData = JSON.parse(JSON.stringify(this.records[index]))
          this.records[index].files = data.files
          this.records[index].props = data.props
          // this.records.splice(index, 1, copyData)

          // console.log("record", this.records[index])
        }
      } catch (e) {
        console.log(e)
      }
    },
    getPaginatedSearch: async function (keyword, category = "", pageNo = 1, limit = 10) {
      try {
        if (!keyword) {
          this.pagination = {};
          this.records = [];
          return;
        }
        this.loading = true;
        let resData = await this.axios.post(
          "/knowledge/saas/nodes/paginated_search",
          {
            keyword: keyword,
            category: category,
            pageNo: pageNo,
            limit: limit,
            distance: this.distance,
            // knowledge_ids: ["ER"],
          }
        );
        this.records = resData.data.data.records;

        // console.log("records", this.records);
        this.pagination = resData.data.data.pagination;
        if (this.records.length > 0) {
          const name = this.records[0].name;
          const category = this.records[0].category;
          this.getVectorSearch(name);
          this.knowledgeGraphLink = `${knowledgeGraphAddr}/knowledgeGraph.html?input=${name}&label=${category}&no-tree=true`;
        }
        this.$nextTick(() => {
          // 回到顶部
          document.querySelector(".kgrt-entry").scrollTop = 0;
          if (this.distance === 0) {
            // this.records.forEach((it) => {
            //   it.isShow = true
            // })
            $(".main-content-list .record-title").trigger('click')
          }
        });
      } catch (e) {
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
    handlePaginationChange(page) {
      // console.log(page);
      this.getPaginatedSearch(this.$route.params.keyword || this.keyword, this.$route.query.category || "", page);
    },
    getVectorSearch: async function (text) {
      try {
        let resData = await this.axios.post(
          "/knowledge/saas/trunks/vector_search",
          {
            text: text,
            limit: 10,
            type: "community_report",
          }
        );
        this.vectorSearch = resData.data.data;
      } catch (e) {
        console.log(e);
      }
    },
  },

  created() {
    this.keyword = this.$route.query.keyword;
    const category = this.$route.query.category
    if (this.$route.query.hasOwnProperty('exact')) {
      if (this.$route.query.exact === null) {
        this.distance = 0
      } else {
        this.distance = Number(this.$route.query.exact) || 0
      }
    } else {
      this.distance = 1
    }
    // console.log('exact', this.$route.query.exact, this.distance)
    this.getPaginatedSearch(this.keyword, category);
  },
  mounted() { },
};
</script>

<style scoped lang="less">
div {
  box-sizing: border-box;
}

.pdf-icon {
  display: inline;
  height: 12px;
  font-size: 12px;
  // min-width: 40px;
  cursor: pointer;
  color: white;
  // font-weight: bolder;
  border-radius: 10px;
  padding: 0px;
  text-align: right;
  // line-height: 20px;
  background-color: #FECFCB;
  white-space: nowrap;
}

.file-type-icon {
  display: inline-block;
  // height: 20px;
  // min-width: 40px;
  // cursor: pointer;
  // color: white;
  // font-weight: bolder;
  border-radius: 10px;
  border: 1px solid #000;
  padding: 0px 5px;
  text-align: right;
  // line-height: 20px;
  box-sizing: border-box;
  // background-color: #FECFCB;
  margin-right: 10px;
  margin-left: 3px;
}

.kgrt-entry {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 0px;
  overflow: auto;
  // overflow-x: hidden;
  display: flex;
  flex-direction: column;

  .entry-topbar {
    height: 60px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0px 5px 20px;
    border-bottom: 1px solid #e0e0e0;
    margin: 0px 15px;

    // min-width: 500px;
    .back {
      padding: 2px 5px;
      white-space: nowrap;
    }

    .title {
      font-size: 24px;
      font-weight: 600;
      margin: 0px 10px;
      white-space: nowrap;
    }

    input[type="text"] {
      width: 300px;
      height: 20px;
      padding: 1px 10px;
      border-color: 1px solid #bfbfbf;
    }

    .retrieval {
      cursor: pointer;
      background-color: #ffbf6b;
      font-weight: 600;
      // border: 0px;
      height: 29px;
      width: 70px;
      border: 1px solid #c7c7c7;
      margin-left: 20px;
      border-radius: 5px;
      white-space: nowrap;
    }
  }

  .entry-content {
    // margin-top: 20px;
    // margin: 20px 15px 0px 15px;

    display: flex;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    overflow-y: auto;
    // overflow-x: hidden;
    box-sizing: border-box;
    padding: 0px 15px;
    position: relative;

    &::-webkit-scrollbar {
      // display: none;
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgb(226, 218, 218);
      border-radius: 10px;
    }

    &::-webkit-scrollbar-track {
      border-radius: 2px;
    }

    .left {
      // flex: 1 1 1;
      // background: skyblue;
      // overflow-y: auto;
      // overflow-x: hidden;
      width: 50%;
      // height: 100%;

      min-width: 500px;
      padding-top: 10px;



      .result-num {
        padding-left: 5px;
        font-size: 16px;
        font-weight: bold;
      }

      .main-content-list {
        li {
          margin: 15px 5px 0px 5px;
          cursor: default;
        }

        .record-title {
          // color: #1d7dd7;
          // text-decoration: underline;
          // cursor: pointer;
          border-bottom: 1px solid #e5eaf9;

          .title-name {
            display: flex;
            align-items: end;
            font-size: 20px;
            font-weight: 600;
            color: #2f19ab;

            .distance {
              font-size: 12px;
              zoom: 0.8;
              color: #2f9634;
              transform: translateX(5px);
              display: inline-block;
            }
          }

          .category {
            font-size: 12px;
            color: #2f9634;
          }
        }

        .record-content-box {
          // display: flex;
          flex-wrap: wrap;
          overflow: hidden;
          transition: max-height 1s linear;

          .record-content-box-item1 {
            display: flex;
          }

          .literature {
            // flex: 1 1 100%;
            width: 100%;
          }

          .menu {
            flex: 0 0 auto;
            width: 180px;

            .anchor {
              a {
                color: #C4C6C8;
                padding: 3px 0px 3px 10px;
                display: inline-block;
                font-size: 16px;

                &:hover {
                  color: skyblue;
                }
              }
            }
          }

          .menu-content {
            flex: 1 1 auto;
          }
        }

        .record-omit-content {
          border-bottom: 1px solid #e5eaf9;
          margin-top: 20px;
          font-size: 16px;

          // font-weight: 500;
          .prop-title {
            font-weight: bold;
          }

          .prop-content {
            padding: 10px 0px 20px 15px;
            color: #767F8E;
            line-height: 2;
            white-space: pre-line;
          }



          // font-family: "宋体", "楷体", sans-serif;
          &:first-child {
            margin: 0px;
          }
        }

        .record-edges {
          color: #a1a1a1;
          font-size: 10px;
        }
      }

      .pagination {
        text-align: center;

        /deep/ .el-pagination {
          text-align: left;
          padding-left: 0px;

          .btn-next,
          .btn-prev {
            background: white;
            padding-left: 8px;
            padding-right: 8px;

            &:hover {
              color: skyblue;
            }
          }

          .el-pager {
            li {
              background: white;
            }
          }
        }
      }
    }

    .right {
      width: 50%;
      min-width: 300px;
      // flex: 0 0 1;
      // background: orange;
      padding: 10px 5px 5px 30px;
      position: sticky;
      /* 使右边盒子固定 */
      top: 0;

      /* 顶部固定 */
      .aside {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;

        .pdf {
          position: absolute;
          top: -18px;
          width: calc(100% + 20px);
          min-height: 500px;
          height: calc(100vh - 80px);
          // overflow: auto;
          overflow: hidden;
          background: white;
          // opacity: 0.8;
          box-shadow: 0 0 10px white;
          padding: 10px;

          .pdf2js-close-icon {
            position: absolute;
            left: 50px;
            top: 18px;
            z-index: 10;
            cursor: pointer;
            font-size: 20px;
          }
        }

        /deep/.markdown {
          ul {}
        }

        .aside-title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 10px;
          flex: 0 0 auto;
        }

        .el-collapse {
          flex: 1 1 auto;
          overflow: auto;

          &::-webkit-scrollbar {
            display: none;
          }

        }

        .aside-content {
          li {
            // color: #a0a0a0;
          }
        }
      }

      .knowledge-graph-window {
        width: 100%;
        height: 600px;

        iframe {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>

<style lang="less">
.pdf-dialog {
  margin-top: 50vh !important;
  background-color: #F9F9F8;
  border-radius: 10px;

  margin-left: 10vw;

  .el-dialog__header {
    display: none;
  }

  .view-pdf {
    margin-top: 20px;
    color: red;
    cursor: pointer;
    display: inline-block;
  }

  .reference-source {
    color: red;
    font-size: 20px;
    margin-left: 20px;
  }

  .el-dialog__body {
    // background-color: #F9F9F8;
    // border-radius: 10px;
  }
}
</style>