技术文档更改

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

@@ -1,159 +1,147 @@
 <template>
   <div class="list-box">
-    <div
+    <div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
-      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
+        <div :class="[
-          :class="[
+          newClickData.title === item.title ? 'select' : '',
-            newClickData.title === item.title ? 'select' : '',
+          level === 1 ? 'parent' : '',
-            level === 1 ? 'parent' : '',
+          judgeLeaf(item) ? 'leaf' : '',
-            judgeLeaf(item) ? 'leaf' : '',
+        ]" class="list-text">
-          ]"
-          class="list-text"
-        >
           {{ item.title }}
           <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
           <UpOutlined v-show="item.show && !judgeLeaf(item)" />
         </div>
       </a-tooltip>
       <div style="margin-left: 10px" v-if="!judgeLeaf(item) && item.show">
-        <abilityDocTree
+        <abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="newClickData"
-          :dataList="item.children"
+          :level="newLevel + 1"></abilityDocTree>
-          @tree-click="handleTreeItem"
-          :clickData="newClickData"
-          :level="newLevel + 1"
-        ></abilityDocTree>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-  import {
+import {
-    defineComponent,
+  defineComponent,
-    onMounted,
+  onMounted,
-    ref,
+  ref,
-    watch,
+  watch,
-    defineProps,
+  defineProps,
-    nextTick,
+  nextTick,
-  } from 'vue'
+} from 'vue'
-  import { getDevelopDocTree } from '@/api/home'
+import { getDevelopDocTree } from '@/api/home'
-  import { message } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
-  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
 
-  const props = defineProps({
+const props = defineProps({
-    dataList: {
+  dataList: {
-      type: Array,
+    type: Array,
-      default: () => [],
+    default: () => [],
+  },
+  level: {
+    type: Number,
+    default: 1,
+  },
+  clickData: {
+    type: Object,
+    default: () => {
+      ''
     },
-    level: {
+  },
-      type: Number,
+})
-      default: 1,
-    },
-    clickData: {
-      type: Object,
-      default: () => {
-        ''
-      },
-    },
-  })
 
-  // 数组
+// 数组
-  const newDataList = ref(props.dataList)
+const newDataList = ref(props.dataList)
-  // 级别
+// 级别
-  const newLevel = ref(props.level)
+const newLevel = ref(props.level)
 
-  const newClickData = ref(props.clickData)
+const newClickData = ref(props.clickData)
 
-  // 判断是不是叶子节点
+// 判断是不是叶子节点
-  const judgeLeaf = (item) => {
+const judgeLeaf = (item) => {
-    if (item.children && item.children.length > 0) {
+  if (item.children && item.children.length > 0) {
-      return false
+    return false
+  } else {
+    return true
+  }
+}
+
+const showChildren = (item) => {
+  if (!(item.children && item.children.length > 0)) {
+    if (newClickData.value.title !== '') {
+      handleTreeItem(item)
     } else {
-      return true
+      handleTreeItem({ title: '' })
     }
   }
+  if (item.children && item.children.length > 0) {
+    item.show = !item.show
+  }
+}
 
-  const showChildren = (item) => {
+watch(
-    if (!(item.children && item.children.length > 0)) {
+  () => props.dataList,
-      if (newClickData.value.title !== '') {
+  (val) => {
-        handleTreeItem(item)
+    if (val) {
-      } else {
+      newDataList.value = val
-        handleTreeItem({ title: '' })
-      }
-    }
-    if (item.children && item.children.length > 0) {
-      item.show = !item.show
     }
   }
+)
 
-  watch(
+watch(
-    () => props.dataList,
+  () => props.clickData,
-    (val) => {
+  (val) => {
-      if (val) {
+    if (val) {
-        newDataList.value = val
+      newClickData.value = val
-      }
     }
-  )
-
-  watch(
-    () => props.clickData,
-    (val) => {
-      if (val) {
-        newClickData.value = val
-      }
-    }
-  )
-
-  const emit = defineEmits(['treeClick'])
-  const handleTreeItem = (item) => {
-    emit('tree-click', item)
   }
+)
+
+const emit = defineEmits(['treeClick'])
+const handleTreeItem = (item) => {
+  emit('tree-click', item)
+}
 </script>
 <style lang="less" scoped>
-  .list-text {
+.list-text {
-    font-size: 16px;
+  font-size: 16px;
-    color: #333;
+  color: #333;
-    padding: 10px 0;
+  padding: 10px 0;
-    cursor: pointer;
+  cursor: pointer;
-    padding-left: 10px;
+  padding-left: 10px;
-    border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
-    overflow: hidden;
+  overflow: hidden;
-    /*文本不会换行*/
+  /*文本不会换行*/
-    white-space: nowrap;
+  white-space: nowrap;
-    /*当文本溢出包含元素时，以省略号表示超出的文本*/
+  /*当文本溢出包含元素时，以省略号表示超出的文本*/
-    text-overflow: ellipsis;
+  text-overflow: ellipsis;
 
-    &:hover {
+  &:hover {
-      color: #0058e1;
-      cursor: pointer;
-    }
-  }
-
-  .parent {
-    margin-bottom: 10px;
-    background: rgba(0, 135, 225, 0.1);
-    color: #333;
-
-    &:hover {
-      color: #fff;
-      background: #0058e1;
-      cursor: pointer;
-    }
-  }
-
-  .leaf {
-    font-size: 14px;
-    color: #555;
-    cursor: pointer;
-  }
-
-  .select {
     color: #0058e1;
-    font-weight: 600;
     cursor: pointer;
   }
+}
+
+.parent {
+  margin-bottom: 10px;
+  background: rgba(0, 135, 225, 0.1);
+  color: #333;
+
+  &: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

@@ -3,13 +3,18 @@
   <div class="menu-container">
     <div id="container" class="content-menu">
       <div class="left">
-        <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
+        <div class="first-title-text doc" :style="{ color: '技术文档' === titleData.name ? '#0058e1' : '' }"
-          :style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
+          @click="changeName({ name: '技术文档' })">
-          <div class="img" :class="data.className"></div>
+          技术文档
-          {{ data.name }}
         </div>
-        <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
+        <abilityDocTree style="max-height:400px;overflow-y:auto" :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
       </div>
+
+      <div class="first-title-text new-guide-box" :style="{ color: '新手指引' === titleData.name ? '#0058e1' : '' }"
+        @click="changeName({ name: '新手指引' })">
+        <div class="guide-text">新手指引</div>
+      </div>
+
       <!-- 技术文档 -->
       <div class="right" v-if="titleData.name !== '新手指引'">
         <div style="height: 100%">
@@ -146,6 +151,10 @@ onMounted(() => {
   }
 }
 
+.doc {
+  font-weight: bold;
+}
+
 .menu-container {
   width: 100%;
   padding-top: 0.74rem;
@@ -163,22 +172,45 @@ onMounted(() => {
 
 .left {
   width: 200px;
-  padding: 20px;
+  padding-left: 10px;
-  margin-right: 20px;
+  padding-top: 10px;
-  background: rgba(244, 245, 248, 1);
+  background: #f4f5f8;
-  overflow-y: scroll;
   position: absolute;
-  top: 200px;
+  top: 300px;
   left: 85px;
+  max-height: 400px;
+}
+
+.new-guide-box {
+  position: absolute;
+  top: 300px;
+  right: 205px;
+  width: 74px;
+  height: 136px;
+  background: url('~@/assets/menu/new-bg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding-bottom: 0;
+}
+
+.guide-text {
+  width: 25px;
+  text-align: center;
+  word-wrap: break-word;
+  font-size: 20px;
+  color: #0058e1;
 }
 
 .right {
-  width: 1400px;
+  width: 1300px;
   height: calc(100% - 20px);
   position: absolute;
-  top: 10px;
-  left: 300px;
   min-height: 600px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .sidebar {
@@ -196,11 +228,6 @@ onMounted(() => {
   margin-right: 8px;
 }
 
-.doc {
-  background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
-  background-size: 100%;
-}
-
 .newGuide {
   background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
   background-size: 100%;