feat:

ui/src/api/dataset.ts

@@ -108,6 +108,22 @@ const listUsableApplication: (
 ) => Promise<Result<Array<ApplicationFormType>>> = (dataset_id, loading) => {
   return get(`${prefix}/${dataset_id}/application`, {}, loading)
 }
+
+/**
+ * 命中测试列表
+ * @param dataset_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getDatasetHitTest: (
+  dataset_id: string,
+  data: any,
+  loading?: Ref<boolean>
+) => Promise<Result<Array<any>>> = (dataset_id, data, loading) => {
+  return get(`${prefix}/${dataset_id}/hit_test`, data, loading)
+}
+
 export default {
   getDateset,
   getAllDateset,
@@ -115,5 +131,6 @@ export default {
   postDateset,
   getDatesetDetail,
   putDateset,
-  listUsableApplication
+  listUsableApplication,
+  getDatasetHitTest
 }

ui/src/components/icons/index.ts

@@ -483,5 +483,26 @@ export const iconMap: any = {
         )
       ])
     }
-  }
+  },
+  'app-hit-test': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M893.515135 43.149508L904.443831 119.556169l76.406661 10.834483a50.403901 50.403901 0 0 1 28.26387 85.356887l-65.477965 65.383752a502.060539 502.060539 0 1 1-216.689668-209.058423l15.450916 8.102309 65.383752-65.477965a50.309688 50.309688 0 0 1 71.036526 0 50.969178 50.969178 0 0 1 14.226147 28.26387zM502.437391 94.212899a427.067071 427.067071 0 1 0 384.671267 241.185022 50.403901 50.403901 0 0 1-33.162941 6.783328l-103.822615-14.979851-9.42129 9.42129A301.481277 301.481277 0 1 1 687.754163 283.3924l9.42129-9.42129L681.912963 169.583218a50.309688 50.309688 0 0 1 3.580091-27.039102l2.9206-5.558561A425.371239 425.371239 0 0 0 502.437391 94.212899z m0 200.956114A226.110958 226.110958 0 1 0 686.812034 390.512467l-91.763363 91.763363a100.619376 100.619376 0 1 1-53.324501-53.230288l91.763363-91.857576a226.110958 226.110958 0 0 0-131.050142-41.830527zM826.058699 103.634189l-67.833287 67.739074L770.002024 254.374827l82.624713 11.305548 67.739074-67.833287-26.66225-3.768516a75.370319 75.370319 0 0 1-62.557365-56.527739l-1.413194-6.971755-3.768516-26.944889z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
 }

ui/src/router/modules/dataset.ts

@@ -37,6 +37,18 @@ const datasetRouter = {
           },
           component: () => import('@/views/document/index.vue')
         },
+        // {
+        //   path: 'hit-test',
+        //   name: 'HitTest',
+        //   meta: {
+        //     icon: 'app-hit-test',
+        //     title: '命中测试',
+        //     active: 'hit-test',
+        //     parentPath: '/dataset/:id',
+        //     parentName: 'DatasetDetail'
+        //   },
+        //   component: () => import('@/views/hit-test/index.vue')
+        // },
         {
           path: 'setting',
           name: 'DatasetSetting',

ui/src/styles/app.scss

@@ -69,6 +69,12 @@ ul {
   background-color: transparent;
 }
 
+.clearfix:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
 h1 {
   font-size: 24px;
 }
@@ -437,4 +443,3 @@ h4 {
     padding: 8px 16px 8px 12px;
   }
 }
-

ui/src/views/hit-test/index.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="hit-test">
+    <LayoutContainer>
+      <template #header>
+        <h3>
+          命中测试
+          <el-text type="info" class="ml-4">针对用户提问调试段落匹配情况，保障回答效果。</el-text>
+        </h3>
+      </template>
+      <div class="hit-test__main p-16" v-loading="loading">
+        <div class="question-title clearfix">
+          <div class="avatar">
+            <AppAvatar>
+              <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+            </AppAvatar>
+          </div>
+          <div class="content">
+            <h4 class="text break-all">111111</h4>
+          </div>
+        </div>
+        <el-scrollbar>
+          <div class="hit-test-height">
+            <el-empty v-if="paragraphDetail.length == 0" description="暂无数据" />
+            <el-row v-else>
+              <el-col
+                :xs="24"
+                :sm="12"
+                :md="8"
+                :lg="8"
+                :xl="6"
+                v-for="(item, index) in paragraphDetail"
+                :key="index"
+                class="p-8"
+              >
+                <CardBox
+                  shadow="hover"
+                  :title="item.title || '-'"
+                  :description="item.content"
+                  class="document-card cursor"
+                  :class="item.is_active ? '' : 'disabled'"
+                  :showIcon="false"
+                  @click="editParagraph(item)"
+                >
+                  <template #footer>
+                    <div class="footer-content flex-between">
+                      <span> {{ numberFormat(item?.content.length) || 0 }} 个 字符 </span>
+                    </div>
+                  </template>
+                </CardBox>
+              </el-col>
+            </el-row>
+          </div>
+        </el-scrollbar>
+      </div>
+
+      <!-- <ParagraphDialog ref="ParagraphDialogRef" :title="title" @refresh="refresh" /> -->
+    </LayoutContainer>
+    <div class="hit-test__operate p-24 pt-0">
+      <el-popover :visible="popoverVisible" placement="top-start" :width="560" trigger="click">
+        <template #reference>
+          <el-button icon="Setting" class="mb-8" @click="popoverVisible = !popoverVisible"
+            >参数设置</el-button
+          >
+        </template>
+        <div class="flex">
+          <div>
+            相似度
+            <el-input-number
+              v-model="formInline.similarity"
+              :min="1"
+              :max="100"
+              controls-position="right"
+              style="width: 100px"
+            />
+            %
+          </div>
+
+          <div class="ml-16">
+            返回 Top
+            <el-input-number
+              v-model="formInline.top_number"
+              :min="1"
+              :max="10"
+              controls-position="right"
+              style="width: 100px"
+            />
+            个分段
+          </div>
+          <el-button class="ml-16" @click="popoverVisible = false">取消</el-button>
+          <el-button type="primary" @click="popoverVisible = false">确认</el-button>
+        </div>
+      </el-popover>
+      <div class="operate-textarea flex">
+        <el-input
+          ref="quickInputRef"
+          v-model="inputValue"
+          type="textarea"
+          placeholder="请输入"
+          :autosize="{ minRows: 1, maxRows: 8 }"
+          @keydown.enter="sendChatHandle($event)"
+        />
+        <div class="operate">
+          <el-button
+            text
+            class="sent-button"
+            :disabled="isDisabledChart || loading"
+            @click="sendChatHandle"
+          >
+            <img v-show="isDisabledChart || loading" src="@/assets/icon_send.svg" alt="" />
+            <img
+              v-show="!isDisabledChart && !loading"
+              src="@/assets/icon_send_colorful.svg"
+              alt=""
+            />
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import documentApi from '@/api/document'
+import paragraphApi from '@/api/paragraph'
+import datasetApi from '@/api/dataset'
+// import ParagraphDialog from './component/ParagraphDialog.vue'
+import { numberFormat } from '@/utils/utils'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import useStore from '@/stores'
+const { paragraph } = useStore()
+const route = useRoute()
+const {
+  params: { id, documentId }
+} = route as any
+
+const ParagraphDialogRef = ref()
+const loading = ref(false)
+const paragraphDetail = ref<any[]>([])
+const title = ref('')
+const inputValue = ref('')
+const formInline = reactive({
+  similarity: 60,
+  top_number: 5
+})
+const popoverVisible = ref(false)
+
+const isDisabledChart = computed(() => !inputValue.value)
+
+function editParagraph(row: any) {
+  title.value = '分段详情'
+  ParagraphDialogRef.value.open(row)
+}
+
+function sendChatHandle(event: any) {
+  if (!event.ctrlKey) {
+    // 如果没有按下组合键ctrl，则会阻止默认事件
+    event.preventDefault()
+    if (!isDisabledChart.value && !loading.value) {
+      getHitTestList()
+    }
+  } else {
+    // 如果同时按下ctrl+回车键，则会换行
+    inputValue.value += '\n'
+  }
+}
+function getHitTestList() {
+  const obj = {
+    query_text: inputValue.value,
+    similarity: formInline.similarity / 100,
+    top_number: formInline.top_number
+  }
+  datasetApi.getDatasetHitTest(id, obj, loading).then((res) => {
+    paragraphDetail.value = res.data
+  })
+}
+
+function refresh(data: any) {
+  if (data) {
+    const index = paragraphDetail.value.findIndex((v) => v.id === data.id)
+    paragraphDetail.value.splice(index, 1, data)
+  } else {
+    paragraphDetail.value = []
+    getHitTestList()
+  }
+}
+
+onMounted(() => {})
+</script>
+<style lang="scss" scoped>
+.hit-test {
+  .question-title {
+    .avatar {
+      float: left;
+    }
+    .content {
+      padding-left: 40px;
+      .text {
+        padding: 6px 0;
+      }
+    }
+  }
+
+  &__operate {
+    .operate-textarea {
+      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+      background-color: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #ffffff;
+      box-sizing: border-box;
+
+      &:has(.el-textarea__inner:focus) {
+        border: 1px solid var(--el-color-primary);
+      }
+
+      :deep(.el-textarea__inner) {
+        border-radius: 8px !important;
+        box-shadow: none;
+        resize: none;
+        padding: 12px 16px;
+      }
+      .operate {
+        padding: 6px 10px;
+        .sent-button {
+          max-height: none;
+          .el-icon {
+            font-size: 24px;
+          }
+        }
+        :deep(.el-loading-spinner) {
+          margin-top: -15px;
+          .circular {
+            width: 31px;
+            height: 31px;
+          }
+        }
+      }
+    }
+  }
+}
+.hit-test {
+  &__header {
+    position: absolute;
+    right: calc(var(--app-base-px) * 3);
+  }
+
+  .hit-test-height {
+    height: calc(var(--app-main-height) - 170px);
+  }
+  .document-card {
+    height: 210px;
+    background: var(--app-layout-bg-color);
+    border: 1px solid var(--app-layout-bg-color);
+    &:hover {
+      background: #ffffff;
+      border: 1px solid var(--el-border-color);
+    }
+    &.disabled {
+      background: var(--app-layout-bg-color);
+      border: 1px solid var(--app-layout-bg-color);
+      :deep(.description) {
+        color: var(--app-border-color-dark);
+      }
+      :deep(.title) {
+        color: var(--app-border-color-dark);
+      }
+    }
+    :deep(.description) {
+      -webkit-line-clamp: 5 !important;
+      height: 110px;
+    }
+    .active-button {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+    }
+  }
+}
+</style>