新增接口文档功能和系统介绍页面

在'employee.vue'中添加了导航至接口文档的按钮，并实现了navigateToDocumentation方法，该方法会根据当前connector的信息跳转到相应的系统介绍页面。

在'b/src/views/port/sys/index.vue'中创建了一个新的Vue组件，用于展示接口文档内容，包括接口的名称、描述、价格和图片。

此功能增强了系统接口的易用性和可访问性，用户现在可以直接从'employee.vue'页面访问详细的接口文档。

src/views/port/port/employee.vue

@@ -46,6 +46,11 @@
                 <el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="connector.connectorName=='生辰助手'">测试API</el-button>
                 <el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="connector.connectorName=='邮编查询'">测试API</el-button>
                 <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeatherForecast()" v-if="connector.connectorName=='天气预报'">测试API</el-button>
+
+
+                <el-button type="primary" style="float: right; padding: 10px 10px" @click="navigateToDocumentation()">接口文档</el-button>
+
+
               </el-card>
             </el-col>
           </el-row>
@@ -377,6 +382,21 @@ export default {
   watch: {},
   //方法集合",
   methods: {
+
+    navigateToDocumentation() {
+      this.$router.push({
+        path: '/port/sys',
+        query: {
+          name: this.connector.connectorName,
+          picture: this.connector.connectorPicture,
+          describe: this.connector.connectorDescribe,
+          price: this.connector.connectorPrice
+        }
+      });
+    },
+
+
+
     async fetchUserBalance() {
       try {
         const userId = localStorage.getItem('userId');

src/views/port/sys/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-container>
+    <el-aside width="400px" style="background-color: #f5f5f5; padding: 20px;">
+      <div>
+        <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>
+  </el-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      name: this.$route.query.name || '',
+      describe: this.$route.query.describe || '',
+      price: this.$route.query.price || '',
+      picture: this.$route.query.picture || ''
+    };
+  }
+};
+</script>
+
+<style scoped>
+/* 可以根据需要添加样式 */
+</style>