|
@@ -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>
|