ApiDoc API 文档组件

支持 API 接口展示、请求参数、curl 示例的文档组件。

基础用法

API 端点

GET/users

POST/users

GEThttps://api.example.com/users获取用户列表

请求参数

参数名	类型	必填	默认值	说明
page	number	可选	1	页码
limit	number	可选	10	每页数量

curl 示例

curl -X GET 'https://api.example.com/users' -H 'Authorization: ApiKey YOUR_API_KEY'

响应示例

{"data": [], "total": 100}

<template>
  <x-api-doc
    :base-url="'https://api.example.com'"
    :endpoints="endpoints"
    :show-curl-example="true"
    :auth-type="'apikey'"
  />
</template>

<script setup>
import { ApiDoc } from '@xto/business'

const endpoints = [
  {
    method: 'GET',
    path: '/users',
    description: '获取用户列表',
    parameters: [
      { name: 'page', type: 'number', required: false, description: '页码' }
    ],
    responseExample: '{"data": [], "total": 100}'
  },
  {
    method: 'POST',
    path: '/users',
    description: '创建用户',
    requestBody: '{"name": "张三"}'
  }
]
</script>

认证方式

支持多种认证方式配置。

<template>
  <!-- API Key 认证 -->
  <x-api-doc auth-type="apikey" api-key-placeholder="YOUR_API_KEY" />

  <!-- Bearer Token 认证 -->
  <x-api-doc auth-type="bearer" api-key-placeholder="YOUR_TOKEN" />

  <!-- Basic 认证 -->
  <x-api-doc auth-type="basic" />

  <!-- 无认证 -->
  <x-api-doc auth-type="none" />
</template>

API

Props

属性	说明	类型	默认值
baseUrl	API 基础地址	string	'https://api.example.com'
endpoints	API 端点列表	ApiEndpoint[]	[]
showCurlExample	是否显示 curl 示例	boolean	true
authType	认证方式	'apikey' | 'bearer' | 'basic' | 'none'	'apikey'
apiKeyPlaceholder	API Key 占位符	string	'YOUR_API_KEY'

ApiEndpoint

属性	说明	类型
method	HTTP 方法	'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
path	API 路径	string
description	接口描述	string
parameters	请求参数列表	ApiParameter[]
requestBody	请求体示例	string
responseExample	响应示例	string

ApiParameter

属性	说明	类型
name	参数名称	string
type	参数类型	string
required	是否必填	boolean
description	参数说明	string
defaultValue	默认值	string

Events

事件名	说明
copy-curl	复制 curl 命令时触发