tools/tape-springboot-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
iqudoo
2026-05-25 10:50:18 +08:00
parent bd9c2073d0
commit 4c359214f5
1 changed files with 113 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/App.vue
View File

@@ -286,8 +286,6 @@
<div <div
v-if="currentApi" v-if="currentApi"
class="content-page api-detail" class="content-page api-detail"
v-loading="apiDetailLoading"
element-loading-text="正在加载接口详情..."
> >
<div class="content-section page-header-card"> <div class="content-section page-header-card">
<div class="page-header-main"> <div class="page-header-main">
@@ -296,7 +294,14 @@
<h1 class="api-action-name">{{ currentApi.action }}</h1> <h1 class="api-action-name">{{ currentApi.action }}</h1>
</div> </div>
</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> </el-button>
</div> </div>
@@ -310,7 +315,65 @@
/> />
</div> </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"> <section class="content-section">
<h3 class="section-title">请求参数</h3> <h3 class="section-title">请求参数</h3>
<div v-if="apiDetail?.paramModel"> <div v-if="apiDetail?.paramModel">
@@ -681,6 +744,7 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</section> </section>
</template>
</div> </div>
</div> </div>
</div> </div>
@@ -1173,6 +1237,7 @@ const toggleMenu = () => {
}; };
const showApiDetail = async (api) => { const showApiDetail = async (api) => {
activeTab.value = "docs";
currentApi.value = api; currentApi.value = api;
apiDetail.value = null; // 清空之前的详情 apiDetail.value = null; // 清空之前的详情
apiDetailError.value = null; // 清空错误信息 apiDetailError.value = null; // 清空错误信息
@@ -2824,6 +2889,50 @@ const handleExportSelected = async () => {
gap: 0; 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 引导页 */
.readme-grid { .readme-grid {
display: grid; display: grid;