合并

front/src/views/instructionManual/index.vue

@@ -4,40 +4,21 @@
     <div id="container" class="content-menu">
       <div class="rela">
         <div class="left">
-          <div
+          <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
-            class="first-title-text"
+            :style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
-            v-for="(data, i) in titleList"
-            :key="i"
-            @click="changeName(data)"
-            :style="{ color: data.name === titleData.name ? '#0058e1' : '' }"
-          >
             <div class="img" :class="data.className"></div>
             {{ data.name }}
           </div>
-          <abilityDocTree
+          <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
-            :dataList="treeArray"
-            @treeClick="treeClick"
-            :clickData="clickData"
-          ></abilityDocTree>
         </div>
         <div class="right">
-          <div
+          <div class="new-menu-box" style="height: 100%" v-if="titleData.name === '新手指引'">
-            class="new-menu-box"
-            style="height: 100%"
-            v-if="titleData.name === '新手指引'"
-          >
             <!-- 新手指引 -->
             <a-empty description="新手指引" />
           </div>
-          <div v-else style="height: 100%">
+          <div v-else style="height:100%">
-            <iframe
+            <iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
-              name="iframeName"
+              :src="window.SITE_CONFIG['frontUrl'] + clickData.doc"></iframe>
-              width="1000"
-              height="100%"
-              id="iframeId"
-              :frameborder="0"
-              :src="clickData.doc"
-            ></iframe>
           </div>
         </div>
       </div>
@@ -45,198 +26,198 @@
   </div>
 </template>
 <script setup>
-  import HomeHeader from '@/views/home/components/header'
+import HomeHeader from '@/views/home/components/header'
-  import abilityDocTree from './components/abilityDocTree'
+import abilityDocTree from './components/abilityDocTree'
-  import { ref, reactive, onMounted, nextTick, watch } from 'vue'
+import { ref, reactive, onMounted, nextTick, watch } from 'vue'
-  import { Empty, message } from 'ant-design-vue'
+import { Empty, message } from 'ant-design-vue'
-  import { getDevelopDocTree } from '@/api/home'
+import { getDevelopDocTree } from '@/api/home'
-  import flatten from '@turf/flatten'
+import flatten from '@turf/flatten'
 
-  const titleList = ref([
+const titleList = ref([
-    {
+  {
-      name: '新手指引',
+    name: '新手指引',
-      className: 'newGuide',
+    className: 'newGuide',
-    },
+  },
-    {
+  {
-      name: '技术文档',
+    name: '技术文档',
-      className: 'doc',
+    className: 'doc',
-    },
+  },
-  ])
+])
-  const titleData = ref(titleList.value[0])
+const titleData = ref(titleList.value[0])
-  const clickData = ref({})
+const clickData = ref({})
-  const treeArray = ref([])
+const treeArray = ref([])
-  const treeArrayCopy = ref([])
+const treeArrayCopy = ref([])
-  let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
+let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
 
-  const treeClick = (item) => {
+const treeClick = (item) => {
-    clickData.value = item
+  clickData.value = item
-    console.log('clickData------------>', item)
+  console.log('clickData------------>', item)
-    titleData.value = titleList.value[1]
+  titleData.value = titleList.value[1]
-  }
+}
 
-  const getTreeData = () => {
+const getTreeData = () => {
-    getDevelopDocTree({})
+  getDevelopDocTree({})
-      .then((res) => {
+    .then((res) => {
-        console.log('res------文档树------>', res)
+      console.log('res------文档树------>', res)
-        if (res.data.code !== 0) {
+      if (res.data.code !== 0) {
-          return message.error(res.data.msg)
+        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
-    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] || {})
       }
-    }
+      treeArray.value = res.data.data || []
-  }
+      treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
-
-  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)
     })
-  }
+    .catch((err) => {
+      message.error(err)
+    })
+}
 
-  const getFirstData = (firstObj = {}) => {
+const changeName = (item) => {
-    if (firstObj && firstObj.children && firstObj.children.length > 0) {
+  titleData.value = item
-      getFirstData(firstObj.children[0])
+  if (item.name == '新手指引') {
-    } else {
+    clickData.value = {}
-      clickData.value = firstObj
+  }
+  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] || {})
     }
   }
+}
 
-  onMounted(() => {
+const formData = (children = [], dataItem) => {
-    getTreeData()
+  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(() => {
+  getTreeData()
+})
 </script>
 
 <style scoped lang="less">
-  .menu-box {
+.menu-box {
-    // overflow: hidden;
+  // overflow: hidden;
-    height: 100%;
+  height: 100%;
+}
+
+.first-title-text {
+  cursor: pointer;
+  font-size: 18px;
+  color: #333;
+  padding-bottom: 10px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: #0058e1;
   }
+}
 
-  .first-title-text {
+.content-menu {
-    cursor: pointer;
+  width: 1240px;
-    font-size: 18px;
+  display: flex;
-    color: #333;
+  justify-content: flex-start;
-    padding-bottom: 10px;
+  margin: 0 auto;
-    display: flex;
+  margin-top: 74px;
-    align-items: center;
+  box-sizing: border-box;
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  top: 0.6rem;
+  top: 0;
+}
 
-    &:hover {
+.left {
-      color: #0058e1;
+  width: 240px;
-    }
+  padding: 20px;
-  }
+  height: 600px;
+  margin-right: 20px;
+  background: rgba(244, 245, 248, 0.8);
+  overflow-y: scroll;
+  position: absolute;
+  top: 10px;
+  left: 0;
+}
 
-  .content-menu {
+.right {
-    width: 1240px;
+  width: 870px;
-    display: flex;
+  height: calc(100% - 20px);
-    justify-content: flex-start;
-    margin: 0 auto;
-    margin-top: 74px;
-    box-sizing: border-box;
-    position: fixed;
-    left: 50%;
-    bottom: 0;
-    transform: translateX(-50%);
-    top: 0.6rem;
-    top: 0;
-  }
 
-  .left {
+  position: absolute;
-    width: 240px;
+  top: 10px;
-    padding: 20px;
+  left: 260px;
-    height: 600px;
+}
-    margin-right: 20px;
-    background: rgba(244, 245, 248, 0.8);
-    overflow-y: scroll;
-    position: absolute;
-    top: 10px;
-    left: 0;
-  }
 
-  .right {
+.sidebar {
-    width: 870px;
+  right: 0 !important;
-    height: calc(100% - 20px);
+}
 
-    position: absolute;
+.content {
-    top: 10px;
+  right: 16rem !important;
-    left: 260px;
+  left: 0 !important;
-  }
+}
 
-  .sidebar {
+.img {
-    right: 0 !important;
+  height: 20px;
-  }
+  width: 20px;
+  margin-right: 8px;
+}
 
-  .content {
+.doc {
-    right: 16rem !important;
+  background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
-    left: 0 !important;
+  background-size: 100%;
-  }
+}
 
-  .img {
+.newGuide {
-    height: 20px;
+  background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
-    width: 20px;
+  background-size: 100%;
-    margin-right: 8px;
+}
-  }
 
-  .doc {
+.new-menu-box {
-    background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
+  height: 100%;
-    background-size: 100%;
+  display: flex;
-  }
+  align-items: center;
+  justify-content: center;
+}
 
-  .newGuide {
+.rela {
-    background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
+  width: 100%;
-    background-size: 100%;
+  height: 100%;
-  }
+  position: relative;
-
+}
-  .new-menu-box {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .rela {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
 </style>