diff --git a/src/assets/imgs/tool_ic_kaifawendang.png b/src/assets/imgs/tool_ic_kaifawendang.png
new file mode 100644
index 0000000000000000000000000000000000000000..5bd2147c17d04a6654b3cbab8773cd37862e0a1c
Binary files /dev/null and b/src/assets/imgs/tool_ic_kaifawendang.png differ
diff --git a/src/pages/index.vue b/src/pages/index.vue
index d1729a44d7ad64d27023fbc8c5d092d1b5c6218f..f86cf35abe647dc96616a9367b40e6b35d333017 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -17,8 +17,7 @@ export default {
       '/intelligent_details',
       '/intelligent_appbuilder',
       '/intelligent_fwzc',
-      '/search_engine',
-      '/technical_support'
+      '/search_engine'
     ]
   }),
   created(){
diff --git a/src/pages/technical-support/doc-manage/detail.vue b/src/pages/technical-support/doc-manage/detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b0e2414508bdc1ed8e201d8eec2592185733c231
--- /dev/null
+++ b/src/pages/technical-support/doc-manage/detail.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="doc_manage_container">
+    <div class="apass_breadcrumb">
+      <el-breadcrumb separator="/">
+        <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>
+    </div>
+
+    <div class="main_container">
+      <!-- xxx -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  computed: {},
+  created() {
+    if (this.$route.params.id) {
+      // 请求详情
+    } else {
+      // error
+    }
+  },
+  methods: {},
+};
+</script>
+
+<style scoped>
+.doc_manage_container {
+  height: 100%;
+  padding: 0 20px 30px;
+  box-sizing: border-box;
+}
+.main_container {
+  height: calc(100% - 53px);
+  background-color: #fff;
+  border-radius: 10px;
+}
+</style>
diff --git a/src/pages/technical-support/doc-manage/index.vue b/src/pages/technical-support/doc-manage/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..34d943d10005e2158097d2217f97d8f01176237e
--- /dev/null
+++ b/src/pages/technical-support/doc-manage/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="doc_container">
+    <side-nav-bar
+      title="开发文档管理"
+      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: [],
+  }),
+  watch: {
+    "$route.fullPath"(path) {
+      this.initNavList();
+    },
+  },
+  methods: {
+    initNavList() {
+      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
+        if (response.data.success == 1) {
+          let arr = response.data.data[0].Child;
+          let user_index = arr.findIndex(
+            (item) => item.visit_url == "/technical_support/doc-manage"
+          );
+          if (user_index != -1) {
+            this.navList = arr[user_index].Child;
+            this.navList.forEach((item) => {
+              item.name = item.menu_name;
+              item.path = item.visit_url;
+            });
+          }
+        }
+      });
+    },
+  },
+  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/doc-manage/list.vue b/src/pages/technical-support/doc-manage/list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a866ee870ab07e14c3b29e8001f360ccdc967d1a
--- /dev/null
+++ b/src/pages/technical-support/doc-manage/list.vue
@@ -0,0 +1,222 @@
+<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>
+  </div>
+</template>
+
+<script>
+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: 50,
+      listHeader: [
+        {
+          label: "文档名称",
+          prop: "name",
+          type: "button",
+          callback: this.viewItem,
+          width: 320,
+        },
+        {
+          label: "文档类型",
+          prop: "type",
+          align: "center",
+        },
+        {
+          label: "操作人",
+          prop: "person",
+          align: "center",
+        },
+        {
+          label: "最后更新时间",
+          prop: "update_time",
+          align: "center",
+        },
+        {
+          label: "操作",
+          type: "buttons",
+          align: "center",
+          width: 240,
+          actionList: [
+            {
+              label: "编辑",
+              callback: this.editItem,
+            },
+            {
+              label: "删除",
+              callback: this.deleteItem,
+              class: "warn",
+            },
+          ],
+        },
+      ],
+      listData: [
+        {
+          id: "1000001",
+          type: "平台简介",
+          name: "BD-aPaaS平台（V3.0）平台简介",
+          person: "江阳",
+          update_time: "2016-09-21  08:50:08",
+        },
+        {
+          id: "1000002",
+          type: "平台简介",
+          name: "BD-aPaaS平台（V3.0）平台简介",
+          person: "江阳",
+          update_time: "2016-09-21  08:50:08",
+        },
+        {
+          id: "1000003",
+          type: "平台简介",
+          name: "BD-aPaaS平台（V3.0）平台简介",
+          person: "江阳",
+          update_time: "2016-09-21  08:50:08",
+        },
+      ],
+      topFilter: {
+        name: "",
+        type: "",
+        time: "",
+      },
+      types: [
+        { label: "平台简介", value: "introductory" },
+        { label: "使用须知", value: "notice" },
+        { label: "术语说明", value: "trem" },
+        { label: "标准规范", value: "standard" },
+        { label: "操作指南", value: "guide" },
+        { label: "接口文档", value: "api" },
+        { label: "常见问题", value: "questions" },
+      ],
+    };
+  },
+  computed: {},
+  created() {},
+  methods: {
+    init(filter) {
+      let fullFilter = {
+        ...filter,
+        ...this.topFilter,
+      };
+
+      console.log(fullFilter);
+    },
+    topFilterAction() {
+      this.refreshPage();
+    },
+    topFilterClear() {
+      this.topFilter = {
+        name: "",
+        type: "",
+        time: "",
+      };
+      this.refreshPage();
+    },
+    refreshPage() {
+      this.$refs.list.resetCurrentPage();
+    },
+    viewItem(item) {
+      console.log(`view ${item.name}`);
+    },
+    editItem(item) {
+      console.log(`edit ${item.name}`);
+    },
+    deleteItem(item) {
+      console.log(`delete ${item.name}`);
+    },
+    addNew() {
+      console.log("addNew");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.doc_manage_container {
+  height: 100%;
+}
+</style>
diff --git a/src/pages/technical-support/doc/detail.vue b/src/pages/technical-support/doc/detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0365ce5294d9c01930436974c471739e003712b5
--- /dev/null
+++ b/src/pages/technical-support/doc/detail.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="doc_container">
+    <div class="apass_breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item to="/technical_support">
+          技术支持
+        </el-breadcrumb-item>
+        <el-breadcrumb-item to="/technical_support/doc">
+          开发文档
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          {{ typeText }}
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="main_container">
+      <div class="part doc_part">
+        <h3 class="part_title">
+          <span>平台简介</span>
+          <span>更新时间：2020-10-20 19:00:00</span>
+        </h3>
+        <div
+          class="part_content doc_content apaas_scroll"
+          v-html="content"
+        ></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"
+            @click="clickNav(item)"
+          >
+            <a :href="'#' + item.id" v-text="item.title"></a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: "",
+      navTree: [],
+      curNav: "",
+    };
+  },
+  computed: {
+    type() {
+      return this.$route.params.type;
+    },
+    typeText() {
+      let types = {
+        introductory: "平台简介",
+        notice: "使用须知",
+        trem: "术语说明",
+        standard: "标准规范",
+        guide: "操作指南",
+        api: "接口文档",
+        questions: "常见问题",
+      };
+
+      return types[this.type];
+    },
+    typeUrl() {
+      let types = {
+        introductory: "xxx",
+        notice: "xxx",
+        trem: "xxx",
+        standard: "xxx",
+        guide: "xxx",
+        api: "xxx",
+        questions: "xxx",
+      };
+
+      return types[this.type];
+    },
+  },
+  created() {
+    this.getContent();
+  },
+  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) || "";
+      };
+
+      let richTextContent = `
+        <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>
+      `;
+      successCallback(richTextContent);
+    },
+    clickNav(item) {
+      this.curNav = item.id;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.doc_container {
+  height: 100%;
+  padding: 0 20px 30px;
+  box-sizing: border-box;
+}
+.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;
+}
+.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/doc/index.vue b/src/pages/technical-support/doc/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3dbd24a81f126259af4b2609f7f907472814275b
--- /dev/null
+++ b/src/pages/technical-support/doc/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="page_container">
+    <side-nav-bar
+      title="开发文档"
+      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: [],
+  }),
+  watch: {
+    "$route.fullPath"(path) {
+      this.initNavList();
+    },
+  },
+  methods: {
+    initNavList() {
+      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
+        if (response.data.success == 1) {
+          let arr = response.data.data[0].Child;
+          let user_index = arr.findIndex(
+            (item) => item.visit_url == "/technical_support/doc"
+          );
+          if (user_index != -1) {
+            this.navList = arr[user_index].Child;
+            this.navList.forEach((item) => {
+              item.name = item.menu_name;
+              item.path = item.visit_url;
+            });
+          }
+        }
+      });
+    },
+  },
+  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/pages/technical-support/index.vue b/src/pages/technical-support/index.vue
index 647a3fb444cade81375c2a39ba376648c414dfaa..a44ab87b704ac6b2ad94f9e311269f70d086f773 100644
--- a/src/pages/technical-support/index.vue
+++ b/src/pages/technical-support/index.vue
@@ -1,70 +1,3 @@
 <template>
-  <div class="contain">
-    <div class="technical_head">{{ $t("lang.technical_support") }}</div>
-    <BlockRadius class="default">
-      <div class="default_img">
-        <h1 class="default_title">开发中，敬请期待！</h1>
-        <h3 class="default_msg">
-          如需技术支持
-          <br />请联系管理员
-        </h3>
-      </div>
-    </BlockRadius>
-  </div>
+  <router-view></router-view>
 </template>
-
-<script>
-import BlockRadius from "@/components/general/block-radius";
-export default {
-  data() {
-    return {};
-  },
-  components: {
-    BlockRadius,
-  },
-  computed: {},
-  created() {},
-  mounted() {},
-  methods: {},
-};
-</script>
-
-<style lang="less" scoped>
-.contain {
-  width: calc(100% - 80px);
-  margin: 0 auto;
-  margin-top: -157px;
-  margin-bottom: 20px;
-  .technical_head {
-    color: #626de9;
-    font-size: 14px;
-    padding: 20px;
-  }
-  .default {
-    height: calc(100vh - 160px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .default_img {
-      width: 1282px;
-      height: 629px;
-      .default_title {
-        color: #264dd9;
-        font-size: 44px;
-        font-weight: bold;
-        margin-bottom: 40px;
-      }
-      .default_msg {
-        color: #58617a;
-        font-size: 24px;
-        line-height: 44px;
-      }
-    }
-  }
-}
-</style>
-<style scoped>
-.default_img {
-  background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center center;
-}
-</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index fd8f7d4c87cfa42bd0b216799409aed6b1fdc0bd..5f7aa646a94b65b7f57c65816c0e67ed0ea85e7b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -76,12 +76,14 @@ export default new Router({
             {
               path: "/fwgl/:level/:type/approveWorkspace",
               name: "servicedetail",
-              component: () => import("@/pages/workbench/fwgl/approveWorkspace"),
+              component: () =>
+                import("@/pages/workbench/fwgl/approveWorkspace"),
             }, // 云资源 - 工作区域审批
             {
               path: "/fwgl/:level/:type/organizationCloudResource/:id",
               name: "servicedetail",
-              component: () => import("@/pages/workbench/fwgl/organizationCloudResource"),
+              component: () =>
+                import("@/pages/workbench/fwgl/organizationCloudResource"),
             }, // 云资源 - 组织云资源详情
           ],
         }, // 工作台 - 服务管理模块
@@ -115,8 +117,7 @@ export default new Router({
             {
               path: "/yygl/:level/:type/appdebugger/:deploy_id", // 我部署的应用详情-应用调试
               name: "app_debugger",
-              component: () =>
-                import("@/pages/workbench/yygl/app_debugger"),
+              component: () => import("@/pages/workbench/yygl/app_debugger"),
             },
             {
               path: "/yygl/:level/:type/appdebuggerdetail/:deploy_id", // 我部署的应用详情-应用调试-详情
@@ -144,11 +145,47 @@ export default new Router({
           ],
         }, // 工作台 - 应用管理模块
         {
-          path: "/technical_support", // 技术支持
+          path: "/technical_support",
           name: "technicalSupport",
+          redirect: "/technical_support/doc/",
           component: () => import("@/pages/technical-support/index"),
-
-        },
+          children: [
+            {
+              path: "/technical_support/doc/",
+              name: "technicalSupportDoc",
+              redirect: "/technical_support/doc/introductory",
+              component: () => import("@/pages/technical-support/doc/index"),
+              children: [
+                {
+                  path: "/technical_support/doc/:type",
+                  name: "technicalSupportDocDetail",
+                  component: () =>
+                    import("@/pages/technical-support/doc/detail"),
+                }, // 开发文档详情
+              ],
+            }, // 开发文档
+            {
+              path: "/technical_support/doc_manage/",
+              name: "technicalSupportDoc",
+              redirect: "/technical_support/doc_manage/list",
+              component: () => import("@/pages/technical-support/doc-manage/index"),
+              children: [
+                {
+                  path: "/technical_support/doc_manage/list",
+                  name: "technicalSupportDocDetail",
+                  component: () =>
+                    import("@/pages/technical-support/doc-manage/list"),
+                }, // 开发文档管理列表
+                {
+                  path: "/technical_support/doc_manage/edit/:id",
+                  name: "technicalSupportDocDetail",
+                  component: () =>
+                    import("@/pages/technical-support/doc-manage/detail"),
+                }, // 开发文档管理编辑
+              ],
+            }, // 开发文档管理
+          ],
+        }, // 技术支持
         {
           path: "/shop", // 服务超市
           name: "shop",
@@ -241,65 +278,97 @@ export default new Router({
         {
           path: "/app_build",
           name: "app_build",
-          component: () => import("@/pages/workbench/component-center/app-build/index"),
+          component: () =>
+            import("@/pages/workbench/component-center/app-build/index"),
         }, // 应用构建（镜像形式）
         {
           path: "/intelligent_drawing",
           name: "intelligent_drawing",
-          component: () => import("@/pages/workbench/component-center/intelligent-drawing/intelligent_drawing"),
+          component: () =>
+            import(
+              "@/pages/workbench/component-center/intelligent-drawing/intelligent_drawing"
+            ),
         }, // 智能制图
         {
           path: "/intelligent_details",
           name: "intelligent_details",
-          component: () => import("@/pages/workbench/component-center/intelligent-drawing/intelligent_details"),
+          component: () =>
+            import(
+              "@/pages/workbench/component-center/intelligent-drawing/intelligent_details"
+            ),
         }, // 智能制图--详情页面
         {
           path: "/intelligent_appbuilder",
           name: "intelligent_appbuilder",
-          component: () => import("@/pages/workbench/component-center/intelligent-drawing/intelligent_appbuilder"),
+          component: () =>
+            import(
+              "@/pages/workbench/component-center/intelligent-drawing/intelligent_appbuilder"
+            ),
         }, // 智能制图--应用程序页面
         {
           path: "/intelligent_fwzc",
           name: "intelligent_fwzc",
-          component: () => import("@/pages/workbench/component-center/intelligent-drawing/intelligent_fwzc"),
+          component: () =>
+            import(
+              "@/pages/workbench/component-center/intelligent-drawing/intelligent_fwzc"
+            ),
         }, // 智能制图--服务注册测试页面
         {
           path: "/progress", // 流程设计
           name: "progress",
           redirect: "/progress/designer",
-          component: () => import("@/pages/workbench/component-center/process-management/index"),
+          component: () =>
+            import(
+              "@/pages/workbench/component-center/process-management/index"
+            ),
           children: [
             {
               path: "/progress/designer",
               name: "process_designer",
-              component: () => import("@/pages/workbench/component-center/process-management/designer/index"),
+              component: () =>
+                import(
+                  "@/pages/workbench/component-center/process-management/designer/index"
+                ),
             }, // 流程设计--列表
             {
               path: "/progress/designer/detail/:id",
               name: "process_designer_detail/:id",
-              component: () => import("@/pages/workbench/component-center/process-management/designer/detail"),
+              component: () =>
+                import(
+                  "@/pages/workbench/component-center/process-management/designer/detail"
+                ),
             }, // 流程设计--详情
             {
               path: "/progress/monitoring",
               name: "process_monitoring",
-              component: () => import("@/pages/workbench/component-center/process-management/monitoring/index"),
+              component: () =>
+                import(
+                  "@/pages/workbench/component-center/process-management/monitoring/index"
+                ),
             }, // 流程监控
             {
               path: "/progress/designer/design",
               name: "process_design",
-              component: () => import("@/pages/workbench/component-center/process-management/process-design/index"),
+              component: () =>
+                import(
+                  "@/pages/workbench/component-center/process-management/process-design/index"
+                ),
             }, // 流程设计
             {
               path: "/progress/designer/design_edit/:id",
               name: "process_design_edit",
-              component: () => import("@/pages/workbench/component-center/process-management/process-design/edit"),
+              component: () =>
+                import(
+                  "@/pages/workbench/component-center/process-management/process-design/edit"
+                ),
             }, // 流程编辑
           ],
         }, // 流程设计
         {
           path: "/search_engine",
           name: "search_engine",
-          component: () => import("@/pages/workbench/component-center/search-engine/index"),
+          component: () =>
+            import("@/pages/workbench/component-center/search-engine/index"),
         }, // 搜索引擎
         {
           path: "/user", // 个人中心
@@ -463,7 +532,8 @@ export default new Router({
             {
               path: "/data_analysis/super_application", // 数据分析中心应用-超管
               name: "superApplicationDataAnalysis",
-              component: () => import("@/pages/data-analysis/super-application"),
+              component: () =>
+                import("@/pages/data-analysis/super-application"),
             },
             {
               path: "/data_analysis/super_overview", // 运行概况-超管
@@ -486,72 +556,106 @@ export default new Router({
             {
               path: "/message/recommended", // 推荐位管理列表
               name: "recommended",
-              component: () => import("@/pages/message-management/recommended/recommended-list"),
+              component: () =>
+                import(
+                  "@/pages/message-management/recommended/recommended-list"
+                ),
             },
             {
               path: "/message/recommended/edit", // 推荐位管理选择列表
               name: "recommend_edit",
-              component: () => import("@/pages/message-management/recommended/recommended-eidt"),
+              component: () =>
+                import(
+                  "@/pages/message-management/recommended/recommended-eidt"
+                ),
             },
             {
               path: "/message/directed_push", // 定向推送列表
               name: "directed_push",
-              component: () => import("@/pages/message-management/directed-push/directed-push-list"),
+              component: () =>
+                import(
+                  "@/pages/message-management/directed-push/directed-push-list"
+                ),
             },
             {
               path: "/message/directed_push/add", // 新建定向推送
               name: "directed_push_add",
-              component: () => import("@/pages/message-management/directed-push/directed-push-add"),
+              component: () =>
+                import(
+                  "@/pages/message-management/directed-push/directed-push-add"
+                ),
             },
             {
               path: "/message/message_alert", // 消息提醒列表
               name: "message_alert",
-              component: () => import("@/pages/message-management/message-alert/message-alert-list"),
+              component: () =>
+                import(
+                  "@/pages/message-management/message-alert/message-alert-list"
+                ),
             },
             {
               path: "/message/message_alert/add", // 新建消息提醒
               name: "message_alert_add",
-              component: () => import("@/pages/message-management/message-alert/message-alert-add"),
+              component: () =>
+                import(
+                  "@/pages/message-management/message-alert/message-alert-add"
+                ),
             },
             {
               path: "/message/banner", // benner列表
               name: "banner",
-              component: () => import("@/pages/message-management/banner/banner-list"),
+              component: () =>
+                import("@/pages/message-management/banner/banner-list"),
             },
             {
               path: "/message/banner_add", // benner新增
               name: "banner_add",
-              component: () => import("@/pages/message-management/banner/banner-detail"),
+              component: () =>
+                import("@/pages/message-management/banner/banner-detail"),
             },
             {
               path: "/message/banner_edit", // benner编辑
               name: "banner_edit",
-              component: () => import("@/pages/message-management/banner/banner-detail"),
+              component: () =>
+                import("@/pages/message-management/banner/banner-detail"),
             },
             {
               path: "/message/banner_detail", // benner详情
               name: "banner_detail",
-              component: () => import("@/pages/message-management/banner/banner-detail"),
+              component: () =>
+                import("@/pages/message-management/banner/banner-detail"),
             },
             {
               path: "/message/message_template", // 消息模板列表
               name: "message_template",
-              component: () => import("@/pages/message-management/message-template/message-template-list"),
+              component: () =>
+                import(
+                  "@/pages/message-management/message-template/message-template-list"
+                ),
             },
             {
               path: "/message/message_template/add", // 新增消息模板
               name: "message_template_add",
-              component: () => import("@/pages/message-management/message-template/message-template-detail"),
+              component: () =>
+                import(
+                  "@/pages/message-management/message-template/message-template-detail"
+                ),
             },
             {
               path: "/message/message_template/edit/:id", // 编辑消息模板
               name: "message_template_edit",
-              component: () => import("@/pages/message-management/message-template/message-template-detail"),
+              component: () =>
+                import(
+                  "@/pages/message-management/message-template/message-template-detail"
+                ),
             },
             {
               path: "/message/message_template/detail/:id", // 查看消息模板详情
               name: "message_template_detail",
-              component: () => import("@/pages/message-management/message-template/message-template-detail"),
+              component: () =>
+                import(
+                  "@/pages/message-management/message-template/message-template-detail"
+                ),
             },
           ],
         }, // 消息与推送管理