From 827a0283bab0172459eb1062405e5f09ee4b4128 Mon Sep 17 00:00:00 2001
From: iqudoo <iqudoo@qq.com>
Date: Sun, 24 May 2026 22:58:52 +0800
Subject: [PATCH] fix

---
 src/App.vue | 1149 ++++++++++++++++++++++++++++++++-------------------
 1 file changed, 728 insertions(+), 421 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fbe95ba..ec3efcc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -181,30 +181,59 @@
       </div>
 
       <template v-else>
-        <div class="main-toolbar">
-          <el-button type="primary" :icon="Download" @click="showExportDrawer = true">
-            导出文档
-          </el-button>
-        </div>
+        <div class="content-frame">
+          <div class="content-nav-wrap">
+            <div class="content-section content-nav-bar">
+              <div class="content-nav-tabs">
+                <button
+                  type="button"
+                  class="content-nav-tab"
+                  :class="{ active: activeTab === 'docs' }"
+                  @click="activeTab = 'docs'"
+                >
+                  接口文档
+                </button>
+                <button
+                  type="button"
+                  class="content-nav-tab"
+                  :class="{ active: activeTab === 'common' }"
+                  @click="activeTab = 'common'"
+                >
+                  通用信息
+                </button>
+              </div>
+              <el-button
+                type="primary"
+                plain
+                size="small"
+                :icon="Download"
+                @click="showExportDrawer = true"
+              >
+                导出文档
+              </el-button>
+            </div>
+          </div>
 
-        <el-tabs v-model="activeTab" class="main-tabs">
-        <!-- API文档tab -->
-        <el-tab-pane label="API 文档" name="docs">
+          <div class="content-frame-body">
+            <div v-show="activeTab === 'docs'" class="content-tab-panel">
           <!-- README引导页 -->
-          <div v-if="!currentApi" class="readme-guide">
-            <div class="readme-header">
-              <h1>📚 API 文档中心</h1>
-              <p class="readme-subtitle">
-                欢迎使用 API 文档中心，这里提供了完整的接口文档和使用说明
-              </p>
+          <div v-if="!currentApi" class="content-page readme-guide">
+            <div class="content-section page-header-card page-header-card-center">
+              <div class="page-header-main">
+                <el-icon class="page-hero-icon"><Document /></el-icon>
+                <div>
+                  <h1 class="page-hero-title">接口文档中心</h1>
+                  <p class="page-hero-desc">
+                    欢迎使用 API 文档中心，这里提供了完整的接口文档和使用说明
+                  </p>
+                </div>
+              </div>
             </div>
 
-            <el-divider />
-
-            <div class="readme-content">
-              <h2>🚀 快速开始</h2>
-              <div class="readme-section">
-                <h3>1. 浏览接口</h3>
+            <div class="readme-grid">
+              <div class="readme-card">
+                <div class="readme-card-num">01</div>
+                <h3>浏览接口</h3>
                 <p>在左侧菜单中浏览所有可用的接口，接口按模块分组显示。</p>
                 <ul>
                   <li>点击文件夹进入下一级目录</li>
@@ -213,8 +242,9 @@
                 </ul>
               </div>
 
-              <div class="readme-section">
-                <h3>2. 查看接口详情</h3>
+              <div class="readme-card">
+                <div class="readme-card-num">02</div>
+                <h3>查看接口详情</h3>
                 <p>点击任意接口后，右侧会显示该接口的详细信息，包括：</p>
                 <ul>
                   <li>请求参数说明</li>
@@ -223,9 +253,10 @@
                 </ul>
               </div>
 
-              <div class="readme-section">
-                <h3>3. 导出文档</h3>
-                <p>点击右上角「导出文档」按钮，可以：</p>
+              <div class="readme-card">
+                <div class="readme-card-num">03</div>
+                <h3>导出文档</h3>
+                <p>点击上方「导出文档」按钮，可以：</p>
                 <ul>
                   <li>一键导出所有接口文档</li>
                   <li>按需选择接口进行导出</li>
@@ -233,9 +264,10 @@
                 </ul>
               </div>
 
-              <div class="readme-section">
-                <h3>4. 通用信息</h3>
-                <p>切换到"通用信息"标签页，可以查看：</p>
+              <div class="readme-card">
+                <div class="readme-card-num">04</div>
+                <h3>通用信息</h3>
+                <p>切换到「通用信息」标签页，可以查看：</p>
                 <ul>
                   <li>通用请求参数说明</li>
                   <li>通用响应格式说明</li>
@@ -243,58 +275,37 @@
               </div>
             </div>
 
-            <el-divider />
-
-            <div class="readme-tips">
-              <h2>💡 使用提示</h2>
-              <el-alert title="提示" type="info" :closable="false" :show-icon="false">
-                <template #default>
-                  <ul style="margin: 0; padding-left: 20px">
-                    <li>所有接口都需要携带鉴权 token</li>
-                    <li>请求参数需要放在 params 对象中</li>
-                    <li>响应格式统一，code 为 0 表示成功</li>
-                    <li>可以在"通用信息"标签页查看详细的请求和响应说明</li>
-                  </ul>
-                </template>
-              </el-alert>
+            <div class="content-section tips-card">
+              <div class="tips-card-title">使用提示</div>
+              <ul>
+                <li>所有接口都需要携带鉴权 token</li>
+                <li>请求参数需要放在 params 对象中</li>
+                <li>响应格式统一，code 为 0 表示成功</li>
+                <li>可以在「通用信息」标签页查看详细的请求和响应说明</li>
+              </ul>
             </div>
           </div>
 
           <div
             v-if="currentApi"
-            class="api-detail"
+            class="content-page api-detail"
             v-loading="apiDetailLoading"
             element-loading-text="正在加载接口详情..."
           >
-            <div
-              style="
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 12px;
-                margin-top: 20px;
-                font-size: 20px;
-                position: relative;
-              "
-            >
-              <span>{{ currentApi.action }}</span>
-              <el-button
-                type="primary"
-                :icon="DocumentCopy"
-                circle
-                size="small"
-                @click="copyApiMarkdown"
-                title="复制接口文档"
-              />
-            </div>
-            <el-divider />
-            <h3>接口名称</h3>
-            <div style="margin-bottom: 30px">
-              {{ currentApi.action }}
+            <div class="content-section page-header-card">
+              <div class="page-header-main">
+                <el-icon class="api-detail-icon"><Document /></el-icon>
+                <div class="page-header-text">
+                  <div class="page-header-label">接口</div>
+                  <h1 class="api-action-name">{{ currentApi.action }}</h1>
+                </div>
+              </div>
+              <el-button type="primary" plain size="small" :icon="DocumentCopy" @click="copyApiMarkdown">
+                复制文档
+              </el-button>
             </div>
 
-            <!-- 接口详情错误提示 -->
-            <div v-if="apiDetailError" style="margin-bottom: 20px">
+            <div v-if="apiDetailError" class="api-detail-alert">
               <el-alert
                 :title="apiDetailError"
                 type="warning"
@@ -303,8 +314,9 @@
               />
             </div>
 
-            <div v-if="apiDetail">
-              <h3>请求参数</h3>
+            <div v-if="apiDetail" class="api-detail-body">
+              <section class="content-section">
+              <h3 class="section-title">请求参数</h3>
               <div v-if="apiDetail?.paramModel">
                 <p v-if="apiDetail.paramModel.basicProperty" class="basic-type-display">
                   类型：{{ getFullTypeName(apiDetail.paramModel) }}
@@ -312,11 +324,12 @@
                 <div
                   v-for="model in getAllModels(apiDetail.paramModel)"
                   :key="model.simpleName"
+                  class="model-card"
                 >
-                  <h4 :id="'model-' + model.simpleName">{{ model.simpleName }}</h4>
+                  <h4 :id="'model-' + model.simpleName" class="model-title">{{ getModelDisplayName(model) }}</h4>
 
                   <!-- 桌面端表格布局 -->
-                  <el-table v-if="!isMobile" :data="model.fields" border>
+                  <el-table v-if="!isMobile" :data="model.fields" class="data-table">
                     <el-table-column prop="name" label="参数名" width="auto" />
                     <el-table-column label="类型" width="auto">
                       <template #default="scope">
@@ -483,8 +496,10 @@
                   </div>
                 </div>
               </div>
+              </section>
 
-              <h3>请求响应</h3>
+              <section class="content-section">
+              <h3 class="section-title">请求响应</h3>
               <div v-if="apiDetail?.responseModel">
                 <p v-if="apiDetail.responseModel.basicProperty" class="basic-type-display">
                   类型：{{ getFullTypeName(apiDetail.responseModel) }}
@@ -492,10 +507,11 @@
                 <div
                   v-for="model in getAllModels(apiDetail.responseModel)"
                   :key="model.simpleName"
+                  class="model-card"
                 >
-                  <h4 :id="'model-' + model.simpleName">{{ displayModel(model) }}</h4>
+                  <h4 :id="'model-' + model.simpleName" class="model-title">{{ getModelDisplayName(model) }}</h4>
                   <!-- 桌面端表格布局 -->
-                  <el-table v-if="!isMobile" :data="model.fields" border>
+                  <el-table v-if="!isMobile" :data="model.fields" class="data-table">
                     <el-table-column prop="name" label="参数名" width="auto" />
                     <el-table-column label="类型" width="auto">
                       <template #default="scope">
@@ -656,58 +672,63 @@
                   </div>
                 </div>
               </div>
+              </section>
 
-              <h3>调用示例</h3>
-              <el-tabs>
+              <section class="content-section">
+              <h3 class="section-title">调用示例</h3>
+              <el-tabs class="code-tabs">
                 <el-tab-pane label="cURL">
-                  <pre>{{ generateCurlExample(currentApi) }}</pre>
+                  <pre class="code-block">{{ generateCurlExample(currentApi) }}</pre>
                 </el-tab-pane>
                 <el-tab-pane label="JavaScript">
-                  <pre>{{ generateJsExample(currentApi) }}</pre>
+                  <pre class="code-block">{{ generateJsExample(currentApi) }}</pre>
                 </el-tab-pane>
               </el-tabs>
+              </section>
             </div>
           </div>
-        </el-tab-pane>
-
-        <!-- 通用信息tab -->
-        <el-tab-pane label="通用信息" name="common">
-          <div class="common-info">
-            <div
-              style="
-                margin: 0 auto;
-                text-align: center;
-                margin-top: 20px;
-                font-size: 20px;
-              "
-            >
-              API调用说明
             </div>
-            <el-divider />
-            <h3>通用请求参数</h3>
+
+            <div v-show="activeTab === 'common'" class="content-tab-panel">
+          <div class="content-page common-info">
+            <div class="content-section page-header-card">
+              <div class="page-header-main">
+                <div class="page-header-text">
+                  <div class="page-header-label">说明</div>
+                  <h1 class="page-hero-title">调用说明</h1>
+                  <p class="page-hero-desc">所有接口通用的请求参数与响应格式</p>
+                </div>
+              </div>
+            </div>
+
+            <section class="content-section">
+            <h3 class="section-title">通用请求参数</h3>
             <el-table
               :data="commonParams"
-              border
+              class="data-table"
               :class="{ 'responsive-table': isMobile }"
             >
               <el-table-column prop="name" label="参数名" width="auto" />
               <el-table-column prop="required" label="必填" width="auto" />
               <el-table-column prop="desc" label="说明" />
             </el-table>
+            </section>
 
-            <h3>通用响应格式</h3>
+            <section class="content-section">
+            <h3 class="section-title">通用响应格式</h3>
             <el-table
               :data="commonResponse"
-              border
+              class="data-table"
               :class="{ 'responsive-table': isMobile }"
             >
               <el-table-column prop="name" label="字段名" width="auto" />
               <el-table-column prop="desc" label="说明" />
             </el-table>
+            </section>
           </div>
-        </el-tab-pane>
-
-      </el-tabs>
+            </div>
+          </div>
+        </div>
       </template>
     </el-main>
   </el-container>
@@ -1214,17 +1235,6 @@ const generateCurlExample = (api) => {
   }'`;
 };
 
-const displayModel = (model) => {
-  if (model.parentInfo) {
-    let types = [];
-    for (let index = 0; index < model.parentInfo.length; index++) {
-      types.push(index == model.parentInfo.index ? model.simpleName : "_");
-    }
-    return `${model.parentInfo.simpleName}<${types.join(",")}>`;
-  }
-  return model.simpleName;
-};
-
 const generateJsExample = (api) => {
   // 获取必传参数
   const requiredParams =
@@ -1280,49 +1290,79 @@ const isModelGroup = (model) => {
   );
 };
 
+const getModelDisplayName = (model) => {
+  if (!model) return "";
+  const containerTypes = ["List", "Set", "Map", "Array"];
+  if (model.simpleName && !containerTypes.includes(model.simpleName)) {
+    return model.simpleName;
+  }
+  if (model.className) {
+    const shortName = model.className.split(".").pop();
+    if (shortName) return shortName;
+  }
+  return model.simpleName || "";
+};
+
+const hasNestedModelContent = (model) => {
+  if (!model) return false;
+  if (isModelGroup(model)) return true;
+  return (model.parametricModels || []).some((item) => hasNestedModelContent(item));
+};
+
 const getAllModels = (model, parentInfo) => {
-  if (!isModelGroup(model)) return [];
+  if (!model) return [];
 
-  let models = [Object.assign({ parentInfo }, model)];
+  const models = [];
 
-  // 处理泛型模型
-  if (model.parametricModels) {
-    model.parametricModels.forEach((parametricModel, index) => {
-      if (isModelGroup(parametricModel)) {
-        models.push(
-          ...getAllModels(parametricModel, {
-            index,
-            length: model.parametricModels.length,
-            simpleName: model.simpleName,
-          })
-        );
-      }
-    });
+  if (isModelGroup(model)) {
+    models.push(Object.assign({ parentInfo }, model));
   }
 
-  // 处理字段中的模型
-  (model.fields || []).forEach((field) => {
-    if (field.parametricModels) {
-      field.parametricModels.forEach((parametricModel) => {
-        if (isModelGroup(parametricModel)) {
+  const collectFromFields = (fields) => {
+    (fields || []).forEach((field) => {
+      if (field.parametricModels?.length) {
+        field.parametricModels.forEach((parametricModel) => {
           models.push(...getAllModels(parametricModel));
-        }
-      });
-    }
-    if (field.model && !field.basicProperty) {
-      models.push(...getAllModels(field.model));
-    }
-  });
+        });
+      } else if (field.model?.parametricModels?.length) {
+        field.model.parametricModels.forEach((parametricModel) => {
+          models.push(...getAllModels(parametricModel));
+        });
+      } else if (field.model && !field.model.basicProperty) {
+        models.push(...getAllModels(field.model));
+      }
+    });
+  };
+
+  if (isModelGroup(model)) {
+    collectFromFields(model.fields);
+  }
+
+  // List / Map 等 basicProperty 泛型容器，继续展开泛型参数中的模型
+  if (model.parametricModels?.length) {
+    model.parametricModels.forEach((parametricModel, index) => {
+      models.push(
+        ...getAllModels(parametricModel, {
+          index,
+          length: model.parametricModels.length,
+          simpleName: model.simpleName,
+        })
+      );
+    });
+  }
 
   return models;
 };
 
-// 是否应显示模型锚点链接（basicProperty 及无字段的基础类型不跳转）
+// 是否应显示模型锚点链接（basicProperty 基础类型不跳转，泛型参数中的对象类型可跳转）
 const isObjectType = (field) => {
-  if (!field || field.basicProperty) return false;
-  if (field.model?.basicProperty) return false;
-  if (field.model) return isModelGroup(field.model);
-  return !field.basicProperty;
+  if (!field) return false;
+  // 泛型容器（List/Map 等）本身不跳转，由 getGenericParams 处理泛型参数链接
+  if (field.basicProperty && isGenericType(field)) return false;
+  if (field.basicProperty) return false;
+  if (field.model?.basicProperty && !field.model?.parametricModels?.length) return false;
+  if (field.model) return hasNestedModelContent(field.model);
+  return true;
 };
 
 const isGenericType = (field) => {
@@ -1333,7 +1373,7 @@ const getTypeName = (field) => {
   if (!field) {
     return "";
   }
-  return field.typeName;
+  return field.typeName || field.simpleName || "";
 };
 
 const getGenericParams = (field) => {
@@ -1343,8 +1383,8 @@ const getGenericParams = (field) => {
   return field.parametricModels
     .filter((item) => !!item)
     .map((item) => ({
-      name: item.simpleName || "",
-      isObject: isModelGroup(item),
+      name: getModelDisplayName(item),
+      isObject: hasNestedModelContent(item),
     }));
 };
 
@@ -1833,40 +1873,38 @@ const generateMarkdownDocumentation = (allApiDetails) => {
         markdown += "#### 请求参数\n\n";
         if (detail.paramModel.basicProperty) {
           markdown += `类型：${getFullTypeName(detail.paramModel)}\n\n`;
-        } else {
-          const models = getAllModels(detail.paramModel);
-          if (models.length > 0) {
-            models.forEach((model) => {
-              markdown += `**${model.simpleName}**\n\n`;
-              markdown += "| 参数名 | 类型 | 必填 | 说明 |\n";
-              markdown += "|--------|------|------|----------|\n";
-              (model.fields || []).forEach((field) => {
-                const typeName = getFullTypeName(field);
-                const required = field.required ? "是" : "否";
-                let desc = field.desc || "-";
+        }
+        const paramModels = getAllModels(detail.paramModel);
+        if (paramModels.length > 0) {
+          paramModels.forEach((model) => {
+            markdown += `**${getModelDisplayName(model)}**\n\n`;
+            markdown += "| 参数名 | 类型 | 必填 | 说明 |\n";
+            markdown += "|--------|------|------|----------|\n";
+            (model.fields || []).forEach((field) => {
+              const typeName = getFullTypeName(field);
+              const required = field.required ? "是" : "否";
+              let desc = field.desc || "-";
 
-                // 如果是枚举类型，添加枚举值信息
-                if (
-                  field.enumInfo &&
-                  field.enumInfo.properties &&
-                  field.enumInfo.properties.length > 0
-                ) {
-                  const enumValues = field.enumInfo.properties
-                    .map((item) => `${item.desc}(${item.value})`)
-                    .join("、");
-                  desc =
-                    desc !== "-"
-                      ? `${desc}；枚举值：${enumValues}`
-                      : `枚举值：${enumValues}`;
-                }
+              if (
+                field.enumInfo &&
+                field.enumInfo.properties &&
+                field.enumInfo.properties.length > 0
+              ) {
+                const enumValues = field.enumInfo.properties
+                  .map((item) => `${item.desc}(${item.value})`)
+                  .join("、");
+                desc =
+                  desc !== "-"
+                    ? `${desc}；枚举值：${enumValues}`
+                    : `枚举值：${enumValues}`;
+              }
 
-                markdown += `| ${field.name} | ${typeName} | ${required} | ${desc} |\n`;
-              });
-              markdown += "\n";
+              markdown += `| ${field.name} | ${typeName} | ${required} | ${desc} |\n`;
             });
-          } else {
-            markdown += "无参数\n\n";
-          }
+            markdown += "\n";
+          });
+        } else if (!detail.paramModel.basicProperty) {
+          markdown += "无参数\n\n";
         }
       }
 
@@ -1875,39 +1913,37 @@ const generateMarkdownDocumentation = (allApiDetails) => {
         markdown += "#### 请求响应\n\n";
         if (detail.responseModel.basicProperty) {
           markdown += `类型：${getFullTypeName(detail.responseModel)}\n\n`;
-        } else {
-          const models = getAllModels(detail.responseModel);
-          if (models.length > 0) {
-            models.forEach((model) => {
-              markdown += `**${model.simpleName}**\n\n`;
-              markdown += "| 字段名 | 类型 | 说明 |\n";
-              markdown += "|--------|------|------|\n";
-              (model.fields || []).forEach((field) => {
-                const typeName = getFullTypeName(field);
-                let desc = field.desc || "-";
+        }
+        const responseModels = getAllModels(detail.responseModel);
+        if (responseModels.length > 0) {
+          responseModels.forEach((model) => {
+            markdown += `**${getModelDisplayName(model)}**\n\n`;
+            markdown += "| 字段名 | 类型 | 说明 |\n";
+            markdown += "|--------|------|------|\n";
+            (model.fields || []).forEach((field) => {
+              const typeName = getFullTypeName(field);
+              let desc = field.desc || "-";
 
-                // 如果是枚举类型，添加枚举值信息
-                if (
-                  field.enumInfo &&
-                  field.enumInfo.properties &&
-                  field.enumInfo.properties.length > 0
-                ) {
-                  const enumValues = field.enumInfo.properties
-                    .map((item) => `${item.desc}(${item.value})`)
-                    .join("、");
-                  desc =
-                    desc !== "-"
-                      ? `${desc}；枚举值：${enumValues}`
-                      : `枚举值：${enumValues}`;
-                }
+              if (
+                field.enumInfo &&
+                field.enumInfo.properties &&
+                field.enumInfo.properties.length > 0
+              ) {
+                const enumValues = field.enumInfo.properties
+                  .map((item) => `${item.desc}(${item.value})`)
+                  .join("、");
+                desc =
+                  desc !== "-"
+                    ? `${desc}；枚举值：${enumValues}`
+                    : `枚举值：${enumValues}`;
+              }
 
-                markdown += `| ${field.name} | ${typeName} | ${desc} |\n`;
-              });
-              markdown += "\n";
+              markdown += `| ${field.name} | ${typeName} | ${desc} |\n`;
             });
-          } else {
-            markdown += "无响应数据\n\n";
-          }
+            markdown += "\n";
+          });
+        } else if (!detail.responseModel.basicProperty) {
+          markdown += "无响应数据\n\n";
         }
       } else {
         markdown += "#### 请求响应\n\n";
@@ -1956,38 +1992,36 @@ const generateSingleApiMarkdown = (api, detail) => {
       markdown += "### 请求参数\n\n";
       if (detail.paramModel.basicProperty) {
         markdown += `类型：${getFullTypeName(detail.paramModel)}\n\n`;
-      } else {
-        const models = getAllModels(detail.paramModel);
-        if (models.length > 0) {
-          models.forEach((model) => {
-            markdown += `**${model.simpleName}**\n\n`;
-            markdown += "| 参数名 | 类型 | 必填 | 说明 |\n";
-            markdown += "|--------|------|------|----------|\n";
-            (model.fields || []).forEach((field) => {
-              const typeName = getFullTypeName(field);
-              const required = field.required ? "是" : "否";
-              let desc = field.desc || "-";
+      }
+      const paramModels = getAllModels(detail.paramModel);
+      if (paramModels.length > 0) {
+        paramModels.forEach((model) => {
+          markdown += `**${getModelDisplayName(model)}**\n\n`;
+          markdown += "| 参数名 | 类型 | 必填 | 说明 |\n";
+          markdown += "|--------|------|------|----------|\n";
+          (model.fields || []).forEach((field) => {
+            const typeName = getFullTypeName(field);
+            const required = field.required ? "是" : "否";
+            let desc = field.desc || "-";
 
-              // 如果是枚举类型，添加枚举值信息
-              if (
-                field.enumInfo &&
-                field.enumInfo.properties &&
-                field.enumInfo.properties.length > 0
-              ) {
-                const enumValues = field.enumInfo.properties
-                  .map((item) => `${item.desc}(${item.value})`)
-                  .join("、");
-                desc =
-                  desc !== "-" ? `${desc}；枚举值：${enumValues}` : `枚举值：${enumValues}`;
-              }
+            if (
+              field.enumInfo &&
+              field.enumInfo.properties &&
+              field.enumInfo.properties.length > 0
+            ) {
+              const enumValues = field.enumInfo.properties
+                .map((item) => `${item.desc}(${item.value})`)
+                .join("、");
+              desc =
+                desc !== "-" ? `${desc}；枚举值：${enumValues}` : `枚举值：${enumValues}`;
+            }
 
-              markdown += `| ${field.name} | ${typeName} | ${required} | ${desc} |\n`;
-            });
-            markdown += "\n";
+            markdown += `| ${field.name} | ${typeName} | ${required} | ${desc} |\n`;
           });
-        } else {
-          markdown += "无参数\n\n";
-        }
+          markdown += "\n";
+        });
+      } else if (!detail.paramModel.basicProperty) {
+        markdown += "无参数\n\n";
       }
     }
 
@@ -1996,37 +2030,35 @@ const generateSingleApiMarkdown = (api, detail) => {
       markdown += "### 请求响应\n\n";
       if (detail.responseModel.basicProperty) {
         markdown += `类型：${getFullTypeName(detail.responseModel)}\n\n`;
-      } else {
-        const models = getAllModels(detail.responseModel);
-        if (models.length > 0) {
-          models.forEach((model) => {
-            markdown += `**${model.simpleName}**\n\n`;
-            markdown += "| 字段名 | 类型 | 说明 |\n";
-            markdown += "|--------|------|------|\n";
-            (model.fields || []).forEach((field) => {
-              const typeName = getFullTypeName(field);
-              let desc = field.desc || "-";
+      }
+      const responseModels = getAllModels(detail.responseModel);
+      if (responseModels.length > 0) {
+        responseModels.forEach((model) => {
+          markdown += `**${getModelDisplayName(model)}**\n\n`;
+          markdown += "| 字段名 | 类型 | 说明 |\n";
+          markdown += "|--------|------|------|\n";
+          (model.fields || []).forEach((field) => {
+            const typeName = getFullTypeName(field);
+            let desc = field.desc || "-";
 
-              // 如果是枚举类型，添加枚举值信息
-              if (
-                field.enumInfo &&
-                field.enumInfo.properties &&
-                field.enumInfo.properties.length > 0
-              ) {
-                const enumValues = field.enumInfo.properties
-                  .map((item) => `${item.desc}(${item.value})`)
-                  .join("、");
-                desc =
-                  desc !== "-" ? `${desc}；枚举值：${enumValues}` : `枚举值：${enumValues}`;
-              }
+            if (
+              field.enumInfo &&
+              field.enumInfo.properties &&
+              field.enumInfo.properties.length > 0
+            ) {
+              const enumValues = field.enumInfo.properties
+                .map((item) => `${item.desc}(${item.value})`)
+                .join("、");
+              desc =
+                desc !== "-" ? `${desc}；枚举值：${enumValues}` : `枚举值：${enumValues}`;
+            }
 
-              markdown += `| ${field.name} | ${typeName} | ${desc} |\n`;
-            });
-            markdown += "\n";
+            markdown += `| ${field.name} | ${typeName} | ${desc} |\n`;
           });
-        } else {
-          markdown += "无响应数据\n\n";
-        }
+          markdown += "\n";
+        });
+      } else if (!detail.responseModel.basicProperty) {
+        markdown += "无响应数据\n\n";
       }
     } else {
       markdown += "### 请求响应\n\n";
@@ -2551,175 +2583,394 @@ const handleExportSelected = async () => {
   flex-direction: column;
   overflow: hidden;
   padding: 0 !important;
+  background: #f7f8fa;
 }
 
-.main-toolbar {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 12px 20px;
-  flex-shrink: 0;
-  border-bottom: 1px solid #eef0f3;
-  background: #fff;
-}
-
-.main-tabs {
+.content-frame {
   flex: 1;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  background: #f7f8fa;
 }
 
-.main-tabs :deep(.el-tabs__header) {
-  margin: 0;
-  padding: 0 20px;
-  background: #fff;
+.content-nav-wrap,
+.content-page {
+  width: 100%;
+  padding-left: 24px;
+  padding-right: 24px;
+  box-sizing: border-box;
 }
 
-.main-tabs :deep(.el-tabs__content) {
+.content-nav-wrap {
+  flex-shrink: 0;
+  padding-top: 16px;
+  padding-bottom: 0;
+}
+
+.content-nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 20px;
+  margin-bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.content-frame-body {
   flex: 1;
   overflow-y: auto;
-  padding: 0;
 }
 
-.api-detail {
-  margin: 0 auto;
-  padding: 20px;
-  animation: fadeIn 0.5s ease;
+.content-tab-panel {
+  min-height: 100%;
+}
+
+.content-nav-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.content-nav-tab {
+  border: none;
+  background: transparent;
+  padding: 6px 14px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #606266;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  line-height: 1.4;
+}
+
+.content-nav-tab:hover {
+  color: var(--el-color-primary);
+  background: #f0f4ff;
+}
+
+.content-nav-tab.active {
+  color: var(--el-color-primary);
+  background: #ecf5ff;
+}
+
+.page-header-card {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.page-header-card-center {
+  justify-content: center;
+}
+
+.page-header-card-center .page-header-main {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.page-header-main {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+}
+
+.page-header-text {
+  min-width: 0;
+}
+
+.page-header-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #909399;
+  margin-bottom: 4px;
+  letter-spacing: 0.02em;
+}
+
+.page-header-card .page-hero-title {
+  font-size: 18px;
+  margin-bottom: 4px;
+}
+
+.page-header-card .page-hero-desc {
+  font-size: 13px;
+}
+
+.page-header-card-center .page-hero-icon {
+  margin-bottom: 8px;
+}
+
+.page-header-card-center .page-hero-title {
+  font-size: 22px;
+}
+
+/* 内容页通用布局 */
+.content-page {
+  padding-bottom: 24px;
+  animation: fadeIn 0.35s ease;
+}
+
+.page-hero-icon {
+  font-size: 32px;
+  color: var(--el-color-primary);
+  flex-shrink: 0;
+}
+
+.page-hero-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2329;
+  margin: 0 0 4px;
+  line-height: 1.4;
+}
+
+.page-hero-desc {
+  font-size: 13px;
+  color: #8f959e;
+  margin: 0;
+  line-height: 1.6;
+}
+
+.content-section {
+  background: #fff;
+  border: 1px solid #eef0f3;
+  border-radius: 10px;
+  padding: 20px 24px;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  margin: 0 0 16px;
+  padding: 0 0 12px;
+  border-bottom: 1px solid #f0f2f5;
+  border-left: none;
+  background: none;
+  border-radius: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2329;
+  scroll-margin-top: 20px;
+  word-break: break-all;
+  transition: none;
+  transform: none;
+}
+
+.section-title:hover {
+  background: none;
+  transform: none;
+}
+
+.model-card {
+  margin-bottom: 16px;
+}
+
+.model-card:last-child {
+  margin-bottom: 0;
+}
+
+.model-title {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  background: #f7f8fa;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #409eff;
+  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
+  scroll-margin-top: 20px;
+  word-break: break-all;
 }
 
 .basic-type-display {
+  display: inline-block;
   color: #606266;
-  margin-bottom: 16px;
-  font-size: 14px;
+  margin-bottom: 12px;
+  padding: 6px 12px;
+  font-size: 13px;
+  background: #f7f8fa;
+  border-radius: 6px;
+  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
 }
 
-/* README引导页样式 */
-.readme-guide {
-  margin: 0 auto;
-  padding: 20px;
-  animation: fadeIn 0.5s ease;
+/* API 详情页 */
+.api-detail-icon {
+  font-size: 20px;
+  color: var(--el-color-primary);
+  flex-shrink: 0;
+  margin-top: 2px;
 }
 
-.readme-header {
-  text-align: center;
-  margin-bottom: 40px;
-}
-
-.readme-header h1 {
-  font-size: 2.5rem;
-  margin-bottom: 16px;
-  color: #303133;
-  font-weight: 700;
-}
-
-.readme-subtitle {
-  font-size: 1.1rem;
-  color: #606266;
+.api-action-name {
   margin: 0;
-  line-height: 1.6;
-}
-
-.readme-content {
-  margin: 40px 0;
-}
-
-.readme-content h2 {
-  font-size: 1.8rem;
-  margin: 30px 0 20px 0;
-  color: #303133;
+  font-size: 15px;
   font-weight: 600;
-  border-left: 4px solid var(--el-color-primary);
-  padding-left: 16px;
+  color: #1f2329;
+  line-height: 1.5;
+  word-break: break-all;
+  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
 }
 
-.readme-section {
-  margin: 30px 0;
+.api-detail-alert {
+  margin-bottom: 16px;
+}
+
+.api-detail-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* README 引导页 */
+.readme-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.readme-card {
+  background: #fff;
+  border: 1px solid #eef0f3;
+  border-radius: 10px;
   padding: 20px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  border-left: 4px solid var(--el-color-primary);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
-.readme-section h3 {
-  font-size: 1.3rem;
-  margin: 0 0 12px 0;
-  color: #303133;
-  font-weight: 600;
-  border: none;
+.readme-card:hover {
+  border-color: #d0d7de;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+}
+
+.readme-card-num {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--el-color-primary);
+  background: #ecf5ff;
+  padding: 2px 8px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.readme-card h3 {
+  margin: 0 0 8px;
   padding: 0;
-  background: transparent;
+  border: none;
+  background: none;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2329;
 }
 
-.readme-section p {
-  margin: 0 0 12px 0;
-  color: #606266;
+.readme-card p {
+  margin: 0 0 10px;
+  font-size: 13px;
+  color: #8f959e;
   line-height: 1.6;
 }
 
-.readme-section ul {
-  margin: 12px 0 0 0;
-  padding-left: 24px;
+.readme-card ul {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 13px;
   color: #606266;
   line-height: 1.8;
 }
 
-.readme-section li {
-  margin: 8px 0;
+.readme-card li {
+  margin: 4px 0;
 }
 
-.readme-tips {
-  margin: 40px 0;
+.tips-card {
+  border-left: 3px solid var(--el-color-primary);
 }
 
-.readme-tips h2 {
-  font-size: 1.8rem;
-  margin: 30px 0 20px 0;
-  color: #303133;
+.tips-card-title {
+  font-size: 14px;
   font-weight: 600;
-  border-left: 4px solid var(--el-color-primary);
-  padding-left: 16px;
+  color: #1f2329;
+  margin-bottom: 12px;
 }
 
-.readme-tips .el-alert {
-  margin-top: 20px;
-}
-
-.readme-tips ul {
-  margin: 12px 0;
+.tips-card ul {
+  margin: 0;
   padding-left: 20px;
+  font-size: 13px;
+  color: #606266;
   line-height: 1.8;
 }
 
-.readme-tips li {
-  margin: 8px 0;
+.tips-card li {
+  margin: 6px 0;
 }
 
-@media (max-width: 768px) {
-  .readme-guide {
-    padding: 20px 15px;
-  }
+/* 数据表格 */
+.data-table {
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+}
 
-  .readme-header h1 {
-    font-size: 1.8rem;
-  }
+.data-table :deep(.el-table__header th) {
+  background: #f7f8fa !important;
+  color: #606266;
+  font-weight: 600;
+  font-size: 13px;
+}
 
-  .readme-subtitle {
-    font-size: 1rem;
-  }
+.data-table :deep(.el-table__body td) {
+  font-size: 13px;
+}
 
-  .readme-content h2,
-  .readme-tips h2 {
-    font-size: 1.4rem;
-  }
+.data-table :deep(.el-table__row:hover > td) {
+  background: #fafbfc !important;
+}
 
-  .readme-section {
-    padding: 15px;
-  }
+/* 代码示例 */
+.code-tabs :deep(.el-tabs__header) {
+  margin-bottom: 1px;
+  border-radius: 8px 8px 0 0;
+  background: #f7f8fa;
+  padding: 0 20px;
+}
 
-  .readme-section h3 {
-    font-size: 1.1rem;
-  }
+.code-tabs :deep(.el-tabs__item) {
+  padding: 0px 10px;
+}
+
+.code-tabs :deep(.el-tabs__content) {
+  padding: 0;
+}
+
+.code-block {
+  margin: 0;
+  padding: 16px 20px;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  border-radius: 0 0 8px 8px;
+  overflow-x: auto;
+  font-size: 13px;
+  line-height: 1.6;
+  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
+  border: none;
+  box-shadow: none;
+}
+
+.code-block:hover {
+  border: none;
+  box-shadow: none;
+}
+
+.common-info .content-section:last-child {
+  margin-bottom: 0;
 }
 
 @keyframes fadeIn {
@@ -2760,12 +3011,6 @@ h3 {
   border-radius: 4px;
   font-weight: 600;
   color: #303133;
-  transition: all 0.3s ease;
-}
-
-h3:hover {
-  background: linear-gradient(90deg, #e1f3ff 0%, transparent 100%);
-  transform: translateX(4px);
 }
 
 pre {
@@ -2774,13 +3019,16 @@ pre {
   border-radius: 8px;
   overflow-x: auto;
   border: 1px solid #e4e7ed;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
-  transition: all 0.3s ease;
+  font-size: 13px;
+  line-height: 1.6;
 }
 
-pre:hover {
-  border-color: var(--el-color-primary);
-  box-shadow: inset 0 2px 4px rgba(64, 158, 255, 0.1);
+h4 {
+  margin: 15px 0;
+  padding: 10px;
+  background-color: #f5f7fa;
+  scroll-margin-top: 20px;
+  word-break: break-all;
 }
 
 /* 对象类型的属性名称样式 */
@@ -2799,13 +3047,56 @@ pre:hover {
   margin-bottom: 0;
 }
 
-h4 {
-  margin: 15px 0;
-  padding: 10px;
-  background-color: #f5f7fa;
-  /* border-left: 4px solid #333333; */
-  scroll-margin-top: 20px;
-  word-break: break-all;
+@media (max-width: 768px) {
+  .content-nav-wrap,
+  .content-page {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .content-page {
+    padding-bottom: 16px;
+  }
+
+  .content-nav-wrap {
+    padding-top: 12px;
+  }
+
+  .content-nav-bar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .content-nav-tabs {
+    width: 100%;
+  }
+
+  .content-nav-tab {
+    flex: 1;
+    text-align: center;
+  }
+
+  .page-header-card {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .readme-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .page-header-card-center .page-hero-title {
+    font-size: 18px;
+  }
+
+  .api-action-name {
+    font-size: 13px;
+  }
+
+  .content-section {
+    padding: 16px;
+  }
 }
 
 /* 隐藏滚动条但保持可滚动 */
@@ -2843,9 +3134,9 @@ h4 {
     min-height: 100vh;
   }
 
-  .el-main {
-    padding: 10px;
-    background: #ffffff;
+  .el-main.main-content {
+    padding: 0 !important;
+    background: #f7f8fa;
   }
 
   .api-detail {
@@ -2871,42 +3162,70 @@ h4 {
 
 /* 移动端字段列表样式 */
 .mobile-field-list {
-  margin-bottom: 20px;
+  margin-bottom: 0;
+}
+
+.mobile-field-list :deep(.el-collapse) {
+  border: 1px solid #eef0f3;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.mobile-field-list :deep(.el-collapse-item__header) {
+  padding: 0 12px;
+  font-size: 13px;
+  background: #fafbfc;
+}
+
+.mobile-field-list :deep(.el-collapse-item__wrap) {
+  border-bottom: none;
 }
 
 .mobile-field-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  padding-right: 8px;
 }
 
 .field-name {
-  font-weight: bold;
+  font-weight: 600;
+  color: #1f2329;
 }
 
 .field-required {
   color: #f56c6c;
-  padding: 2px 6px;
+  background: #fef0f0;
+  padding: 1px 6px;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 11px;
 }
 
 .mobile-field-content {
-  padding: 10px;
+  padding: 12px;
+  background: #fff;
 }
 
 .field-item {
   margin-bottom: 10px;
 }
 
+.field-item:last-child {
+  margin-bottom: 0;
+}
+
 .field-label {
-  font-weight: bold;
+  font-weight: 600;
   margin-bottom: 4px;
-  color: #606266;
+  color: #909399;
+  font-size: 12px;
 }
 
 .field-value {
-  padding: 4px 0;
+  padding: 2px 0;
+  color: #303133;
+  font-size: 13px;
 }
 
 /* 目录式导航样式 */
@@ -2968,12 +3287,6 @@ h4 {
   flex-shrink: 0;
 }
 
-.common-info {
-  margin: 0 auto;
-  padding: 20px;
-  animation: fadeIn 0.5s ease;
-}
-
 /* 导出模块样式 */
 .export-drawer :deep(.el-drawer__body) {
   padding: 0;
@@ -3007,12 +3320,6 @@ h4 {
   padding: 16px;
 }
 
-.common-info {
-  margin: 0 auto;
-  padding: 20px;
-  animation: fadeIn 0.5s ease;
-}
-
 .card-header {
   display: flex;
   align-items: center;