ebiz-ai-knowledge-manage/src/views/knowledge/detail/components/documentDetail/QAModel.vue

<template>
  <div class="segment-split-view">
    <div class="segment-list">
      <div
        v-for="(segment, index) in descriptions.data"
        :key="index"
        class="segment-list-item"
        :class="{ active: activeSegment === index }"
        @click="handleSegmentClick(index)"
      >
        <div>
          <span class="el-icon-s-unfold"></span>
          <span class="segment-number">分段 - {{ index + 1 }}</span> ·
          <span v-if="segment.word_count > 0"
            >{{ segment.word_count }}个字符</span
          >
        </div>
        <div class="context">
          <p>Q {{ segment.content }}</p>
          <p>A {{ segment.answer }}</p>
        </div>
        <!--            <div class="segment-keywords flex" v-if="segment.keywords && segment.keywords.length">-->
        <!--              <p v-for="(item, index) in segment.keywords" :key="index" class="mr10">#{{ item }}</p>-->
        <!--            </div>-->
        <!--                  <span class="segment-chars">{{ segment.characters || 0 }} characters</span>-->
      </div>
    </div>

    <!-- 弹窗 -->
    <el-drawer
      title="问答详情"
      :visible.sync="dialogVisible"
      width="50%"
      append-to-body
      :modal="false"
      :before-close="handleClose"
    >
      <div
        v-if="
          activeSegment !== null &&
            descriptions.data &&
            descriptions.data.length > 0
        "
      >
        <div class="segment-content">
          <div>
            <div>
              <p>QUESTION</p>
              <p>{{ descriptions.data[activeSegment].content }}</p>
            </div>
            <div>
              <p>ANSWER</p>
              <p>{{ descriptions.data[activeSegment].answer }}</p>
            </div>
          </div>
          <div
            class="flex align-items-c mt20"
            v-if="
              descriptions.data[activeSegment].keywords &&
                descriptions.data[activeSegment].keywords.length
            "
            style="width: max-content"
          >
            <span>关键词 ：</span>
            <el-tag
              v-for="(item, index) in descriptions.data[activeSegment].keywords"
              :key="index"
              class="mr10"
              size="mini"
              type="primary"
            >
              {{ item }}
            </el-tag>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium"
          >关 闭</el-button
        >
      </span>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: 'QAModel',
  props: {
    visible: Boolean,
    descriptions: {
      type: Object,
      default: () => ({ data: [] })
    }
  },
  data() {
    return {
      activeSegment: null,
      dialogVisible: false
    }
  },
  methods: {
    handleSegmentClick(index) {
      this.activeSegment = index
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped lang="scss">
.segment-split-view {
  display: block;
}

.segment-list {
  width: 100%;
  //height: 400px;
  overflow-y: auto;
}
.context {
  color: #3a3f4f;
  font-size: 14px;
}
.segment-list-item {
  color: #70778d;
  font-size: 14px;
  cursor: pointer;
  padding: 15px 0 20px 15px;
  border-radius: 2px;
  transition: background-color 0.3s;
  border-bottom: 1px solid #f3f5f7;
  &:hover {
    background: #f3f5f7;
  }

  &.active {
    background: #f3f5f7;
  }

  p {
    margin: 15px 0;
  }
  .segment-number {
    //color: #0a84ff;
  }
  .segment-keywords {
    font-weight: 400;
    font-size: 12px;
    color: #70778d;
    flex-wrap: wrap;
    p {
      margin: 0 10px 0 0;
    }
  }
}

.segment-content {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 15px;
  //white-space: pre-wrap;
  line-height: 35px;
  color: #666;
}
</style>