diff --git a/front/public/static/config/location.js b/front/public/static/config/location.js
index 763b690a..a6a6e44f 100644
--- a/front/public/static/config/location.js
+++ b/front/public/static/config/location.js
@@ -31,6 +31,7 @@ if (newLocation === 'qingdao') {
     { name: '能力云图', key: 'capabilityCloud' },
     { name: '能力统计', key: 'abilityStatistics' },
     // { name: '开发指南', key: 'developmentGuide' },
+    { name: '指导手册', key: 'instructionManual' },
     { name: '需求中心', key: 'demandCenter' },
     // { name: '个人中心', key: 'personalCenter' },
     { name: '区市站点', key: 'mapTest' },
diff --git a/front/src/api/home.js b/front/src/api/home.js
index 198f1f38..de19b712 100644
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@@ -337,7 +337,6 @@ export function getApplyCameraList(id) {
   })
 }
 
-// 融合服务--start
 // 融合服务--列表
 export function getIntegrationServicesList(params) {
   return request({
@@ -355,4 +354,11 @@ export function getIntegrationDetail(id) {
   })
 }
 
-// 融合服务--end
+// 指导手册--左侧文档树
+export function getDevelopDocTree(params) {
+  return request({
+    url: '/resource/selectDevelopDoc',
+    method: 'get',
+    params
+  })
+}
\ No newline at end of file
diff --git a/front/src/router/index.js b/front/src/router/index.js
index 1810bdec..b8702453 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -462,6 +462,15 @@ export const constantRoutes = [
       icon: 'error-warning-line',
     },
   },
+  {
+    path: '/instructionManual',
+    name: 'instructionManual',
+    component: () => import('@/views/instructionManual/index'),
+    meta: {
+      title: '指导手册',
+      icon: 'error-warning-line',
+    },
+  },
 ]
 export const asyncRoutes = [
   {
diff --git a/front/src/views/home/components/header.vue b/front/src/views/home/components/header.vue
index 84655e1b..bc6b3ef4 100644
--- a/front/src/views/home/components/header.vue
+++ b/front/src/views/home/components/header.vue
@@ -136,6 +136,8 @@
   const select = ref(router.currentRoute.value.name)
   const mynoticeFlag = ref(false)
   const mynoticeData = ref([])
+  console.log('navListManagement------------>', navListManagement);
+  
   // eslint-disable-next-line no-undef
   const navList = ref(navListManagement.navList)
   const props = defineProps({
@@ -191,6 +193,11 @@
           path: '/developmentGuide',
         })
         break
+      case '指导手册':
+        router.push({
+          path: '/instructionManual',
+        })
+        break
       case '需求中心':
         router.push({
           path: '/demandCenter',
diff --git a/front/src/views/instructionManual/components/abilityTree.vue b/front/src/views/instructionManual/components/abilityTree.vue
new file mode 100644
index 00000000..889f2301
--- /dev/null
+++ b/front/src/views/instructionManual/components/abilityTree.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="doc-tree-box">
+    <!-- <div class="name-text primaryNode" v-for="(item, i) in treeData" :key="i" @click.stop="showBottom(item)"
+      :class="selectId === item.title ? 'select' : ''">
+      {{ item.title }}
+      <DownOutlined v-show="!item.show && item.children && item.children.length > 0" />
+      <UpOutlined v-show="item.show && item.children && item.children.length > 0" />
+
+      <div style="margin-left:20px" v-if="item.show && item.children && item.children.length > 0">
+        <div class="name-text" v-for="(val, j) in item.children" :key="j" @click.stop="showBottom(val)"
+          @click="showDown(item, val), onSelect(item, val)" :class="selectId === val.key ? 'select' : ''">
+          {{
+              val.title
+          }}
+          <DownOutlined v-show="!val.show && val.children && val.children.length > 0" />
+          <UpOutlined v-show="val.show && val.children && val.children.length > 0" />
+
+          <div style="margin-left:20px" v-if="val.show && val.children && val.children.length > 0">
+            <div class="name-text" v-for="(v, k) in val.children" :key="k" @click.stop="onSelect(item, val, v)"
+              :class="selectId == v.key ? 'select2' : ''">
+              {{
+                  v.title
+              }}
+              <DownOutlined v-show="!v.show && v.children && v.children.length > 0" />
+              <UpOutlined v-show="v.show && v.children && v.children.length > 0" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div> -->
+
+    <showList :dataList="treeArray" @treeClick="treeClick"></showList>
+
+  </div>
+</template>
+<script setup>
+import { defineComponent, onMounted, ref, watch, nextTick, defineEmits } from 'vue';
+import { getDevelopDocTree } from '@/api/home'
+import { message } from 'ant-design-vue'
+import showList from './showList'
+import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+
+let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
+const treeData = ref([]);
+const treeArray = ref([])
+const getTreeData = () => {
+  getDevelopDocTree({}).then((res) => {
+    console.log('res------------>', res);
+    if (res.data.code !== 0) {
+      return message.error(res.data.msg)
+    }
+    treeArray.value = res.data.data || [];
+
+    treeData.value = [];
+    (res.data.data || []).map(val => {
+      let obj = {
+        title: val.title,
+        show: typeList.find(v => v === val.title) ? true : false,
+        select: false,
+        key: val.title,
+        children: []
+      }
+      formData(val.children, obj)
+      treeData.value.push(obj)
+    })
+    nextTick(() => {
+      console.log('treeData.value------------>', treeData.value);
+    })
+  }).catch((err) => {
+    console.log('err------------>', err);
+    message.error(err)
+  });
+}
+
+const formData = (children = [], dataItem) => {
+  children.map(item => {
+    let _obj = {
+      title: item.title,
+      show: false,
+      select: false,
+      key: item.title,
+      children: [],
+    }
+    if (item.children && item.children.length > 0) {
+      formData(item.children, _obj)
+    }
+    dataItem.children.push(_obj)
+  })
+}
+
+const emit = defineEmits(['treeClick'])
+const selectId = ref('')
+const showBottom = (item) => {
+  console.log('item------------>', item);
+  if (!item.children) {
+    if (selectId.value !== item.title) {
+      selectId.value = item.title;
+    } else {
+      selectId.value = ''
+    }
+  }
+  item.show = !item.show;
+  nextTick(() => {
+    console.log('selectId.value------------>', selectId.value);
+    if (selectId.value !== '') {
+      emit('treeClick', item)
+    }
+  })
+}
+
+// const showBottom = (item) => {
+//   item.show = !item.show
+// }
+const showDown = (item, val) => {
+  console.log('showDown', val)
+  if (item.title === '区级') {
+    val.show = !val.show
+  }
+}
+
+
+onMounted(() => {
+  getTreeData()
+})
+
+
+</script>
+<style lang="less" scoped>
+.doc-tree-box {
+  margin-left: 20px;
+
+}
+
+.name-text {
+  font-size: 16px;
+  color: #333;
+  padding: 10px 0;
+  cursor: pointer;
+}
+
+.select {
+  color: #0058e1;
+  font-weight: 600;
+}
+
+.normal {
+  color: #333;
+}
+</style>
\ No newline at end of file
diff --git a/front/src/views/instructionManual/components/docsifyView.vue b/front/src/views/instructionManual/components/docsifyView.vue
new file mode 100644
index 00000000..bfcf4e4a
--- /dev/null
+++ b/front/src/views/instructionManual/components/docsifyView.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="docsifyBox">
+        <!-- <iframe name="iframeName" id="iframeId" src="file:///F:/guo_yue/docsify/index.html#/"></iframe> -->
+        <!-- https://www.baidu.com/ -->
+        <iframe name="iframeName" width="1000" height="750" id="iframeId" :frameborder="0" src="http://localhost:8080/#/home"></iframe>
+    </div>
+</template>
+
+<!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> -->
+<script setup>
+
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/front/src/views/instructionManual/components/showList.vue b/front/src/views/instructionManual/components/showList.vue
new file mode 100644
index 00000000..f8b4b0c6
--- /dev/null
+++ b/front/src/views/instructionManual/components/showList.vue
@@ -0,0 +1,115 @@
+<template>
+    <div class="list-box">
+        <div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
+            <div :class="[selectName === item.title ? 'select' : '', level === 1 ? 'parent' : '']" class="list-text">
+                {{ item.title }}{{ item.show }}
+                <DownOutlined v-show="!item.show && item.children && item.children.length > 0" />
+                <UpOutlined v-show="item.show && item.children && item.children.length > 0" />
+            </div>
+            <div style="margin-left:10px" v-if="item.children && item.children.length > 0 && item.show">
+                <showList :dataList="item.children" @tree-click="handleTreeItem" :level="newLevel + 1"></showList>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { defineComponent, onMounted, ref, watch, defineProps, nextTick, emit } from 'vue';
+import { getDevelopDocTree } from '@/api/home'
+import { message } from 'ant-design-vue'
+import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+
+const props = defineProps({
+    dataList: {
+        type: Array,
+        default: () => []
+    },
+    selectName: {
+        type: String,
+        default: ''
+    },
+    level: {
+        type: Number,
+        default: 1
+    },
+    // level
+})
+// props.dataList.map(v => v.show = false)
+
+const newDataList = ref(props.dataList)
+// 级别
+const newLevel = ref(props.level)
+const newSelectName = ref(props.selectName)
+
+const getBgColor = (item, level) => {
+    // if(level === 1) {
+    //     if() {
+
+    //     }
+    // }else {
+    //     return false
+    // }
+}
+
+nextTick(() => {
+    console.log('props.dataList------------>', props.dataList);
+    console.log('props.selectName------------>', props.selectName);
+
+})
+
+const showChildren = (item) => {
+    console.log('item------------>', item);
+    if (!item.children) {
+        if (newSelectName.value !== item.title) {
+            newSelectName.value = item.title;
+        } else {
+            newSelectName.value = ''
+        }
+    }
+    item.show = !item.show;
+    nextTick(() => {
+        console.log('newSelectName.value------------>', newSelectName.value);
+    })
+}
+
+// const handleSelelct = (item) => {
+//     if(item.children) {
+
+//     }
+// }
+
+watch(
+    () => props.dataList,
+    (val) => {
+        if (val) {
+            props.dataList = val;
+            newDataList.value = val
+        }
+    }
+)
+
+
+const handleTreeItem = (item) => {
+    emit('tree-click', item);
+}
+
+</script>
+<style lang="less" scoped>
+.list-text {
+    font-size: 16px;
+    color: #333;
+    padding: 10px 0;
+}
+
+.select {
+    color: #0058e1;
+    font-weight: 600;
+}
+
+.normal {
+    color: #333;
+}
+
+.parent {
+    background: #0058e1;
+}
+</style>
diff --git a/front/src/views/instructionManual/index.vue b/front/src/views/instructionManual/index.vue
new file mode 100644
index 00000000..5f9ad1cf
--- /dev/null
+++ b/front/src/views/instructionManual/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="father">
+    <home-header></home-header>
+    <div id="container" class="content">
+      <div class="left">
+        <h2 class="title-text" @click="showManual" :style="{ color: showManualFlag ? '#0058e1' : '' }">新手指引</h2>
+        <h2 class="title-text" @click="showManual" :style="{ color: !showManualFlag ? '#0058e1' : '' }">技术文档</h2>
+        <abilityTree @treeClick="treeClick"></abilityTree>
+      </div>
+      <div class="right">
+        <div v-if="showManualFlag">新手指引</div>
+        <div v-else>
+          <!-- 技术文档 -->
+          <docsifyView></docsifyView>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import HomeHeader from '@/views/home/components/header'
+import abilityTree from './components/abilityTree'
+import docsifyView from './components/docsifyView'
+import { getMyProcessInstancePage, wodepage } from '@/api/personalCenter'
+import { selectOne } from '@/api/home'
+import { ref, reactive, onMounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import { pinyin } from 'pinyin-pro'
+import { Empty } from 'ant-design-vue'
+
+const showManualFlag = ref(true)
+const showManual = () => {
+  showManualFlag.value = !showManualFlag.value
+}
+const treeClick = (item) => {
+  console.log('item---treeClick--------->', item);
+}
+</script>
+<style scoped lang="less">
+.father {
+  // overflow: hidden;
+  height: 100%;
+}
+
+.title-text {
+  cursor: pointer;
+  font-size: 16px;
+  color: #333;
+
+  &:hover {
+    color: #0058e1;
+  }
+}
+
+.content {
+  width: 1240px;
+  display: flex;
+  justify-content: flex-start;
+  margin: 0 auto;
+  margin-top: 84px;
+}
+
+.left {
+  width: 240px;
+  height: 400px;
+  margin-right: 20px;
+  background: rgba(244, 245, 248, 0.8);
+}
+
+.right {
+  width: 880px;
+  // height: calc(100vh - 84px);
+}
+</style>