1486 lines
40 KiB
Vue
1486 lines
40 KiB
Vue
<template>
|
||
<div class="rag-evaluation-container">
|
||
<!-- 顶部工具栏 -->
|
||
<div class="toolbar">
|
||
<div class="toolbar-left">
|
||
<!-- 基准选择 -->
|
||
<div class="benchmark-selector">
|
||
<label class="selector-label">评估基准</label>
|
||
<a-select
|
||
v-model:value="selectedBenchmarkId"
|
||
placeholder="请选择评估基准"
|
||
style="width: 240px"
|
||
@change="onBenchmarkChanged"
|
||
:loading="benchmarksLoading"
|
||
>
|
||
<a-select-option
|
||
v-for="benchmark in availableBenchmarks"
|
||
:key="benchmark.benchmark_id"
|
||
:value="benchmark.benchmark_id"
|
||
>
|
||
{{ benchmark.name }} ({{ benchmark.question_count }} 个问题)
|
||
</a-select-option>
|
||
</a-select>
|
||
<a-button
|
||
type="text"
|
||
size="middle"
|
||
:loading="benchmarksLoading"
|
||
@click="() => loadBenchmarks(true)"
|
||
:icon="h(ReloadOutlined)"
|
||
class="refresh-benchmarks-btn"
|
||
title="刷新评估基准列表"
|
||
/>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="toolbar-right">
|
||
<!-- 检索配置按钮 -->
|
||
<a-button
|
||
size="middle"
|
||
@click="openSearchConfigModal"
|
||
:icon="h(SettingOutlined)"
|
||
/>
|
||
<!-- 开始评估按钮 -->
|
||
<a-button
|
||
type="primary"
|
||
:loading="startingEvaluation"
|
||
@click="startEvaluation"
|
||
:disabled="!selectedBenchmark"
|
||
size="middle"
|
||
>
|
||
开始评估
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 评估结果区域 -->
|
||
<div class="evaluation-results">
|
||
<!-- 模型配置（仅在选中基准且需要时显示） -->
|
||
<div v-if="selectedBenchmark && (selectedBenchmark.has_gold_chunks || selectedBenchmark.has_gold_answers)" class="model-config-section">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-form-item
|
||
:label="selectedBenchmark.has_gold_answers ? '答案生成模型' : '答案生成模型（当前基准无需）'"
|
||
>
|
||
<ModelSelectorComponent
|
||
v-model:model_spec="configForm.answer_llm"
|
||
size="small"
|
||
:disabled="!selectedBenchmark || !selectedBenchmark.has_gold_answers"
|
||
@select-model="(value) => configForm.answer_llm = value"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<a-col :span="12">
|
||
<a-form-item
|
||
:label="selectedBenchmark.has_gold_answers ? '答案评判模型' : '答案评判模型（当前基准无需）'"
|
||
>
|
||
<ModelSelectorComponent
|
||
v-model:model_spec="configForm.judge_llm"
|
||
size="small"
|
||
:disabled="!selectedBenchmark || !selectedBenchmark.has_gold_answers"
|
||
@select-model="(value) => configForm.judge_llm = value"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
|
||
<template v-if="!selectedBenchmark">
|
||
<div class="empty-state">
|
||
<a-empty description="请在顶部选择评估基准或前往基准管理">
|
||
<a-space>
|
||
<a-button @click="$emit('switch-to-benchmarks')">
|
||
前往基准管理
|
||
</a-button>
|
||
</a-space>
|
||
</a-empty>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
|
||
<!-- 历史评估记录 -->
|
||
<div class="history-section">
|
||
<div class="section-header">
|
||
<h4 class="section-title">历史评估记录</h4>
|
||
<a-button
|
||
type="text"
|
||
size="small"
|
||
:loading="refreshingHistory"
|
||
@click="refreshHistory"
|
||
:icon="h('ReloadOutlined')"
|
||
class="refresh-btn"
|
||
>
|
||
刷新
|
||
</a-button>
|
||
</div>
|
||
<a-table
|
||
class="history-table"
|
||
:columns="historyColumns"
|
||
:data-source="evaluationHistory"
|
||
:pagination="{ pageSize: 10 }"
|
||
size="small"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'status'">
|
||
<a-tag :color="getStatusColor(record.status)">
|
||
{{ getStatusText(record.status) }}
|
||
</a-tag>
|
||
</template>
|
||
<template v-else-if="column.key === 'overall_score'">
|
||
<span v-if="record.overall_score !== null">
|
||
<a-tag :color="getScoreTagColor(record.overall_score)">
|
||
{{ (record.overall_score * 100).toFixed(0) }}%
|
||
</a-tag>
|
||
</span>
|
||
<span v-else>-</span>
|
||
</template>
|
||
<template v-else-if="column.key === 'actions'">
|
||
<a-space>
|
||
<a-button
|
||
v-if="record.status === 'completed'"
|
||
type="link"
|
||
size="small"
|
||
@click="viewResults(record.task_id)"
|
||
>
|
||
查看结果
|
||
</a-button>
|
||
<a-popconfirm
|
||
title="确定要删除这条评估记录吗？"
|
||
description="删除后将无法恢复"
|
||
@confirm="deleteEvaluationRecord(record.task_id)"
|
||
ok-text="确定"
|
||
cancel-text="取消"
|
||
>
|
||
<a-button
|
||
type="link"
|
||
size="small"
|
||
danger
|
||
:loading="record.deleting"
|
||
>
|
||
删除
|
||
</a-button>
|
||
</a-popconfirm>
|
||
</a-space>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 评估结果详情模态框 -->
|
||
<a-modal
|
||
v-model:open="resultModalVisible"
|
||
:title="`评估结果 - ${selectedResult?.task_id?.slice(0, 8) || ''}`"
|
||
width="1200px"
|
||
:footer="null"
|
||
>
|
||
<div v-if="resultsLoading" class="loading-container">
|
||
<a-spin size="large" />
|
||
<p style="margin-top: 16px; color: var(--gray-600)">正在加载评估结果...</p>
|
||
</div>
|
||
|
||
<div v-else-if="selectedResult && detailedResults.length > 0">
|
||
<!-- 基本信息 -->
|
||
<a-descriptions title="基本信息" :column="3" size="small" bordered style="margin-bottom: 20px">
|
||
<a-descriptions-item label="任务ID">{{ selectedResult.task_id }}</a-descriptions-item>
|
||
<a-descriptions-item label="状态">
|
||
<a-tag :color="getStatusColor(selectedResult.status)">
|
||
{{ getStatusText(selectedResult.status) }}
|
||
</a-tag>
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="总体评分">
|
||
<span v-if="selectedResult.overall_score !== null">
|
||
<a-tag :color="getScoreTagColor(selectedResult.overall_score)">
|
||
{{ (selectedResult.overall_score * 100).toFixed(1) }}%
|
||
</a-tag>
|
||
</span>
|
||
<span v-else>-</span>
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="总问题数">{{ selectedResult.total_questions }}</a-descriptions-item>
|
||
<a-descriptions-item label="完成数">{{ selectedResult.completed_questions }}</a-descriptions-item>
|
||
<a-descriptions-item label="总耗时">
|
||
<span v-if="evaluationStats.totalDuration">
|
||
{{ formatDuration(evaluationStats.totalDuration) }}
|
||
</span>
|
||
<span v-else>-</span>
|
||
</a-descriptions-item>
|
||
</a-descriptions>
|
||
|
||
<!-- 检索配置和整体评估报告 -->
|
||
<a-row :gutter="16" style="margin-bottom: 20px">
|
||
<!-- 检索配置 -->
|
||
<a-col :span="12" v-if="selectedResult.retrieval_config">
|
||
<a-card size="small" title="检索配置">
|
||
<div class="json-viewer-container">
|
||
<pre class="json-viewer">{{ JSON.stringify(selectedResult.retrieval_config, null, 2) }}</pre>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
|
||
<!-- 整体评估报告 -->
|
||
<a-col :span="selectedResult.retrieval_config ? 12 : 24">
|
||
<a-card size="small" title="整体评估报告">
|
||
<!-- 检索指标 -->
|
||
<div style="margin-bottom: 20px;">
|
||
<h5 style="margin-bottom: 12px; font-size: 14px; font-weight: 500;">检索指标</h5>
|
||
<div v-if="Object.keys(evaluationStats.retrievalMetrics || {}).length > 0">
|
||
<div v-for="(value, key) in evaluationStats.retrievalMetrics" :key="key" class="report-metric">
|
||
<span class="metric-label">{{ getMetricTitle(key) }}：</span>
|
||
<span class="metric-value" :style="{ color: getScoreColor(value) }">
|
||
{{ formatMetricValue(value) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<span v-else class="no-metrics">-</span>
|
||
</div>
|
||
|
||
<!-- 答案准确性 -->
|
||
<div>
|
||
<h5 style="margin-bottom: 12px; font-size: 14px; font-weight: 500;">答案准确性</h5>
|
||
<div class="accuracy-stats">
|
||
<div class="accuracy-item">
|
||
<span class="accuracy-label">正确答案数：</span>
|
||
<span class="accuracy-value">{{ evaluationStats.correctAnswers || 0 }} / {{ evaluationStats.totalQuestions || 0 }}</span>
|
||
</div>
|
||
<div class="accuracy-item">
|
||
<span class="accuracy-label">准确率：</span>
|
||
<span class="accuracy-value" :style="{ color: getScoreColor(evaluationStats.answerAccuracy) }">
|
||
{{ (evaluationStats.answerAccuracy * 100).toFixed(1) }}%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<!-- 详细结果表格 -->
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
|
||
<div>
|
||
<h4 style="margin: 0;">详细评估结果</h4>
|
||
<span style="font-size: 12px; color: var(--gray-600); margin-left: 8px;">
|
||
{{ showErrorsOnly ? `仅显示错误结果（共 ${paginationTotal} 条）` : `显示全部结果（共 ${paginationTotal} 条）` }}
|
||
</span>
|
||
</div>
|
||
<a-button
|
||
type="default"
|
||
size="small"
|
||
@click="toggleErrorOnly"
|
||
:class="{ 'error-only-active': showErrorsOnly }"
|
||
>
|
||
{{ showErrorsOnly ? '显示全部' : '仅查看错误' }}
|
||
</a-button>
|
||
</div>
|
||
<a-table
|
||
:columns="resultColumns"
|
||
:data-source="detailedResults"
|
||
:pagination="{
|
||
current: currentPage,
|
||
pageSize: pageSize,
|
||
total: paginationTotal,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
|
||
onChange: handlePageChange,
|
||
onShowSizeChange: handlePageSizeChange
|
||
}"
|
||
:scroll="{ x: 1000 }"
|
||
size="small"
|
||
:loading="resultsLoading"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'query'">
|
||
<a-tooltip :title="record.query">
|
||
<div class="query-text">{{ record.query }}</div>
|
||
</a-tooltip>
|
||
</template>
|
||
<template v-else-if="column.key === 'generated_answer'">
|
||
<a-tooltip :title="record.generated_answer">
|
||
<div class="answer-text">{{ record.generated_answer || '-' }}</div>
|
||
</a-tooltip>
|
||
</template>
|
||
<template v-else-if="column.key === 'retrieval_score'">
|
||
<div v-if="record.metrics && Object.keys(record.metrics).some(k => k.startsWith('recall') || k.startsWith('precision') || k === 'map' || k === 'ndcg')" class="retrieval-metrics">
|
||
<div v-for="(val, key) in record.metrics" :key="key" class="metric-item">
|
||
<span v-if="key.startsWith('recall') || key.startsWith('precision') || key === 'map' || key === 'ndcg'"
|
||
class="metric-content"
|
||
:class="`metric-${getMetricType(key)}`">
|
||
<span class="metric-name">{{ getMetricShortName(key) }}</span>
|
||
<span class="metric-value">{{ formatMetricValue(val) }}</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<span v-else class="no-metrics">-</span>
|
||
</template>
|
||
<template v-else-if="column.key === 'answer_score'">
|
||
<div v-if="record.metrics && record.metrics.score !== undefined">
|
||
<a-tag :color="record.metrics.score > 0.5 ? 'green' : 'red'">
|
||
{{ record.metrics.score === 1.0 ? '正确' : '错误' }}
|
||
</a-tag>
|
||
<div v-if="record.metrics.reasoning" class="answer-reasoning">
|
||
<a-tooltip :title="record.metrics.reasoning">
|
||
{{ record.metrics.reasoning }}
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
<span v-else>-</span>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
|
||
<div v-else-if="selectedResult" class="empty-results">
|
||
<a-empty description="暂无详细结果数据">
|
||
<a-button @click="viewDetails(selectedResult)">查看基本信息</a-button>
|
||
</a-empty>
|
||
</div>
|
||
</a-modal>
|
||
|
||
<!-- 检索配置弹窗 -->
|
||
<SearchConfigModal
|
||
v-model="searchConfigModalVisible"
|
||
:database-id="databaseId"
|
||
@save="handleSearchConfigSave"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, computed, h } from 'vue';
|
||
import { message } from 'ant-design-vue';
|
||
import { evaluationApi } from '@/apis/knowledge_api';
|
||
import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue';
|
||
import SearchConfigModal from './SearchConfigModal.vue';
|
||
import { SettingOutlined, ReloadOutlined } from '@ant-design/icons-vue';
|
||
import { useTaskerStore } from '@/stores/tasker';
|
||
|
||
const props = defineProps({
|
||
databaseId: {
|
||
type: String,
|
||
required: true
|
||
}
|
||
});
|
||
|
||
const emit = defineEmits(['switch-to-benchmarks']);
|
||
|
||
// 使用任务中心 store
|
||
const taskerStore = useTaskerStore();
|
||
|
||
// 状态
|
||
const selectedBenchmarkId = ref(null);
|
||
const selectedBenchmark = ref(null);
|
||
const benchmarksLoading = ref(false);
|
||
const availableBenchmarks = ref([]);
|
||
const startingEvaluation = ref(false);
|
||
const evaluationHistory = ref([]);
|
||
const resultModalVisible = ref(false);
|
||
const selectedResult = ref(null);
|
||
const detailedResults = ref([]);
|
||
const evaluationStats = ref({});
|
||
const resultsLoading = ref(false);
|
||
const searchConfigModalVisible = ref(false);
|
||
const refreshingHistory = ref(false);
|
||
const showErrorsOnly = ref(false);
|
||
const currentPage = ref(1);
|
||
const pageSize = ref(20);
|
||
const paginationTotal = ref(0);
|
||
const paginationTotalPages = ref(0);
|
||
|
||
|
||
// 评估配置表单（使用知识库默认配置）
|
||
const configForm = reactive({
|
||
answer_llm: '', // 答案生成模型
|
||
judge_llm: '', // 评判模型
|
||
});
|
||
|
||
// 表格列定义
|
||
const resultColumns = computed(() => {
|
||
const columns = [
|
||
{
|
||
title: '问题',
|
||
dataIndex: 'query',
|
||
key: 'query',
|
||
width: 100
|
||
},
|
||
{
|
||
title: '生成答案',
|
||
key: 'generated_answer',
|
||
width: 180
|
||
},
|
||
{
|
||
title: '答案评判',
|
||
key: 'answer_score',
|
||
width: 260
|
||
}
|
||
];
|
||
|
||
// 检查是否有检索指标数据
|
||
const hasRetrievalMetrics = detailedResults.value.some(item => {
|
||
if (!item.metrics) return false;
|
||
return Object.keys(item.metrics).some(key =>
|
||
key.startsWith('recall') ||
|
||
key.startsWith('precision') ||
|
||
key === 'map' ||
|
||
key === 'ndcg'
|
||
);
|
||
});
|
||
|
||
// 如果有检索指标数据，添加检索指标列
|
||
if (hasRetrievalMetrics) {
|
||
columns.splice(2, 0, {
|
||
title: '检索指标',
|
||
key: 'retrieval_score',
|
||
width: 100
|
||
});
|
||
}
|
||
|
||
return columns;
|
||
});
|
||
|
||
const historyColumns = [
|
||
{
|
||
title: '开始时间',
|
||
dataIndex: 'started_at',
|
||
key: 'started_at',
|
||
width: 180,
|
||
customRender: ({ record }) => formatTime(record.started_at)
|
||
},
|
||
{
|
||
title: '评估基准',
|
||
key: 'benchmark_name',
|
||
width: 200,
|
||
customRender: ({ record }) => {
|
||
// 根据 benchmark_id 查找基准名称
|
||
const benchmark = availableBenchmarks.value.find(b => b.benchmark_id === record.benchmark_id);
|
||
return benchmark ? benchmark.name : record.benchmark_id?.slice(0, 8) || '-';
|
||
}
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
key: 'status',
|
||
width: 100
|
||
},
|
||
{
|
||
title: 'Recall@10',
|
||
key: 'recall_10',
|
||
width: 100,
|
||
customRender: ({ record }) => {
|
||
// 使用后端返回的 metrics.recall@10 数据
|
||
if (record.metrics && record.metrics['recall@10'] !== undefined && record.metrics['recall@10'] !== null) {
|
||
const recallValue = record.metrics['recall@10'];
|
||
const displayValue = formatMetricValue(recallValue);
|
||
return h('a-tag', {
|
||
color: getScoreTagColor(recallValue)
|
||
}, displayValue);
|
||
}
|
||
|
||
// 如果是运行中的任务，显示计算中
|
||
if (record.status === 'running') {
|
||
return h('a-tag', {
|
||
color: 'processing'
|
||
}, '计算中');
|
||
}
|
||
|
||
// 已完成但没有 recall@10 数据
|
||
if (record.status === 'completed') {
|
||
return h('a-tag', {
|
||
color: 'default'
|
||
}, '无数据');
|
||
}
|
||
|
||
// 其他情况显示横线
|
||
return h('span', '-');
|
||
}
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'actions',
|
||
width: 150
|
||
}
|
||
];
|
||
|
||
// 计算属性：当前选中的基准对象
|
||
const currentBenchmark = computed(() => {
|
||
if (!selectedBenchmarkId.value || !availableBenchmarks.value) {
|
||
return null;
|
||
}
|
||
return availableBenchmarks.value.find(b => b.benchmark_id === selectedBenchmarkId.value);
|
||
});
|
||
|
||
// 切换错误显示模式
|
||
const toggleErrorOnly = async () => {
|
||
resultsLoading.value = true;
|
||
showErrorsOnly.value = !showErrorsOnly.value;
|
||
currentPage.value = 1; // 切换模式时重置到第一页
|
||
|
||
// 立即加载新的分页数据
|
||
await loadResultsWithPagination();
|
||
};
|
||
|
||
// 处理分页变化
|
||
const handlePageChange = (page, size) => {
|
||
currentPage.value = page;
|
||
if (size !== pageSize.value) {
|
||
pageSize.value = size;
|
||
}
|
||
loadResultsWithPagination();
|
||
};
|
||
|
||
// 处理页面大小变化
|
||
const handlePageSizeChange = (current, size) => {
|
||
currentPage.value = 1;
|
||
pageSize.value = size;
|
||
loadResultsWithPagination();
|
||
};
|
||
|
||
// 加载分页结果
|
||
const loadResultsWithPagination = async () => {
|
||
if (!selectedResult.value) return;
|
||
|
||
try {
|
||
resultsLoading.value = true;
|
||
const response = await evaluationApi.getEvaluationResultsByDb(
|
||
props.databaseId,
|
||
selectedResult.value.task_id,
|
||
{
|
||
page: currentPage.value,
|
||
pageSize: pageSize.value,
|
||
errorOnly: showErrorsOnly.value
|
||
}
|
||
);
|
||
|
||
if (response.message === 'success' && response.data) {
|
||
const resultData = response.data;
|
||
|
||
// 更新详细结果
|
||
detailedResults.value = resultData.interim_results || [];
|
||
|
||
// 更新分页信息
|
||
if (resultData.pagination) {
|
||
paginationTotal.value = resultData.pagination.total;
|
||
paginationTotalPages.value = resultData.pagination.total_pages;
|
||
} else {
|
||
// 兼容旧格式数据
|
||
paginationTotal.value = detailedResults.value.length;
|
||
paginationTotalPages.value = 1;
|
||
}
|
||
|
||
// 更新统计信息
|
||
// 如果是过滤模式，需要基于过滤后的总数计算统计
|
||
if (showErrorsOnly.value) {
|
||
// 在过滤模式下，只计算当前页的统计（避免重复计算）
|
||
evaluationStats.value = {
|
||
...evaluationStats.value,
|
||
totalQuestions: paginationTotal.value,
|
||
// 可以在这里添加其他基于过滤后数据的统计
|
||
};
|
||
} else if (currentPage.value === 1) {
|
||
// 非过滤模式且是第一页时，才计算完整统计
|
||
evaluationStats.value = calculateEvaluationStats(detailedResults.value);
|
||
}
|
||
|
||
// 更新其他基本信息（保持原有的信息不变）
|
||
if (resultData.started_at && resultData.completed_at) {
|
||
const startTime = new Date(resultData.started_at);
|
||
const endTime = new Date(resultData.completed_at);
|
||
evaluationStats.value.totalDuration = (endTime - startTime) / 1000;
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('加载评估结果失败:', error);
|
||
message.error('加载评估结果失败');
|
||
} finally {
|
||
resultsLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 打开检索配置弹窗
|
||
const openSearchConfigModal = () => {
|
||
searchConfigModalVisible.value = true;
|
||
};
|
||
|
||
// 处理检索配置保存
|
||
const handleSearchConfigSave = (config) => {
|
||
console.log('RAG评估中的检索配置已更新:', config);
|
||
// 可以在这里添加配置更新后的处理逻辑
|
||
};
|
||
|
||
// 加载基准列表
|
||
const loadBenchmarks = async (showSuccessMessage = false) => {
|
||
if (!props.databaseId) return;
|
||
|
||
benchmarksLoading.value = true;
|
||
try {
|
||
const response = await evaluationApi.getBenchmarks(props.databaseId);
|
||
|
||
if (response && response.message === 'success' && Array.isArray(response.data)) {
|
||
availableBenchmarks.value = response.data;
|
||
|
||
// 如果没有选中的基准，且有可用基准，默认选中第一个
|
||
if (!selectedBenchmarkId.value && response.data.length > 0) {
|
||
selectedBenchmarkId.value = response.data[0].benchmark_id;
|
||
selectedBenchmark.value = response.data[0];
|
||
} else if (selectedBenchmarkId.value) {
|
||
// 如果之前有选中的基准，重新验证其有效性
|
||
const exists = response.data.some(b => b.benchmark_id === selectedBenchmarkId.value);
|
||
if (!exists) {
|
||
selectedBenchmarkId.value = null;
|
||
selectedBenchmark.value = null;
|
||
} else {
|
||
// 更新选中的基准对象
|
||
selectedBenchmark.value = response.data.find(b => b.benchmark_id === selectedBenchmarkId.value);
|
||
}
|
||
}
|
||
|
||
// 如果是手动刷新，显示成功提示
|
||
if (showSuccessMessage) {
|
||
message.success(`已刷新，找到 ${response.data.length} 个评估基准`);
|
||
}
|
||
} else {
|
||
console.error('响应格式不符合预期:', response);
|
||
message.error('基准数据格式错误');
|
||
}
|
||
} catch (error) {
|
||
console.error('加载评估基准失败:', error);
|
||
message.error('加载评估基准失败');
|
||
} finally {
|
||
benchmarksLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 下拉框选择变化
|
||
const onBenchmarkChanged = (benchmarkId) => {
|
||
const benchmark = availableBenchmarks.value.find(b => b.benchmark_id === benchmarkId);
|
||
selectedBenchmark.value = benchmark || null;
|
||
};
|
||
|
||
// 刷新历史评估记录
|
||
const refreshHistory = async () => {
|
||
refreshingHistory.value = true;
|
||
try {
|
||
await loadEvaluationHistory();
|
||
message.success('历史记录已刷新');
|
||
} catch (error) {
|
||
console.error('刷新历史记录失败:', error);
|
||
message.error('刷新历史记录失败');
|
||
} finally {
|
||
refreshingHistory.value = false;
|
||
}
|
||
};
|
||
|
||
|
||
// 开始评估
|
||
const startEvaluation = async () => {
|
||
if (!selectedBenchmark.value) {
|
||
message.error('请先选择评估基准');
|
||
return;
|
||
}
|
||
|
||
startingEvaluation.value = true;
|
||
|
||
// 只传递模型配置，检索配置由服务器从知识库读取
|
||
const params = {
|
||
benchmark_id: selectedBenchmark.value.benchmark_id,
|
||
model_config: {
|
||
answer_llm: configForm.answer_llm, // 传递答案生成模型
|
||
judge_llm: configForm.judge_llm // 传递评判模型
|
||
}
|
||
};
|
||
|
||
try {
|
||
const response = await evaluationApi.runEvaluation(props.databaseId, params);
|
||
|
||
if (response.message === 'success') {
|
||
message.success('评估任务已开始');
|
||
loadEvaluationHistory();
|
||
// 刷新任务中心的任务列表
|
||
taskerStore.loadTasks();
|
||
} else {
|
||
message.error(response.message || '启动评估失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('启动评估失败:', error);
|
||
message.error('启动评估失败');
|
||
} finally {
|
||
startingEvaluation.value = false;
|
||
}
|
||
};
|
||
|
||
|
||
// 加载评估历史
|
||
const loadEvaluationHistory = async () => {
|
||
try {
|
||
const response = await evaluationApi.getEvaluationHistory(props.databaseId);
|
||
if (response.message === 'success') {
|
||
evaluationHistory.value = response.data || [];
|
||
}
|
||
} catch (error) {
|
||
console.error('加载评估历史失败:', error);
|
||
message.error('加载评估历史失败');
|
||
}
|
||
};
|
||
|
||
|
||
// 计算评估统计信息
|
||
const calculateEvaluationStats = (results) => {
|
||
if (!results || results.length === 0) {
|
||
return {};
|
||
}
|
||
|
||
const stats = {
|
||
totalQuestions: results.length,
|
||
retrievalMetrics: {},
|
||
answerAccuracy: 0,
|
||
correctAnswers: 0,
|
||
averageResponseTime: 0,
|
||
totalResponseTime: 0
|
||
};
|
||
|
||
const metricSums = {};
|
||
const metricCounts = {};
|
||
|
||
results.forEach(item => {
|
||
// 答案准确率
|
||
if (item.metrics && item.metrics.score !== undefined) {
|
||
if (item.metrics.score > 0.5) {
|
||
stats.correctAnswers++;
|
||
}
|
||
}
|
||
|
||
// 检索指标统计
|
||
if (item.metrics) {
|
||
Object.keys(item.metrics).forEach(key => {
|
||
if (key.startsWith('recall') || key.startsWith('precision') || key === 'map' || key === 'ndcg') {
|
||
if (!metricSums[key]) {
|
||
metricSums[key] = 0;
|
||
metricCounts[key] = 0;
|
||
}
|
||
metricSums[key] += item.metrics[key];
|
||
metricCounts[key]++;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// 计算平均值
|
||
Object.keys(metricSums).forEach(key => {
|
||
stats.retrievalMetrics[key] = metricSums[key] / metricCounts[key];
|
||
});
|
||
|
||
// 计算答案准确率
|
||
stats.answerAccuracy = stats.totalQuestions > 0 ? (stats.correctAnswers / stats.totalQuestions) : 0;
|
||
|
||
return stats;
|
||
};
|
||
|
||
// 查看结果
|
||
const viewResults = async (taskId) => {
|
||
try {
|
||
resultsLoading.value = true;
|
||
|
||
// 重置分页状态
|
||
currentPage.value = 1;
|
||
showErrorsOnly.value = false;
|
||
|
||
// 先获取基本信息（不分页）
|
||
const response = await evaluationApi.getEvaluationResultsByDb(props.databaseId, taskId);
|
||
|
||
if (response.message === 'success' && response.data) {
|
||
const resultData = response.data;
|
||
|
||
// 从历史记录中找到对应的任务信息，如果没有则使用API返回的数据
|
||
selectedResult.value = evaluationHistory.value.find(r => r.task_id === taskId) || {
|
||
task_id: resultData.task_id,
|
||
status: resultData.status,
|
||
started_at: resultData.started_at,
|
||
completed_at: resultData.completed_at,
|
||
total_questions: resultData.total_questions || 0,
|
||
completed_questions: resultData.completed_questions || 0,
|
||
overall_score: resultData.overall_score,
|
||
retrieval_config: resultData.retrieval_config
|
||
};
|
||
|
||
// 如果是从历史记录获取的，确保也有 retrieval_config
|
||
if (selectedResult.value && !selectedResult.value.retrieval_config) {
|
||
selectedResult.value.retrieval_config = resultData.retrieval_config;
|
||
}
|
||
|
||
// 打开模态框
|
||
resultModalVisible.value = true;
|
||
|
||
// 加载分页数据
|
||
await loadResultsWithPagination();
|
||
} else {
|
||
message.error('获取评估结果失败：数据格式错误');
|
||
}
|
||
} catch (error) {
|
||
console.error('获取评估结果失败:', error);
|
||
message.error('获取评估结果失败');
|
||
} finally {
|
||
resultsLoading.value = false;
|
||
}
|
||
};
|
||
|
||
|
||
// 删除评估记录
|
||
const deleteEvaluationRecord = async (taskId) => {
|
||
try {
|
||
// 找到对应的记录并设置loading状态
|
||
const record = evaluationHistory.value.find(r => r.task_id === taskId);
|
||
if (record) {
|
||
record.deleting = true;
|
||
}
|
||
|
||
const response = await evaluationApi.deleteEvaluationResultByDb(props.databaseId, taskId);
|
||
if (response.message === 'success') {
|
||
message.success('删除成功');
|
||
// 重新加载评估历史
|
||
await loadEvaluationHistory();
|
||
}
|
||
} catch (error) {
|
||
console.error('删除评估记录失败:', error);
|
||
message.error('删除评估记录失败');
|
||
} finally {
|
||
// 清除loading状态
|
||
const record = evaluationHistory.value.find(r => r.task_id === taskId);
|
||
if (record) {
|
||
record.deleting = false;
|
||
}
|
||
}
|
||
};
|
||
|
||
// 工具函数
|
||
const truncateText = (text, maxLength) => {
|
||
if (!text) return '';
|
||
return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
|
||
};
|
||
|
||
const formatTime = (timeStr) => {
|
||
if (!timeStr) return '-';
|
||
const date = new Date(timeStr);
|
||
return date.toLocaleString('zh-CN');
|
||
};
|
||
|
||
const getScoreColor = (score) => {
|
||
if (score >= 0.8) return 'var(--color-success-500)';
|
||
if (score >= 0.6) return 'var(--color-warning-500)';
|
||
return 'var(--color-error-500)';
|
||
};
|
||
|
||
const getScoreTagColor = (score) => {
|
||
if (score >= 0.8) return 'success';
|
||
if (score >= 0.6) return 'warning';
|
||
return 'error';
|
||
};
|
||
|
||
const getStatusColor = (status) => {
|
||
const colors = {
|
||
running: 'blue',
|
||
completed: 'green',
|
||
failed: 'red',
|
||
paused: 'orange'
|
||
};
|
||
return colors[status] || 'default';
|
||
};
|
||
|
||
const getStatusText = (status) => {
|
||
const texts = {
|
||
running: '运行中',
|
||
completed: '已完成',
|
||
failed: '失败',
|
||
paused: '已暂停'
|
||
};
|
||
return texts[status] || status;
|
||
};
|
||
|
||
const getMetricTitle = (key) => {
|
||
const titles = {
|
||
precision: '精确率',
|
||
recall: '召回率',
|
||
map: '平均精度',
|
||
ndcg: 'NDCG',
|
||
bleu: 'BLEU分数',
|
||
rouge: 'ROUGE分数',
|
||
answer_correctness: '答案准确性',
|
||
score: '评分',
|
||
reasoning: '理由',
|
||
overall_score: '综合评分'
|
||
};
|
||
// 处理 recall@k
|
||
if (key.startsWith('recall@')) return `召回率 (${key.split('@')[1]})`;
|
||
if (key.startsWith('precision@')) return `精确率 (${key.split('@')[1]})`;
|
||
|
||
return titles[key] || key;
|
||
};
|
||
|
||
// 获取指标类型
|
||
const getMetricType = (key) => {
|
||
if (key.startsWith('recall')) return 'recall';
|
||
if (key.startsWith('precision')) return 'precision';
|
||
if (key === 'map') return 'map';
|
||
if (key === 'ndcg') return 'ndcg';
|
||
return 'default';
|
||
};
|
||
|
||
// 获取指标短名称
|
||
const getMetricShortName = (key) => {
|
||
if (key.startsWith('recall@')) return `R@${key.split('@')[1]}`;
|
||
if (key.startsWith('precision@')) return `P@${key.split('@')[1]}`;
|
||
if (key === 'precision') return 'Precision';
|
||
if (key === 'recall') return 'Recall';
|
||
if (key === 'map') return 'MAP';
|
||
if (key === 'ndcg') return 'NDCG';
|
||
return key;
|
||
};
|
||
|
||
// 格式化指标值
|
||
const formatMetricValue = (val) => {
|
||
if (typeof val !== 'number') return '-';
|
||
// 检索指标（recall, precision, f1 等）范围是 0.0-1.0，统一转换为百分比
|
||
if (val <= 1) return (val * 100).toFixed(1) + '%';
|
||
return val.toFixed(3);
|
||
};
|
||
|
||
// 格式化持续时间
|
||
const formatDuration = (seconds) => {
|
||
if (seconds < 60) {
|
||
return `${Math.round(seconds)}秒`;
|
||
} else if (seconds < 3600) {
|
||
const minutes = Math.floor(seconds / 60);
|
||
const remainingSeconds = Math.round(seconds % 60);
|
||
return `${minutes}分${remainingSeconds}秒`;
|
||
} else {
|
||
const hours = Math.floor(seconds / 3600);
|
||
const minutes = Math.floor((seconds % 3600) / 60);
|
||
return `${hours}小时${minutes}分`;
|
||
}
|
||
};
|
||
|
||
|
||
// 组件挂载时加载数据
|
||
onMounted(() => {
|
||
loadBenchmarks();
|
||
loadEvaluationHistory();
|
||
});
|
||
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.rag-evaluation-container {
|
||
height: 100%;
|
||
background: var(--gray-0);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
// 顶部工具栏
|
||
.toolbar {
|
||
padding: 12px 16px;
|
||
background: var(--gray-0);
|
||
border-bottom: 1px solid var(--gray-200);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
|
||
.toolbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.benchmark-selector {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
|
||
.selector-label {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--gray-700);
|
||
margin: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.refresh-benchmarks-btn {
|
||
color: var(--gray-600);
|
||
}
|
||
}
|
||
|
||
.toolbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
}
|
||
|
||
// 评估内容区域
|
||
.evaluation-content {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
padding: 10px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
|
||
// 评估结果区域
|
||
.evaluation-results {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
overflow: auto;
|
||
padding: 16px;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
border-radius: 3px;
|
||
|
||
&:hover {
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-state {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--gray-0);
|
||
border-radius: 8px;
|
||
border: 1px solid var(--gray-200);
|
||
}
|
||
|
||
.progress-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
|
||
.progress-stats {
|
||
flex: 1;
|
||
margin-right: 24px;
|
||
min-width: 300px;
|
||
|
||
.ant-statistic {
|
||
margin-bottom: 12px;
|
||
|
||
.ant-statistic-title {
|
||
font-size: 13px;
|
||
color: var(--gray-600);
|
||
}
|
||
|
||
.ant-statistic-content {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.progress-actions {
|
||
flex-shrink: 0;
|
||
padding-top: 24px;
|
||
}
|
||
}
|
||
|
||
.query-text {
|
||
font-size: 12px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 4;
|
||
line-height: 1.5;
|
||
word-wrap: break-word;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.answer-text {
|
||
font-size: 12px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 4;
|
||
line-height: 1.5;
|
||
word-wrap: break-word;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: var(--gray-700);
|
||
}
|
||
|
||
.log-time {
|
||
color: var(--gray-500);
|
||
margin-left: 8px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
|
||
// 优化表格样式
|
||
:deep(.ant-table) {
|
||
.ant-table-tbody > tr > td {
|
||
padding: 12px 12px;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.ant-table-thead > tr > th {
|
||
padding: 8px 12px;
|
||
font-weight: 500;
|
||
background-color: var(--gray-50);
|
||
}
|
||
}
|
||
|
||
// 优化卡片间距
|
||
:deep(.ant-card) {
|
||
.ant-card-head {
|
||
padding: 8px 16px;
|
||
min-height: 40px;
|
||
|
||
.ant-card-head-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
padding: 4px 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 优化时间线样式
|
||
:deep(.ant-timeline) {
|
||
.ant-timeline-item-content {
|
||
margin-left: 20px;
|
||
padding-bottom: 12px;
|
||
}
|
||
}
|
||
|
||
// 优化描述列表样式
|
||
:deep(.ant-descriptions) {
|
||
.ant-descriptions-item-label {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--gray-600);
|
||
}
|
||
|
||
.ant-descriptions-item-content {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
// 优化表单项间距
|
||
:deep(.ant-form) {
|
||
.ant-form-item {
|
||
margin-bottom: 16px;
|
||
}
|
||
}
|
||
|
||
:deep(.ant-form-inline) {
|
||
.ant-form-item {
|
||
margin-right: 24px;
|
||
margin-bottom: 16px;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 优化模型配置表单项
|
||
.model-config-section {
|
||
padding: 6px 8px;
|
||
background: var(--gray-10);
|
||
border-radius: 8px;
|
||
border: 1px solid var(--gray-150);
|
||
|
||
.ant-form-item {
|
||
margin-bottom: 0;
|
||
|
||
.ant-form-item-label {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.ant-form-item-extra {
|
||
font-size: 12px;
|
||
color: var(--gray-500);
|
||
margin-top: 4px;
|
||
}
|
||
}
|
||
|
||
// 为模型配置部分内的列添加特定样式
|
||
.ant-col {
|
||
&:not(:last-child) .ant-form-item {
|
||
padding-right: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 优化统计数字样式
|
||
:deep(.ant-row) {
|
||
.ant-col {
|
||
.ant-statistic {
|
||
padding: 12px;
|
||
border: 1px solid var(--gray-200);
|
||
border-radius: 6px;
|
||
text-align: center;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
border-color: var(--gray-300);
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 检索指标样式
|
||
.retrieval-metrics {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
min-height: 20px;
|
||
align-items: center;
|
||
}
|
||
|
||
.metric-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.metric-content {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
|
||
&.metric-recall {
|
||
background-color: var(--color-info-50);
|
||
color: var(--color-info-900);
|
||
}
|
||
|
||
&.metric-precision {
|
||
background-color: var(--color-success-50);
|
||
color: var(--color-success-900);
|
||
}
|
||
|
||
|
||
&.metric-map,
|
||
&.metric-ndcg {
|
||
background-color: var(--color-accent-50);
|
||
color: var(--color-accent-900);
|
||
}
|
||
}
|
||
|
||
.metric-name {
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.4px;
|
||
}
|
||
|
||
.metric-value {
|
||
font-weight: 700;
|
||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||
}
|
||
|
||
.no-metrics {
|
||
color: var(--gray-400);
|
||
font-style: italic;
|
||
}
|
||
|
||
|
||
// 答案推理样式
|
||
.answer-reasoning {
|
||
font-size: 12px;
|
||
color: var(--gray-600);
|
||
margin-top: 8px;
|
||
line-height: 1.4;
|
||
cursor: pointer;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
word-wrap: break-word;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
&:hover {
|
||
color: var(--gray-800);
|
||
}
|
||
}
|
||
|
||
// 加载和空状态样式
|
||
.loading-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.empty-results {
|
||
padding: 40px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
// 评估报告样式
|
||
.evaluation-report {
|
||
margin-bottom: 20px;
|
||
|
||
.report-metric {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--gray-100);
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 14px;
|
||
padding-right: 18px;
|
||
color: var(--gray-700);
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||
}
|
||
}
|
||
|
||
.accuracy-stats {
|
||
.accuracy-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid var(--gray-100);
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.accuracy-label {
|
||
font-size: 14px;
|
||
color: var(--gray-700);
|
||
}
|
||
|
||
.accuracy-value {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.ant-card) {
|
||
.ant-card-head {
|
||
border-bottom: 1px solid var(--gray-200);
|
||
|
||
.ant-card-head-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 历史评估记录区域
|
||
.history-section {
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
|
||
.section-title {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--gray-700);
|
||
}
|
||
|
||
.refresh-btn {
|
||
color: var(--gray-600);
|
||
border: none;
|
||
box-shadow: none;
|
||
padding: 4px 8px;
|
||
height: auto;
|
||
font-size: 13px;
|
||
|
||
&:hover {
|
||
color: var(--color-primary-600);
|
||
background-color: var(--color-primary-50);
|
||
}
|
||
|
||
&:active {
|
||
color: var(--color-primary-700);
|
||
background-color: var(--color-primary-100);
|
||
}
|
||
|
||
.anticon {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.ant-table) {
|
||
border: 1px solid var(--gray-100);
|
||
}
|
||
}
|
||
|
||
// JSON 查看器样式
|
||
.json-viewer-container {
|
||
max-height: 400px;
|
||
overflow: auto;
|
||
|
||
.json-viewer {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Menlo', monospace;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: var(--gray-800);
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
background: var(--gray-50);
|
||
border: 1px solid var(--gray-200);
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
}
|
||
}
|
||
|
||
// 仅查看错误按钮样式
|
||
.error-only-active {
|
||
background-color: var(--color-error-500) !important;
|
||
border-color: var(--color-error-500) !important;
|
||
color: white !important;
|
||
|
||
&:hover {
|
||
background-color: var(--color-error-600) !important;
|
||
border-color: var(--color-error-600) !important;
|
||
}
|
||
|
||
&:focus {
|
||
background-color: var(--color-error-500) !important;
|
||
border-color: var(--color-error-500) !important;
|
||
}
|
||
}
|
||
|
||
</style>
|