fix
This commit is contained in:
117
src/App.vue
117
src/App.vue
@@ -286,8 +286,6 @@
|
||||
<div
|
||||
v-if="currentApi"
|
||||
class="content-page api-detail"
|
||||
v-loading="apiDetailLoading"
|
||||
element-loading-text="正在加载接口详情..."
|
||||
>
|
||||
<div class="content-section page-header-card">
|
||||
<div class="page-header-main">
|
||||
@@ -296,7 +294,14 @@
|
||||
<h1 class="api-action-name">{{ currentApi.action }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" plain size="small" :icon="DocumentCopy" @click="copyApiMarkdown">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
size="small"
|
||||
:icon="DocumentCopy"
|
||||
:disabled="apiDetailLoading || !apiDetail"
|
||||
@click="copyApiMarkdown"
|
||||
>
|
||||
复制文档
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -310,7 +315,65 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="apiDetail" class="api-detail-body">
|
||||
<div class="api-detail-body">
|
||||
<template v-if="apiDetailLoading">
|
||||
<section class="content-section">
|
||||
<h3 class="section-title">请求参数</h3>
|
||||
<el-skeleton animated class="detail-skeleton">
|
||||
<template #template>
|
||||
<div class="detail-skeleton-table detail-skeleton-table--params">
|
||||
<div class="detail-skeleton-row detail-skeleton-row--head">
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
</div>
|
||||
<div v-for="row in 4" :key="'param-' + row" class="detail-skeleton-row">
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h3 class="section-title">请求响应</h3>
|
||||
<el-skeleton animated class="detail-skeleton">
|
||||
<template #template>
|
||||
<div class="detail-skeleton-table detail-skeleton-table--response">
|
||||
<div class="detail-skeleton-row detail-skeleton-row--head">
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
</div>
|
||||
<div v-for="row in 4" :key="'response-' + row" class="detail-skeleton-row">
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h3 class="section-title">调用示例</h3>
|
||||
<el-skeleton animated class="detail-skeleton">
|
||||
<template #template>
|
||||
<div class="detail-skeleton-tabs">
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
</div>
|
||||
<el-skeleton-item variant="rect" class="detail-skeleton-code" />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template v-else-if="apiDetail">
|
||||
<section class="content-section">
|
||||
<h3 class="section-title">请求参数</h3>
|
||||
<div v-if="apiDetail?.paramModel">
|
||||
@@ -681,6 +744,7 @@
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1173,6 +1237,7 @@ const toggleMenu = () => {
|
||||
};
|
||||
|
||||
const showApiDetail = async (api) => {
|
||||
activeTab.value = "docs";
|
||||
currentApi.value = api;
|
||||
apiDetail.value = null; // 清空之前的详情
|
||||
apiDetailError.value = null; // 清空错误信息
|
||||
@@ -2824,6 +2889,50 @@ const handleExportSelected = async () => {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.detail-skeleton {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detail-skeleton-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detail-skeleton-row {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid #eef0f3;
|
||||
}
|
||||
|
||||
.detail-skeleton-row--head {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.detail-skeleton-table--params .detail-skeleton-row {
|
||||
grid-template-columns: minmax(80px, 1fr) minmax(80px, 1fr) 72px minmax(120px, 2fr);
|
||||
}
|
||||
|
||||
.detail-skeleton-table--response .detail-skeleton-row {
|
||||
grid-template-columns: minmax(80px, 1fr) minmax(80px, 1fr) minmax(120px, 2fr);
|
||||
}
|
||||
|
||||
.detail-skeleton-tabs {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.detail-skeleton-tabs .el-skeleton__item {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.detail-skeleton-code {
|
||||
width: 100%;
|
||||
height: 168px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* README 引导页 */
|
||||
.readme-grid {
|
||||
display: grid;
|
||||
|
||||
Reference in New Issue
Block a user