召回测试

src/style/manage.scss

@@ -13,6 +13,14 @@
   font-size: 1.5rem;
   color: #303133;
   margin-left: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  >span {
+    margin-top: 0.25rem;
+    font-weight: 400;
+    font-size: 0.88rem;
+    color: #606266;
+  }
 }
 .bm-filter {
   .el-row {

src/views/manage/knowledge/documents/index.vue

@@ -26,9 +26,9 @@ const emits = defineEmits([])
 const props = defineProps({})
 const {proxy}: any = getCurrentInstance()
 const menus = [
-  {label: '文档', value: 1, icon: 'document', com: defineAsyncComponent(() => import("./document/index.vue"))},
-  {label: '召回测试', value: 2, icon: 'back_1'},
-  {label: '设置', value: 3, icon: 'config'},
+  {label: '文档', value: 'document', icon: 'document', com: defineAsyncComponent(() => import("./document/index.vue"))},
+  {label: '召回测试', value: 'test', icon: 'back_1', com: defineAsyncComponent(() => import("./test/index.vue"))},
+  {label: '设置', value: 'config', icon: 'config'},
 ]
 const state: any = reactive({
   ID: route.params.id,
@@ -40,7 +40,12 @@ const initDetail = () => {
     state.knowledge = {
       ID: state.ID
     }
-    state.menu = menus[0].value
+    const m = route.query.menu
+    if (m && menus.some(v => v.value === m)) {
+      state.menu = m
+    } else {
+      state.menu = menus[0].value
+    }
   } else {
     router.push({name: '4342bfff-1ea8-4f4c-b562-3cdc1fde116f'})
   }

src/views/manage/knowledge/documents/test/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="bm-main-box">
+    <div class="bm-main-box-title">
+      召回测试
+      <span>根据给定的查询文本测试知识的召回效果</span>
+    </div>
+    <div class="flex-1 flex mt-[var(--czr-gap)]">
+      <div class="card rounded-bl-[0.5rem] flex-1"></div>
+      <div class="card rounded-br-[0.5rem] w-[26.25rem] flex flex flex-col space-y-4">
+        <div class="__czr-title_1">0个召回段落</div>
+        <div class="flex-1 overflow-y-auto">
+          <template v-for="item in state.backList">
+            <div class="back-item">
+              <div>{{item}}</div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, onMounted, reactive, ref} from "vue";
+
+const emits = defineEmits([])
+const props = defineProps({
+  knowledge: <any>{}
+})
+const {proxy}: any = getCurrentInstance()
+const colors = []
+const state: any = reactive({
+  backList: []
+})
+const initBack = () => {
+  const arr: any = []
+  for (let i = 0; i < 20; i++) {
+    arr.push({
+      p1: '事项名称":"从事海员外派业务审批”',
+      p2: ['业务', '从事', '事项', '业务', '从事', '事项',]
+    })
+  }
+  state.backList = arr
+}
+onMounted(() => {
+  initBack()
+})
+</script>
+
+<style lang="scss" scoped>
+.bm-main-box {
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+}
+.card {
+  background-color: #FFFFFF;
+  box-shadow: 0rem 0.06rem 0.25rem 0rem rgba(38,110,255,0.2);
+  border: 0.06rem solid #E6E8EA;
+  padding: 1rem;
+}
+</style>