From 39b2524c7c4f968d25fa4739bbbf4102dc43792b Mon Sep 17 00:00:00 2001
From: wxy <14293288+zysysys@user.noreply.gitee.com>
Date: Fri, 6 Sep 2024 15:54:27 +0800
Subject: [PATCH] =?UTF-8?q?```=E9=87=8D=E6=9E=84=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整接口文档组件的展示格式，包括接口描述、价格、请求示例以及返回示例。
-增加对接口返回格式（json）的标注，提升请求示例的清晰度。
- 移除未使用的请求方法和apiDescription数据属性。
- 优化返回示例卡片的样式，增强可读性。
- 代码沙箱id: 39eeacaf78350623f522f79fa8313fc1d115712c
```
---
 src/views/port/sys/index.vue | 40 +++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/views/port/sys/index.vue b/src/views/port/sys/index.vue
index fb37664..900d32b 100644
--- a/src/views/port/sys/index.vue
+++ b/src/views/port/sys/index.vue
@@ -5,8 +5,8 @@
       <div>
         <el-image :src="picture" style="width: 80%; max-width: 300px; height: auto;" fit="contain"></el-image>
         <h2>{{ name }}</h2>
-        <p><strong>描述:</strong> {{ describe }}</p>
-        <p><strong>价格:</strong> {{ price }}/次</p>
+        <p>{{remark}}</p>
+        <p><strong></strong> {{ price }}/次</p>
       </div>
     </el-aside>
     <div>
@@ -22,11 +22,18 @@
             <el-card>
               <div slot="header" class="clearfix">
                 <p>接口地址: {{apiEndpoint}}</p>
+                <p>返回格式: json</p>
                 <p>请求方式: {{connectorRequest}}</p>
                 <p>请求示例: {{apiEndpoint}}?=你申请的KEY&{{apiKey}}</p>
-              </div>
-              <div>
-                <p>{{ requestMethod }}</p>
+                <p>简介: {{describe}}</p>
+                <h2>json返回示例:</h2>
+                <el-card class="return-example-card">
+                  <pre>{{ returnExample }}</pre>
+                </el-card>
+                <h2>xml返回示例:</h2>
+                <el-card class="return-example-card">
+                  <pre>{{ returnXml }}</pre>
+                </el-card>
               </div>
             </el-card>
           </div>
@@ -56,6 +63,9 @@ export default {
       describe: '',
       price: '',
       picture: '',
+      returnExample:'',
+      remark: '',
+      returnXml: '',
       apiKey:'N/A',
       apiEndpoint: 'N/A',
       connectorRequest: 'N/A',
@@ -79,11 +89,10 @@ export default {
         this.picture = data.connectorPicture;
         this.apiEndpoint = data.connectorApiurl;
         this.apiKey = data.connectorApikey;
-        this.connectorRequest = data.connectorRequest
-        this.responseFormat = data.responseFormat;
-        this.requestMethod = data.requestMethod;
-        this.requestExample = data.requestExample;
-        this.apiDescription = data.apiDescription;
+        this.remark = data.remark
+        this.connectorRequest = data.connectorRequest;
+        this.returnExample = data.returnExample;
+        this.returnXml = data.returnXml;
       } catch (error) {
         console.error("Failed to fetch API data:", error);
       }
@@ -102,4 +111,15 @@ export default {
 .api-docs {
   margin-top: 20px;
 }
+.return-example-card {
+  margin-top: 20px;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border: 1px solid #dcdfe6;
+}
+.return-example-card pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
 </style>