指导手册：左侧树更改

front/src/views/instructionManual/components/abilityDocTree.vue

@@ -2,7 +2,7 @@
     <div class="list-box">
         <div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
             <a-tooltip placement="top" :title="item.title" arrow-point-at-center>
-                <div :class="[clickData.title === item.title && item.isSelect ? 'select' : '', level === 1 ? 'parent' : '', judgeLeaf(item) ? 'leaf' : '']"
+                <div :class="[newClickData.title === item.title ? 'select' : '', level === 1 ? 'parent' : '', judgeLeaf(item) ? 'leaf' : '']"
                     class="list-text">
                     {{ item.title }}
                     <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
@@ -28,10 +28,6 @@ const props = defineProps({
         type: Array,
         default: () => []
     },
-    selectName: {
-        type: String,
-        default: ''
-    },
     level: {
         type: Number,
         default: 1
@@ -59,15 +55,13 @@ const judgeLeaf = (item) => {
 }
 
 const showChildren = (item) => {
-    if (!item.children) {
+    if (!(item.children && item.children.length > 0)) {
         if (newClickData.value.title !== '') {
             handleTreeItem(item)
         } else {
             handleTreeItem({ title: '' })
         }
-        item.isSelect = !item.isSelect;
     }
-
     if (item.children && item.children.length > 0) {
         item.show = !item.show;
     }
@@ -113,33 +107,31 @@ const handleTreeItem = (item) => {
 
     &:hover {
         color: #0058e1;
+        cursor: pointer;
     }
 }
 
-.normal {
-    color: #333;
-}
-
 .parent {
     margin-bottom: 10px;
     background: rgba(0, 135, 225, 0.1);
     color: #333;
 
-    // margin-bottom: 10px;
-
     &:hover {
         color: #fff;
         background: #0058e1;
+        cursor: pointer;
     }
 }
 
 .leaf {
     font-size: 14px;
     color: #555;
+    cursor: pointer;
 }
 
 .select {
     color: #0058e1;
     font-weight: 600;
+    cursor: pointer;
 }
 </style>

front/src/views/instructionManual/index.vue

@@ -2,6 +2,7 @@
   <div class="menu-box">
     <home-header></home-header>
     <div id="container" class="content-menu">
+      <div class="rela">
         <div class="left">
           <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
             :style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
@@ -11,13 +12,18 @@
           <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
         </div>
         <div class="right">
-        <div v-if="titleData.name === '新手指引'">新手指引</div>
+          <div class="new-menu-box" style="height:100%" v-if="titleData.name === '新手指引'">
+            <!-- 新手指引 -->
+            <a-empty description="新手指引" />
+          </div>
           <div v-else style="height:100%">
             <iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
               :src="clickData.doc"></iframe>
           </div>
         </div>
       </div>
+
+    </div>
   </div>
 </template>
 <script setup>
@@ -26,6 +32,7 @@ import abilityDocTree from './components/abilityDocTree'
 import { ref, reactive, onMounted, nextTick, watch } from 'vue'
 import { Empty, message } from 'ant-design-vue'
 import { getDevelopDocTree } from '@/api/home'
+import flatten from '@turf/flatten'
 
 const titleList = ref([
   {
@@ -39,12 +46,13 @@ const titleList = ref([
 ])
 const titleData = ref(titleList.value[0])
 const clickData = ref({})
-let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
 const treeArray = ref([])
+const treeArrayCopy = ref([])
+let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
 
 const treeClick = (item) => {
-  console.log('item---treeClick--------->', item);
   clickData.value = item;
+  console.log('clickData------------>', item);
   titleData.value = titleList.value[1]
 }
 
@@ -55,13 +63,56 @@ const getTreeData = () => {
       return message.error(res.data.msg)
     }
     treeArray.value = res.data.data || [];
+    treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
   }).catch((err) => {
     message.error(err)
   });
 }
 
 const changeName = (item) => {
-  titleData.value = item
+  titleData.value = item;
+  if (item.name == '新手指引') {
+    clickData.value = {}
+  }
+  if (item.name == '技术文档') {
+    if (!clickData.value.title) {
+      clickData.value = {}
+      treeArray.value = [];
+      treeArrayCopy.value.map((val, i) => {
+        let obj = Object.assign({}, val, {
+          title: val.title,
+          show: (i === 0 && val.children && val.children.length > 0) || typeList.includes(val.title) ? true : false,
+          children: []
+        })
+        formData(val.children, obj)
+        treeArray.value.push(obj)
+      })
+      getFirstData(treeArrayCopy.value[0] || {})
+    }
+  }
+}
+
+
+const formData = (children = [], dataItem) => {
+  children.map((item, index) => {
+    let _obj = Object.assign({}, item, {
+      title: item.title,
+      show: (index === 0 && item.children && item.children.length > 0) || typeList.includes(item.title) ? true : false,
+      children: []
+    })
+    if (item.children && item.children.length > 0) {
+      formData(item.children, _obj)
+    }
+    dataItem.children.push(_obj)
+  })
+}
+
+const getFirstData = (firstObj = {}) => {
+  if (firstObj && firstObj.children && firstObj.children.length > 0) {
+    getFirstData(firstObj.children[0])
+  } else {
+    clickData.value = firstObj
+  }
 }
 
 onMounted(() => {
@@ -69,18 +120,6 @@ onMounted(() => {
 })
 
 
-watch(
-  () => clickData.value,
-  (val) => {
-    if (val) {
-      console.log('val-watch---clickData-------->', val);
-    }
-  },
-  {
-    deep: true,
-  }
-)
-
 </script>
 
 <style scoped lang="less">
@@ -103,21 +142,12 @@ watch(
 }
 
 .content-menu {
-  // width: 1240px;
-  // display: flex;
-  // justify-content: flex-start;
-  // margin: 0 auto;
-  // margin-top: 74px;
-  // box-sizing: border-box;
-  // position: relative;
-
   width: 1240px;
   display: flex;
   justify-content: flex-start;
   margin: 0 auto;
   margin-top: 74px;
   box-sizing: border-box;
-  /* height: calc(100vh - 306px); */
   position: fixed;
   left: 50%;
   bottom: 0;
@@ -132,14 +162,14 @@ watch(
   height: 600px;
   margin-right: 20px;
   background: rgba(244, 245, 248, 0.8);
-  overflow-y: auto;
+  overflow-y: scroll;
   position: absolute;
   top: 10px;
   left: 0;
 }
 
 .right {
-  width: 880px;
+  width: 870px;
   height: calc(100% - 20px);
 
   position: absolute;
@@ -172,59 +202,16 @@ watch(
   background-size: 100%;
 }
 
-#iframeId {
+.new-menu-box {
-  // ::-webkit-scrollbar {
+  height: 100%;
-  //   width: 6px;
+  display: flex;
-  //   height: 6px;
+  align-items: center;
-  //   background-color: rgb(255, 255, 255);
+  justify-content: center;
-  // }
+}
 
-  // ::-webkit-scrollbar-thumb {
+.rela {
-  //   border-radius: 10px;
+  width: 100%;
-  //   background-color: rgb(200, 204, 209);
+  height: 100%;
-  // }
+  position: relative;
-
-  /* 设置滚动条的样式 */
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    // width: 2px;
-    // height: 2px;
-    // height: 67px;
-  }
-
-  ::scrollbar {
-    width: 6px;
-    height: 6px;
-    // width: 2px;
-    // height: 2px;
-    // height: 67px;
-  }
-
-  /* 滚动槽 */
-  ::-webkit-scrollbar-track {
-    display: none;
-    // -webkit-box-shadow: inset 0 0 3px #b18933;
-    // border-radius: 1px;
-  }
-
-  ::scrollbar-track {
-    display: none;
-    // -webkit-box-shadow: inset 0 0 3px #98f165;
-    // border-radius: 1px;
-  }
-
-  /* 滚动条滑块 */
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: #006666;
-    -webkit-box-shadow: inset 0 0 1px #006666;
-  }
-
-  ::scrollbar-thumb {
-    border-radius: 10px;
-    background: #006666;
-    -webkit-box-shadow: inset 0 0 1px #006666;
-  }
 }
 </style>