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

<!-- src/views/knowledge/detail/components/DocumentDrawer.vue -->
<template>
  <el-drawer
    :visible.sync="visible"
    size="80%"
    @close="$emit('update:visible', false)"
  >
    <!-- drawer title -->
    <template #title>
      <div class="flex align-items-">
        <div class="flex">
          <img :src="knowledgePng_2" alt="" style="width: 25px;" />
          <div class="ml10">{{ descriptions.dataset.knowledgeName }}</div>
          <el-tag type="info" class="ml10" size="mini">
            {{ descriptions.dataset.segmentedMode | filterSegmentedMode }}
          </el-tag>
        </div>
        <!--        <el-button class="line-button ml10" size="medium">元数据标注</el-button>-->

        <!--        <div class="ml10">-->
        <!--          <el-button type="primary" size="medium" @click="handleDisplayMetadata"-->
        <!--            >元数据操作</el-button-->
        <!--          >-->
        <!--        </div>-->
      </div>
    </template>
    <knowledgeInfo
      :form="descriptions"
      :fullscreen="true"
      v-if="visible"
    ></knowledgeInfo>
    <!-- 将metadata-operator改为弹窗形式 -->
    <el-drawer
      title="元数据操作"
      :visible.sync="metadataDialogVisible"
      width="600px"
      append-to-body
      :is-show-footer="false"
    >
      <metadata-operator ref="metaDataOpe"></metadata-operator>
    </el-drawer>
  </el-drawer>
</template>

<script>
import knowledgeInfo from '@/views/track/views/knowledge-info/Index.vue'
import TextModel from './TextModel.vue'
import QAModel from './QAModel.vue'
import {
  documentSourceOptions,
  segmentedModeOptionsMap
} from '@/assets/js/utils/utilOptions'
import RenderFile from '@/components/RenderFile/Index.vue'
import knowledgePng_2 from '@/assets/images/konwledge/knowledge-2.png'
import MetadataOperator from '@/views/knowledge/detail/components/metaData/MetadataOperator.vue'

export default {
  components: {
    MetadataOperator,
    TextModel,
    QAModel,
    RenderFile,
    knowledgeInfo
  },
  props: {
    visible: Boolean,
    descriptions: {
      type: Object,
      default: () => ({ data: [] })
    },
    documentDetail: {
      type: Object,
      default: () => ({})
    },
    activeSegment: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      knowledgePng_2,
      localActiveSegment: this.activeSegment,
      documentSourceOptions,
      metadataDialogVisible: false
    }
  },
  watch: {
    activeSegment(newVal) {
      this.localActiveSegment = newVal
    },
    // 深度监听descriptions变化
    descriptions: {
      handler(newVal) {
        // 触发重新渲染的逻辑
        this.$nextTick(() => {
          this.localActiveSegment = 0 // 重置激活分段
          this.$forceUpdate() // 强制刷新（仅在必要情况使用）
        })
      },
      deep: true, // 必须开启深度监听
      immediate: true // 初始化立即执行
    }
  },
  filters: {
    filterDocumentStatus(val) {
      switch (val) {
        case -1:
          return '上传中'
        case 0:
          return '进行中'
        case 1:
          return '完成'
        default:
          return ''
      }
    },
    filterSegmentedMode(val, simpleDesc = false) {
      switch (val) {
        case 0:
          return simpleDesc ? '通用' : '通用分段模式'
        case 1:
          return simpleDesc ? 'Q&A' : ' Q&A分段模式'
        default:
          return ''
      }
    },
    /**
     * 是否使用预处理
     * @param { number } val - 预处理状态
     * @return { string } 预处理状态
     */
    filterUseMineru(val) {
      let item = segmentedModeOptionsMap.find(
        item => item.value === String(val)
      )
      return item ? item.label : '否'
    }
  },
  methods: {
    // 获取文档来源标签
    getDocumentSourceLabel(sourceValue) {
      const source = this.documentSourceOptions.find(
        item => item.value === String(sourceValue)
      )
      return source ? source.label : '未知来源'
    },
    handleDisplayMetadata() {
      this.metadataDialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.drawer-content {
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.file-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .file-icon {
    font-size: 36px;
    margin-right: 15px;
    color: #409eff;
  }

  .file-info {
    h3 {
      margin: 0 0 10px 0;
      font-size: 18px;
      font-weight: bold;
    }
  }
}

.segment-info {
  margin-top: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .segment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    h4 {
      margin: 0;
      font-size: 18px;
      color: #333;
    }
  }

  .rule-card {
    //background: #fff;
    //border-radius: 4px;
    //padding: 15px;
    //box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

    .rule-item {
      margin-bottom: 12px;

      h5 {
        display: inline-block;
        margin: 0 8px 0 0;
        font-weight: bold;
        color: #666;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    .rule-detail-item {
      margin-top: 8px;
      padding: 10px;
      background: #f9f9f9;
      border-radius: 8px;
      border: 1px solid #e0e0e0;
      margin-right: 10px;

      div {
        display: flex;
      }

      p {
        margin: 5px 0;
      }

      .rule-label {
        font-size: 14px;
        color: #606266;
        margin-bottom: 10px;
        width: 100px;
      }

      .rule-value {
        font-size: 14px;
        color: #606266;
        font-weight: 500;
        margin-left: 15px;
        width: 200px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.segment-content-container {
  margin-top: 20px;
}

.segment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;

  h4 {
    margin: 0;
    font-size: 16px;
  }

  .segment-summary {
    color: #606266;
  }
}
</style>