Browse Source

召回测试

CzRger 2 months ago
parent
commit
bf6b3a8001

BIN
src/assets/images/file-excel.png


BIN
src/assets/images/file-txt.png


BIN
src/assets/images/file-unknown.png


BIN
src/assets/images/file-word.png


BIN
src/assets/images/knowledge-back-test.png


File diff suppressed because it is too large
+ 1 - 0
src/assets/svg/box.svg


+ 16 - 0
src/style/czr.scss

@@ -406,4 +406,20 @@
   justify-content: center;
   box-sizing: border-box;
   line-height: 1rem;
+}
+.__czr-button {
+  height: 2rem;
+  background: var(--czr-main-color);
+  border-radius: 0.25rem;
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+  font-size: 0.88rem;
+  color: #FFFFFF;
+  &:hover {
+    opacity: 0.75;
+    cursor: pointer;
+  }
 }

+ 190 - 9
src/views/manage/knowledge/documents/test/index.vue

@@ -4,14 +4,68 @@
       召回测试
       <span>根据给定的查询文本测试知识的召回效果</span>
     </div>
-    <div class="flex-1 flex mt-[var(--czr-gap)]">
-      <div class="card rounded-bl-[0.5rem] flex-1"></div>
+    <div class="flex-1 flex mt-[var(--czr-gap)] overflow-hidden">
+      <div class="card rounded-bl-[0.5rem] flex-1 flex flex-col gap-[1rem]">
+        <div class="text-main">
+          <div class="text-head">
+            源文本
+            <div class="__hover">向量检索</div>
+          </div>
+          <div class="text-content">
+            <CzrFormColumn
+              label-width="0px"
+              width="100%"
+              v-model:param="state.text"
+              type="textarea"
+              :transparent="true"
+              :clearable="false"
+            />
+            <div class="__czr-button">测试</div>
+          </div>
+        </div>
+        <div class="flex-1 flex flex flex-col">
+          <div class="__czr-title_1">记录</div>
+          <div class="flex-1">
+            <CzrTable
+              v-loading="state.query.loading"
+              ref="ref_cusTable"
+              :data="state.query.result.data"
+              :head="state.query.head"
+              :total="state.query.result.total"
+              :page="state.query.page.pageNum"
+              :pageSize="state.query.page.pageSize"
+              @handlePage="onPage"
+              @row-click="(row) => state.text = row.p2"
+            >
+            </CzrTable>
+          </div>
+        </div>
+      </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 class="__czr-title_1">{{state.backList.length}} 个召回段落</div>
+        <div class="flex-1 overflow-y-auto flex flex-col gap-[1rem]">
+          <template v-for="(item, index) in state.backList">
+            <div class="back-item" :style="{
+              backgroundColor: `rgba(${colors[index % colors.length]}, 0.05)`
+            }">
+              <div class="back-item-head">
+                <div :style="{
+                  backgroundColor: `rgba(${colors[index % colors.length]}, 1)`
+                }">
+                  <SvgIcon name="box" color="#ffffff" size="15"/>
+                </div>Chunk-138·18 字符</div>
+              <div class="font-bold text-[1.25rem] text-[#21262D] mt-[0.5rem]">{{item.p1}}</div>
+              <div class="text-[0.88rem] text-[#576275] flex flex flex-wrap gap-2 mt-[var(--czr-gap)]">
+                <template v-for="s in item.p2">
+                  <span>#{{s}}</span>
+                </template>
+              </div>
+              <div class="w-full h-[1px] mt-[1rem]" :style="{
+                backgroundColor: `rgba(${colors[index % colors.length]}, 0.2)`
+              }"/>
+              <div class="flex items-center mt-[1rem] gap-[0.5rem] text-[0.75rem] text-[#576275]">
+                <img src="@/assets/images/file-excel.png" class="h-[1rem]"/>口岸服务网事项清单.xlsx
+              </div>
             </div>
           </template>
         </div>
@@ -22,15 +76,33 @@
 
 <script setup lang="ts">
 import {getCurrentInstance, onMounted, reactive, ref} from "vue";
+import {v4} from "uuid";
 
 const emits = defineEmits([])
 const props = defineProps({
   knowledge: <any>{}
 })
 const {proxy}: any = getCurrentInstance()
-const colors = []
+const colors = ['46, 155, 62', '0, 159, 188', '119, 69, 222', '255, 162, 84']
 const state: any = reactive({
-  backList: []
+  text: '',
+  backList: [],
+  query: {
+    loading: false,
+    head: [
+      {value: 'p1', label: '数据源', show: true},
+      {value: 'p2', label: '文本', show: true},
+      {value: 'p1', label: '时间', show: true},
+    ],
+    page: {
+      pageNum: 1,
+      pageSize: 20
+    },
+    result: {
+      total: 0,
+      data: []
+    },
+  },
 })
 const initBack = () => {
   const arr: any = []
@@ -42,8 +114,33 @@ const initBack = () => {
   }
   state.backList = arr
 }
+const onPage = (pageNum, pageSize) => {
+  state.query.page = {
+    pageNum: pageNum,
+    pageSize: pageSize,
+  }
+  const params = {
+    pageNum: state.query.page.pageNum,
+    pageSize: state.query.page.pageSize,
+  }
+  state.query.loading = true
+  setTimeout(() => {
+    state.query.result.total = 100
+    const arr: any = []
+    for (let i = 1; i <= params.pageSize; i++) {
+      const n = (params.pageNum - 1) * params.pageSize + i
+      arr.push({
+        p1: 'APP',
+        p2: v4(),
+      })
+    }
+    state.query.result.data = arr
+    state.query.loading = false
+  }, 1000)
+}
 onMounted(() => {
   initBack()
+  onPage(1, 10)
 })
 </script>
 
@@ -59,4 +156,88 @@ onMounted(() => {
   border: 0.06rem solid #E6E8EA;
   padding: 1rem;
 }
+.text-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.25rem;
+  .text-head {
+    display: flex;
+    align-items: center;
+    padding: 0 1.5rem;
+    background-image: url("@/assets/images/knowledge-back-test.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    height: 3.75rem;
+    border-radius: 0.25rem 0.25rem 0 0;
+    border: var(--czr-border);
+    font-weight: bold;
+    font-size: 1.25rem;
+    color: #303133;
+    >div {
+      margin-left: auto;
+      width: 5.63rem;
+      height: 1.75rem;
+      background: #EBF2FF;
+      border-radius: 0.25rem;
+      border: 1px solid rgba(var(--czr-main-color-rgb),0.3);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      color: var(--czr-main-color);
+    }
+  }
+  .text-content {
+    flex: 1;
+    position: relative;
+    :deep(.czr-form-column) {
+      width: 100%;
+      height: 100%;
+      .el-form-item {
+        width: 100%;
+        height: 100%;
+        .el-textarea__inner {
+          width: 100%;
+          height: 100%;
+          padding: 0.75rem;
+          resize: none;
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
+      }
+    }
+    .__czr-button {
+      position: absolute;
+      right: 1.5rem;
+      bottom: 0.75rem;
+    }
+  }
+}
+
+.back-item {
+  border-radius: 0.5rem;
+  width: 100%;
+  padding: 2rem 1rem 1rem;
+  position: relative;
+  .back-item-head {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    font-size: 0.75rem;
+    color: #576275;
+    gap: 0.5rem;
+    >div:first-child {
+      width: 2.5rem;
+      height: 1.63rem;
+      box-shadow: 0 0.13rem 0.13rem 0 rgba(0,0,0,0.25);
+      border-radius: 0.25rem 0 0.25rem 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 </style>