ebiz-ai-knowledge-manage/src/views/knowledge/detail/components/SearchSetting/Index.vue

<template>
  <div>
    <el-drawer
      title="检索设置"
      :visible.sync="visible"
      size="40%"
      @close="handleClose"
      :wrapperClosable="false"
    >
      <el-form ref="form" :model="form" label-width="80%" label-position="top">
        <el-row>
          <el-col :span="10">
            <el-form-item label="Embedding模型">
              <el-select
                v-model="form.embeddingModel"
                @change="getModel"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in modelList"
                  :key="item.model"
                  :label="item.model"
                  :value="item.model"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-collapse v-model="searchMethod" accordion>
          <el-collapse-item
            v-for="(item, index) in settingList"
            :key="item.name"
            :title="item.name"
            :name="index"
          >
            <template slot="title">
              <div class="flex align-items-c">
                <img
                  :src="`${static}/loadImage/knowledge-5.png`"
                  alt=""
                  style="height: 20px"
                />
                <div class="ml10">
                  <p class="fwb label fs15">
                    {{ item.name }}
                    <span v-if="index === 2" class="point fs12 ml10">推荐</span>
                  </p>
                  <p class="desc">{{ item.desc }}</p>
                </div>
              </div>
            </template>
            <div>
              <search-form
                ref="searchForm"
                :searchMethod="searchMethod"
                :embeddingItem="embeddingItem"
                @handleClose="handleClose"
              ></search-form>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <div class="demo-drawer__footer mt10 text-right">
        <el-button @click="handleCancel" size="medium">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" size="medium"
          >保存</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>
<script>
import SearchForm from '@/views/knowledge/detail/components/SearchSetting/SearchForm.vue'
import { getEmbeddingModels } from '@/api/knowledge/hit-test'

export default {
  name: 'SearchSetting',
  components: { SearchForm },
  props: {},
  data() {
    return {
      static: process.env.VUE_APP_STATIC,
      // 0-向量检索 1-全文检索 2-混合检索
      searchMethod: 0,
      embeddingItem: {},
      visible: false,
      form: {
        embeddingModel: '',
        modelOpen: false
      },
      modelList: [],
      activeIndex: 0,
      settingList: [
        {
          name: '向量检索',
          desc: '通过生成查询嵌入并查询与其向量表示最相似的文本分段'
        },
        {
          name: '全文检索',
          desc:
            '索引文档中的所有词汇，从而允许用户查询任意词汇，并返回包含这些词汇的文本片段'
        },
        {
          name: '混合检索',
          desc:
            '同时执行全文检索和向量检索，并应用重排序步骤，从两类查询结果中选择匹配用户问题的最佳结果，用户可以选择设置权重或配置重新排序模型。'
        }
      ],
      marks: {
        // 20: '0',
        // 80: '100'
      }
    }
  },
  created() {
    this.getModelList()
  },
  methods: {
    // 获取Embedding模型列表
    getModelList() {
      getEmbeddingModels().then(res => {
        if (res) {
          const { content } = res.content
          this.modelList = content.flatMap(item => item.models)
        }
      })
    },
    init() {
      this.visible = true
    },
    handleClose() {
      this.visible = false
    },
    handleSubmit() {
      this.$refs.searchForm[this.searchMethod].submitData()
    },
    handleCancel() {
      this.visible = false
    },
    getModel() {
      this.embeddingItem = this.modelList.find(
        item => item.model === this.form.embeddingModel
      )
    }
  }
}
</script>

<style scoped lang="scss">
.point {
  color: #296dff;
  border-radius: 4px;
  border: 1px solid #296dff;
  padding: 2px 5px;
}
.label {
  color: #354052;
  font-size: 15px;
}
.desc {
  color: #676f83;
}

/deep/ .el-collapse-item__header {
  height: 85px;
  line-height: 23px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  padding: 10px 20px;
  margin-top: 10px;
}
/deep/ .is-active {
  .el-collapse-item__header {
    background-color: #f5f5fb;
    border-top: 1px solid #4f47f5;
    border-left: 1px solid #4f47f5;
    border-right: 1px solid #4f47f5;
    border-radius: 4px 4px 0 0;
  }
}
</style>