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>