feat: 解析结果默认显示摘要(行数/字段数/空值),点击展开详细表格

This commit is contained in:
mediabot-pt
2026-07-01 13:42:46 +08:00
parent e05d337567
commit 80ffa4f799

View File

@@ -78,9 +78,17 @@
</div>
</template>
<!-- 解析结果 -->
<!-- 解析结果摘要 -->
<div v-if="page.parsed?.matched && page.parsed.extracted?.length">
<el-table :data="page.parsed.extracted" border stripe size="small" max-height="280">
<div style="display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0"
@click="toggleExpand(page)">
<el-icon><component :is="expanded.has(page.url)?'ArrowDown':'ArrowRight'" /></el-icon>
<span class="text-xs">{{ page.parsed.rowCount }}行 · {{ page.parsed.fieldCount }}字段</span>
<span v-if="page.nullCount>0" class="text-xs" style="color:#e6a23c">{{ page.nullCount }} 个空值</span>
<span v-else class="text-xs" style="color:#67c23a">全部有效</span>
<span class="text-xs" style="color:#909399;margin-left:auto">{{ page.parsed.message || '' }}</span>
</div>
<el-table v-if="expanded.has(page.url)" :data="page.parsed.extracted" border stripe size="small" max-height="280" style="margin-top:4px">
<el-table-column type="index" label="#" width="40" />
<el-table-column v-for="col in Object.keys(page.parsed.extracted[0])" :key="col"
:prop="col" :label="col" min-width="90" show-overflow-tooltip>
@@ -90,10 +98,10 @@
</el-table-column>
</el-table>
</div>
<div v-else-if="page.parsed" style="color:#e6a23c;font-size:12px">
<div v-else-if="page.parsed" style="color:#e6a23c;font-size:12px;padding:4px 0">
{{ page.parsed.message || '解析失败' }}
</div>
<div v-else style="color:#909399;font-size:12px">未解析</div>
<div v-else style="color:#909399;font-size:12px;padding:4px 0">未解析</div>
</el-card>
<div v-if="pages.length===0 && !loading" style="text-align:center;padding:60px;color:#909399">暂无访问结果</div>
@@ -122,7 +130,7 @@ const loading = ref(false), parseLoading = ref(false)
const selectedConfigId = ref(null), selectedConfig = ref(null)
const scriptContent = ref(''), saving = ref(false), approving = ref(false), rejecting = ref(false)
const allConfigVersions = ref([]), allResults = ref([])
const pageParsed = ref({}), reparsingUrls = reactive(new Set())
const pageParsed = ref({}), reparsingUrls = reactive(new Set()), expanded = reactive(new Set())
const rawVisible = ref(false), rawLoading = ref(false), rawContent = ref('')
const totalResults = computed(() => allResults.value.length)
@@ -141,7 +149,18 @@ const pages = computed(() => {
p.historyIds.push({ id: r.id, time: (r.createdAt||'').substring(5,16) })
}
for (const [url, parsed] of Object.entries(pageParsed.value)) {
if (map.has(url)) map.get(url).parsed = parsed
if (map.has(url)) {
const p = map.get(url)
p.parsed = parsed
// 计算空值数
if (parsed?.extracted?.length) {
let nulls = 0
for (const row of parsed.extracted) {
for (const v of Object.values(row)) { if (v == null) nulls++ }
}
p.nullCount = nulls
}
}
}
return Array.from(map.values())
})
@@ -219,6 +238,10 @@ const refresh = async () => {
finally { loading.value = false }
}
const toggleExpand = (page) => {
expanded.has(page.url) ? expanded.delete(page.url) : expanded.add(page.url)
}
const viewRaw = async (page) => {
rawVisible.value = true; rawLoading.value = true; rawContent.value = ''
try { rawContent.value = (await api.accessResults.get(page.activeId)).data?.content || '(空)' }