u

code/g3soft-libs/docs/.vitepress/theme/G3ApiPayload.vue

@@ -0,0 +1,57 @@
+<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>