From d3601b09322adddc3b6c8561835f279b03a86c6b Mon Sep 17 00:00:00 2001
From: wxy <14293288+zysysys@user.noreply.gitee.com>
Date: Thu, 5 Sep 2024 20:53:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8E=A5=E5=8F=A3=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E5=8A=9F=E8=83=BD=E5=92=8C=E7=B3=BB=E7=BB=9F=E4=BB=8B?=
 =?UTF-8?q?=E7=BB=8D=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

此功能增强了系统接口的易用性和可访问性，用户现在可以直接从'employee.vue'页面访问详细的接口文档。
---
 src/views/port/port/employee.vue | 20 ++++++++++++++++++++
 src/views/port/sys/index.vue     | 31 +++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/views/port/sys/index.vue

diff --git a/src/views/port/port/employee.vue b/src/views/port/port/employee.vue
index a7f3bdd..88dff83 100644
--- a/src/views/port/port/employee.vue
+++ b/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');
diff --git a/src/views/port/sys/index.vue b/src/views/port/sys/index.vue
new file mode 100644
index 0000000..4a981f7
--- /dev/null
+++ b/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>