From 66a5681ccd943a27bfbaeb1c71f50d555689f550 Mon Sep 17 00:00:00 2001
From: lml <2367212933@qq.com>
Date: Wed, 3 Jul 2024 17:43:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=98=E6=96=B9api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/common.css                     |  19 +
 src/components/tabbar/navbar.vue              |  84 +-
 src/components/tabbar/styles/navbar.css       |  27 +-
 src/router/index.js                           |  14 +-
 src/view/developmentDocking/index.css         | 107 +-
 src/view/developmentDocking/index.vue         | 360 +++----
 .../developmentDocking/mainComponents.vue     | 998 ++++++++++++++----
 7 files changed, 1175 insertions(+), 434 deletions(-)

diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 58bcfe8..dee52f9 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -137,3 +137,22 @@
     background-color: #00afaf;
     border-radius: 10px;
 }
+#code {
+    max-height: 400px;
+    overflow-y: hidden;
+}
+#code:hover {
+    max-height: 400px;
+    overflow-y: scroll;
+}
+#code,.el-table  {
+    scrollbar-width: thin;
+    scrollbar-color: #00afaf #ecf0f1;
+}
+#code::-webkit-scrollbar, .el-table::-webkit-scrollbar {
+    width: 8px;
+}
+#code::-webkit-scrollbar-thumb, .el-table::-webkit-scrollbar-thumb {
+    background-color: #00afaf;
+    border-radius: 10px;
+}
\ No newline at end of file
diff --git a/src/components/tabbar/navbar.vue b/src/components/tabbar/navbar.vue
index ae16958..0070ae0 100644
--- a/src/components/tabbar/navbar.vue
+++ b/src/components/tabbar/navbar.vue
@@ -1,13 +1,14 @@
 <template>
     <div>
-      <div v-if="color==='white'"  class="navbarHeight">
+      <div v-if="color==='white'"  class=" navbar-white">
         <!-- <video autoplay  muted playsinline>
              <source src="@/assets/video/headBack.mp4" type="video/mp4">
              Your browser does not support the video tag.
            </video> -->
         <!-- START NAVBAR fixed-top -->
-        <nav  class=" navbar navbar-white navbar-expand-lg  navbar-custom sticky sticky-dark" id="navbar">
-          <div class="flx-align" style="width: 100%;">
+       <div class="navbarHeight">
+        <nav style="position: relative;"   class=" navbar  navbar-expand-lg  navbar-custom sticky sticky-dark" id="navbar">
+          <div class="flx-align" style="width: 100%;height: 76px;position: absolute;top: 0;left: 0;">
             <!-- LOGO -->
             <div>
               <a href="/newsHome">
@@ -20,33 +21,33 @@
             </div>
           
             <div class="collapse navbar-collapse" id="navbarCollapse">
-              <ul class="navbar-nav navbar-center" id="mySidenav">
-                <li class="nav-item">
+              <div class="navbar-nav navbar-center" id="mySidenav">
+                <span class="nav-item">
                   <router-link class="nav-link" to="/newsHome">首页</router-link>
-                </li>
-                <li class="nav-item" >
+                </span>
+                <span class="nav-item" >
                   <router-link class="nav-link" to="/business">业务介绍</router-link>
-                </li>
-                <li class="nav-item">
+                </span>
+                <span class="nav-item">
                   <router-link class="nav-link" to="/globalNetwork">智联全球</router-link>
-                </li>
-                <li class="nav-item" >
+                </span>
+                <span class="nav-item" >
                   <router-link class="nav-link" to="/platform">战略合作平台</router-link>
-                </li>
-                <li class="nav-item" >
+                </span>
+                <span class="nav-item" >
                   <router-link class="nav-link" to="/about">关于我们</router-link>
-                </li>
-                <!-- <li class="nav-item" >
+                </span>
+                <span class="nav-item" >
                   <router-link class="nav-link" to="/developmentDocking">开发对接</router-link>
-                </li> -->
+                </span>
                 <!-- Additional links omitted for brevity -->
-              </ul>
+              </div>
               <!-- <div class="nav-button ">
-                <ul class="nav navbar-nav navbar-right">
-                  <li>
+                <div class="nav navbar-nav navbar-right">
+                  <span>
                     <button type="button" class="btn btn-custom navbar-btn btn-rounded">Try it Free</button>
-                  </li>
-                </ul>
+                  </span>
+                </div>
               </div> -->
             </div>
             <div class="nav-people" @click="goClient">
@@ -54,6 +55,7 @@
             </div>
           </div>
         </nav>
+       </div>
      
         <!-- <div class="container" style='position:relative'>
           <div class="titleImages" v-show="show"></div>
@@ -64,8 +66,8 @@
       <div v-else-if="color==='black'"  class="navbarHeightWhite">
           
          
-          <nav   class="navbar nav-white  navbar-expand-lg  navbar-custom sticky sticky-dark" id="navbar">
-            <div class="flx-align" style="width: 100%;">
+          <nav style="position: relative;"   class="navbar nav-white  navbar-expand-lg  navbar-custom sticky sticky-dark" id="navbar">
+            <div class="flx-align" style="width: 100%;height: 76px;position: absolute;top: 0;left: 0;">
               <!-- LOGO -->
               <div>
                 <a href="/newsHome">
@@ -78,33 +80,33 @@
               </div>
             
               <div class="collapse1 navbar-collapse" id="navbarCollapse1">
-                <ul class="navbar-nav navbar-center" id="mySidenav1">
-                  <li class="nav-item">
+                <div class="navbar-nav navbar-center" id="mySidenav1">
+                  <span class="nav-item">
                     <router-link class="nav-link" to="/newsHome">首页</router-link>
-                  </li>
-                  <li class="nav-item" >
+                  </span>
+                  <span class="nav-item" >
                     <router-link class="nav-link" to="/business">业务介绍</router-link>
-                  </li>
-                  <li class="nav-item">
+                  </span>
+                  <span class="nav-item">
                     <router-link class="nav-link" to="/globalNetwork">智联全球</router-link>
-                  </li>
-                  <li class="nav-item" >
+                  </span>
+                  <span class="nav-item" >
                     <router-link class="nav-link" to="/platform">战略合作平台</router-link>
-                  </li>
-                  <li class="nav-item" >
+                  </span>
+                  <span class="nav-item" >
                     <router-link class="nav-link" to="/about">关于我们</router-link>
-                  </li>
-                  <!-- <li class="nav-item" >
+                  </span>
+                  <span class="nav-item" >
                   <router-link class="nav-link" to="/developmentDocking">开发对接</router-link>
-                </li> -->
+                </span>
                   <!-- Additional links omitted for brevity -->
-                </ul>
+                </div>
                 <!-- <div class="nav-button ">
-                  <ul class="nav navbar-nav navbar-right">
-                    <li>
+                  <div class="nav navbar-nav navbar-right">
+                    <span>
                       <button type="button" class="btn btn-custom navbar-btn btn-rounded">Try it Free</button>
-                    </li>
-                  </ul>
+                    </span>
+                  </div>
                 </div> -->
               </div>
               <div class="nav-people" @click="goClient">
diff --git a/src/components/tabbar/styles/navbar.css b/src/components/tabbar/styles/navbar.css
index 204202d..7a6fe37 100644
--- a/src/components/tabbar/styles/navbar.css
+++ b/src/components/tabbar/styles/navbar.css
@@ -2,8 +2,7 @@
     height: 24px;
     margin-top: 0px;
     padding: 10px 0px !important;
-    background-color: #fff !important;
-    box-shadow: 0px 4px 18.3px 0px rgba(222, 222, 222, 0.25);
+  
 }
 .nav-people {
     width: 150px;
@@ -18,12 +17,20 @@
 .navbar-custom.navbar-white {
     background-color: transparent !important;
 }
+.navbar-nav {
+    display: flex;
+    min-width: 600px;
+    justify-content: space-between;
+}
+.nav-item{
+    list-style: none;
+}
 .navbarHeight {
     position: relative;
-    width: 100%;
     height: 700px;
     overflow: hidden;
     background: url('../../../assets/images/home/background.png') no-repeat center/cover;
+    padding: 0 50px;
 }
 .navbarHeight video {
     position: absolute;
@@ -38,15 +45,25 @@
 }
 .navbarHeightWhite {
     position: relative;
-    width: 100%;
+    /* width: 100%; */
     height: 70px;
+    padding: 0 50px;
+    background-color: #fff !important;
+    box-shadow: 0px 4px 18.3px 0px rgba(222, 222, 222, 0.25);
 }
 .navbarHeightWhite .navbar-custom .navbar-nav li a{
     color: #000 ;
 }
+.navbarHeight .nav-link {
+    color: #fff;
+}
+.navbarHeightWhite .nav-link {
+    color: #000;
+}
 .navbarHeightWhite .navbar-custom .navbar-nav .router-link-active{
+    padding-bottom: 5px;
     border-bottom: 2px solid #000;
-
+   
 }
 /* .titleImages {
     position: absolute;
diff --git a/src/router/index.js b/src/router/index.js
index c49a6bc..b8e38f0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -30,8 +30,7 @@ import corporateCulture from "../view/about/components/corporateCulture.vue"
 import connection from "../view/about/components/connection.vue"
 // 开发对接
 import developmentDocking from "../view/developmentDocking/index.vue"
-
-
+import mainComponents from '../view/developmentDocking/mainComponents.vue';
 Vue.use(VueRouter);
 
 const routes = [
@@ -121,9 +120,16 @@ const routes = [
     component: inviteJob
   },
   {
-    path: "/developmentDocking",
+    path: '/developmentDocking',
     name: "developmentDocking",
-    component: developmentDocking
+    component: developmentDocking,
+    children: [
+      {
+        path: 'main',
+        name: 'mainComponents',
+        component: mainComponents
+      }
+    ]
   },
   {
     path: "/inviteList",
diff --git a/src/view/developmentDocking/index.css b/src/view/developmentDocking/index.css
index aecbd3f..d91dcb9 100644
--- a/src/view/developmentDocking/index.css
+++ b/src/view/developmentDocking/index.css
@@ -4,13 +4,114 @@
 .version-selector {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
+    margin-left: 20px;
+    min-height: 60px;
   }
-  
-  .version-label {
+.version-label {
     margin-right: 8px; /* 调整间距 */
   }
 ::v-deep  .el-input__inner {
     border: none;
     width: 120px;
+  }
+  .el-main {
+    padding: 0;
+  }
+  .el-aside {
+    padding: 0;
+  }
+  .el-menu-item {
+    margin:0 6px;
+  }
+  ::v-deep  .el-submenu__title:hover {
+    background-color: #fff;
+  }
+  .el-menu-item.is-active {
+    border-radius: 6px;
+    background: #092238;
+    color: #fff;
+  }
+  .el-menu-item:hover {
+    border-radius: 6px;
+    background: #F8F8F8;
+    color: rgba(21, 30, 44, 0.50);
+  }
+  .title {
+    color: #151E2C;
+    font-family: "PingFang SC";
+    font-style: normal;
+    font-weight: 500;
+    line-height: 46px; 
+    margin-bottom: 24px;
+  }
+  .box-main {
+    width: 100%;
+    background-color: #f8f8f8;
+    padding-top: 4px;
+  }
+  .main {
+    margin: 20px;
+    padding: 36px 40px;
+    min-height: 500px;
+    background-color: #fff;
+  }
+  .mainTab {
+    margin-bottom: 54px;
+  }
+  .main-title {
+    font-size: 26px;
+    margin-top: 54px;
+  }
+  .h2-title {
+    font-size: 20px;
+  }
+  .pre-container {
+    font-size: 100% !important;
+    
+  }
+
+  /* 表格 */
+  .el-button {
+    background-color: #00afaf;
+  }
+  .el-table {
+    max-height: 500px;
+    overflow-y: scroll;
+  }
+  .el-table::before {
+    display: none;
+  }
+  ::v-deep   .el-table .el-table__header th {
+    background-color: #f8f8f8;
+    color: #151E2C;
+    font-family: "PingFang SC";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 34px; /* 242.857% */
+  }
+  .content {
+    color: #151E2C;
+    font-family: "PingFang SC";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px; /* 200% */
+    margin: 10px 0;
+  }
+  .content i {
+    font-style: normal;
+    min-width: 120px;
+  }
+  .black-content {
+    width: 100%;
+    padding: 6px 18px;
+    border-radius: 4px;
+    background: #F8F8F8;
+  }
+  
+  .span-content {
+    display: block;
+    max-height: 30px;
   }
\ No newline at end of file
diff --git a/src/view/developmentDocking/index.vue b/src/view/developmentDocking/index.vue
index 9f02609..8593f5b 100644
--- a/src/view/developmentDocking/index.vue
+++ b/src/view/developmentDocking/index.vue
@@ -1,198 +1,178 @@
-
 <template>
-    <div class="">
-        <el-container style="">
-            <el-aside width="300px" style="background-color: #fff;padding: 20px;">
-                <!-- <el-input
-                    v-model="searchQuery"
-                    placeholder="搜索"
-                    prefix-icon="el-icon-search"
-                    class="menu-search"
-                    @change="filteredMenuItems"
-                    
-                  ></el-input> -->
-                  <div class="version-selector">
-                      <span class="version-label">Version:</span>
-                      <el-select v-model="selectedVersion" placeholder="">
-                        <el-option
-                          v-for="item in versions"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value">
-                        </el-option>
-                      </el-select>
-                    </div>
-                   <!-- <el-select v-model="selectedVersion" placeholder="Select version" id="version-select">
-                     
-                    <el-option
-                       v-for="item in versions"
-                       :key="item.value"
-                       :label="item.label"
-                       :value="item.value">
-                       <span style="float: left">{{ item.label }}</span>
-                       <span style="float: right; color: #f44336;" v-if="item.tag">{{ item.tag }}</span>
-                     </el-option>
-                   </el-select> -->
-                <el-menu
-                    :default-openeds="propList"
-                    class="el-menu-vertical-demo"
-                    :unique-opened="true"
-                    @select="handleSelect"
-                    @open="handleOpen"
-                    v-if="menuItems['3.9']"
-                    @close="handleClose">
-                    <el-submenu  v-for="(item,index) in menuItems[selectedVersion]" :key="index" :index="`${index+1}`" >
-                      <template slot="title">
-                        <span>{{Object.keys(item)[0]}}</span>
-                      </template>
-                      <el-menu-item-group  v-for="(itemGroup, groupIndex) in item[Object.keys(item)[0]]" :key="groupIndex"> 
-                        <el-menu-item :index="`${index + 1}-${groupIndex}`">{{ itemGroup.title }}</el-menu-item>
-                      </el-menu-item-group>
+  <div class="">
+    <el-container style="background-color: #f8f8f8;">
+        <el-aside width="300px" style="background-color: #fff;margin: 20px 0 20px 20px;">
+        <div class="version-selector">
+          <span class="version-label">版本:</span>
+          <el-select v-model="selectedVersion" placeholder="">
+            <el-option
+              v-for="item in versions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div >
+          <el-menu
+            :default-openeds="propList"
+            class="el-menu-vertical-demo"
+            style="padding: 0;"
+            :unique-opened="true"
+            @select="handleSelect"
+            @open="handleOpen"
+            @close="handleClose">
+            <el-submenu v-for="(item, index) in menuItems[selectedVersion]" :key="index" :index="`${index+1}`">
+              <template slot="title">
+                <span>{{Object.keys(item)[0]}}</span>
+              </template>
+              <el-menu-item-group v-for="(itemGroup, groupIndex) in item[Object.keys(item)[0]]" :key="groupIndex">
+                <el-menu-item :index="`${index + 1}-${groupIndex}`">{{ itemGroup.title }}</el-menu-item>
+              </el-menu-item-group>
+            </el-submenu>
+          </el-menu>
+        </div>
+      </el-aside>
+      <el-main>
+        <router-view></router-view>
+      </el-main>
+    </el-container>
+  </div>
+</template>
 
-                    </el-submenu>
-                  </el-menu>
-            </el-aside>
-        
-              <el-main>
-                <mainComponents></mainComponents>
-                <!-- More content -->
-              </el-main>
-          </el-container>
-    </div>
-  </template>
-  <script>
-  import mainComponents from './mainComponents.vue'
-  
-  /**
-   * Index-1 component
-   */
-  export default {
-    name:"developmentDocking",
-    components: {
-      mainComponents
-    },
-    onMounted(){
-      console.log('onMounted');
-      window.onload = function() {
-        var pre = document.getElementById('code');
-        var lines = pre.innerText.split('\n'); // 根据换行符分割文本
-        pre.innerHTML = lines.map(line => `<span>${line}</span>`).join('\n'); // 重新组合字符串，每行包裹在<span>中
-      };
-    },
-    created(){
-   console.log('created',this.menuItems['3.9']);
-    },
-    data(){
-      return {
-        searchQuery:"",
-        selectedVersion: '3.9',
-        versions: [
-          { value: 'next', label: 'Next', tag: '' },
-          { value: '3.9', label: '3.9', tag: 'LATEST' },
-          { value: '3.8', label: '3.8', tag: '' },
-          { value: '3.7', label: '3.7', tag: '' },
-          { value: '3.6', label: '3.6', tag: '' },
-          { value: '3.5', label: '3.5', tag: '' },
-          { value: '3.4', label: '3.4', tag: '' }
-        ],
-        propList:[],
-        code: `{
-          "shipment": {
-            "service": "B2B",
-            "store_id": "",
-            "client_reference": "",
-            "parcel_count": 2,
-            "export_scc": 0,
-            "import_scc": 0,
-            "attrs": []
-          }
-        }`,
-        menuItems: {
-       "3.9": [
-       {
-            "asa":[ 
-               { title: '概览', index: '1' },
-               { title: '系统状态', index: '2' },
-               { title: '配置选项', index: '3' },
-               { title: '用户管理', index: '4' },
-               { title: '日志', index: '5' }
-            ]
-             
-        },
-        {
-            "hhh":[ 
-               { title: '来玩呀', index: '1' },
-               { title: '系统状态', index: '2' },
-               { title: '配置选项', index: '3' },
-               { title: '用户管理', index: '4' },
-               { title: '日志', index: '5' }
-            ]
-             
-        },
-        {
-            "小妹妹":[ 
-               { title: '嘿嘿嘿', index: '1' },
-               { title: '系统状态', index: '2' },
-               { title: '配置选项', index: '3' },
-               { title: '用户管理', index: '4' },
-               { title: '日志', index: '5' }
-            ]
-             
+<script>
+import { useRouter } from 'vue-router';
+
+export default {
+  name: "developmentDocking",
+  data() {
+    return {
+      searchQuery: "",
+      selectedVersion: '1.0',
+      versions: [
+        // { value: 'next', label: 'Next', tag: '' },
+        // { value: '3.9', label: '3.9', tag: 'LATEST' },
+        // { value: '3.8', label: '3.8', tag: '' },
+        // { value: '3.7', label: '3.7', tag: '' },
+        // { value: '3.6', label: '3.6', tag: '' },
+        // { value: '3.5', label: '3.5', tag: '' },
+        { value: '1.0', label: '1.0', tag: '' }
+      ],
+      code: `{
+        "shipment": {
+          "service": "B2B",
+          "store_id": "",
+          "client_reference": "",
+          "parcel_count": 2,
+          "export_scc": 0,
+          "import_scc": 0,
+          "attrs": []
         }
-       ]
+      }`,
+      menuItems: {
+        "1.0": [
+          {
+            "订单模块": [
+              { title: '下单接口', index: '1' },
+              // { title: '系统状态', index: '2' },
+              // { title: '配置选项', index: '3' },
+              // { title: '用户管理', index: '4' },
+              // { title: '日志', index: '5' }
+            ]
+          },
+          // {
+          //   "hhh": [
+          //     { title: '来玩呀', index: '1' },
+          //     { title: '系统状态', index: '2' },
+          //     { title: '配置选项', index: '3' },
+          //     { title: '用户管理', index: '4' },
+          //     { title: '日志', index: '5' }
+          //   ]
+          // },
+          // {
+          //   "小妹妹": [
+          //     { title: '嘿嘿嘿', index: '1' },
+          //     { title: '系统状态', index: '2' },
+          //     { title: '配置选项', index: '3' },
+          //     { title: '用户管理', index: '4' },
+          //     { title: '日志', index: '5' }
+          //   ]
+          // }
+        ],
+        // "3.5": [
+        //   {
+        //     "asa": [
+        //       { title: '概览', index: '1' },
+        //       { title: '系统状态', index: '2' },
+        //       { title: '配置选项', index: '3' },
+        //       { title: '用户管理', index: '4' },
+        //       { title: '日志', index: '5' }
+        //     ]
+        //   },
+        //   {
+        //     "hhh": [
+        //       { title: '来玩呀', index: '1' },
+        //       { title: '系统状态', index: '2' },
+        //       { title: '配置选项', index: '3' },
+        //       { title: '用户管理', index: '4' },
+        //       { title: '日志', index: '5' }
+        //     ]
+        //   },
+        //   {
+        //     "小妹妹": [
+        //       { title: '嘿嘿嘿', index: '1' },
+        //       { title: '系统状态', index: '2' },
+        //       { title: '配置选项', index: '3' },
+        //       { title: '用户管理', index: '4' },
+        //       { title: '日志', index: '5' }
+        //     ]
+        //   }
+        // ]
       }
+    };
+  },
+  mounted() {
+    this.$router.push({ name: 'mainComponents', query: { api: '1-0' } });
+  },
+  computed: {
+    codeLines() {
+      // 将代码按行分割成数组
+      return this.code.split('\n');
+    },
+    propList() {
+      return this.menuItems[this.selectedVersion].map((_, index) => `${index + 1}`);
     }
+  },
+  methods: {
+    handleOpen(key, keyPath) {
+      //  console.log(key, keyPath);
     },
-    computed: {
-      codeLines() {
-        // 将代码按行分割成数组
-        return this.code.split('\n');
-      },
+    handleClose(key, keyPath) {
+      //  console.log(key, keyPath);
     },
-    methods: {
-        handleOpen(key, keyPath) {
-          //  console.log(key, keyPath);
-         },
-         handleClose(key, keyPath) {
-          //  console.log(key, keyPath);
-         },
-         handleSelect(key, keyPath) {
-          console.log(key, keyPath,'select');
-          this.totalIndex = keyPath[0];
-          const section = document.getElementById(`section${key}`);
-          if (section) {
-            section.scrollIntoView({ behavior: 'smooth' });
-          }
-        },
-         filteredMenuItems(val) {
-            // console.log(val)
-            this.propList = []
-            if (val === "") {
-              return this.menuItems; // 如果没有搜索查询，返回全部
-            }
-            const searchLower = `${val}`;
-            // console.log(searchLower,'searchLower')
-
-            const append = this.menuItems.map((item, index) => {
-            const key = Object.keys(this.menuItems[index])[0];
-            const eleIndex = item[key].findIndex(element => searchLower === element.title.toLowerCase());
-                      
-            if (eleIndex !== -1) {
-              return { groupIndex: index, itemIndex: eleIndex, item: item[key][eleIndex] };
-            }
-            // console.log('嘿嘿嘿没找到')
-           // 或者其他你希望在未找到时返回的值
-          });
-          
-          // console.log(append.filter(x => x !== undefined), 'append');
-          const appendData = append.filter(x => x !== undefined)
-          // console.log(appendData,'appendData')
-          const index = `${appendData[0].groupIndex+1}`
-          // console.log(index,'index')
-          this.propList.push(index)
-
-    }
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath, 'select');
+      this.totalIndex = keyPath[0];
+      this.$router.push({ name: 'mainComponents', query: { api: key } });
+    },
+    filteredMenuItems(val) {
+      this.propList = [];
+      if (val === "") {
+        return this.menuItems; // 如果没有搜索查询，返回全部
+      }
+      const searchLower = `${val}`;
+      const append = this.menuItems.map((item, index) => {
+        const key = Object.keys(this.menuItems[index])[0];
+        const eleIndex = item[key].findIndex(element => searchLower === element.title.toLowerCase());
+        if (eleIndex !== -1) {
+          return { groupIndex: index, itemIndex: eleIndex, item: item[key][eleIndex] };
+        }
+      });
+      const appendData = append.filter(x => x !== undefined);
+      const index = `${appendData[0].groupIndex + 1}`;
+      this.propList.push(index);
     }
-  };
-  </script>
-  <style src="./index.css" scoped></style>
\ No newline at end of file
+  }
+};
+</script>
+<style src="./index.css" scoped></style>
diff --git a/src/view/developmentDocking/mainComponents.vue b/src/view/developmentDocking/mainComponents.vue
index 87fe2a1..17ca05a 100644
--- a/src/view/developmentDocking/mainComponents.vue
+++ b/src/view/developmentDocking/mainComponents.vue
@@ -1,200 +1,816 @@
-
 <template>
-    <div class="">
-        <div id="section1-1" class="content-section">内容一</div>
-                <h1>调用指南</h1>
-                <div class="pre-container">
-                  <pre id="code" style="background-color: #f2f2f2;">
-                    <span v-for="(line, index) in codeLines" :key="index">
-                       {{ index + 1 }} {{ line }}<br>
-                     </span>
-                  </pre>
-                </div>
-                <h2>1-1 HTTP请求头信息</h2>
-                <p>Authorization: Bearer ACCESS_TOKEN</p>
-                <p>Content-Type: application/json</p>
-                <p>Accept: application/json</p>
-                <p>Accept-Language: zh-CN</p>
-                <h1>调用指南</h1>
-                <h2>1-1 HTTP请求头信息</h2>
-                <p>Authorization: Bearer ACCESS_TOKEN</p>
-                <p>Content-Type: application/json</p>
-                <p>Accept: application/json</p>
-                <p>Accept-Language: zh-CN</p>
-                <h1>调用指南</h1>
-                <h2>1-1 HTTP请求头信息</h2>
-                <p>Authorization: Bearer ACCESS_TOKEN</p>
-                <p>Content-Type: application/json</p>
-                <p>Accept: application/json</p>
-                <p>Accept-Language: zh-CN</p>
-                <h1>调用指南</h1>
-                <h2>1-1 HTTP请求头信息</h2>
-                <p>Authorization: Bearer ACCESS_TOKEN</p>
-                <p>Content-Type: application/json</p>
-                <p>Accept: application/json</p>
-                <p>Accept-Language: zh-CN</p>
-                <h1>调用指南</h1>
-                <h2>1-1 HTTP请求头信息</h2>
-                <p>Authorization: Bearer ACCESS_TOKEN</p>
-                <p>Content-Type: application/json</p>
-                <p>Accept: application/json</p>
-                <p>Accept-Language: zh-CN</p>
-                <div id="section1-2" class="content-section">内容二</div>
-                <h1>调用指南</h1>
-                <h2>1-1 HTTP请求头信息</h2>
-                <p>Authorization: Bearer ACCESS_TOKEN</p>
-                <p>Content-Type: application/json</p>
-                <p>Accept: application/json</p>
-                <p>Accept-Language: zh-CN</p>
-                <h1>调用指南</h1>
-                <h2>1-1 HTTP请求头信息</h2>
-                <p>Authorization: Bearer ACCESS_TOKEN</p>
-                <p>Content-Type: application/json</p>
-                <p>Accept: application/json</p>
-                <p>Accept-Language: zh-CN</p>
-                <h1>调用指南</h1>
-                <h2>1-1 HTTP请求头信息</h2>
-                <p>Authorization: Bearer ACCESS_TOKEN</p>
-                <p>Content-Type: application/json</p>
-                <p>Accept: application/json</p>
-                <p>Accept-Language: zh-CN</p>
-                <h1>调用指南</h1>
-                <h2>1-1 HTTP请求头信息</h2>
-                <p>Authorization: Bearer ACCESS_TOKEN</p>
-                <p>Content-Type: application/json</p>
-                <p>Accept: application/json</p>
-                <p>Accept-Language: zh-CN</p>
-                <div id="section1-3" class="content-section">内容三</div>
-                <h1>调用指南</h1>
-                <h2>1-1 HTTP请求头信息</h2>
-                <p>Authorization: Bearer ACCESS_TOKEN</p>
-                <p>Content-Type: application/json</p>
-                <p>Accept: application/json</p>
-                <p>Accept-Language: zh-CN</p>
-                <!-- More content -->
+  <div class="box-main">
+    <div class="main">
+      <div v-for="(item, index) in apiData" :key="index" class="mainTab">
+        <div class="title main-title" style="margin-top: 0;">{{ item.mainTitle }}</div>
+        <div class="title h2-title">{{ item.h2Title }}</div>
+        <div class="pre-container" style="position: relative;">
+          <pre id="code" style="background-color: #f2f2f2;">
+            <span v-for="(line, idx) in item.codeLines" :key="idx" class="span-content">
+              {{ idx + 1 }} {{ line }}<br>
+            </span>
+          </pre>
+          <el-button @click="copyToClipboard(item.codeLines)" class="copy-button" type="primary" size="mini" style="position: absolute; top: 10px; right: 40px;">复制</el-button>
+        </div>
+        <div class="content">
+          {{ item.description }}
+        </div>
+            <div v-for="(it,int) in item.apiDesc" :key="int">
+              <div class="title main-title">{{ it.h2Title }}</div>
+              <div class="title h2-title" style="margin-top: 30px;">2-1 请求报文示例</div>
+              <div class="content flx"><i>接口地址：</i>
+              <div class="black-content" style="flex: 1;"> {{ it.requestUrl }}</div>
+            </div>
+            <div class="content flx" v-if="it.description !==''"><i>接口描述：</i>
+              <div class="black-content" style="flex: 1;">{{ it.description }}</div>
+            </div>
+            <div class="content flx" v-if="it.type !==''"><i>请求数据类型：</i>
+              <div class="black-content" style="flex: 1;">{{ it.type }}</div>
+            </div>
+            <div class="title h2-title" >2-2 请求字段解析</div>
+            <div class="pre-container " style="position: relative;">
+              <pre id="code" style="background-color: #f2f2f2;">
+                <span v-for="(line, idx) in it.codeLines" :key="idx" class="span-content">
+                  {{ idx + 1 }} {{ line }}<br>
+                </span>
+              </pre>
+              <el-button @click="copyToClipboard(it.codeLines)" class="copy-button" type="primary" size="mini" style="position: absolute; top: 10px; right: 40px;">复制</el-button>
+            </div>
+            <div class="title h2-title">2-3 请求参数说明</div>
+            <el-table :data="it.tableData" style="width: 100%"   row-key="id"
+                border
+                default-expand-all
+                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+              <el-table-column prop="field" width="300" label="参数名称" show-overflow-tooltip />
+              <el-table-column prop="fieldName" label="参数说明" show-overflow-tooltip />
+              <el-table-column prop="required" label="是否必填" show-overflow-tooltip />
+              <el-table-column prop="dataType" label="数据类型" show-overflow-tooltip />
+              <el-table-column prop="example" label="示例值" show-overflow-tooltip />
+              <el-table-column prop="description" label="描述" width="300" show-overflow-tooltip />
+            </el-table>
+            <div class="title h2-title" style="margin-top: 30px;">2-4 返回示例</div>
+            <div class="pre-container" style="position: relative;">
+              <pre id="code" style="background-color: #f2f2f2;">
+                <span v-for="(line, idx) in it.codeLines1" :key="idx" class="span-content">
+                  {{ idx + 1 }} {{ line }}<br>
+                </span>
+              </pre>
+              <el-button @click="copyToClipboard(it.codeLines1)" class="copy-button" type="primary" size="mini" style="position: absolute; top: 10px; right: 40px;">复制</el-button>
+            </div>
+          <div v-if="it.codeLines2 !==''">
+            <div class="title h2-title" style="margin-top: 30px;">2-5 返回参数说明</div>
+            <div class="pre-container" style="position: relative;">
+              <pre id="code" style="background-color: #f2f2f2;">
+                <span v-for="(line, idx) in it.codeLines2" :key="idx" class="span-content">
+                  {{ idx + 1 }} {{ line }}<br>
+                </span>
+              </pre>
+              <el-button @click="copyToClipboard(it.codeLines2)" class="copy-button" type="primary" size="mini" style="position: absolute; top: 10px; right: 40px;">复制</el-button>
+            </div>
+          </div>
+          </div>
+
+        </div>
+
+        </div>
+       
     </div>
-  </template>
-  <script>
-  
-  
-  /**
-   * Index-1 component
-   */
-  export default {
-    name:"developmentDocking",
-    components: {
-    },
-    onMounted(){
-      console.log('onMounted');
-      window.onload = function() {
-        var pre = document.getElementById('code');
-        var lines = pre.innerText.split('\n'); // 根据换行符分割文本
-        pre.innerHTML = lines.map(line => `<span>${line}</span>`).join('\n'); // 重新组合字符串，每行包裹在<span>中
-      };
-    },
-    created(){
-   
+</template>
+
+<script>
+export default {
+  name: "mainComponents",
+  data() {
+    return {
+      searchQuery: "",
+      totalIndex: 1,
+      propList: [],
+      apiData: []
+    };
+  },
+  computed: {
+    codeLines() {
+      return this.code.split('\n');
     },
-    data(){
-      return {
-        searchQuery:"",
-        totalIndex:1,
-        propList:[],
-        code: `{
-          "shipment": {
-            "service": "B2B",
-            "store_id": "",
-            "client_reference": "",
-            "parcel_count": 2,
-            "export_scc": 0,
-            "import_scc": 0,
-            "attrs": []
-          }
-        }`,
-        menuItems: [
+  },
+  methods: {
+    fetchData(api) {
+      // 模拟 API 数据，根据实际情况修改
+      const allData = [
         {
-            "asa":[ 
-               { title: '概览', index: '1' },
-               { title: '系统状态', index: '2' },
-               { title: '配置选项', index: '3' },
-               { title: '用户管理', index: '4' },
-               { title: '日志', index: '5' }
-            ]
-             
-        },
-        {
-            "hhh":[ 
-               { title: '来玩呀', index: '1' },
-               { title: '系统状态', index: '2' },
-               { title: '配置选项', index: '3' },
-               { title: '用户管理', index: '4' },
-               { title: '日志', index: '5' }
-            ]
-             
+          api:'1-0',
+          mainTitle: '账号验证',
+          h2Title1: '1-1 HTTP请求头格式',
+          description: 'ACCESS_TOKEN 可以联系客服创建，在对应用户的 API 密钥中创建。每一个 api 请求都要在 HTTP 请求头中包含 密钥，具体格式查看上面的 HTTP 请求头格式。',
+          codeLines: `          Authorization: Bearer ACCESS_TOKEN 
+          Content-Type: application/json 
+          Accept: application/json 
+          Accept-Language: zh-CN`.split('\n'),
+          apiDesc:[
+            {
+              h2Title: '创建订单',
+              requestUrl: '[POST] /v1/order/aafOrder/regularOrder',
+              type:"application/json",
+              description:"",
+                  codeLines: `      {
+                      "transportMode": "AIR",
+                      "countryCode": "GB",
+                      "channelId": "06f73b6cfc914fb1adb80292ca280416",
+                      "custOrderNo": "2406290002",
+                      "isPurchaseInsurance": "0",
+                      "insuranceType": null,
+                      "insuranceCurrency": null,
+                      "insuranceAmount": null,
+                      "isSpecifyDelivery": null,
+                      "deliveryCompanyId": null,
+                      "forecastNumber": 1,
+                      "forecastWeight": 100,
+                      "forecastVolume": 1,
+                      "isArrangeInspection": null,
+                      "declareType": "3",
+                      "taxRefundInfo": null,
+                      "taxRefundRemark": "1",
+                      "taxType": "1",
+                      "orderRemark": null,
+                      "receiveType": "1",
+                      "takeType": "1",
+                      "goodsAttrTypeList": [
+                          "1",
+                          "2"
+                      ],
+                      "goodsAttrObj": {
+                          "batteryType": "1",
+                          "documents": "https://public-aaf-shenzhen-file.oss-cn-beijing.aliyuncs.com/aaf1.0/file/鉴定文件.zip",
+                          "power": "123",
+                          "watts": "123"
+                      },
+                      "orderGoodsList": [
+                          {
+                              "boxNo": "FBAABCD1234U000001",
+                              "referenceId": null,
+                              "boxWeight": 100,
+                              "length": 100,
+                              "width": 100,
+                              "height": 100,
+                              "skuEnglishName": "Bluetooth Earphones",
+                              "skuName": "蓝牙耳机",
+                              "declarePrice": 2.7,
+                              "number": 100,
+                              "exportHscode": "123",
+                              "clearanceHscode": "123",
+                              "brand": "无",
+                              "brandType": "1",
+                              "model": "ABC",
+                              "material": "塑料",
+                              "purpose": "手机配件",
+                              "saleUrl": "https://www.amazon.co.gb/dp/ABCD1234",
+                              "salesPrice": null,
+                              "picUrl": null,
+                              "productWeight": null,
+                              "purchasePrice": 2.7,
+                              "asin": null,
+                              "sku": null,
+                              "isElectric": "0",
+                              "isMagnetic": "0",
+                              "isLiquid": null,
+                              "isPowder": null,
+                              "isHazardous": null,
+                              "isWooden": null,
+                              "declareType": "1"
+                          }
+                      ],
+                      "orderReceive": {
+                          "fbaWarehouseCode": "ORF2",
+                          "tpWarehouseCode": null,
+                          "inBoundCode": null,
+                          "state": null,
+                          "city": null,
+                          "receivePostcode": null,
+                          "address": null,
+                          "receiveName": null,
+                          "receivePhone": null,
+                          "receiveLandline": null,
+                          "email": null,
+                          "companyName": null
+
+                      },
+                      "orderTake": {
+                          "warehouseId": "00c8070b70a1475d90a4724331b85w44",
+                          "province": null,
+                          "city": null,
+                          "district": null,
+                          "address": null,
+                          "contact": null,
+                          "phone": null,
+                          "takeTime": null
+                      }
+                  }`.split('\n'),
+                  codeLines1: `                 {
+                      "success": true,
+                      "reTry": false,
+                      "message": "下单成功，您的订单是：AABB2407010041",
+                      "code": 200,
+                      "data": "8175052ed64143f093c401feb91346ec",
+                      "timestamp": 1719836214170
+                  }`.split('\n'),
+                  codeLines2: `          success:请求成功标志，true仅代表请求成功，不代表通过
+          message：请求描述
+          dode:200则代表请求通过，完成下单，500则代表校验未通过
+          data:订单id，请求成功会返回订单的id`.split('\n'),
+              tableData:[
+              { id: 'transportMode', field: 'transportMode', fieldName: '运输方式', required: '是', dataType: 'string', example: 'AIR', description: '海运-OCEAN, 空运-AIR, 铁路-RAIL, 卡航-ROAD' },
+                { id: 'countryCode', field: 'countryCode', fieldName: '国家编码', required: '是', dataType: 'string', example: 'GB', description: '国家二字码' },
+                { id: 'channelId', field: 'channelId', fieldName: '渠道id', required: '是', dataType: 'string', example: '73d277d502024515b92ecf9e95c048df', description: '通过渠道信息接口获取' },
+                { id: 'custOrderNo', field: 'custOrderNo', fieldName: '客户订单号', required: '否', dataType: 'string', example: 'GZGM2406171807', description: '客户订单号' },
+                { id: 'isPurchaseInsurance', field: 'isPurchaseInsurance', fieldName: '是否购买保险', required: '是', dataType: 'string', example: '1', description: '0:否 1:是' },
+                { id: 'insuranceType', field: 'insuranceType', fieldName: '投保类型', required: '否', dataType: 'string', example: '1', description: '1-上架险，2-签收险' },
+                { id: 'insuranceCurrency', field: 'insuranceCurrency', fieldName: '保险币种', required: '否', dataType: 'string', example: 'CNY', description: '币种' },
+                { id: 'insuranceAmount', field: 'insuranceAmount', fieldName: '购买保险金额', required: '否', dataType: 'string', example: '500.00', description: '金额' },
+                { id: 'isSpecifyDelivery', field: 'isSpecifyDelivery', fieldName: '是否指定末端快递', required: '否', dataType: 'string', example: '0', description: '0:否 1:是' },
+                { id: 'deliveryCompanyId', field: 'deliveryCompanyId', fieldName: '快递公司id', required: '否', dataType: 'string', example: '73d277d502024515b92ecf9e95c048df', description: '根据快递公司信息接口获取' },
+                { id: 'forecastNumber', field: 'forecastNumber', fieldName: '预报件数', required: '是', dataType: 'integer(int32)', example: '10', description: '订单箱数' },
+                { id: 'forecastWeight', field: 'forecastWeight', fieldName: '预报重量', required: '是', dataType: 'number', example: '50.00', description: '重量(KG)' },
+                { id: 'forecastVolume', field: 'forecastVolume', fieldName: '预报体积', required: '是', dataType: 'number', example: '1.00', description: '体积(M³)' },
+                { id: 'isArrangeInspection', field: 'isArrangeInspection', fieldName: '是否安排商检', required: '否', dataType: 'string', example: '0', description: '0:否 1:是' },
+                { id: 'declareType', field: 'declareType', fieldName: '报关方式', required: '是', dataType: 'string', example: '1', description: '1:买单报关 2:退税报关 3:买单+退税' },
+                { id: 'taxRefundInfo', field: 'taxRefundInfo', fieldName: '退税资料url', required: '否', dataType: 'string', example: 'https://public-shenzhen-file.oss-cn-beijing.aliyuncs.com/aaf1.0/file/退税资料.zip', description: '文件下载地址' },
+                { id: 'taxRefundRemark', field: 'taxRefundRemark', fieldName: '退税资料说明', required: '是', dataType: 'string', example: '1', description: '1-一对多（单订单多份资料）, 2-一对一（单订单一份资料）, 3-多对多（合并报关，多份资料）, 4-多对一（合并报关，一份资料）；报关方式为买单+退税则必填' },
+                { id: 'taxType', field: 'taxType', fieldName: '交税方式', required: '是', dataType: 'string', example: '1', description: '1-不包税，2-包税，3-自主税号，4-自税递延' },
+                { id: 'receiveType', field: 'receiveType', fieldName: '收件地址类型', required: '是', dataType: 'string', example: '1', description: '1:FBA地址 2：第三方海外仓 3：商业地址 4:住宅地址' },
+                { id: 'takeType', field: 'takeType', fieldName: '交货方式', required: '是', dataType: 'string', example: '1', description: '1:送货到仓 2:上门提货' },
+                { id: 'orderRemark', field: 'orderRemark', fieldName: '客户订单备注', required: '否', dataType: 'string', example: '', description: '' },
+                { id: 'goodsAttrTypeList', field: 'goodsAttrTypeList', fieldName: '产品属性列表', required: '是', dataType: 'array', example: '["1","2"]', description: '1-普货 2-带电 3-带磁 4-液体 5-粉末 6-危险品 7-木制品' },
+                { id: 'goodsAttrObj', field: 'goodsAttrObj', fieldName: '电池信息', required: '是', dataType: 'object', example: '{}', description: '如果产品属性列表带电，需要填写电池信息',children:[
+                   { id: 'batteryType', field: 'batteryType', fieldName: '电池类型', required: '是', dataType: 'string', example: '1', description: '1:干电池 2:纽扣电池 3:锂电池 4:镍氢电池' },
+                   { id: 'documents', field: 'documents', fieldName: '鉴定文件', required: '否', dataType: 'string', example: '', description: '文件下载地址' },
+                   { id: 'power', field: 'power', fieldName: '功率', required: '是', dataType: 'string', example: '100', description: '电池锂电池、镍氢电池必填' },
+                   { id: 'watts', field: 'watts', fieldName: '瓦数', required: '是', dataType: 'string', example: '100', description: '电池类型为锂电池、镍氢电池必填' },
+                   ] 
+                },
+                { id: 'orderGoodsList', field: 'orderGoodsList', fieldName: '货物/产品明细', required: '是', dataType: 'array', example: '{}', description: '订单产品信息列表',children:[
+                    { id: 'boxNo', field: 'boxNo', fieldName: '货箱编号', required: '是', dataType: 'string', example: 'FBAABCD1234U000001', description: '货箱编号：如果收件地址类型是FBA，需要通过正则校验：^FBA[A-Z0-9]+U[0-9]{6}$' },
+                    { id: 'referenceId', field: 'referenceId', fieldName: 'PO Number', required: '否', dataType: 'string', example: '', description: '亚马逊后台的货件追踪编号' },
+                    { id: 'boxWeight', field: 'boxWeight', fieldName: '单箱货箱重量(KG)', required: '是', dataType: 'number', example: '10', description: '' },
+                    { id: 'length', field: 'length', fieldName: '货箱长度(CM)', required: '是', dataType: 'number', example: '100', description: '' },
+                    { id: 'width', field: 'width', fieldName: '货箱宽度(CM)', required: '是', dataType: 'number', example: '100', description: '' },
+                    { id: 'height', field: 'height', fieldName: '货箱高度(CM)', required: '是', dataType: 'number', example: '100', description: '' },
+                    { id: 'skuEnglishName', field: 'skuEnglishName', fieldName: '产品英文品名', required: '是', dataType: 'string', example: 'Bluetooth Earphones', description: '' },
+                    { id: 'skuName', field: 'skuName', fieldName: '产品中文品名', required: '是', dataType: 'string', example: '蓝牙耳机', description: '' },
+                    { id: 'declarePrice', field: 'declarePrice', fieldName: '（单个产品）申报单价', required: '是', dataType: 'number', example: '2.7', description: '' },
+                    { id: 'number', field: 'number', fieldName: '（单箱）申报数量', required: '是', dataType: 'integer', example: '100', description: '' },
+                    { id: 'exportHscode', field: 'exportHscode', fieldName: '产品海关编码(出口)', required: '是', dataType: 'string', example: '', description: '' },
+                    { id: 'clearanceHscode', field: 'clearanceHscode', fieldName: '产品海关编码(清关)', required: '是', dataType: 'string', example: '', description: '' },
+                    { id: 'brand', field: 'brand', fieldName: '产品品牌/商标', required: '是', dataType: 'string', example: '无', description: '' },
+                    { id: 'brandType', field: 'brandType', fieldName: '品牌类型', required: '是', dataType: 'string', example: '1', description: '1：无品牌 2：境内自主品牌 3：境内收购品牌 4：境外品牌（贴牌生产） 5：境外品牌（其他）' },
+                    { id: 'model', field: 'model', fieldName: '产品型号', required: '是', dataType: 'string', example: 'ABC', description: '' },
+                    { id: 'material', field: 'material', fieldName: '产品属性，材质', required: '是', dataType: 'string', example: '塑料', description: '' },
+                    { id: 'purpose', field: 'purpose', fieldName: '产品用途', required: '是', dataType: 'string', example: '手机配件', description: '' },
+                    { id: 'saleUrl', field: 'saleUrl', fieldName: '产品销售链接', required: '是', dataType: 'string', example: 'https://www.amazon.co.gb/dp/ABCD1234', description: '' },
+                    { id: 'salesPrice', field: 'salesPrice', fieldName: '产品销售价格', required: '否', dataType: 'number', example: '', description: '' },
+                    { id: 'picUrl', field: 'picUrl', fieldName: '产品图片链接', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'productWeight', field: 'productWeight', fieldName: '（单个产品）产品重量(kg)', required: '否', dataType: 'number', example: '', description: '' },
+                    { id: 'purchasePrice', field: 'purchasePrice', fieldName: '产品采购单价', required: '是', dataType: 'number', example: '2.7', description: '' },
+                    { id: 'asin', field: 'asin', fieldName: '产品ASIN', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'sku', field: 'sku', fieldName: '客户产品SKU', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'isElectric', field: 'isElectric', fieldName: '是否带电', required: '是', dataType: 'string', example: '1', description: '' },
+                    { id: 'isMagnetic', field: 'isMagnetic', fieldName: '是否带磁', required: '是', dataType: 'string', example: '0', description: '' },
+                    { id: 'isLiquid', field: 'isLiquid', fieldName: '是否液体', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'isPowder', field: 'isPowder', fieldName: '是否粉末', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'isHazardous', field: 'isHazardous', fieldName: '是否危险品', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'isWooden', field: 'isWooden', fieldName: '是否木制品', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'declareType', field: 'declareType', fieldName: '出口报关类型', required: '否', dataType: 'string', example: '', description: '1:买单报关 2:退税报关' },
+                    ] 
+                },
+                { id: 'orderReceive', field: 'orderReceive', fieldName: '收件地址类型详情', required: '是', dataType: '订单收件信息', example: '{}', description: '订单收件信息',children:[
+                    { id: 'fbaWarehouseCode', field: 'fbaWarehouseCode', fieldName: 'FBA仓库编号', required: '是', dataType: 'string', example: 'ORF2', description: '收件地址类型是FBA，则必填' },
+                    { id: 'tpWarehouseCode', field: 'tpWarehouseCode', fieldName: '第三方海外仓id', required: '是', dataType: 'string', example: '', description: '收件地址类型是第三方海外仓，则必填' },
+                    { id: 'inBoundCode', field: 'inBoundCode', fieldName: '第三方海外仓的入仓代码', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'state', field: 'state', fieldName: '省/州地区', required: '是', dataType: 'string', example: '', description: '商业地址，住宅地址必填' },
+                    { id: 'city', field: 'city', fieldName: '城市', required: '是', dataType: 'string', example: '', description: '商业地址，住宅地址必填' },
+                    { id: 'receivePostcode', field: 'receivePostcode', fieldName: '收件人邮编', required: '是', dataType: 'string', example: '', description: '商业地址，住宅地址必填' },
+                    { id: 'address', field: 'address', fieldName: '详细地址', required: '是', dataType: 'string', example: '', description: '商业地址，住宅地址必填' },
+                    { id: 'receiveName', field: 'receiveName', fieldName: '收件人', required: '是', dataType: 'string', example: '', description: '商业地址，住宅地址必填' },
+                    { id: 'receivePhone', field: 'receivePhone', fieldName: '收件人电话', required: '是', dataType: 'string', example: '', description: '商业地址，住宅地址必填' },
+                    { id: 'receiveLandline', field: 'receiveLandline', fieldName: '收件人座机号', required: '是', dataType: 'string', example: '', description: '商业地址，住宅地址必填' },
+                    { id: 'email', field: 'email', fieldName: '邮箱', required: '是', dataType: 'string', example: '', description: '商业地址，住宅地址必填' },
+                    { id: 'companyName', field: 'companyName', fieldName: '商业地址的公司名称', required: '是', dataType: 'string', example: '', description: '商业地址必填' },
+                    ] 
+                },
+                { id: 'orderTake', field: 'orderTake', fieldName: '提货信息', required: '是', dataType: '提货信息', example: '{}', description: '提货信息' ,children:[
+                    { id: 'warehouseId', field: 'warehouseId', fieldName: '交货仓库Id', required: '是', dataType: 'string', example: '73d277d502024515b92ecf9e95c048df', description: '交货方式为送货到仓必填' },
+                    { id: 'warehouseName', field: 'warehouseName', fieldName: '交货仓库名称', required: '是', dataType: 'string', example: '73d277d502024515b92ecf9e95c048df', description: '交货方式为送货到仓必填' },
+                    { id: 'province', field: 'province', fieldName: '省/州/自治区', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'city', field: 'city', fieldName: '市', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'district', field: 'district', fieldName: '区/县', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'address', field: 'address', fieldName: '详细地址', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'contact', field: 'contact', fieldName: '提货联系人', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'phone', field: 'phone', fieldName: '提货联系电话', required: '否', dataType: 'string', example: '', description: '' },
+                    { id: 'takeTime', field: 'takeTime', fieldName: '交货时间', required: '否', dataType: 'string', example: '', description: '' }
+                    ]
+                  },
+                 
+                ]
+            },
+            {
+              h2Title: '取消订单',
+              requestUrl: '[POST] /v1/order/aafOrder/cancelOrderById',
+              type:"application/json",
+              description:"id:下单时返回的订单id",
+                  codeLines: `
+                    {
+                        "id" : "e9569b7d755c4eeea069740f997b4c05"
+                    }`.split('\n'),
+                  codeLines1: `
+                    {
+                      "success": true,
+                      "reTry": false,
+                      "message": "操作成功",
+                      "code": 200,
+                      "data": "订单取消成功",
+                      "timestamp": 1719836871024
+                  }`.split('\n'),
+                  codeLines2: '',
+              tableData:[
+            { 
+              id: 'id', field: 'id', fieldName: '参数', required: '是', dataType: 'string', example: '', description: '' },
+                 
+                ]
+            },
+            {
+              h2Title: '根据订单id获取订单详情',
+              requestUrl: '[GET] /v1/order/aafOrder/querySupplementOrderById',
+              type:"",
+              description:"orderId:下单时返回的订单id",
+              codeLines: `
+                  /v1/order/aafOrder/querySupplementOrderById?orderId=e9569b7d755c4eeea069740f997b4c05`.split('\n'),
+                  codeLines1: `
+                  {
+                        "success": true,
+                        "reTry": false,
+                        "message": "操作成功",
+                        "code": 200,
+                        "data": {
+                            "transportMode": "AIR",
+                            "cabinetType": "1",
+                            "countryCode": "GB",
+                            "orderType": null,
+                            "countryName": "英国",
+                            "channelId": "06f73b6cfc914fb1adb80292ca280416",
+                            "channelName": "英国空派Send-UK-F-不递延",
+                            "cabinetSize": null,
+                            "custOrderNo": "2406290003",
+                            "isUseCustOrderNo": null,
+                            "shipmentId": "FBAABCD1234",
+                            "goodsAttrList": [
+                                {
+                                    "id": "7ff7e778112148d38fa8f236a8fd4dd0",
+                                    "materialType": "2",
+                                    "materialTypeStr": "带电",
+                                    "batteryType": "1",
+                                    "batteryTypeStr": "干电池",
+                                    "power": "123",
+                                    "watts": "123",
+                                    "documents": "https://public-aaf-shenzhen-file.oss-cn-beijing.aliyuncs.com/aaf1.0/file/鉴定文件.zip",
+                                    "documentsStr": "鉴定文件.zip"
+                                },
+                                {
+                                    "id": "d8394d0c13ff4ff891534694bbe1a572",
+                                    "materialType": "1",
+                                    "materialTypeStr": "普货",
+                                    "batteryType": null,
+                                    "batteryTypeStr": null,
+                                    "power": null,
+                                    "watts": null,
+                                    "documents": null,
+                                    "documentsStr": null
+                                }
+                            ],
+                            "goodsAttrTypeList": [
+                                "2",
+                                "1"
+                            ],
+                            "forecastNumber": 1,
+                            "declareType": "3",
+                            "receiveType": "1",
+                            "orderReceive": {
+                                "id": "4b3eea4d93a645e3adba35eabf28d82b",
+                                "orderId": "c20c09dafc6d400791e0b91bc1b49d1e",
+                                "orderNo": "aaGM2407010042",
+                                "warehouseCode": "ORF2",
+                                "shipmentType": "1",
+                                "fbaWarehouseCode": "ORF2",
+                                "fbaWarehouseName": null,
+                                "tpWarehouseCode": null,
+                                "tpWarehouseName": null,
+                                "receiveCountryName": null,
+                                "receivePostcode": null,
+                                "state": "VA",
+                                "city": "CHESAPEAKE",
+                                "address": "5045 PORTSMOUTH BLVD",
+                                "receiveAddress": "VA-CHESAPEAKE-5045 PORTSMOUTH BLVD",
+                                "receiveName": null,
+                                "receivePhone": null,
+                                "receiveLandline": null,
+                                "email": null,
+                                "inBoundCode": null,
+                                "companyName": null,
+                                "isDel": "0",
+                                "createTime": "2024-07-01 20:27:13",
+                                "createBy": "admin null",
+                                "updateTime": null,
+                                "updateBy": null
+                            },
+                            "takeType": "1",
+                            "orderTake": {
+                                "id": "b6727d5bf3e740cfb4879e48e695cd16",
+                                "orderId": "c20c09dafc6d400791e0b91bc1b49d1e",
+                                "orderNo": "aaGM2407010042",
+                                "type": "1",
+                                "contact": null,
+                                "phone": null,
+                                "takeTime": null,
+                                "province": null,
+                                "city": null,
+                                "district": null,
+                                "address": null,
+                                "takeAddress": null,
+                                "warehouseId": "00c8070b70a1475d90a4724331b85w44",
+                                "warehouseName": "深圳市美通一号仓",
+                                "remark": null,
+                                "createTime": "2024-07-01 20:27:12",
+                                "createBy": "admin null",
+                                "updateTime": null,
+                                "updateBy": null
+                            },
+                            "orderRemark": null,
+                            "docRemark": null,
+                            "orderId": "c20c09dafc6d400791e0b91bc1b49d1e",
+                            "orderDetailId": "903007bf123d492abcfca1adfc09ca89",
+                            "orderNo": "aaGM2407010042",
+                            "importType": "页面录入",
+                            "isPurchaseInsurance": "0",
+                            "insuranceType": null,
+                            "insuranceCurrency": null,
+                            "insuranceAmount": null,
+                            "isSpecifyDelivery": null,
+                            "deliveryCompanyId": null,
+                            "deliveryCompanyStr": null,
+                            "forecastWeight": 100.000,
+                            "forecastVolume": 1.000,
+                            "isArrangeInspection": null,
+                            "goodsAttrObj": {
+                                "batteryType": "1",
+                                "batteryTypeStr": "干电池",
+                                "power": "123",
+                                "watts": "123",
+                                "documents": "https://public-aaf-shenzhen-file.oss-cn-beijing.aliyuncs.com/aaf1.0/file/鉴定文件.zip",
+                                "documentsStr": "鉴定文件.zip",
+                                "batteryFileList": null
+                            },
+                            "orderGoodsList": [
+                                {
+                                    "id": "7eb1b9b4cf5b4fa8b989eff6b28c8d77",
+                                    "orderId": "c20c09dafc6d400791e0b91bc1b49d1e",
+                                    "orderNo": "aaGM2407010042",
+                                    "boxNo": "FBAABCD1234U000002",
+                                    "shipmentId": "FBAABCD1234",
+                                    "referenceId": null,
+                                    "boxWeight": 100.000,
+                                    "length": 100.000,
+                                    "width": 100.000,
+                                    "height": 100.000,
+                                    "skuEnglishName": "Bluetooth Earphones",
+                                    "skuName": "蓝牙耳机",
+                                    "declarePrice": 2.700,
+                                    "number": 100,
+                                    "exportHscode": "123",
+                                    "clearanceHscode": "123",
+                                    "brand": "无",
+                                    "brandType": "1",
+                                    "brandTypeStr": "无品牌",
+                                    "model": "ABC",
+                                    "material": "塑料",
+                                    "purpose": "手机配件",
+                                    "saleUrl": "https://www.amazon.co.gb/dp/ABCD1234",
+                                    "salesPrice": 0.000,
+                                    "picUrl": null,
+                                    "productWeight": 0.000,
+                                    "purchasePrice": 2.700,
+                                    "asin": null,
+                                    "sku": null,
+                                    "isElectric": "0",
+                                    "isElectricStr": "否",
+                                    "isMagnetic": "0",
+                                    "isMagneticStr": "否",
+                                    "isLiquid": null,
+                                    "isLiquidStr": null,
+                                    "isPowder": null,
+                                    "isPowderStr": null,
+                                    "isHazardous": null,
+                                    "isHazardousStr": null,
+                                    "isWooden": null,
+                                    "isWoodenStr": null,
+                                    "declareType": "1",
+                                    "declareTypeStr": "买单报关",
+                                    "description": null,
+                                    "productId": null,
+                                    "country": null,
+                                    "addtionalCode": null,
+                                    "specialCode": null,
+                                    "specialRate": null,
+                                    "preTariff": null,
+                                    "taxRate": null,
+                                    "unit": null,
+                                    "costPrice": null,
+                                    "totalPrice": null,
+                                    "grossWeight": null,
+                                    "netWeight": null,
+                                    "volume": null,
+                                    "materialRate": null,
+                                    "maker": null,
+                                    "makerAddress": null,
+                                    "remark": null,
+                                    "mixed": null,
+                                    "sort": null,
+                                    "size": null,
+                                    "isVat": null,
+                                    "invoiceCode": null,
+                                    "declareTotalPrice": null,
+                                    "declareNetWeight": null,
+                                    "isDel": "0",
+                                    "createTime": "2024-07-01T12:27:13.000+00:00",
+                                    "createBy": "admin null",
+                                    "updateTime": null,
+                                    "updateBy": null
+                                }
+                            ],
+                            "taxRefundInfo": null,
+                            "taxRefundInfoStr": null,
+                            "taxRefundFileList": null,
+                            "taxRefundRemark": "1",
+                            "taxType": "1",
+                            "taxTypeStr": "不包税",
+                            "vatNo": null,
+                            "eoriNo": null,
+                            "einNo": null,
+                            "taxNo": null,
+                            "taxId": null
+                        },
+                        "timestamp": 1719885098599
+                    }`.split('\n'),
+                  codeLines2: '',
+              tableData:[{ 
+              id: 'orderId', field: 'orderId', fieldName: '参数', required: '是', dataType: 'string', example: '', description: '' }, ]
+            },
+            {
+              h2Title: '获取渠道信息',
+              requestUrl: '[GET] /v1/sys/bdChannel/queryAllChannelList',
+              type:"",
+              description:"无需传参",
+              codeLines: `
+              /v1/sys/bdChannel/queryAllChannelList`.split('\n'),
+                  codeLines1: `
+                  {
+                      "success": true,
+                      "reTry": false,
+                      "message": "操作成功",
+                      "code": 200,
+                      "data": [
+                          {
+                              "id": "0255c7d5c717461db6deebee27d00bac",
+                              "channelName": "加拿大海运快线-普船卡派",
+                              "transportMode": "OCEAN"
+                          },
+                          {
+                              "id": "05c91b525c9443039d40821251feb147",
+                              "channelName": "德国空派Send-DE-B-Slow-不递延",
+                              "transportMode": "AIR"
+                          },
+                          {
+                              "id": "06f73b6cfc914fb1adb80292ca280416",
+                              "channelName": "英国空派Send-UK-F-不递延",
+                              "transportMode": "AIR"
+                          },
+                          {
+                              "id": "07d664c49d124f41a4dabc31259ff03f",
+                              "channelName": "加拿大海运快线-美森快递派",
+                              "transportMode": "OCEAN"
+                          }
+                      ]
+                  }
+            `.split('\n'),
+                  codeLines2: `
+                  success:请求成功标志,true仅代表请求成功,不代表通过
+                  message:请求描述
+                  code:200则代表请求通过,完成下单,500则代表校验未通过
+                  data:返回数据
+                  id:渠道id
+                  channelName:渠道名称
+                  transportMode:运输方式:OCEAN-海运, AIR-空运, RAIL-铁路, ROAD-卡航
+                  `.split('\n'),
+              tableData:[ ]
+            },
+            {
+              h2Title: '获取FBA仓库编码',
+              requestUrl: '[GET] /v1/sys/bdFbaCode/queryAllFbaCode',
+              type:"",
+              description:"无需传参",
+              codeLines: `
+              /v1/sys/bdFbaCode/queryAllFbaCode`.split('\n'),
+                  codeLines1: `
+                  {
+                    "success": true,
+                    "reTry": false,
+                    "message": "操作成功",
+                    "code": 200,
+                    "data": [
+                        "XFR2",
+                        "SCK4",
+                        "ITX2",
+                        "BWI4",
+                        "ACY2",
+                        "DFW8",
+                        "EWR9",
+                        "VESK",
+                        "TPFD",
+                        "SAMB",
+                        "MAA5",
+                        "CAE1"
+                    ]
+                }
+            `.split('\n'),
+                  codeLines2: `
+                  success:请求成功标志，true仅代表请求成功，不代表通过
+                  message：请求描述
+                  code:200则代表请求通过，完成下单，500则代表校验未通过
+                  data:FBA仓库编码列表
+                  `.split('\n'),
+              tableData:[ ]
+            },
+            {
+              h2Title: '获取订单轨迹',
+              requestUrl: '[GET] /v1/track/aafOrderTrack/queryByOrderIdForAnonymous',
+              type:"",
+              description:"orderNo:下单时返回的订单号",
+              codeLines: `
+              /v1/track/aafOrderTrack/queryByOrderIdForAnonymous?orderNo=2405090002`.split('\n'),
+                  codeLines1: `
+                  {
+                      "success":true,
+                      "reTry":false,
+                      "message":"操作成功",
+                      "code":200,
+                      "data":[
+                          {
+                              "trackNode":"1400",
+                              "trackNodeStr":"到港",
+                              "location":"PRINCERUPERT,BC",
+                              "expand":false,
+                              "timeLessInfoVO":{
+                                  "transportTime":"3天9小时45分钟",
+                                  "transportTimeCompare":null,
+                                  "transportTimeCompareType":null
+                              },
+                              "childTrackNodeList":[
+                                  {
+                                    "trackNode":"1401",
+                                    "trackNodeStr":"已到港",
+                                    "eventTime":"2024-05-1300:00:00",
+                                    "eventTimeType":"2",
+                                    "location":"PRINCERUPERT,BC"
+                                  }
+                              ]
+                          },
+                          {
+                              "trackNode":"0300",
+                              "trackNodeStr":"到仓",
+                              "location":"国内地点",
+                              "expand":false,
+                              "timeLessInfoVO":{
+                              "transportTime":"0天0小时1分钟",
+                              "transportTimeCompare":null,
+                              "transportTimeCompareType":null
+                          },
+                              "childTrackNodeList":[
+                                 {
+                                   "trackNode":"0301",
+                                   "trackNodeStr":"已到仓",
+                                   "eventTime":"2024-05-0914:14:46",
+                                   "eventTimeType":"1",
+                                   "location":"国内地点"
+                                   }
+                               ]
+                          },
+                          {
+                              "trackNode":"0100",
+                              "trackNodeStr":"下单",
+                              "location":"国内地点",
+                              "expand":false,
+                              "timeLessInfoVO":null,
+                              "childTrackNodeList":[
+                                  {
+                                      "trackNode":"0101",
+                                      "trackNodeStr":"已下单",
+                                      "eventTime":"2024-05-0914:13:35",
+                                      "eventTimeType":"1",
+                                      "location":"国内地点"
+                                  }
+                              ]
+                          }
+                      ],
+                      "timestamp":1719974617607
+                      }
+            `.split('\n'),
+                  codeLines2: `
+                  success:请求成功标志，true仅代表请求成功，不代表通过
+                  message：请求描述
+                  code:200则代表请求通过，完成下单，500则代表校验未通过
+                  data:订单轨迹数据列表
+                  `.split('\n'),
+              tableData:[
+                    { id: 'trackNode', field: 'trackNode', fieldName: '节点类型', required: '是', dataType: 'String', example: '1400', description: '节点类型' },
+                    { id: 'trackNodeStr', field: 'trackNodeStr', fieldName: '节点类型', required: '是', dataType: 'String', example: '到港', description: '节点类型' },
+                    { id: 'location', field: 'location', fieldName: '地点', required: '是', dataType: 'String', example: 'PRINCE RUPERT, BC', description: '地点' },
+                    { id: 'expand', field: 'expand', fieldName: '前端是否能展开子节点', required: '是', dataType: 'Boolean', example: 'false', description: '前端是否能展开子节点' },
+                    { id: 'timeLessInfoVO', field: 'timeLessInfoVO', fieldName: '运输时长信息', required: '否', dataType: 'Object', example: '见下方示例', description: '运输时长信息',children:[
+                        { id: 'transportTime', field: 'transportTime', fieldName: '运输时长', required: '是', dataType: 'String', example: '3天9小时45分钟', description: '运输时长' },
+                        { id: 'transportTimeCompare', field: 'transportTimeCompare', fieldName: '预计时长对比', required: '否', dataType: 'String', example: '提前3天9小时45分钟', description: '预计时长对比' },
+                        { id: 'transportTimeCompareType', field: 'transportTimeCompareType', fieldName: '预计时长对比类型', required: '否', dataType: 'String', example: '1', description: '预计时长对比类型 1、提前 2、延迟' },
+                    ] },
+                    { id: 'childTrackNodeList', field: 'childTrackNodeList', fieldName: '订单轨迹子节点', required: '是', dataType: 'array', example: '见下方示例', description: '订单轨迹子节点',children:[
+                        { id: 'trackNode', field: 'trackNode', fieldName: '节点类型', required: '是', dataType: 'String', example: '1401', description: '节点类型' },
+                        { id: 'trackNodeStr', field: 'trackNodeStr', fieldName: '节点类型', required: '是', dataType: 'String', example: '已到港', description: '节点类型' },
+                        { id: 'eventTime', field: 'eventTime', fieldName: '事件发生时间', required: '是', dataType: 'Date', example: '2024-05-13 00:00:00', description: '事件发生时间' },
+                        { id: 'eventTimeType', field: 'eventTimeType', fieldName: '时间发生时间类型', required: '是', dataType: 'String', example: '2', description: '时间发生时间类型 1、实际发生 2、预计发生' },
+                        { id: 'location', field: 'location', fieldName: '地点', required: '是', dataType: 'String', example: 'PRINCE RUPERT, BC', description: '地点' },
+                    ] },
+                   
+               ]
+            },
+          ],
         },
-        {
-            "小妹妹":[ 
-               { title: '嘿嘿嘿', index: '1' },
-               { title: '系统状态', index: '2' },
-               { title: '配置选项', index: '3' },
-               { title: '用户管理', index: '4' },
-               { title: '日志', index: '5' }
-            ]
-             
-        }
-    ]
-    }
+        // 其他数据对象
+      ];
+
+      // 根据 api 参数筛选数据
+      this.apiData = allData.filter(item => item.api.includes(api));
     },
-    computed: {
-      codeLines() {
-        // 将代码按行分割成数组
-        return this.code.split('\n');
-      },
+    copyToClipboard (text)  {
+      const code = text.join('\n');
+      const textArea = document.createElement('textarea');
+      textArea.value = code;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textArea);
+      this.$message({
+          message: '代码已复制到剪贴板',
+          type: 'success',
+          center: true
+        });
     },
-    methods: {
-        handleOpen(key, keyPath) {
-          //  console.log(key, keyPath);
-         },
-         handleClose(key, keyPath) {
-          //  console.log(key, keyPath);
-         },
-         handleSelect(key, keyPath) {
-          console.log(key, keyPath,'select');
-          this.totalIndex = keyPath[0];
-          const section = document.getElementById(`section${key}`);
-          if (section) {
-            section.scrollIntoView({ behavior: 'smooth' });
-          }
-        },
-         filteredMenuItems(val) {
-            // console.log(val)
-            this.propList = []
-            if (val === "") {
-              return this.menuItems; // 如果没有搜索查询，返回全部
-            }
-            const searchLower = `${val}`;
-            // console.log(searchLower,'searchLower')
-
-            const append = this.menuItems.map((item, index) => {
-  const key = Object.keys(this.menuItems[index])[0];
-  const eleIndex = item[key].findIndex(element => searchLower === element.title.toLowerCase());
-
-  if (eleIndex !== -1) {
-    return { groupIndex: index, itemIndex: eleIndex, item: item[key][eleIndex] };
-  }
-  // console.log('嘿嘿嘿没找到')
- // 或者其他你希望在未找到时返回的值
-});
-
-// console.log(append.filter(x => x !== undefined), 'append');
-const appendData = append.filter(x => x !== undefined)
-// console.log(appendData,'appendData')
-const index = `${appendData[0].groupIndex+1}`
-// console.log(index,'index')
-this.propList.push(index)
-
+    handleOpen(key, keyPath) {
+      // handle open
+    },
+    handleClose(key, keyPath) {
+      // handle close
+    },
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath, 'select');
+      this.totalIndex = keyPath[0];
+      this.$router.push({ name: 'developmentDocking', query: { api: key } });
+    },
+    filteredMenuItems(val) {
+      this.propList = [];
+      if (val === "") {
+        return this.menuItems; // 如果没有搜索查询，返回全部
+      }
+      const searchLower = `${val}`;
+      const append = this.menuItems.map((item, index) => {
+        const key = Object.keys(this.menuItems[index])[0];
+        const eleIndex = item[key].findIndex(element => searchLower === element.title.toLowerCase());
+        if (eleIndex !== -1) {
+          return { groupIndex: index, itemIndex: eleIndex, item: item[key][eleIndex] };
+        }
+      });
+      const appendData = append.filter(x => x !== undefined);
+      const index = `${appendData[0].groupIndex + 1}`;
+      this.propList.push(index);
+    }
+  },
+  created() {
+    const api = this.$route.query.api;
+    if (api) {
+      this.fetchData(api);
     }
+  },
+  watch: {
+    '$route.query.api'(newApi) {
+      if (newApi) {
+        this.fetchData(newApi);
+      }
     }
-  };
-  </script>
-  <style src="./index.css" scoped></style>
\ No newline at end of file
+  }
+};
+</script>
+<style src="./index.css" scoped></style>