From b2acb0e809dd6be105c235195e4668886387fd9e Mon Sep 17 00:00:00 2001
From: wxy <14293288+zysysys@user.noreply.gitee.com>
Date: Thu, 5 Sep 2024 22:21:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E6=A1=A3=E8=A7=86=E5=9B=BE=E5=A2=9E?=
 =?UTF-8?q?=E5=BC=BA=EF=BC=9A=E6=96=B0=E5=A2=9EAPI=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E3=80=81=E9=94=99=E8=AF=AF=E7=A0=81=E5=8F=82=E7=85=A7=E5=92=8C?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1=E9=80=89=E9=A1=B9=E5=8D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在文档视图中实现新的功能选项卡，包括“API文档”、“错误码参照”和“数据统计”。这改进了文档的结构，使用户能更方便地访问和理解API接口的使用、可能的错误及其统计信息。
---
 src/views/port/port/employee.vue |  3 +-
 src/views/port/sys/index.vue     | 87 +++++++++++++++++++++++++++++---
 2 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/src/views/port/port/employee.vue b/src/views/port/port/employee.vue
index 3df8c3c..11ed661 100644
--- a/src/views/port/port/employee.vue
+++ b/src/views/port/port/employee.vue
@@ -398,7 +398,8 @@ export default {
           name: connector.connectorName,
           picture: connector.connectorPicture,
           describe: connector.connectorDescribe,
-          price: connector.connectorPrice
+          price: connector.connectorPrice,
+          requestMethod: this.buyForm.connectorRequest
         }
       });
     },
diff --git a/src/views/port/sys/index.vue b/src/views/port/sys/index.vue
index 4a981f7..afc2bc0 100644
--- a/src/views/port/sys/index.vue
+++ b/src/views/port/sys/index.vue
@@ -1,15 +1,77 @@
+<!-- src/views/Documentation.vue -->
 <template>
   <el-container>
     <el-aside width="400px" style="background-color: #f5f5f5; padding: 20px;">
       <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>
       </div>
     </el-aside>
-    <el-main style="padding: 20px;">
-      <el-image :src="picture" style="width: 100%; max-width: 400px; height: auto;" fit="contain"></el-image>
-    </el-main>
+    <div>
+      <el-tabs v-model="activeTab" @click="handleTabClick">
+        <el-tab-pane label="api 文档" name="api-docs"></el-tab-pane>
+        <el-tab-pane label="错误码参照" name="error-codes"></el-tab-pane>
+        <el-tab-pane label="数据统计" name="data-stats"></el-tab-pane>
+      </el-tabs>
+
+      <div v-if="activeTab === 'api-docs'">
+        <el-main style="padding: 20px;">
+          <div class="api-docs" style="margin-top: 20px;">
+            <h3>API 文档</h3>
+            <el-card>
+              <div slot="header" class="clearfix">
+                <span>接口地址</span>
+              </div>
+              <div>
+                <p>{{ apiEndpoint }}</p>
+              </div>
+            </el-card>
+            <el-card>
+              <div slot="header" class="clearfix">
+                <span>返回格式</span>
+              </div>
+              <div>
+                <p>{{ responseFormat }}</p>
+              </div>
+            </el-card>
+            <el-card>
+              <div slot="header" class="clearfix">
+                <span>请求方式</span>
+              </div>
+              <div>
+                <p>{{ requestMethod }}</p>
+              </div>
+            </el-card>
+            <el-card>
+              <div slot="header" class="clearfix">
+                <span>请求示例</span>
+              </div>
+              <div>
+                <pre>{{ requestExample }}</pre>
+              </div>
+            </el-card>
+            <el-card>
+              <div slot="header" class="clearfix">
+                <span>简介</span>
+              </div>
+              <div>
+                <p>{{ apiDescription }}</p>
+              </div>
+            </el-card>
+          </div>
+        </el-main>
+      </div>
+
+      <div v-if="activeTab === 'error-codes'">
+        <h1>错误码参照</h1>
+      </div>
+
+      <div v-if="activeTab === 'data-stats'">
+        <h2>数据统计</h2>
+      </div>
+    </div>
   </el-container>
 </template>
 
@@ -17,15 +79,28 @@
 export default {
   data() {
     return {
+      activeTab: 'api-docs' ,
       name: this.$route.query.name || '',
       describe: this.$route.query.describe || '',
       price: this.$route.query.price || '',
-      picture: this.$route.query.picture || ''
+      picture: this.$route.query.picture || '',
+      apiEndpoint: this.$route.query.apiEndpoint || 'N/A',
+      responseFormat: this.$route.query.responseFormat || 'N/A',
+      requestMethod: this.$route.query.requestMethod || 'N/A',
+      requestExample: this.$route.query.requestExample || 'N/A',
+      apiDescription: this.$route.query.apiDescription || 'N/A'
     };
-  }
+  },
+  methods:{
+    handleTabClick(tab){
+      this.activeTab = tab.name;
+    }
+  },
 };
 </script>
 
 <style scoped>
-/* 可以根据需要添加样式 */
+.api-docs {
+  margin-top: 20px;
+}
 </style>