39 lines
2.1 KiB
Vue
39 lines
2.1 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
import { Copy } from '@lucide/vue'
|
|||
|
|
import type { ApiErrorDetails } from '@/api/http'
|
|||
|
|
|
|||
|
|
const props = defineProps<{ details: ApiErrorDetails }>()
|
|||
|
|
|
|||
|
|
async function copyIdentifier(value: string, label: string) {
|
|||
|
|
try {
|
|||
|
|
await navigator.clipboard.writeText(value)
|
|||
|
|
ElMessage.success(`${label} 已复制`)
|
|||
|
|
} catch {
|
|||
|
|
ElMessage.error(`${label} 复制失败，请手动选择复制`)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div v-if="details.code || details.requestId || details.traceId" class="api-error-meta" aria-label="接口错误追踪信息">
|
|||
|
|
<span v-if="details.code" class="api-error-code">{{ details.code }}</span>
|
|||
|
|
<button v-if="details.requestId" type="button" :title="`复制请求 ID：${props.details.requestId}`" @click="copyIdentifier(props.details.requestId!, '请求 ID')">
|
|||
|
|
<span>请求 ID</span><code>{{ props.details.requestId }}</code><Copy :size="13" />
|
|||
|
|
</button>
|
|||
|
|
<button v-if="details.traceId" type="button" :title="`复制 Trace ID：${props.details.traceId}`" @click="copyIdentifier(props.details.traceId!, 'Trace ID')">
|
|||
|
|
<span>Trace ID</span><code>{{ props.details.traceId }}</code><Copy :size="13" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.api-error-meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
|
|||
|
|
.api-error-code { padding: 3px 7px; border-radius: 4px; background: #fee4e2; color: #912018; font-size: 10px; font-weight: 750; }
|
|||
|
|
.api-error-meta button { display: inline-flex; min-width: 0; max-width: 100%; min-height: 30px; align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid #fecdca; border-radius: 4px; background: #fff; color: #7a271a; cursor: pointer; }
|
|||
|
|
.api-error-meta button:hover { background: #fff5f4; }
|
|||
|
|
.api-error-meta button span { flex: 0 0 auto; font-size: 10px; font-weight: 700; }
|
|||
|
|
.api-error-meta code { min-width: 0; overflow: hidden; color: #b42318; font-family: "Cascadia Code", Consolas, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
|||
|
|
.api-error-meta svg { flex: 0 0 auto; }
|
|||
|
|
</style>
|