fix(bugcollect): 修复问题详情页字段映射,新增设备信息/状态管理
- 修复 level/release 字段未显示(原引用了废弃的 type/appVersion) - 新增设备信息卡片(解析 device JSON 展示型号/系统/内存等) - 新增状态管理操作栏(标记已解决/忽略/重新打开/删除) - 修复事件列表使用 exception.value/stacktrace(新格式) - 新增 reopenIssue API 方法 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
这个提交包含在:
父节点
a58d25fc24
当前提交
66414f7987
@ -147,6 +147,10 @@ export const bugCollectApi = {
|
|||||||
return client.put<{ data: void }>(`/bugcollect/v1/issues/${id}/ignore`)
|
return client.put<{ data: void }>(`/bugcollect/v1/issues/${id}/ignore`)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
reopenIssue(id: string | number) {
|
||||||
|
return client.put<{ data: void }>(`/bugcollect/v1/issues/${id}/reopen`)
|
||||||
|
},
|
||||||
|
|
||||||
assignIssue(id: string | number, assignee: string) {
|
assignIssue(id: string | number, assignee: string) {
|
||||||
return client.put<{ data: void }>(`/bugcollect/v1/issues/${id}/assign`, { assignee })
|
return client.put<{ data: void }>(`/bugcollect/v1/issues/${id}/assign`, { assignee })
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,22 +1,42 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="detail">
|
<div v-if="detail">
|
||||||
<el-page-header @back="$router.back()" :content="detail.title" style="margin-bottom: 24px" />
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px">
|
||||||
|
<el-page-header @back="$router.back()" :content="detail.title" />
|
||||||
|
<div style="display:flex;gap:8px">
|
||||||
|
<el-button
|
||||||
|
v-if="detail.status !== 'resolved'"
|
||||||
|
type="success" size="small" :loading="actionLoading"
|
||||||
|
@click="handleResolve"
|
||||||
|
>标记已解决</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="detail.status === 'resolved' || detail.status === 'ignored'"
|
||||||
|
size="small" :loading="actionLoading"
|
||||||
|
@click="handleReopen"
|
||||||
|
>重新打开</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="detail.status !== 'ignored'"
|
||||||
|
size="small" :loading="actionLoading"
|
||||||
|
@click="handleIgnore"
|
||||||
|
>忽略</el-button>
|
||||||
|
<el-button type="danger" size="small" @click="handleDelete">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Basic Info -->
|
<!-- Basic Info -->
|
||||||
<el-card style="margin-bottom:16px">
|
<el-card style="margin-bottom:16px">
|
||||||
<template #header>基本信息</template>
|
<template #header>基本信息</template>
|
||||||
<el-descriptions :column="3" border>
|
<el-descriptions :column="3" border>
|
||||||
<el-descriptions-item label="类型">
|
<el-descriptions-item label="级别">
|
||||||
<el-tag size="small" :type="issueTypeTag(detail.type)">{{ detail.type }}</el-tag>
|
<el-tag size="small" :type="levelTag(detail.level)">{{ detail.level ?? '-' }}</el-tag>
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="平台">{{ detail.platform }}</el-descriptions-item>
|
<el-descriptions-item label="平台">{{ detail.platform ?? '-' }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="状态">
|
<el-descriptions-item label="状态">
|
||||||
<el-tag size="small" :type="detail.isResolved ? 'success' : 'danger'">
|
<el-tag size="small" :type="statusTag(detail.status)">{{ statusLabel(detail.status) }}</el-tag>
|
||||||
{{ detail.isResolved ? '已解决' : '未解决' }}
|
|
||||||
</el-tag>
|
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="应用版本">{{ detail.appVersion ?? '-' }}</el-descriptions-item>
|
<el-descriptions-item label="版本">{{ detail.release ?? '-' }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="总次数">{{ detail.count }}</el-descriptions-item>
|
<el-descriptions-item label="总次数">{{ detail.count }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="影响用户数">{{ detail.affectedUsers ?? 0 }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="负责人">{{ detail.assignee ?? '未分配' }}</el-descriptions-item>
|
||||||
<el-descriptions-item label="指纹">
|
<el-descriptions-item label="指纹">
|
||||||
<span style="font-family:monospace;font-size:12px">{{ detail.fingerprint ?? '-' }}</span>
|
<span style="font-family:monospace;font-size:12px">{{ detail.fingerprint ?? '-' }}</span>
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
@ -25,30 +45,59 @@
|
|||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<!-- Stack Trace (from most recent event) -->
|
<!-- Exception + Stack Trace -->
|
||||||
<el-card v-if="latestStack" style="margin-bottom: 16px">
|
<el-card v-if="latestException" style="margin-bottom:16px">
|
||||||
<template #header>Stack Trace</template>
|
<template #header>
|
||||||
<pre class="stack-trace">{{ latestStack }}</pre>
|
<span>崩溃信息</span>
|
||||||
|
<span v-if="latestException.type" style="margin-left:12px;font-size:13px;color:#909399">
|
||||||
|
{{ latestException.type }}: {{ latestException.value }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<pre class="stack-trace">{{ latestException.stackSymbolicated || latestException.stacktrace || '(无堆栈信息)' }}</pre>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- Device Info -->
|
||||||
|
<el-card v-if="latestDevice" style="margin-bottom:16px">
|
||||||
|
<template #header>设备信息</template>
|
||||||
|
<el-descriptions :column="3" border>
|
||||||
|
<el-descriptions-item label="型号">{{ latestDevice.model ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="厂商">{{ latestDevice.manufacturer ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="系统">
|
||||||
|
{{ latestDevice.osName ?? '' }} {{ latestDevice.osVersion ?? '' }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="语言">{{ latestDevice.locale ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="时区">{{ latestDevice.timezone ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="可用内存">
|
||||||
|
{{ latestDevice.freeMemoryMb != null ? latestDevice.freeMemoryMb + ' MB' : '-' }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="模拟器">{{ latestDevice.isEmulator ? '是' : '否' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="构建类型">{{ latestDevice.buildType ?? '-' }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<!-- Recent Events -->
|
<!-- Recent Events -->
|
||||||
<el-card>
|
<el-card>
|
||||||
<template #header>最近崩溃事件</template>
|
<template #header>最近崩溃事件</template>
|
||||||
<el-table :data="detail.events ?? []" border stripe>
|
<el-table :data="detail.events ?? []" border stripe>
|
||||||
<el-table-column prop="userId" label="用户 ID" width="180" show-overflow-tooltip />
|
<el-table-column label="用户 / 设备 ID" width="180" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">{{ row.userId ?? '-' }}</template>
|
||||||
|
</el-table-column>
|
||||||
<el-table-column prop="platform" label="平台" width="100" />
|
<el-table-column prop="platform" label="平台" width="100" />
|
||||||
<el-table-column prop="appVersion" label="版本" width="110" />
|
<el-table-column prop="release" label="版本" width="110" />
|
||||||
<el-table-column prop="message" label="错误信息" min-width="240" show-overflow-tooltip />
|
<el-table-column prop="environment" label="环境" width="100" />
|
||||||
|
<el-table-column label="错误信息" min-width="240" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">{{ row.exception?.value ?? '-' }}</template>
|
||||||
|
</el-table-column>
|
||||||
<el-table-column prop="createdAt" label="时间" width="170">
|
<el-table-column prop="createdAt" label="时间" width="170">
|
||||||
<template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
|
<template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="堆栈" width="90" align="center">
|
<el-table-column label="堆栈" width="90" align="center">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-popover v-if="row.stack" trigger="click" :width="600">
|
<el-popover v-if="row.exception?.stacktrace" trigger="click" :width="640">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<el-button link type="primary" size="small">查看</el-button>
|
<el-button link type="primary" size="small">查看</el-button>
|
||||||
</template>
|
</template>
|
||||||
<pre class="props-json">{{ row.stackSymbolicated || row.stack }}</pre>
|
<pre class="props-json">{{ row.exception?.stackSymbolicated || row.exception?.stacktrace }}</pre>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
<span v-else style="color:#ccc">-</span>
|
<span v-else style="color:#ccc">-</span>
|
||||||
</template>
|
</template>
|
||||||
@ -62,37 +111,119 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted } from 'vue'
|
import { ref, computed, onMounted } from 'vue'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
import { bugCollectApi, type BugCollectIssueDetail } from '@/api/bugcollect'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { bugCollectApi, type BugCollectIssueDetail, type BugCollectExceptionInfo } from '@/api/bugcollect'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
const detail = ref<BugCollectIssueDetail | null>(null)
|
const detail = ref<BugCollectIssueDetail | null>(null)
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
const actionLoading = ref(false)
|
||||||
|
|
||||||
const latestStack = computed(() => {
|
const latestException = computed<BugCollectExceptionInfo | null>(() => {
|
||||||
const events = detail.value?.events ?? []
|
for (const e of detail.value?.events ?? []) {
|
||||||
for (const e of events) {
|
if (e.exception?.stacktrace || e.exception?.value) return e.exception!
|
||||||
const s = e.stackSymbolicated || e.stack
|
|
||||||
if (s) return s
|
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
})
|
})
|
||||||
|
|
||||||
function issueTypeTag(type: string) {
|
const latestDevice = computed<Record<string, unknown> | null>(() => {
|
||||||
const map: Record<string, string> = {
|
for (const e of detail.value?.events ?? []) {
|
||||||
CRASH: 'danger',
|
if (!e.device) continue
|
||||||
ERROR: 'warning',
|
try {
|
||||||
ANR: 'danger',
|
return (typeof e.device === 'string' ? JSON.parse(e.device) : e.device) as Record<string, unknown>
|
||||||
WARNING: '',
|
} catch { /* ignore */ }
|
||||||
}
|
}
|
||||||
return (map[type] ?? '') as '' | 'success' | 'warning' | 'info' | 'danger'
|
return null
|
||||||
|
})
|
||||||
|
|
||||||
|
function levelTag(level: string): '' | 'success' | 'warning' | 'info' | 'danger' {
|
||||||
|
const map: Record<string, '' | 'success' | 'warning' | 'info' | 'danger'> = {
|
||||||
|
fatal: 'danger', error: 'warning', warning: '', info: 'info',
|
||||||
|
}
|
||||||
|
return map[level?.toLowerCase()] ?? ''
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatTime(ts: string) {
|
function statusTag(status: string): '' | 'success' | 'warning' | 'info' | 'danger' {
|
||||||
|
const map: Record<string, '' | 'success' | 'warning' | 'info' | 'danger'> = {
|
||||||
|
open: 'danger', resolved: 'success', ignored: 'info',
|
||||||
|
}
|
||||||
|
return map[status] ?? ''
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusLabel(status: string): string {
|
||||||
|
const map: Record<string, string> = { open: '未解决', resolved: '已解决', ignored: '已忽略' }
|
||||||
|
return map[status] ?? status
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(ts: string): string {
|
||||||
if (!ts) return '-'
|
if (!ts) return '-'
|
||||||
return new Date(ts).toLocaleString('zh-CN')
|
return new Date(ts).toLocaleString('zh-CN')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function handleResolve() {
|
||||||
|
if (!detail.value) return
|
||||||
|
actionLoading.value = true
|
||||||
|
try {
|
||||||
|
await bugCollectApi.resolveIssue(detail.value.id)
|
||||||
|
detail.value = { ...detail.value, status: 'resolved' }
|
||||||
|
ElMessage.success('已标记为已解决')
|
||||||
|
} catch {
|
||||||
|
ElMessage.error('操作失败')
|
||||||
|
} finally {
|
||||||
|
actionLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleReopen() {
|
||||||
|
if (!detail.value) return
|
||||||
|
actionLoading.value = true
|
||||||
|
try {
|
||||||
|
await bugCollectApi.reopenIssue(detail.value.id)
|
||||||
|
detail.value = { ...detail.value, status: 'open' }
|
||||||
|
ElMessage.success('已重新打开')
|
||||||
|
} catch {
|
||||||
|
ElMessage.error('操作失败')
|
||||||
|
} finally {
|
||||||
|
actionLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleIgnore() {
|
||||||
|
if (!detail.value) return
|
||||||
|
actionLoading.value = true
|
||||||
|
try {
|
||||||
|
await bugCollectApi.ignoreIssue(detail.value.id)
|
||||||
|
detail.value = { ...detail.value, status: 'ignored' }
|
||||||
|
ElMessage.success('已忽略')
|
||||||
|
} catch {
|
||||||
|
ElMessage.error('操作失败')
|
||||||
|
} finally {
|
||||||
|
actionLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete() {
|
||||||
|
if (!detail.value) return
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确认删除此问题及其所有事件?此操作不可恢复。', '删除确认', {
|
||||||
|
type: 'warning',
|
||||||
|
confirmButtonText: '确认删除',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
})
|
||||||
|
} catch {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await bugCollectApi.deleteIssue(detail.value.id)
|
||||||
|
ElMessage.success('已删除')
|
||||||
|
router.back()
|
||||||
|
} catch {
|
||||||
|
ElMessage.error('删除失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
const id = route.params.id as string
|
const id = route.params.id as string
|
||||||
loading.value = true
|
loading.value = true
|
||||||
@ -100,6 +231,7 @@ onMounted(async () => {
|
|||||||
const res = await bugCollectApi.issueDetail(id)
|
const res = await bugCollectApi.issueDetail(id)
|
||||||
detail.value = res.data.data
|
detail.value = res.data.data
|
||||||
} catch {
|
} catch {
|
||||||
|
ElMessage.error('加载失败')
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
@ -125,5 +257,7 @@ onMounted(async () => {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
正在加载...
在新工单中引用
屏蔽一个用户