文档视图增强：新增API文档、错误码参照和数据统计选项卡

在文档视图中实现新的功能选项卡，包括“API文档”、“错误码参照”和“数据统计”。这改进了文档的结构，使用户能更方便地访问和理解API接口的使用、可能的错误及其统计信息。

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
         }
       });
     },

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>