From 7be22da7415c3a53a2d514c9add99648cebf1930 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Tue, 27 Oct 2020 11:37:43 +0800
Subject: [PATCH] =?UTF-8?q?sdk=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/imgs/ic_banbenhao.png              | Bin 0 -> 1151 bytes
 src/components/doc-width-nav.vue              | 241 ++++++++++
 .../technical-support/answer-center/index.vue |   1 +
 .../technical-support/doc-manage/index.vue    |   5 -
 src/pages/technical-support/doc/detail.vue    | 212 +--------
 .../technical-support/sdk-manage/index.vue    |  78 ++++
 .../technical-support/sdk-manage/list.vue     | 432 ++++++++++++++++++
 .../sdk-manage/type/index.vue                 | 121 +++++
 src/pages/technical-support/sdk/detail.vue    | 147 ++++++
 src/pages/technical-support/sdk/index.vue     | 120 +++++
 src/router/index.js                           |  26 +-
 11 files changed, 1172 insertions(+), 211 deletions(-)
 create mode 100644 src/assets/imgs/ic_banbenhao.png
 create mode 100644 src/components/doc-width-nav.vue
 create mode 100644 src/pages/technical-support/sdk-manage/index.vue
 create mode 100644 src/pages/technical-support/sdk-manage/list.vue
 create mode 100644 src/pages/technical-support/sdk-manage/type/index.vue
 create mode 100644 src/pages/technical-support/sdk/detail.vue
 create mode 100644 src/pages/technical-support/sdk/index.vue

diff --git a/src/assets/imgs/ic_banbenhao.png b/src/assets/imgs/ic_banbenhao.png
new file mode 100644
index 0000000000000000000000000000000000000000..c179d9c11dbc3e7134754255968085e06e3fde75
GIT binary patch
literal 1151
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k$r9IylHmNblJdl&R0hYC{G?O`
z&)mfH)S%SFl*+=BsWuD@%*vS|5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y
zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP
zs8ErclUHn2VXFi-*9yo63F|8<fR&VF+bTgE72zA8;GAESs$i;TrkiYNVxeGesb^?r
zVqk2hqhMrUXsK^tp>JrcYhY+)U}j}%t^fr}K--E^(yW49+@N*=dA3R!B_#z``ugSN
z<$C4Ddih1^`i7R4Kr@W=jf`}GDs+o0^GXscbn}XpVJ5hw7AF^F7L;V>=P7_pOiaoz
zEwNPsx)kDt+yc0<dBxCR0tT3VMPh-zp`HQAOE87LzW9~q=E7AMmjtCE+>6!V;*iRM
zRQ;gT;{4L0WMIUlDTAykuyQU+O)SYT3dzsUfrVl~Mt(_taYlZDf)UV33L4>=c`5nj
z#hPFZzP?tTdBr7(dC94sF1AWQBlI#eQ><K!U7QTeO^poA-5d=KU7ak=+??HvER0Qz
z98E2aEZksvUGkGlb5rw5V0u#!dW~`F1*L`D0-((<sYRJ(sVQzn`MC;UKU-zuc8dW{
z^PqZDaJ$72r(S)aWAs5Wixkr^Az<<WG2!VJ$bqN))I4BvF9N3P{tdHM1M|cuPZ!6K
zid#7s_IfcpinKkvo0^>)d@LzA=W#7Z=f$mE;sPFu5fPl83UgaZIG1#4DlOrR&YZnE
zK<VEUCCyFUYrB8&)i58P#LVArX`KG=&(o~8mW3VCTMUoN*4<%kEb8F9x3yy7pM_N~
z%;r2|bv`5TFsgFhFJq}~ibtiBzD&&C9P>CrefhS7$C=M<JgTep;-Pf<EPk8sc}Hwl
zy+~?^_X)Arw7=!jrmbRSdNKM_?fxfjai`*TE<CVwU2@X$sAV4~KKq~J9NZoMwKd)%
z!0d7Fv)9`m3Lf9J{^m<z<)_nLrTsfu>%36DbBex!oA2X8`yR$OFfw$;Sn`yd2{Z&1
N37)QgF6*2Ung9zGj4=QJ

literal 0
HcmV?d00001

diff --git a/src/components/doc-width-nav.vue b/src/components/doc-width-nav.vue
new file mode 100644
index 0000000..a60ab7d
--- /dev/null
+++ b/src/components/doc-width-nav.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="doc_width_nav">
+    <div class="part doc_part">
+      <h3 class="part_title">
+        <span>{{ title || "-" }}</span>
+        <span>更新时间：{{ time || "-" }}</span>
+      </h3>
+      <div
+        class="part_content doc_content apaas_scroll"
+        v-html="content"
+        ref="docContent"
+      ></div>
+    </div>
+    <div class="part nav_part">
+      <h3 class="part_title">
+        <span>导航</span>
+      </h3>
+      <ul class="part_content nav_content apaas_scroll">
+        <li
+          v-for="(item, index) in navTree"
+          :class="[
+            'text_clip',
+            'level_' + item.level,
+            item.id === curNav ? ' current' : '',
+          ]"
+          :key="index"
+        >
+          <a v-text="item.title" @click="clickNav(item)"></a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    richText: {
+      type: String,
+      defalut: "",
+    },
+    title: {
+      type: String,
+      defalut: "",
+    },
+    time: {
+      type: String,
+      defalut: "",
+    },
+  },
+  data() {
+    return {
+      content: "",
+      navTree: [],
+      curNav: "",
+    };
+  },
+  watch: {
+    richText() {
+      this.translate();
+    },
+  },
+  mounted() {
+    this.translate();
+  },
+  methods: {
+    translate() {
+      let content = this.richText;
+      let titles =
+        content.match(
+          /<h1(([\s\S])*?)<\/h1>|<h2(([\s\S])*?)<\/h2>|<h3(([\s\S])*?)<\/h3>/g
+        ) || [];
+      let time = new Date().getTime();
+      let pre_h1_index = 0;
+      let pre_h2_index = 0;
+      let pre_h3_index = 0;
+      let newTitles = titles
+        .map((title, index) => {
+          let newTitle = title;
+          let level = 0;
+          let id = "";
+
+          if (title.match(/<h1(([\s\S])*?)<\/h1>/g)) {
+            pre_h1_index++;
+            pre_h2_index = 0;
+            pre_h3_index = 0;
+            level = 1;
+            id = `nav_${pre_h1_index}` + "_" + time;
+
+            newTitle = title.replace(/<h1/g, `<h1 id="${id}"`);
+          } else if (title.match(/<h2(([\s\S])*?)<\/h2>/g)) {
+            pre_h2_index++;
+            pre_h3_index = 0;
+            level = 2;
+            id = `nav_${pre_h1_index}_${pre_h2_index}` + "_" + time;
+
+            newTitle = title.replace(/<h2/g, `<h2 id="${id}"`);
+          } else if (title.match(/<h3(([\s\S])*?)<\/h3>/g)) {
+            pre_h3_index++;
+            level = 3;
+            id = `nav_${pre_h1_index}_${pre_h2_index}_${pre_h3_index}`;
+
+            newTitle = title.replace(/<h3/g, `<h3 id="${id}"`) + "_" + time;
+          }
+
+          content = content.replace(new RegExp(title), newTitle);
+
+          return {
+            level,
+            id,
+            title: title.replace(/<\/?.+?>/g, ""),
+          };
+        })
+        .filter((item) => item.title);
+
+      this.content = content;
+      this.navTree = newTitles;
+      this.curNav = (newTitles[0] && newTitles[0].id) || "";
+    },
+    clickNav(item) {
+      let target = document.querySelector(`#${item.id}`);
+
+      this.setScroll(target, this.$refs.docContent);
+      this.curNav = item.id;
+    },
+    setScroll(el, parentEl) {
+      let actualTop = el.offsetTop;
+      let current = el.offsetParent;
+
+      while (current !== null) {
+        actualTop += current.offsetTop;
+        current = current.offsetParent;
+      }
+
+      parentEl.scrollTop = actualTop - parentEl.offsetTop;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.doc_width_nav {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.doc_width_nav > .part {
+  background-color: #fff;
+  border-radius: 10px;
+  padding-bottom: 20px;
+  box-sizing: border-box;
+  box-sizing: 0;
+}
+.doc_width_nav > .part + .part {
+  margin-left: 20px;
+}
+.doc_part {
+  flex-grow: 1;
+}
+.nav_part {
+  width: 270px;
+  flex-shrink: 0;
+}
+.part_title {
+  padding: 10px 20px;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.part_title::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  border-bottom: 1px solid #e3e5ef;
+}
+.part_title > span:nth-child(1) {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 36px;
+  color: #58617a;
+  position: relative;
+  padding-left: 15px;
+}
+.part_title > span:nth-child(1)::before {
+  content: "";
+  width: 4px;
+  height: 18px;
+  background-color: #515fe7;
+  border-radius: 2px;
+  position: absolute;
+  top: 10px;
+  left: 0;
+}
+.part_title > span:nth-child(2) {
+  font-size: 14px;
+  line-height: 24px;
+  color: #8890a7;
+  padding-left: 20px;
+  background-image: url("/../assets/imgs/shop_ic_updatetime.png");
+  background-repeat: no-repeat;
+  background-position: left center;
+}
+.part_content {
+  height: calc(100% - 76px);
+  margin-top: 20px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.doc_content {
+  padding: 0 20px;
+}
+.nav_content {
+  padding-left: 20px;
+}
+.nav_content > li > a {
+  display: block;
+  height: 30px;
+  padding: 0 20px;
+  font-size: 14px;
+  line-height: 30px;
+  color: #58617a;
+  text-decoration: none;
+  cursor: pointer;
+}
+.nav_content > li.level_1 > a {
+  color: #242c43;
+}
+.nav_content > li.level_2 > a {
+  text-indent: 2em;
+}
+.nav_content > li.level_3 > a {
+  text-indent: 4em;
+}
+.nav_content > li.current > a {
+  background-color: #e6ebfe;
+  color: #515fe7;
+}
+</style>
diff --git a/src/pages/technical-support/answer-center/index.vue b/src/pages/technical-support/answer-center/index.vue
index 9ca43e0..87a8fd4 100644
--- a/src/pages/technical-support/answer-center/index.vue
+++ b/src/pages/technical-support/answer-center/index.vue
@@ -145,6 +145,7 @@ export default {
   font-size: 0;
 }
 .user_img > img {
+  width: 104px;
   border-radius: 50%;
   border: 2px solid #e3e5ef;
 }
diff --git a/src/pages/technical-support/doc-manage/index.vue b/src/pages/technical-support/doc-manage/index.vue
index c654ca6..32002ee 100644
--- a/src/pages/technical-support/doc-manage/index.vue
+++ b/src/pages/technical-support/doc-manage/index.vue
@@ -23,11 +23,6 @@ export default {
   data: () => ({
     navList: [],
   }),
-  watch: {
-    "$route.fullPath"(path) {
-      this.initNavList();
-    },
-  },
   methods: {
     initNavList() {
       this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
diff --git a/src/pages/technical-support/doc/detail.vue b/src/pages/technical-support/doc/detail.vue
index a3dc274..aab4f7b 100644
--- a/src/pages/technical-support/doc/detail.vue
+++ b/src/pages/technical-support/doc/detail.vue
@@ -14,51 +14,28 @@
       </el-breadcrumb>
     </div>
 
-    <div class="main_container">
-      <div class="part doc_part">
-        <h3 class="part_title">
-          <span>{{ title || typeText }}</span>
-          <span>更新时间：{{ update_time }}</span>
-        </h3>
-        <div
-          class="part_content doc_content apaas_scroll"
-          v-html="content"
-          ref="docContent"
-        ></div>
-      </div>
-      <div class="part nav_part">
-        <h3 class="part_title">
-          <span>导航</span>
-        </h3>
-        <ul class="part_content nav_content apaas_scroll">
-          <li
-            v-for="(item, index) in navTree"
-            :class="[
-              'text_clip',
-              'level_' + item.level,
-              item.id === curNav ? ' current' : '',
-            ]"
-            :key="index"
-          >
-            <a v-text="item.title" @click="clickNav(item)"></a>
-          </li>
-        </ul>
-      </div>
-    </div>
+    <doc-width-nav
+      class="main_container"
+      :title="title"
+      :time="update_time"
+      :rich-text="content"
+    ></doc-width-nav>
   </div>
 </template>
 
 <script>
 import helper from "@/services/helper.js";
+import DocWidthNav from "@/components/doc-width-nav.vue";
 
 export default {
+  components: {
+    DocWidthNav,
+  },
   data() {
     return {
       title: "",
       update_time: "",
       content: "",
-      navTree: [],
-      curNav: "",
     };
   },
   computed: {
@@ -87,59 +64,6 @@ export default {
   },
   methods: {
     getContent() {
-      let successCallback = (content) => {
-        let titles =
-          content.match(
-            /<h1(([\s\S])*?)<\/h1>|<h2(([\s\S])*?)<\/h2>|<h3(([\s\S])*?)<\/h3>/g
-          ) || [];
-        let time = new Date().getTime();
-        let pre_h1_index = 0;
-        let pre_h2_index = 0;
-        let pre_h3_index = 0;
-        let newTitles = titles
-          .map((title, index) => {
-            let newTitle = title;
-            let level = 0;
-            let id = "";
-
-            if (title.match(/<h1(([\s\S])*?)<\/h1>/g)) {
-              pre_h1_index++;
-              pre_h2_index = 0;
-              pre_h3_index = 0;
-              level = 1;
-              id = `nav_${pre_h1_index}` + "_" + time;
-
-              newTitle = title.replace(/<h1/g, `<h1 id="${id}"`);
-            } else if (title.match(/<h2(([\s\S])*?)<\/h2>/g)) {
-              pre_h2_index++;
-              pre_h3_index = 0;
-              level = 2;
-              id = `nav_${pre_h1_index}_${pre_h2_index}` + "_" + time;
-
-              newTitle = title.replace(/<h2/g, `<h2 id="${id}"`);
-            } else if (title.match(/<h3(([\s\S])*?)<\/h3>/g)) {
-              pre_h3_index++;
-              level = 3;
-              id = `nav_${pre_h1_index}_${pre_h2_index}_${pre_h3_index}`;
-
-              newTitle = title.replace(/<h3/g, `<h3 id="${id}"`) + "_" + time;
-            }
-
-            content = content.replace(new RegExp(title), newTitle);
-
-            return {
-              level,
-              id,
-              title: title.replace(/<\/?.+?>/g, ""),
-            };
-          })
-          .filter((item) => item.title);
-
-        this.content = content;
-        this.navTree = newTitles;
-        this.curNav = (newTitles[0] && newTitles[0].id) || "";
-      };
-
       this.$http
         .get("/apaas/support/document/get", {
           params: {
@@ -152,7 +76,7 @@ export default {
             this.update_time = this.getTimeText(data.data.updated);
 
             if (data.data.content) {
-              successCallback(data.data.content);
+              this.content = data.data.content;
             }
           }
         });
@@ -160,23 +84,6 @@ export default {
     getTimeText(time) {
       return helper.dateStringTransform(time);
     },
-    clickNav(item) {
-      let target = document.querySelector(`#${item.id}`);
-
-      this.setScroll(target, this.$refs.docContent);
-      this.curNav = item.id;
-    },
-    setScroll(el, parentEl) {
-      let actualTop = el.offsetTop;
-      let current = el.offsetParent;
-
-      while (current !== null) {
-        actualTop += current.offsetTop;
-        current = current.offsetParent;
-      }
-
-      parentEl.scrollTop = actualTop - parentEl.offsetTop;
-    },
   },
 };
 </script>
@@ -189,102 +96,5 @@ export default {
 }
 .main_container {
   height: calc(100% - 53px);
-  display: flex;
-  justify-content: flex-start;
-  align-items: stretch;
-}
-.main_container > .part {
-  background-color: #fff;
-  border-radius: 10px;
-  padding-bottom: 20px;
-  box-sizing: border-box;
-  box-sizing: 0;
-}
-.main_container > .part + .part {
-  margin-left: 20px;
-}
-.doc_part {
-  flex-grow: 1;
-}
-.nav_part {
-  width: 270px;
-  flex-shrink: 0;
-}
-.part_title {
-  padding: 10px 20px;
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.part_title::after {
-  content: "";
-  position: absolute;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  border-bottom: 1px solid #e3e5ef;
-}
-.part_title > span:nth-child(1) {
-  font-size: 18px;
-  font-weight: bold;
-  line-height: 36px;
-  color: #58617a;
-  position: relative;
-  padding-left: 15px;
-}
-.part_title > span:nth-child(1)::before {
-  content: "";
-  width: 4px;
-  height: 18px;
-  background-color: #515fe7;
-  border-radius: 2px;
-  position: absolute;
-  top: 10px;
-  left: 0;
-}
-.part_title > span:nth-child(2) {
-  font-size: 14px;
-  line-height: 24px;
-  color: #8890a7;
-  padding-left: 20px;
-  background-image: url("../../../assets/imgs/shop_ic_updatetime.png");
-  background-repeat: no-repeat;
-  background-position: left center;
-}
-.part_content {
-  height: calc(100% - 76px);
-  margin-top: 20px;
-  box-sizing: border-box;
-  overflow: auto;
-}
-.doc_content {
-  padding: 0 20px;
-}
-.nav_content {
-  padding-left: 20px;
-}
-.nav_content > li > a {
-  display: block;
-  height: 30px;
-  padding: 0 20px;
-  font-size: 14px;
-  line-height: 30px;
-  color: #58617a;
-  text-decoration: none;
-  cursor: pointer;
-}
-.nav_content > li.level_1 > a {
-  color: #242c43;
-}
-.nav_content > li.level_2 > a {
-  text-indent: 2em;
-}
-.nav_content > li.level_3 > a {
-  text-indent: 4em;
-}
-.nav_content > li.current > a {
-  background-color: #e6ebfe;
-  color: #515fe7;
 }
 </style>
diff --git a/src/pages/technical-support/sdk-manage/index.vue b/src/pages/technical-support/sdk-manage/index.vue
new file mode 100644
index 0000000..40b299c
--- /dev/null
+++ b/src/pages/technical-support/sdk-manage/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="doc_container">
+    <side-nav-bar
+      title="SDK管理"
+      imgSrc="tool_ic_kaifawendang"
+      :nav-list="navList"
+      :title-path="navList[0] && navList[0].path"
+      style="width: 200px;"
+    ></side-nav-bar>
+    <div class="main_container">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import sideNavBar from "@/components/side-nav-bar";
+
+export default {
+  components: {
+    sideNavBar,
+  },
+  data: () => ({
+    navList: [],
+  }),
+  methods: {
+    initNavList() {
+      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
+        if (response.data.success == 1) {
+          let arr = response.data.data[0].Child;
+
+          for (let i = 0; i < arr.length; i++) {
+            let first = arr[i];
+
+            if (first.visit_url == "/technical_support") {
+              for (let j = 0; j < first.Child.length; j++) {
+                let second = first.Child[j];
+
+                if (second.visit_url == "/technical_support/sdk_manage") {
+                  this.navList = second.Child.map((item) => ({
+                    name: item.menu_name,
+                    path: item.visit_url,
+                  }));
+                  break;
+                }
+              }
+              break;
+            }
+          }
+        }
+      });
+    },
+  },
+  mounted() {
+    this.initNavList();
+  },
+};
+</script>
+
+<style scoped>
+.doc_container {
+  height: calc(100vh - 58px);
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.side_nav_bar {
+  width: 180px;
+  flex-shrink: 0;
+}
+.main_container {
+  width: calc(100% - 180px);
+  flex-grow: 1;
+  flex-shrink: 1;
+  background-color: #f6f7fb;
+  overflow: auto;
+}
+</style>
diff --git a/src/pages/technical-support/sdk-manage/list.vue b/src/pages/technical-support/sdk-manage/list.vue
new file mode 100644
index 0000000..37749dc
--- /dev/null
+++ b/src/pages/technical-support/sdk-manage/list.vue
@@ -0,0 +1,432 @@
+<template>
+  <div class="doc_manage_container">
+    <apass-list
+      ref="list"
+      search-placeholder="请输入关键字"
+      :hide-search="true"
+      :list-total="listTotal"
+      :list-header="listHeader"
+      :list-data="listData"
+      :list-padding-left="paddingLeft"
+      @list-action="init"
+    >
+      <el-breadcrumb separator="/" slot="breadcrumb">
+        <el-breadcrumb-item to="/technical_support">
+          技术支持
+        </el-breadcrumb-item>
+        <el-breadcrumb-item to="/technical_support/doc_manage">
+          开发文档
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          管理列表
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+
+      <template slot="header-left">
+        <el-button type="primary" @click="addNew">
+          新建
+        </el-button>
+      </template>
+
+      <template slot="top">
+        <div class="top_fliter">
+          <show-more-filter class="filter_list">
+            <div class="filter_item">
+              <span class="filter_title">文档名称：</span>
+              <el-input
+                v-model="topFilter.name"
+                placeholder="请输入banner关键词"
+                @keyup.enter.native="topFilterAction"
+              ></el-input>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">文档类型：</span>
+              <el-select v-model="topFilter.type" placeholder="请选择">
+                <el-option label="全部" value=""></el-option>
+                <el-option
+                  v-for="(item, index) in types"
+                  :key="'top_type_' + index"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">最后更新时间：</span>
+              <el-date-picker
+                v-model="topFilter.time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </div>
+          </show-more-filter>
+          <div class="filter_action apaas_button">
+            <el-button type="primary" @click="topFilterAction">
+              查询
+            </el-button>
+            <el-button type="defalut" @click="topFilterClear">
+              重置
+            </el-button>
+          </div>
+        </div>
+      </template>
+    </apass-list>
+
+    <apass-dialog ref="addDialog" title="新增">
+      <div class="add_content" slot="content">
+        <div class="add_notice">
+          <p>注：同一文档类型下可维护多个文档名称</p>
+        </div>
+        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
+          <el-form-item label="活动区域" prop="style">
+            <el-select
+              v-model="addForm.style"
+              placeholder="请选择文档类型"
+              style="width: 100%;"
+            >
+              <el-option
+                v-for="(item, index) in types"
+                :key="'add_type_' + index"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="文档名称" prop="title">
+            <el-input
+              v-model="addForm.title"
+              placeholder="请输入文档名称"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <template slot="action">
+        <el-button type="defalut" size="mini" @click="AddCancelAction">
+          取消
+        </el-button>
+        <el-button type="primary" size="mini" @click="AddSubmitAction">
+          确定
+        </el-button>
+      </template>
+    </apass-dialog>
+
+    <apass-dialog
+      ref="detailDialog"
+      :title="detail.title"
+      class="doc_manage_detail_dialog"
+      width="1340px"
+    >
+      <div
+        class="detail_content apaas_scroll"
+        slot="content"
+        v-html="detail.content"
+      ></div>
+    </apass-dialog>
+
+    <apass-dialog
+      ref="deleteDialog"
+      :msg="deleteDialogInfo.msg"
+      :submit="deleteDialogInfo.submit"
+    ></apass-dialog>
+  </div>
+</template>
+
+<script>
+import helper from "@/services/helper.js";
+import apassList from "@/components/apass-list";
+import apassDialog from "@/components/apass-dialog";
+import showMoreFilter from "@/components/show-more-filter";
+
+export default {
+  components: {
+    apassList,
+    apassDialog,
+    showMoreFilter,
+  },
+  data() {
+    return {
+      paddingLeft: 25,
+      listTotal: 0,
+      listHeader: [
+        {
+          label: "文档名称",
+          prop: "title",
+          type: "button",
+          callback: this.viewItem,
+          width: 320,
+        },
+        {
+          label: "文档类型",
+          prop: "style",
+          getText: (item) => {
+            let type = this.types[item.style] || null;
+
+            return (type && type.label) || "";
+          },
+          align: "center",
+        },
+        {
+          label: "操作人",
+          prop: "created_by",
+          align: "center",
+        },
+        {
+          label: "最后更新时间",
+          prop: "updated",
+          getText: ({ updated }) => this.getTimeText(updated || ""),
+          align: "center",
+        },
+        {
+          label: "操作",
+          type: "buttons",
+          align: "center",
+          width: 240,
+          actionList: [
+            {
+              label: "编辑",
+              callback: this.editItem,
+            },
+            {
+              label: "删除",
+              callback: this.deleteItem,
+              class: "warn",
+            },
+          ],
+        },
+      ],
+      listData: [],
+      topFilter: {
+        name: "",
+        type: "",
+        time: "",
+      },
+      types: [
+        {
+          label: "平台简介",
+          value: 0, // "introductory",
+        },
+        {
+          label: "使用须知",
+          value: 1, // "notice",
+        },
+        {
+          label: "术语说明",
+          value: 2, // "trem",
+        },
+        {
+          label: "标准规范",
+          value: 3, // "standard",
+        },
+        {
+          label: "操作指南",
+          value: 4, // "guide",
+        },
+        {
+          label: "接口文档",
+          value: 5, // "api",
+        },
+        {
+          label: "常见问题",
+          value: 6, // "questions",
+        },
+      ],
+      addForm: {
+        style: "",
+        title: "",
+      },
+      addFormRules: {
+        style: [
+          { required: true, message: "请选择文档类型", trigger: "change" },
+        ],
+        title: [
+          { required: true, message: "请输入文档名称", trigger: "blur" },
+          { max: 20, message: "长度应小于20个字符", trigger: "change" },
+        ],
+      },
+      detail: "",
+      deleteDialogInfo: {
+        msg: "",
+        submit: null,
+      },
+      tempFilter: {},
+    };
+  },
+  methods: {
+    init(filter) {
+      let fullFilter = {
+        ...filter,
+        ...this.topFilter,
+      };
+      this.tempFilter = filter;
+
+      this.$http
+        .get("/apaas/support/document/list", {
+          params: {
+            style: fullFilter.type,
+            start: fullFilter.time && fullFilter.time[0],
+            end: fullFilter.time && fullFilter.time[1],
+            limit: fullFilter.size,
+            page: fullFilter.page,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.listTotal = data.total;
+            this.listData = data.data || [];
+          }
+        });
+    },
+    getTimeText(time) {
+      return helper.dateStringTransform(time);
+    },
+    topFilterAction() {
+      this.refreshPage();
+    },
+    topFilterClear() {
+      this.topFilter = {
+        name: "",
+        type: "",
+        time: "",
+      };
+      this.refreshPage();
+    },
+    refreshPage() {
+      this.$refs.list.resetCurrentPage();
+    },
+    viewItem(item) {
+      this.$http
+        .get("/apaas/support/document/get", {
+          params: {
+            id: item.id,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.detail = data.data;
+          }
+        });
+
+      this.$refs.detailDialog.show();
+    },
+    editItem(item) {
+      this.$router.push(`/technical_support/doc_manage/edit/${item.id}`);
+    },
+    deleteItem(item) {
+      this.deleteDialogInfo.msg = `是否删除《${item.title}》？`;
+      this.deleteDialogInfo.submit = () => {
+        this.$http
+          .delete("/apaas/support/document/delete", {
+            params: {
+              id: item.id,
+            },
+          })
+          .then(({ data }) => {
+            if (data.success === 1) {
+              this.$message.success("删除成功");
+              this.init(this.tempFilter);
+            } else {
+              this.$message.error("删除失败");
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+            this.$message.error("删除失败");
+          });
+      };
+      this.$refs.deleteDialog.show();
+    },
+    addNew() {
+      this.addForm = {
+        style: 0,
+        title: "",
+      };
+      this.$refs.addDialog.show();
+    },
+    AddCancelAction() {
+      this.$refs.addDialog.hide();
+    },
+    AddSubmitAction() {
+      this.$refs.addForm.validate((valid) => {
+        if (valid) {
+          this.$http
+            .get("/apaas/support/document/checkTitle", {
+              params: this.addForm,
+            })
+            .then(({ data }) => {
+              if (data.success === 1) {
+                this.$http
+                  .post("/apaas/support/document/create", {
+                    ...this.addForm,
+                    content: "",
+                  })
+                  .then(({ data }) => {
+                    if (data.success === 1) {
+                      this.$message.success("新增成功");
+                      this.editItem(data.data);
+                    } else {
+                      this.$message.error(data.errMsg || "新增失败");
+                    }
+                  })
+                  .catch((error) => {
+                    console.log(error);
+                    this.$message.error("新增失败");
+                  });
+              } else {
+                this.$message.error("验证失败");
+              }
+            })
+            .catch((error) => {
+              console.log(error);
+              this.$message.error("验证失败");
+            });
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.doc_manage_container {
+  height: 100%;
+}
+.add_notice {
+  display: inline-block;
+  margin: 10px auto;
+  background-color: #f4f7fc;
+  border-radius: 8px;
+  padding: 10px;
+}
+.add_notice > p {
+  font-size: 12px;
+  line-height: 16px;
+  color: #58617a;
+  padding-left: 20px;
+  background-image: url("../../../assets/imgs/ic_tishi.png");
+  background-repeat: no-repeat;
+  background-position: left center;
+}
+.detail_content {
+  height: 650px;
+  overflow: auto;
+  text-align: left;
+}
+</style>
+
+<style>
+.doc_manage_detail_dialog .el-dialog__body {
+  padding: 10px;
+}
+.doc_manage_detail_dialog .el-dialog__footer {
+  display: none;
+}
+</style>
diff --git a/src/pages/technical-support/sdk-manage/type/index.vue b/src/pages/technical-support/sdk-manage/type/index.vue
new file mode 100644
index 0000000..5872e20
--- /dev/null
+++ b/src/pages/technical-support/sdk-manage/type/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="doc_manage_container">
+    <apass-list
+      ref="list"
+      search-placeholder="请输入关键字"
+      :list-padding-left="paddingLeft"
+      :hide-search="true"
+      :list-total="listTotal"
+      :list-header="listHeader"
+      :list-data="listData"
+      @list-action="init"
+    >
+      <el-breadcrumb separator="/" slot="breadcrumb">
+        <el-breadcrumb-item to="/technical_support">
+          技术支持
+        </el-breadcrumb-item>
+        <el-breadcrumb-item to="/technical_support/doc_manage">
+          SDK管理
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          SDK类型管理
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+
+      <template slot="top">
+        <div class="top_fliter">
+          <show-more-filter class="filter_list">
+            <div class="filter_item">
+              <span class="filter_title">SDK类型：</span>
+              <el-select v-model="topFilter.type" placeholder="请选择">
+                <el-option label="全部" value=""></el-option>
+                <el-option
+                  v-for="(item, index) in types"
+                  :key="'top_type_' + index"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">最后更新时间：</span>
+              <el-date-picker
+                v-model="topFilter.time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </div>
+          </show-more-filter>
+          <div class="filter_action apaas_button">
+            <el-button type="primary" @click="topFilterAction">
+              查询
+            </el-button>
+            <el-button type="defalut" @click="topFilterClear">
+              重置
+            </el-button>
+          </div>
+        </div>
+      </template>
+    </apass-list>
+  </div>
+</template>
+
+<script>
+import helper from "@/services/helper.js";
+import apassList from "@/components/apass-list";
+import apassDialog from "@/components/apass-dialog";
+import showMoreFilter from "@/components/show-more-filter";
+
+export default {
+  components: {
+    apassList,
+    apassDialog,
+    showMoreFilter,
+  },
+  data() {
+    return {
+      paddingLeft: 25,
+      listTotal: 0,
+      listHeader: [],
+      listData: [],
+      topFilter: {
+        type: "",
+        time: "",
+      },
+      types: [],
+      tempFilter: {},
+    };
+  },
+  methods: {
+    init(filter) {
+      let fullFilter = {
+        ...filter,
+        ...this.topFilter,
+      };
+
+      this.tempFilter = filter;
+
+      console.log(fullFilter);
+    },
+    topFilterClear() {
+      this.topFilter = {
+        name: "",
+        type: "",
+        time: "",
+      };
+      this.refreshPage();
+    },
+    topFilterAction() {
+      this.refreshPage();
+    },
+    refreshPage() {
+      this.$refs.list.resetCurrentPage();
+    },
+  },
+};
+</script>
diff --git a/src/pages/technical-support/sdk/detail.vue b/src/pages/technical-support/sdk/detail.vue
new file mode 100644
index 0000000..a27aa76
--- /dev/null
+++ b/src/pages/technical-support/sdk/detail.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="sdk_container">
+    <div class="apass_breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item to="/technical_support">
+          技术支持
+        </el-breadcrumb-item>
+        <el-breadcrumb-item to="/technical_support/doc">
+          SDK中心
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          {{ typeText }}
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="download_action apaas_button" v-if="sdkInfo">
+      <span>SDK下载</span>
+      <span>版本号：{{ sdkInfo.version }}</span>
+      <span>发布日期：{{ sdkInfo.time }}</span>
+      <el-button type="primary" @click="downloadUrl(sdkInfo.url)">
+        下载SDK
+      </el-button>
+    </div>
+
+    <doc-width-nav
+      class="main_container"
+      :title="title"
+      :time="update_time"
+      :rich-text="content"
+    ></doc-width-nav>
+  </div>
+</template>
+
+<script>
+import helper from "@/services/helper.js";
+import DocWidthNav from "@/components/doc-width-nav.vue";
+
+export default {
+  components: {
+    DocWidthNav,
+  },
+  data() {
+    return {
+      title: "",
+      update_time: "",
+      content: "",
+      sdkInfo: null,
+    };
+  },
+  computed: {
+    typeText() {
+      return this.$route.params.type || "SDK";
+    },
+    sdkId() {
+      return this.$route.params.id;
+    },
+  },
+  created() {
+    this.getContent();
+  },
+  methods: {
+    getContent() {
+      this.sdkInfo = {
+        version: "100.9.0",
+        time: "2020-08-27",
+        url: "http://pic1.win4000.com/tj/2020-10-19/5f8d3a49abc54.jpg",
+      };
+      this.title = "标题";
+      this.update_time = "2020-10-26 10:00:00";
+      this.content = `
+        <h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1><img src="http://pic1.win4000.com/tj/2020-10-19/5f8d3a49abc54.jpg" style="font-size: 14px; max-width: 100%;"></h1><h1><a href="https://www.baidu.com" target="_blank" style="font-size: 14px;">链接</a></h1><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能</p><h1></h1>
+      `;
+    },
+    getTimeText(time) {
+      return helper.dateStringTransform(time);
+    },
+    downloadUrl(url) {
+      let a = document.createElement("a");
+
+      a.setAttribute("download", "");
+      a.setAttribute("href", url);
+      a.click();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.sdk_container {
+  height: 100%;
+  padding: 0 20px 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  box-sizing: border-box;
+}
+.main_container {
+  flex-grow: 1;
+  height: calc(100% - 53px);
+}
+.download_action {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px 20px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.download_action > span:nth-child(1) {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 36px;
+  color: #58617a;
+  position: relative;
+  padding-left: 15px;
+}
+.download_action > span:nth-child(1)::before {
+  content: "";
+  width: 4px;
+  height: 18px;
+  background-color: #515fe7;
+  border-radius: 2px;
+  position: absolute;
+  top: 10px;
+  left: 0;
+}
+.download_action > span:nth-child(2),
+.download_action > span:nth-child(3) {
+  font-size: 14px;
+  line-height: 24px;
+  color: #8890a7;
+  padding-left: 20px;
+  background-position: left center;
+}
+.download_action > span:nth-child(2) {
+  background-image: url("/../assets/imgs/shop_ic_updatetime.png");
+}
+.download_action > span:nth-child(3) {
+  background-image: url("/../assets/imgs/shop_ic_updatetime.png");
+}
+.download_action > .el-button {
+  margin-left: auto;
+}
+</style>
diff --git a/src/pages/technical-support/sdk/index.vue b/src/pages/technical-support/sdk/index.vue
new file mode 100644
index 0000000..3ec268d
--- /dev/null
+++ b/src/pages/technical-support/sdk/index.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="page_container">
+    <side-nav-bar
+      title="SDK中心"
+      imgSrc="tool_ic_kaifawendang"
+      :nav-list="navList"
+      :title-path="navList[0] && navList[0].path"
+      style="width: 250px;"
+    ></side-nav-bar>
+    <div class="main_container">
+      <router-view :key="$route.params.type + $route.params.id" />
+    </div>
+  </div>
+</template>
+
+<script>
+import sideNavBar from "@/components/side-nav-bar";
+
+export default {
+  components: {
+    sideNavBar,
+  },
+  data: () => ({
+    navList: [],
+  }),
+  methods: {
+    initNavList() {
+      let activePath = "";
+      let baseUrl = "/technical_support/sdk";
+      let data = [
+        {
+          name: "JavaScript SDK",
+          id: 1,
+          children: [
+            {
+              name: "在地图上添加图层",
+              id: 101,
+            },
+            {
+              name: "测测测自己创建测",
+              id: 102,
+            },
+          ],
+        },
+        {
+          name: "Android SDK",
+          id: 2,
+          children: [
+            {
+              name: "Android",
+              id: 201,
+            },
+            {
+              name: "测测测自己创建测",
+              id: 202,
+            },
+          ],
+        },
+      ];
+
+      this.navList = data.map((item) => {
+        let children = item.children;
+        let nav = {
+          name: item.name,
+          path: `${baseUrl}/${item.name}`,
+        };
+
+        if (children.length > 0) {
+          nav.children = children.map((v) => {
+            let path = `${baseUrl}/${item.name}/${v.id}`;
+
+            if (activePath === "") {
+              activePath = path;
+            }
+
+            return {
+              name: v.name,
+              path: path,
+            };
+          });
+          nav.open = true;
+        } else {
+          nav.disabled = true;
+        }
+
+        return nav;
+      });
+
+      if (activePath && this.$route.params.id === undefined) {
+        this.$router.push(activePath);
+      } else if (activePath === "") {
+        this.$message.error("您尚未创建任何SDK文档");
+      }
+    },
+  },
+  mounted() {
+    this.initNavList();
+  },
+};
+</script>
+
+<style scoped>
+.page_container {
+  height: calc(100vh - 58px);
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.side_nav_bar {
+  width: 180px;
+  flex-shrink: 0;
+}
+.main_container {
+  width: calc(100% - 180px);
+  flex-grow: 1;
+  flex-shrink: 1;
+  background-color: #f6f7fb;
+  overflow: auto;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 88d9389..3b63e62 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -167,7 +167,8 @@ export default new Router({
               path: "/technical_support/doc_manage",
               name: "technicalSupportDoc",
               redirect: "/technical_support/doc_manage/list",
-              component: () => import("@/pages/technical-support/doc-manage/index"),
+              component: () =>
+                import("@/pages/technical-support/doc-manage/index"),
               children: [
                 {
                   path: "/technical_support/doc_manage/list",
@@ -201,7 +202,8 @@ export default new Router({
               path: "/technical_support/answer_center/",
               name: "technicalSupportDoc",
               redirect: "/technical_support/answer_center/list",
-              component: () => import("@/pages/technical-support/answer-center/index"),
+              component: () =>
+                import("@/pages/technical-support/answer-center/index"),
               children: [
                 {
                   path: "/technical_support/answer_center/list",
@@ -220,6 +222,18 @@ export default new Router({
                 }, // 问答中心详情
               ],
             }, // 问答中心
+            {
+              path: "/technical_support/sdk",
+              name: "technicalSupportSdk",
+              component: () => import("@/pages/technical-support/sdk/index"),
+              children: [
+                {
+                  path: "/technical_support/sdk/:type/:id",
+                  name: "technicalSupportSdkDetail",
+                  component: () => import("@/pages/technical-support/sdk/detail"),
+                }, // 问答中心列表
+              ],
+            }, // 问答中心
           ],
         }, // 技术支持
         {
@@ -448,14 +462,16 @@ export default new Router({
             {
               path: "/qa/questions", // 提问列表
               name: "questions",
-              component: () => import("@/pages/user/questions-answers/community"),
+              component: () =>
+                import("@/pages/user/questions-answers/community"),
             },
             {
               path: "/qa/answers", // 回答列表
               name: "answers",
-              component: () => import("@/pages/user/questions-answers/community"),
+              component: () =>
+                import("@/pages/user/questions-answers/community"),
             },
-          ]
+          ],
         },
         {
           path: "/authority", // 权限管理
-- 
2.26.0