399 lines
9.9 KiB
Vue
399 lines
9.9 KiB
Vue
<template>
|
|
<div class="query-section" :class="{ collapsed: !visible }" :style="style">
|
|
<div class="query-section-layout">
|
|
<!-- 主内容区域 -->
|
|
<div class="query-main">
|
|
<div class="query-input-container">
|
|
<div class="search-input-wrapper">
|
|
<a-textarea
|
|
v-model:value="queryText"
|
|
placeholder="输入查询内容..."
|
|
:auto-size="{ minRows: 2, maxRows: 6 }"
|
|
class="search-textarea"
|
|
@press-enter.prevent="onQuery"
|
|
/>
|
|
<div class="search-actions">
|
|
<a-switch
|
|
v-model:checked="showRawData"
|
|
checked-children="格式化"
|
|
un-checked-children="原始"
|
|
/>
|
|
<a-button
|
|
@click="onQuery"
|
|
:loading="searchLoading"
|
|
class="search-button"
|
|
type="primary"
|
|
:disabled="!queryText.trim()"
|
|
:icon=h(SearchOutlined)
|
|
shape="circle"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="query-results" v-if="queryResult">
|
|
<!-- 原始数据显示 -->
|
|
<div v-if="!showRawData" class="result-raw">
|
|
<pre>{{ JSON.stringify(queryResult, null, 2) }}</pre>
|
|
</div>
|
|
|
|
<!-- 格式化显示 -->
|
|
<div v-else>
|
|
<!-- LightRAG 返回字符串格式 -->
|
|
<div v-if="typeof queryResult === 'string'" class="result-text">
|
|
{{ queryResult }}
|
|
</div>
|
|
|
|
<!-- Chroma/Milvus 返回列表格式 -->
|
|
<div v-else-if="Array.isArray(queryResult)" class="result-list">
|
|
<div v-if="queryResult.length === 0" class="no-results">
|
|
<p>未找到相关结果</p>
|
|
</div>
|
|
<div v-else>
|
|
<div class="result-summary">
|
|
<strong>检索到 {{ queryResult.length }} 个相关文档块：</strong>
|
|
</div>
|
|
<div
|
|
v-for="(chunk, index) in queryResult"
|
|
:key="index"
|
|
class="result-item"
|
|
>
|
|
<div class="result-header">
|
|
<span class="result-index">#{{ index + 1 }}</span>
|
|
<span v-if="chunk.score" class="result-score">
|
|
相似度: {{ (chunk.score * 100).toFixed(2) }}%
|
|
</span>
|
|
<span v-if="chunk.rerank_score" class="result-rerank-score">
|
|
重排序分数: {{ (chunk.rerank_score * 100).toFixed(2) }}%
|
|
</span>
|
|
</div>
|
|
|
|
<div class="result-content">
|
|
{{ chunk.content }}
|
|
</div>
|
|
|
|
<div class="result-metadata">
|
|
<span v-if="chunk.metadata?.source" class="metadata-item">
|
|
<strong>来源:</strong> {{ chunk.metadata.source }}
|
|
</span>
|
|
<span v-if="chunk.metadata?.file_id" class="metadata-item">
|
|
<strong>文件ID:</strong> {{ chunk.metadata.file_id }}
|
|
</span>
|
|
<span v-if="chunk.metadata?.chunk_index !== undefined" class="metadata-item">
|
|
<strong>块索引:</strong> {{ chunk.metadata.chunk_index }}
|
|
</span>
|
|
<span v-if="chunk.distance !== undefined" class="metadata-item">
|
|
<strong>距离:</strong> {{ chunk.distance.toFixed(4) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 其他格式（降级处理） -->
|
|
<div v-else class="result-unknown">
|
|
<pre>{{ JSON.stringify(queryResult, null, 2) }}</pre>
|
|
</div>
|
|
</div> <!-- 关闭格式化显示的div -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, h } from 'vue';
|
|
import { useDatabaseStore } from '@/stores/database';
|
|
import { message } from 'ant-design-vue';
|
|
import { queryApi } from '@/apis/knowledge_api';
|
|
import {
|
|
SearchOutlined,
|
|
} from '@ant-design/icons-vue';
|
|
|
|
const store = useDatabaseStore();
|
|
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
style: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
});
|
|
|
|
|
|
const searchLoading = computed(() => store.state.searchLoading);
|
|
const queryResult = ref('');
|
|
const showRawData = ref(true);
|
|
|
|
// 查询测试
|
|
const queryText = ref('');
|
|
|
|
|
|
const onQuery = async () => {
|
|
if (!queryText.value.trim()) {
|
|
message.error('请输入查询内容');
|
|
return;
|
|
}
|
|
|
|
store.state.searchLoading = true;
|
|
|
|
// 从store中获取配置参数
|
|
const queryMeta = { ...store.meta };
|
|
|
|
try {
|
|
const data = await queryApi.queryTest(store.database.db_id, queryText.value.trim(), queryMeta);
|
|
queryResult.value = data;
|
|
|
|
} catch (error) {
|
|
console.error(error);
|
|
message.error(error.message);
|
|
queryResult.value = '';
|
|
} finally {
|
|
store.state.searchLoading = false;
|
|
}
|
|
};
|
|
|
|
// 组件挂载时加载查询参数
|
|
onMounted(() => {
|
|
// 加载查询参数
|
|
store.loadQueryParams();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.query-section {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.query-section-layout {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// 主内容区域
|
|
.query-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.query-input-container {
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
background-color: var(--gray-0);
|
|
}
|
|
|
|
.search-input-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 12px 16px 8px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--gray-200);
|
|
background-color: var(--gray-0);
|
|
box-shadow: 0 1px 3px rgba(23, 23, 23, 0.05);
|
|
transition: border-color 0.5s ease, box-shadow 0.5s ease;
|
|
|
|
&:hover {
|
|
border-color: var(--main-400);
|
|
box-shadow: 0 4px 12px rgba(1, 97, 121, 0.08);
|
|
}
|
|
|
|
:deep(.ant-input) {
|
|
border-radius: 8px;
|
|
background-color: var(--gray-0);
|
|
color: var(--gray-1000);
|
|
outline: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--gray-500);
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.search-button {
|
|
background-color: var(--main-color);
|
|
border-color: var(--main-color);
|
|
box-shadow: 0 2px 4px rgba(1, 97, 121, 0.15);
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: var(--main-bright);
|
|
border-color: var(--main-bright);
|
|
box-shadow: 0 4px 8px rgba(1, 136, 166, 0.25);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
color: var(--gray-0);
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.query-results {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
background-color: var(--gray-25);
|
|
min-height: 0;
|
|
|
|
.result-raw {
|
|
background-color: var(--gray-50);
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
overflow-x: auto;
|
|
|
|
pre {
|
|
margin: 0;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: var(--gray-1000);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
|
|
.result-text {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
line-height: 1.6;
|
|
color: var(--gray-1000);
|
|
}
|
|
|
|
.result-list {
|
|
.no-results {
|
|
text-align: center;
|
|
padding: 32px;
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
.result-summary {
|
|
margin-bottom: 12px;
|
|
padding: 8px 12px;
|
|
background-color: var(--main-50);
|
|
border-left: 3px solid var(--main-color);
|
|
border-radius: 2px;
|
|
color: var(--gray-800);
|
|
}
|
|
|
|
.result-item {
|
|
background-color: var(--gray-0);
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
margin-bottom: 12px;
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
border-color: var(--main-300);
|
|
box-shadow: 0 2px 8px rgba(1, 97, 121, 0.08);
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.result-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--gray-150);
|
|
|
|
.result-index {
|
|
font-weight: 600;
|
|
color: var(--main-color);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.result-score,
|
|
.result-rerank-score {
|
|
font-size: 12px;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
background-color: var(--gray-100);
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.result-rerank-score {
|
|
background-color: var(--stats-warning-bg);
|
|
color: var(--stats-warning-color);
|
|
}
|
|
}
|
|
|
|
.result-content {
|
|
padding: 8px 0;
|
|
line-height: 1.6;
|
|
color: var(--gray-900);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.result-metadata {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--gray-150);
|
|
|
|
.metadata-item {
|
|
font-size: 12px;
|
|
color: var(--gray-700);
|
|
|
|
strong {
|
|
color: var(--gray-500);
|
|
font-weight: 500;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.result-unknown {
|
|
pre {
|
|
background-color: var(--gray-0);
|
|
border: 1px solid var(--gray-200);
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
font-size: 12px;
|
|
color: var(--gray-1000);
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|