yescent/par
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 适配校验页相同URL默认显示最近1条，可展开查看最近5条

Browse Source
This commit is contained in:
mediabot-pt
2026-06-30 23:04:00 +08:00
parent bf9ad010a1
commit 03addbdb18
1 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/views/AccessResultCheck.vue
View File

@@ -37,14 +37,19 @@
<div style="flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px">
<el-card v-for="page in groupedPages" :key="page.url" shadow="never" size="small">
<template #header>
<div style="display:flex;justify-content:space-between;align-items:center">
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px">
<div style="display:flex;align-items:center;gap:10px">
<strong style="font-size:14px;word-break:break-all">{{ page.url }}</strong>
<el-tag size="small">×{{ page.results.length }}</el-tag>
<el-tag size="small" :type="page.hasUnchecked ? 'warning' : 'info'">
{{ page.visibleCount }}/{{ page.totalCount }}
</el-tag>
<el-tag v-if="page.allValid" size="small" type="success">全部有效</el-tag>
<el-tag v-else-if="page.allInvalid" size="small" type="danger">全部无效</el-tag>
</div>
<div style="display:flex;gap:8px">
<el-button v-if="page.totalCount > 1" size="small" text @click="toggleExpand(page.url)">
{{ expandedUrls.has(page.url) ? '收起' : `显示全部(${page.totalCount}条)` }}
</el-button>
<el-button v-if="page.hasUnchecked" size="small" type="success" @click="batchValidate(page.url, true)">
全部有效
</el-button>
@@ -55,16 +60,17 @@
</div>
</template>
<!-- 该页面的每条结果 -->
<div v-for="r in page.results" :key="r.id"
style="padding:6px 0;border-bottom:1px solid #ebeef5;display:flex;justify-content:space-between;align-items:center">
<!-- 该页面的结果（默认最近1条，展开后最多5条） -->
<div v-for="(r, ri) in page.visibleResults" :key="r.id"
style="padding:6px 0;display:flex;justify-content:space-between;align-items:center"
:style="ri < page.visibleResults.length - 1 ? 'border-bottom:1px solid #ebeef5' : ''">
<div style="display:flex;align-items:center;gap:10px;flex:1;min-width:0">
<el-tag v-if="r.statusCode" size="small" :type="statusTag(r.statusCode)" style="flex-shrink:0">
{{ r.statusCode }}
</el-tag>
<span v-if="r.responseTimeMs != null" class="text-xs" style="color:#909399;flex-shrink:0">{{ r.responseTimeMs }}ms</span>
<span class="text-xs" style="color:#909399;flex-shrink:0">{{ formatTime(r.createdAt) }}</span>
<span v-if="r.clientId" class="text-xs" style="color:#909399;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ r.clientId }}</span>
<span v-if="r.clientId" class="text-xs" style="color:#909399;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px">{{ r.clientId }}</span>
</div>
<div style="display:flex;align-items:center;gap:6px;flex-shrink:0">
<el-tag v-if="r.isValid === true" size="small" type="success">有效</el-tag>
@@ -72,6 +78,12 @@
<el-button size="small" @click="viewContent(r)">查看</el-button>
</div>
</div>
<!-- 收起时提示还有更多 -->
<div v-if="!expandedUrls.has(page.url) && page.totalCount > 5"
style="padding:2px 0;color:#909399;font-size:12px;text-align:center">
还有 {{ page.totalCount - 5 }} 条更早记录
</div>
</el-card>
<div v-if="groupedPages.length === 0 && !loading" style="text-align:center;padding:40px;color:#909399">
@@ -122,8 +134,15 @@ const contentLoading = ref(false)
const viewingResult = ref({})
const viewingContentType = ref('html')
const viewingContent = ref('')
const expandedUrls = reactive(new Set())
const MAX_VISIBLE = 5
// 按 URL 分组（最新在前）
const toggleExpand = (url) => {
if (expandedUrls.has(url)) expandedUrls.delete(url)
else expandedUrls.add(url)
}
// 按 URL 分组（最新在前），默认显示最近5条
const groupedPages = computed(() => {
const map = new Map()
for (const r of allResults.value) {
@@ -135,7 +154,10 @@ const groupedPages = computed(() => {
const allValid = results.length > 0 && results.every(r => r.isValid === true)
const allInvalid = results.length > 0 && results.every(r => r.isValid === false)
const hasUnchecked = results.some(r => r.isValid == null)
return { url, results, allValid, allInvalid, hasUnchecked }
const totalCount = results.length
const visibleResults = expandedUrls.has(url) ? results.slice(0, MAX_VISIBLE) : results.slice(0, 1)
const visibleCount = visibleResults.length
return { url, results, totalCount, visibleResults, visibleCount, allValid, allInvalid, hasUnchecked }
})
})