add: 指导手册

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

@@ -1,14 +1,16 @@
 <template>
     <div class="list-box">
         <div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
-            <div :class="[clickData.title === item.title ? 'select' : '', level === 1 ? 'parent' : '']"
+            <a-tooltip placement="top" :title="item.title" arrow-point-at-center>
-                class="list-text">
+                <div :class="[clickData.title === item.title && item.isSelect ? 'select' : '', level === 1 ? 'parent' : '', judgeLeaf(item) ? 'leaf' : '']"
-                {{ item.title }}
+                    class="list-text">
-                <DownOutlined v-show="!item.show && item.children && item.children.length > 0" />
+                    {{ item.title }}
-                <UpOutlined v-show="item.show && item.children && item.children.length > 0" />
+                    <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
-            </div>
+                    <UpOutlined v-show="item.show && !judgeLeaf(item)" />
-            <div style="margin-left:10px" v-if="item.children && item.children.length > 0 && item.show">
+                </div>
-                <abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="clickData"
+            </a-tooltip>
+            <div style="margin-left:10px" v-if="!judgeLeaf(item) && item.show">
+                <abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="newClickData"
                     :level="newLevel + 1">
                 </abilityDocTree>
             </div>
@@ -45,25 +47,25 @@ const newDataList = ref(props.dataList)
 // 级别
 const newLevel = ref(props.level)
 
-const getBgColor = (item, level) => {
+const newClickData = ref(props.clickData)
-    // if(level === 1) {
-    //     if() {
 
-    //     }
+// 判断是不是叶子节点
-    // }else {
+const judgeLeaf = (item) => {
-    //     return false
+    if (item.children && item.children.length > 0) {
-    // }
+        return false
+    } else {
+        return true
+    }
 }
 
 const showChildren = (item) => {
-    console.log('item------------>', item);
     if (!item.children) {
-        if (props.clickData.title !== '') {
+        if (newClickData.value.title !== '') {
             handleTreeItem(item)
-        }else {
+        } else {
-             handleTreeItem({title: ''})
+            handleTreeItem({ title: '' })
         }
-
+        item.isSelect = !item.isSelect;
     }
 
     if (item.children && item.children.length > 0) {
@@ -71,15 +73,23 @@ const showChildren = (item) => {
     }
 }
 
-// watch(
+watch(
-//     () => props.dataList,
+    () => props.dataList,
-//     (val) => {
+    (val) => {
-//         if (val) {
+        if (val) {
-//             props.dataList = val;
+            newDataList.value = val
-//             newDataList.value = val
+        }
-//         }
+    }
-//     }
+)
-// )
+
+watch(
+    () => props.clickData,
+    (val) => {
+        if (val) {
+            newClickData.value = val
+        }
+    }
+)
 
 const emit = defineEmits(['treeClick'])
 const handleTreeItem = (item) => {
@@ -95,29 +105,41 @@ const handleTreeItem = (item) => {
     cursor: pointer;
     padding-left: 10px;
     border-bottom: 1px solid #ccc;
+    overflow: hidden;
+    /*文本不会换行*/
+    white-space: nowrap;
+    /*当文本溢出包含元素时，以省略号表示超出的文本*/
+    text-overflow: ellipsis;
 
     &:hover {
         color: #0058e1;
     }
 }
 
-.select {
-    color: #0058e1;
-    font-weight: 600;
-}
-
 .normal {
     color: #333;
 }
 
 .parent {
     margin-bottom: 10px;
-    // background: #0058e1;
+    background: rgba(0, 135, 225, 0.1);
-    // color: #fff;
+    color: #333;
+
     // margin-bottom: 10px;
 
-    // &:hover {
+    &:hover {
-    //     color: #fff;
+        color: #fff;
-    // }
+        background: #0058e1;
+    }
+}
+
+.leaf {
+    font-size: 14px;
+    color: #555;
+}
+
+.select {
+    color: #0058e1;
+    font-weight: 600;
 }
 </style>

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

@@ -1,15 +0,0 @@
-<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>

front/src/views/instructionManual/index.vue

@@ -7,14 +7,13 @@
         <div class="first-title-text" @click="showManual" :style="{ color: !showManualFlag ? '#0058e1' : '' }">技术文档
         </div>
         <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
-        <abilityDocTree :dataList="tempData" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
-        <!-- tempData -->
       </div>
       <div class="right">
         <div v-if="showManualFlag">新手指引</div>
         <div v-else>
           <!-- 技术文档 -->
-          <docsifyView></docsifyView>
+          <iframe name="iframeName" width="1000" height="800" id="iframeId" :frameborder="0"
+            :src="clickData.doc"></iframe>
         </div>
       </div>
     </div>
@@ -22,99 +21,108 @@
 </template>
 <script setup>
 import HomeHeader from '@/views/home/components/header'
-import docsifyView from './components/docsifyView'
 import abilityDocTree from './components/abilityDocTree'
-import { getMyProcessInstancePage, wodepage } from '@/api/personalCenter'
 import { selectOne } from '@/api/home'
-import { ref, reactive, onMounted, nextTick } from 'vue'
+import { ref, reactive, onMounted, nextTick, watch } from 'vue'
 import { useStore } from 'vuex'
 import { Empty, message } from 'ant-design-vue'
 import { getDevelopDocTree } from '@/api/home'
 
-const showManualFlag = ref(true)
+const showManualFlag = ref(false)
 const showManual = () => {
   showManualFlag.value = !showManualFlag.value
 }
 
 const clickData = ref({})
 const treeClick = (item) => {
+  showManualFlag.value = false;
   console.log('item---treeClick--------->', item);
   clickData.value = item;
 }
 let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
 
-const tempData = ref([
-  {
-    title: '应用资源--假数据',
-    children: [
-      {
-        title: '能力11--假数据',
-      },
-      {
-        title: '能力1122',
-      },
-      {
-        title: '能力1133',
-      },
-      {
-        title: '能力1144',
-      },
-    ]
-  }, {
-    title: '组件服务--假数据',
-    children: [
-      {
-        title: '算法优势--假数据',
-        children: [
-          {
-            title: '算法优势11',
-          },
-          {
-            title: '算法优势1122',
-          },
-          {
-            title: '算法优势1133',
-          },
-          {
-            title: '算法优势1144',
-          },
-        ]
-      },
-      {
-        title: '社会治安'
-      },
-    ],
-
-  }
-])
-const treeData = ref([]);
-// const treeArray = ref(data)
-
 const treeArray = ref([])
 const getTreeData = () => {
   getDevelopDocTree({}).then((res) => {
     console.log('res------文档树------>', res);
     if (res.data.code !== 0) {
-      console.log('222------------>', 222);
-
-      treeArray.value = tempData;
-      nextTick(() => {
-        console.log('treeArray.value------------>', treeArray.value);
-
-      })
       return message.error(res.data.msg)
     }
     treeArray.value = res.data.data || [];
   }).catch((err) => {
-    console.log('err------------>', err);
     message.error(err)
   });
 }
 
 onMounted(() => {
   getTreeData()
+  // loadPage()
+
 })
 
+var x = document.getElementById("iframeId");
+console.log('x------------>', x);
+
+watch(
+  () => clickData.value,
+  (val) => {
+    if (val) {
+      console.log('val-watch---clickData-------->', val);
+
+      // clickData.value = val
+      loadPage()
+    }
+  },
+  {
+    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
+    //那么首次执行，val为默认值,preVal为undefined
+    // immediate: true,
+    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
+    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
+    deep: true,
+  }
+)
+
+
+// window.onload = () => loadPage()
+
+
+
+
+const loadPage = () => {
+  console.log('2222----onload-------->', 2222);
+  if (!clickData.value.doc) {
+    return;
+  }
+
+  // var _iframe = document.getElementById('iframeId').contentWindow.document.getElementsByTagName('aside')//iframe下的id
+  // console.log('_iframe------------>', _iframe);
+
+  var x = document.getElementById("iframeId");
+  console.log('x------------>', x);
+
+  if (x) {
+    var y = (x.contentWindow || x.contentDocument);
+    if (y.document) {
+      y = y.document;
+    }
+    let asideDom = y.body.getElementsByClassName('.aside') && y.body.getElementsByClassName('.aside')[0]
+    if (asideDom) {
+      asideDom.style.right = 0;
+    }
+    console.log('asideDom------------>', asideDom);
+
+    let contentDom = y.body.getElementsByClassName('.content') && y.body.getElementsByClassName('.content')[0];
+    console.log('contentDom------------>', contentDom);
+    if (contentDom) {
+      contentDom.style.left = 0
+      contentDom.style.right = '16rem'
+    }
+
+    //id和class获取方式有一点点区别
+    // y.getElementById('元素id').style.fontSize = '12px'
+  }
+}
 
 </script>
 
@@ -155,4 +163,13 @@ onMounted(() => {
 .right {
   width: 880px;
 }
+
+.sidebar {
+  right: 0 !important;
+}
+
+.content {
+  right: 16rem !important;
+  left: 0 !important;
+}
 </style>