39 lines
1.7 KiB
Vue
39 lines
1.7 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* API 参数面板 —— 给 markdown 表格套一层「带标题的框」。
|
||
*
|
||
* 为什么收 slot 而不是数组 prop：
|
||
* 仓库约定 API 表格**直接写在 md 里**（见 CODEBUDDY.md「组件文档写作约定」）。
|
||
* 若改成 `:rows="[{ name: 'view_name', ... }]"`，表格会退化成一长行 JS 字面量，
|
||
* md 源码既不好读也不好 diff。所以这里只负责外壳与版式，表格本体仍由
|
||
* markdown 渲染后塞进 slot。
|
||
*
|
||
* 配套样式见 theme/api.css（.g3-api-panel）。
|
||
*
|
||
* variant：
|
||
* params（默认）参数表 —— 列序约定「参数 / 类型 / 必填 / 说明」，第 2、3 列的样式
|
||
* 按位置写，改列序要同步改 api.css。
|
||
* bare 只给框和标题，不套列样式。用于形状不同的表（如错误码表：
|
||
* code / 含义 / 典型原因 / 定位）—— 若套上参数表的列样式，散文列
|
||
* 会被当成「类型」套等宽、被当成「必填」染成品牌色。
|
||
*
|
||
* ⚠ 刻意不叫 plain：G3ApiPayload 表示「无语气」的类名就是 .g3-api-panel--plain，
|
||
* 两者含义不同，同名迟早埋坑。
|
||
*/
|
||
withDefaults(defineProps<{ title?: string | null; variant?: 'params' | 'bare' }>(), {
|
||
title: '请求参数',
|
||
variant: 'params',
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="g3-api-panel" :class="`g3-api-panel--${variant}`">
|
||
<!-- title 传 null 时不渲染标题栏：表格已经在自己那节标题下面时，
|
||
重复一遍标题只是噪音，只保留边框与行分隔线。 -->
|
||
<div v-if="title !== null" class="g3-api-panel__head">{{ title }}</div>
|
||
<div class="g3-api-panel__body">
|
||
<slot />
|
||
</div>
|
||
</div>
|
||
</template>
|