From 4c359214f51e1e8dfeb761b3e32a7d87730fedac Mon Sep 17 00:00:00 2001
From: iqudoo <iqudoo@qq.com>
Date: Mon, 25 May 2026 10:50:18 +0800
Subject: [PATCH] fix

---
 src/App.vue | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 113 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a865da1..b6d6dc7 100644
--- a/src/App.vue
+++ b/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;