添加api应用使用说明

src/views/index.vue

@@ -65,9 +65,10 @@
                        :style="{ background: 'url(' + i.homeImage + ')',backgroundSize: 'cover' }">
                        :style="{ background: 'url(' + i.homeImage + ')',backgroundSize: 'cover' }">
                     <div class="item"><h3 class="title">{{ i.title }}</h3>
                     <div class="item"><h3 class="title">{{ i.title }}</h3>
                       <p class="desc" v-html="i.description"></p>
                       <p class="desc" v-html="i.description"></p>
-                      <p class="info flex-justify-end" @click="openAssembly(i)"><span class="btn">{{
-                          i.information
-                        }} </span></p></div>
+                      <p class="info flex-justify-end" style="height: 52px" @click="openAssembly(i)">
+                        <span class="btn">{{ i.information }} </span>
+                      </p>
+                    </div>
                   </div>
                   </div>
                 </div>
                 </div>
               </div>
               </div>

src/views/industryApplications/detail.vue

@@ -112,19 +112,109 @@ getDetail()
     color: #303233;
     color: #303233;
     font-size: 16px;
     font-size: 16px;
     line-height: 1.8;
     line-height: 1.8;
+    word-break: break-word;
 
 
+    // 段落
     p {
     p {
       margin: 0 0 12px;
       margin: 0 0 12px;
     }
     }
 
 
+    // 标题（wangEditor 工具栏的"标题1~6"输出真实 h1~h6）
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: bold;
+      color: #303233;
+      line-height: 1.4;
+      margin: 24px 0 12px;
+    }
+    h1 { font-size: 28px; }
+    h2 { font-size: 24px; }
+    h3 { font-size: 20px; }
+    h4 { font-size: 18px; }
+    h5 { font-size: 16px; }
+    h6 { font-size: 14px; }
+
+    // 强调
+    strong { font-weight: bold; }
+    em { font-style: italic; }
+    u { text-decoration: underline; }
+    s, del { text-decoration: line-through; }
+
+    // 列表
+    ul, ol {
+      margin: 0 0 12px;
+      padding-left: 24px;
+      li { margin-bottom: 4px; }
+    }
+    ul li { list-style: disc; }
+    ol li { list-style: decimal; }
+
+    // 引用
+    blockquote {
+      margin: 12px 0;
+      padding: 8px 16px;
+      border-left: 4px solid #2E77E3;
+      background-color: #f5f7fa;
+      color: #626566;
+    }
+
+    // 代码块 / 行内代码
+    pre {
+      margin: 12px 0;
+      padding: 12px 16px;
+      background-color: #f5f7fa;
+      border-radius: 4px;
+      font-family: Consolas, Monaco, "Courier New", monospace;
+      font-size: 14px;
+      overflow-x: auto;
+      code {
+        background: transparent;
+        padding: 0;
+        font-size: inherit;
+      }
+    }
+    code {
+      background-color: #f5f7fa;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-family: Consolas, Monaco, "Courier New", monospace;
+      font-size: 14px;
+      color: #c7254e;
+    }
+
+    // 链接
+    a {
+      color: #2E77E3;
+      text-decoration: none;
+      &:hover { text-decoration: underline; }
+    }
+
+    // 图片
     img {
     img {
       height: auto;
       height: auto;
       max-width: 100%;
       max-width: 100%;
     }
     }
 
 
+    // 表格
     table {
     table {
       width: 100%;
       width: 100%;
       border-collapse: collapse;
       border-collapse: collapse;
+      margin: 12px 0;
+      th, td {
+        border: 1px solid #dcdfe6;
+        padding: 8px 12px;
+        text-align: left;
+      }
+      th {
+        background-color: #f5f7fa;
+        font-weight: bold;
+      }
+    }
+
+    // 分割线
+    hr {
+      border: none;
+      border-top: 1px solid #dcdfe6;
+      margin: 20px 0;
     }
     }
   }
   }
 
 

src/views/marketplace/AIMarketplaceDetail.vue

@@ -107,6 +107,7 @@
           <el-tabs v-model="mainTab" class="main-tabs">
           <el-tabs v-model="mainTab" class="main-tabs">
             <el-tab-pane label="应用说明" name="detail"></el-tab-pane>
             <el-tab-pane label="应用说明" name="detail"></el-tab-pane>
             <el-tab-pane label="接口文档" name="doc"></el-tab-pane>
             <el-tab-pane label="接口文档" name="doc"></el-tab-pane>
+            <el-tab-pane label="使用说明" name="usage"></el-tab-pane>
           </el-tabs>
           </el-tabs>
 
 
           <div class="tab-content-area">
           <div class="tab-content-area">
@@ -150,6 +151,13 @@
               <!-- 接口文档 HTML -->
               <!-- 接口文档 HTML -->
               <div class="doc-content" v-html="productData.doc"></div>
               <div class="doc-content" v-html="productData.doc"></div>
             </div>
             </div>
+
+            <!-- 使用说明 tab (通用) -->
+            <UsageGuide
+                v-else-if="mainTab === 'usage'"
+                :appName="productData.name"
+                :apiEndPoints="productData.apiEndPoints"
+            />
           </div>
           </div>
         </div>
         </div>
 
 
@@ -266,6 +274,7 @@ import { OfficeBuilding, Phone } from '@element-plus/icons-vue'
 import QRCode from "qrcode";
 import QRCode from "qrcode";
 import {PayOrderStatusEnum} from "@/utils/constants.js";
 import {PayOrderStatusEnum} from "@/utils/constants.js";
 import request from "@/utils/request.js";
 import request from "@/utils/request.js";
+import UsageGuide from "./components/UsageGuide.vue";
 
 
 const router = useRouter();
 const router = useRouter();
 const route = useRoute();
 const route = useRoute();