58 lines
2.1 KiB
Vue
58 lines
2.1 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* API 报文面板 —— 请求体 / 响应体，按 **body.code** 着色。
|
||
*
|
||
* 存在理由：原来请求体和响应体都是裸 ```json 代码块，视觉上完全一样，
|
||
* 读者分不清哪块是入参哪块是出参；而 `code: 0` 与 `code: 1000` 也同样是
|
||
* 一片灰底，全站最想强调的「HTTP 200 也可能是失败」在版式上零体现。
|
||
*
|
||
* ⚠ 着色依据是 body.code，**不是 HTTP 状态码**。这正是通用 OpenAPI 渲染器
|
||
* 做不到的地方：它们的颜色模型绑死了 HTTP 状态码，会把这里的失败响应
|
||
* 渲染成绿色成功块。
|
||
*
|
||
* tone 的推断规则：给了 code 就是「0 成功、其余失败」；语义特殊的码
|
||
* （如部分成功）显式传 tone="warn" 覆盖。
|
||
*/
|
||
import { computed } from 'vue'
|
||
|
||
type Tone = 'plain' | 'ok' | 'warn' | 'error'
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
/** 面板标题，如「请求体」「响应」 */
|
||
title?: string
|
||
/** 响应体里的 code；给出时参与 tone 推断，并在标题栏显示 code 徽章 */
|
||
code?: number | string
|
||
/** 显式指定语气，覆盖由 code 推断的结果 */
|
||
tone?: Tone
|
||
}>(),
|
||
{ title: '响应' },
|
||
)
|
||
|
||
const resolvedTone = computed<Tone>(() => {
|
||
if (props.tone) return props.tone
|
||
if (props.code === undefined) return 'plain'
|
||
return props.code === 0 ? 'ok' : 'error'
|
||
})
|
||
|
||
/** 颜色之外再给一个文字标签：色觉障碍下也能读出成功/失败 */
|
||
const toneLabel = computed(() => {
|
||
const map: Record<Tone, string> = { plain: '', ok: '成功', warn: '警告', error: '失败' }
|
||
return map[resolvedTone.value]
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="g3-api-panel g3-api-panel--payload" :class="`g3-api-panel--${resolvedTone}`">
|
||
<div class="g3-api-panel__head">
|
||
<span class="g3-api-panel__dot" />
|
||
<span>{{ title }}</span>
|
||
<code v-if="code !== undefined" class="g3-api-panel__code">code {{ code }}</code>
|
||
<span v-if="toneLabel" class="g3-api-panel__tone">{{ toneLabel }}</span>
|
||
</div>
|
||
<div class="g3-api-panel__body">
|
||
<slot />
|
||
</div>
|
||
</div>
|
||
</template>
|