74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
<template>
|
|
<div class="result-json-container">
|
|
<pre class="result-json" v-html="highlightedJson"></pre>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
data: any[]
|
|
}>()
|
|
|
|
// 转义 HTML
|
|
const escapeHtml = (str: string) => str
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
|
|
// JSON 高亮
|
|
const highlightedJson = computed(() => {
|
|
const json = JSON.stringify(props.data, null, 2)
|
|
if (!json) return ''
|
|
|
|
return escapeHtml(json)
|
|
.replace(/: ("(?:[^"\\]|\\.)*")/g, ': <span class="json-string">$1</span>')
|
|
.replace(/: (-?\d+\.?\d*(?:e[+-]?\d+)?)/gi, ': <span class="json-number">$1</span>')
|
|
.replace(/: (true|false|null)/g, ': <span class="json-boolean">$1</span>')
|
|
.replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.result-json-container {
|
|
flex: 1;
|
|
overflow: auto;
|
|
min-height: 0;
|
|
padding: var(--spacing-sm, 8px);
|
|
}
|
|
|
|
.result-json {
|
|
margin: 0;
|
|
padding: var(--spacing-md, 16px);
|
|
border-radius: var(--border-radius-medium, 6px);
|
|
font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
background: linear-gradient(135deg, var(--color-bg-3) 0%, var(--color-bg-2) 100%);
|
|
color: var(--color-text-2);
|
|
border: 1px solid var(--color-border-2);
|
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.result-json :deep(.json-key) {
|
|
color: rgb(var(--arcoblue-6, 22, 93, 255));
|
|
font-weight: 500;
|
|
}
|
|
|
|
.result-json :deep(.json-string) {
|
|
color: rgb(var(--green-6, 0, 180, 42));
|
|
}
|
|
|
|
.result-json :deep(.json-number) {
|
|
color: rgb(var(--orange-6, 255, 125, 0));
|
|
}
|
|
|
|
.result-json :deep(.json-boolean) {
|
|
color: rgb(var(--purple-6, 114, 46, 209));
|
|
font-weight: 500;
|
|
}
|
|
</style>
|