feat: 添加接口管理功能（后端OpenAPI解析入库+前端列表/详情/测试）
- 新增 ApiEndpoint/ApiParam 实体和 Mapper - 新增 DTO 层（分页查询请求、列表项、详情项、参数项、代理测试请求/响应） - 新增 ApiEndpointService 含 OpenAPI JSON 解析、\ 展开（最大10层）、分页查询 - 新增 ApiEndpointSyncRunner 启动时异步同步 - 新增 ApiEndpointController 分页/详情/手动同步接口 - 新增 ApiTestProxyController 代理测试接口（SSRF 防护） - 前端新增接口列表页、详情弹窗（含测试面板、Token 来源选择） - 前端新增菜单和路由
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export interface ApiEndpointItem {
|
||||
id: string
|
||||
path: string
|
||||
method: string
|
||||
summary: string
|
||||
tags: string
|
||||
deprecated: number
|
||||
createTime: string
|
||||
operationId: string
|
||||
}
|
||||
|
||||
export interface ApiParamItem {
|
||||
paramType: string
|
||||
name: string
|
||||
required: number
|
||||
paramTypeDef: string
|
||||
description: string
|
||||
defaultValue: string
|
||||
enumValues: string
|
||||
example: string
|
||||
}
|
||||
|
||||
export interface ApiEndpointDetail {
|
||||
id: string
|
||||
path: string
|
||||
method: string
|
||||
operationId: string
|
||||
summary: string
|
||||
description: string
|
||||
tags: string
|
||||
deprecated: number
|
||||
requestSchema: string
|
||||
responseSchema: string
|
||||
createTime: string
|
||||
params: ApiParamItem[]
|
||||
}
|
||||
|
||||
export interface ApiEndpointListRequest {
|
||||
current: number
|
||||
size: number
|
||||
keyword?: string
|
||||
method?: string
|
||||
tags?: string
|
||||
deprecated?: number
|
||||
}
|
||||
|
||||
export interface ApiTestProxyRequest {
|
||||
method: string
|
||||
path: string
|
||||
body?: string
|
||||
headers?: Record<string, string>
|
||||
params?: Record<string, string>
|
||||
timeoutSeconds?: number
|
||||
}
|
||||
|
||||
export interface ApiTestProxyResponse {
|
||||
status: number
|
||||
body?: any
|
||||
headers?: Record<string, string>
|
||||
duration: number
|
||||
rawBody?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 分页查询接口列表
|
||||
*/
|
||||
export function getEndpointList(data: ApiEndpointListRequest) {
|
||||
return request.post('/admin/endpoint/list', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询接口详情
|
||||
*/
|
||||
export function getEndpointDetail(operationId: string) {
|
||||
return request.get('/admin/endpoint/detail', { params: { operationId } })
|
||||
}
|
||||
|
||||
/**
|
||||
* 手动触发同步
|
||||
*/
|
||||
export function syncEndpoints() {
|
||||
return request.post('/admin/endpoint/sync')
|
||||
}
|
||||
|
||||
/**
|
||||
* 代理测试请求
|
||||
*/
|
||||
export function testEndpoint(data: ApiTestProxyRequest) {
|
||||
return request.post('/admin/endpoint/test', data)
|
||||
}
|
||||
@@ -45,6 +45,10 @@ export const menuConfig: MenuItem[] = [
|
||||
{
|
||||
path: '/tools/api-tester',
|
||||
title: 'API接口调用'
|
||||
},
|
||||
{
|
||||
path: '/endpoint/list',
|
||||
title: '接口管理'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -107,6 +107,12 @@ const routes: RouteRecordRaw[] = [
|
||||
name: 'ApiTester',
|
||||
component: () => import('@/views/tools/ApiTester.vue'),
|
||||
meta: { title: 'API接口调用' }
|
||||
},
|
||||
{
|
||||
path: 'list',
|
||||
name: 'EndpointList',
|
||||
component: () => import('@/views/endpoint/EndpointList.vue'),
|
||||
meta: { title: '接口管理' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" :title="'接口详情'" width="800px" destroy-on-close>
|
||||
<el-tabs v-model="activeTab">
|
||||
<!-- 详情标签 -->
|
||||
<el-tab-pane label="详情" name="detail">
|
||||
<template v-if="detail">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="方法">
|
||||
<el-tag :type="getMethodType(detail.method)">{{ detail.method }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="路径">{{ detail.path }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Operation ID">{{ detail.operationId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="简述">{{ detail.summary || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="标签" :span="2">{{ detail.tags || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="描述" :span="2">{{ detail.description || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- 参数列表 -->
|
||||
<h4 v-if="detail.params && detail.params.length > 0" style="margin-top: 20px">参数列表</h4>
|
||||
<el-table :data="detail.params" border size="small" style="margin-top: 8px">
|
||||
<el-table-column prop="paramType" label="类型" width="80" />
|
||||
<el-table-column prop="name" label="名称" width="120" />
|
||||
<el-table-column prop="required" label="必填" width="60" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.required === 1" type="danger" size="small">是</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="paramTypeDef" label="数据类型" width="100" />
|
||||
<el-table-column prop="description" label="描述" min-width="150" />
|
||||
<el-table-column prop="example" label="示例" min-width="120" />
|
||||
</el-table>
|
||||
|
||||
<!-- 请求体结构 -->
|
||||
<h4 v-if="detail.requestSchema && detail.requestSchema !== '{}'" style="margin-top: 20px">请求体结构</h4>
|
||||
<pre v-if="detail.requestSchema && detail.requestSchema !== '{}'" class="schema-json">{{ formatJson(detail.requestSchema) }}</pre>
|
||||
</template>
|
||||
<el-empty v-else description="暂无数据" />
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 测试标签 -->
|
||||
<el-tab-pane label="测试" name="test">
|
||||
<!-- Token 来源 -->
|
||||
<el-card class="token-card" style="margin-bottom: 16px">
|
||||
<template #header>Token 来源</template>
|
||||
<el-radio-group v-model="tokenSource">
|
||||
<el-radio value="admin">使用当前管理员Token</el-radio>
|
||||
<el-radio value="manual">手动输入</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input
|
||||
v-if="tokenSource === 'manual'"
|
||||
v-model="manualToken"
|
||||
placeholder="Bearer eyJhbGci..."
|
||||
style="margin-top: 8px"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 参数表单 -->
|
||||
<el-card style="margin-bottom: 16px">
|
||||
<template #header>参数配置</template>
|
||||
<el-form :model="testForm" label-width="80px">
|
||||
<el-form-item label="请求路径">
|
||||
<el-input v-model="testForm.path" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="请求方法">
|
||||
<el-input v-model="testForm.method" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-for="param in (detail?.params || [])" :key="param.name" :label="param.name">
|
||||
<el-input v-model="testForm.params[param.name]" :placeholder="param.description || param.example || ''" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="['POST', 'PUT', 'PATCH'].includes(testForm.method)" label="请求体">
|
||||
<el-input v-model="testForm.body" type="textarea" :rows="5" placeholder="JSON 格式" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-button type="primary" @click="handleTest" :loading="testing">发送请求</el-button>
|
||||
|
||||
<!-- 响应结果 -->
|
||||
<el-card v-if="testResult" style="margin-top: 16px">
|
||||
<template #header>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<span>响应结果</span>
|
||||
<div>
|
||||
<el-tag :type="testResult.status >= 200 && testResult.status < 300 ? 'success' : 'danger'">
|
||||
{{ testResult.status }}
|
||||
</el-tag>
|
||||
<el-tag type="info" style="margin-left: 8px">{{ testResult.duration }}ms</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<pre class="response-body">{{ testResult.display }}</pre>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { testEndpoint, type ApiEndpointDetail } from '@/api/endpoint'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
detail: ApiEndpointDetail | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val: boolean) => emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
const activeTab = ref('detail')
|
||||
const tokenSource = ref('admin')
|
||||
const manualToken = ref('')
|
||||
const testing = ref(false)
|
||||
const testResult = ref<{ status: number; duration: number; display: string } | null>(null)
|
||||
|
||||
const testForm = ref({
|
||||
path: '',
|
||||
method: '',
|
||||
params: {} as Record<string, string>,
|
||||
body: ''
|
||||
})
|
||||
|
||||
watch(() => props.detail, (ep) => {
|
||||
if (ep) {
|
||||
testForm.value.path = ep.path
|
||||
testForm.value.method = ep.method
|
||||
testForm.value.params = {}
|
||||
testForm.value.body = ''
|
||||
testResult.value = null
|
||||
activeTab.value = 'detail'
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
const getMethodType = (method: string): string => {
|
||||
const types: Record<string, string> = {
|
||||
GET: 'success',
|
||||
POST: 'primary',
|
||||
PUT: 'warning',
|
||||
DELETE: 'danger',
|
||||
PATCH: 'info'
|
||||
}
|
||||
return types[method] || 'info'
|
||||
}
|
||||
|
||||
const formatJson = (jsonStr: string): string => {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(jsonStr), null, 2)
|
||||
} catch {
|
||||
return jsonStr
|
||||
}
|
||||
}
|
||||
|
||||
const handleTest = async () => {
|
||||
testing.value = true
|
||||
try {
|
||||
const headers: Record<string, string> = {}
|
||||
const token = tokenSource.value === 'admin'
|
||||
? localStorage.getItem('adminToken')
|
||||
: manualToken.value
|
||||
if (token) {
|
||||
headers['Authorization'] = token.startsWith('Bearer ') ? token : `Bearer ${token}`
|
||||
}
|
||||
|
||||
const queryParams: Record<string, string> = {}
|
||||
for (const [key, value] of Object.entries(testForm.value.params)) {
|
||||
if (value) queryParams[key] = value
|
||||
}
|
||||
|
||||
const res: any = await testEndpoint({
|
||||
method: testForm.value.method,
|
||||
path: testForm.value.path,
|
||||
body: testForm.value.body || undefined,
|
||||
headers,
|
||||
params: Object.keys(queryParams).length > 0 ? queryParams : undefined,
|
||||
timeoutSeconds: 30
|
||||
})
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
const data = res.data
|
||||
testResult.value = {
|
||||
status: data.status,
|
||||
duration: data.duration,
|
||||
display: data.rawBody || JSON.stringify(data.body, null, 2)
|
||||
}
|
||||
} else {
|
||||
testResult.value = {
|
||||
status: 0,
|
||||
duration: 0,
|
||||
display: res.message || '请求失败'
|
||||
}
|
||||
}
|
||||
} catch (e: any) {
|
||||
testResult.value = {
|
||||
status: 0,
|
||||
duration: 0,
|
||||
display: e.message || '请求失败'
|
||||
}
|
||||
} finally {
|
||||
testing.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.response-body {
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.schema-json {
|
||||
background: #f5f7fa;
|
||||
color: #333;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="endpoint-list">
|
||||
<div class="page-header">
|
||||
<h2>接口管理</h2>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" @click="handleSync" :loading="syncing">
|
||||
<el-icon><Refresh /></el-icon> 手动同步
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<el-card class="search-card">
|
||||
<el-form :model="searchForm" inline>
|
||||
<el-form-item label="关键词">
|
||||
<el-input
|
||||
v-model="searchForm.keyword"
|
||||
placeholder="路径/简述/operationId"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@clear="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="方法">
|
||||
<el-select v-model="searchForm.method" placeholder="全部" clearable style="width: 100px" @change="handleSearch">
|
||||
<el-option label="GET" value="GET" />
|
||||
<el-option label="POST" value="POST" />
|
||||
<el-option label="PUT" value="PUT" />
|
||||
<el-option label="DELETE" value="DELETE" />
|
||||
<el-option label="PATCH" value="PATCH" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 接口列表 -->
|
||||
<el-card class="table-card">
|
||||
<el-table :data="tableData" v-loading="loading" stripe>
|
||||
<el-table-column label="方法" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getMethodType(row.method)" size="small">{{ row.method }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="path" label="路径" min-width="300" show-overflow-tooltip />
|
||||
<el-table-column prop="summary" label="简述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="tags" label="标签" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column label="状态" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.deprecated === 1" type="danger" size="small">废弃</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link size="small" @click="showDetail(row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.current"
|
||||
v-model:page-size="pagination.size"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="loadData"
|
||||
@current-change="loadData"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<EndpointDetailDialog v-model="detailVisible" :detail="selectedDetail" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Refresh } from '@element-plus/icons-vue'
|
||||
import { getEndpointList, syncEndpoints, getEndpointDetail, type ApiEndpointItem, type ApiEndpointDetail } from '@/api/endpoint'
|
||||
import EndpointDetailDialog from './EndpointDetailDialog.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const syncing = ref(false)
|
||||
const detailVisible = ref(false)
|
||||
const selectedDetail = ref<ApiEndpointDetail | null>(null)
|
||||
|
||||
const searchForm = reactive({
|
||||
keyword: '',
|
||||
method: '',
|
||||
tags: ''
|
||||
})
|
||||
|
||||
const tableData = ref<ApiEndpointItem[]>([])
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
size: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res: any = await getEndpointList({
|
||||
current: pagination.current,
|
||||
size: pagination.size,
|
||||
keyword: searchForm.keyword || undefined,
|
||||
method: searchForm.method || undefined,
|
||||
tags: searchForm.tags || undefined
|
||||
})
|
||||
tableData.value = res.data.records || []
|
||||
pagination.total = res.data.total || 0
|
||||
} catch (e: any) {
|
||||
ElMessage.error('加载失败: ' + e.message)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchForm.keyword = ''
|
||||
searchForm.method = ''
|
||||
searchForm.tags = ''
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
const handleSync = async () => {
|
||||
syncing.value = true
|
||||
try {
|
||||
await syncEndpoints()
|
||||
ElMessage.success('同步任务已提交，请稍后刷新查看结果')
|
||||
setTimeout(() => loadData(), 5000)
|
||||
} catch (e: any) {
|
||||
ElMessage.error('同步失败: ' + e.message)
|
||||
} finally {
|
||||
syncing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const showDetail = async (row: ApiEndpointItem) => {
|
||||
selectedDetail.value = null
|
||||
detailVisible.value = true
|
||||
try {
|
||||
const res: any = await getEndpointDetail(row.operationId)
|
||||
selectedDetail.value = res.data
|
||||
} catch {
|
||||
ElMessage.error('加载详情失败')
|
||||
}
|
||||
}
|
||||
|
||||
const getMethodType = (method: string): string => {
|
||||
const types: Record<string, string> = {
|
||||
GET: 'success',
|
||||
POST: 'primary',
|
||||
PUT: 'warning',
|
||||
DELETE: 'danger',
|
||||
PATCH: 'info'
|
||||
}
|
||||
return types[method] || 'info'
|
||||
}
|
||||
|
||||
onMounted(() => loadData())
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.endpoint-list {
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user