技术文档更改

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

@@ -1,50 +1,38 @@
 <template>
   <div class="list-box">
-    <div
-      class="list-item"
-      v-for="(item, i) in newDataList"
-      :key="i"
-      @click.stop="showChildren(item)"
-    >
+    <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="[
+        <div :class="[
           newClickData.title === item.title ? 'select' : '',
           level === 1 ? 'parent' : '',
           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
-          :dataList="item.children"
-          @tree-click="handleTreeItem"
-          :clickData="newClickData"
-          :level="newLevel + 1"
-        ></abilityDocTree>
+        <abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="newClickData"
+          :level="newLevel + 1"></abilityDocTree>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-  import {
+import {
   defineComponent,
   onMounted,
   ref,
   watch,
   defineProps,
   nextTick,
-  } from 'vue'
-  import { getDevelopDocTree } from '@/api/home'
-  import { message } from 'ant-design-vue'
-  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+} from 'vue'
+import { getDevelopDocTree } from '@/api/home'
+import { message } from 'ant-design-vue'
+import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
 
-  const props = defineProps({
+const props = defineProps({
   dataList: {
     type: Array,
     default: () => [],
@@ -59,25 +47,25 @@
       ''
     },
   },
-  })
+})
 
-  // 数组
-  const newDataList = ref(props.dataList)
-  // 级别
-  const newLevel = ref(props.level)
+// 数组
+const newDataList = ref(props.dataList)
+// 级别
+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) {
     return false
   } else {
     return true
   }
-  }
+}
 
-  const showChildren = (item) => {
+const showChildren = (item) => {
   if (!(item.children && item.children.length > 0)) {
     if (newClickData.value.title !== '') {
       handleTreeItem(item)
@@ -88,33 +76,33 @@
   if (item.children && item.children.length > 0) {
     item.show = !item.show
   }
-  }
+}
 
-  watch(
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
       newDataList.value = val
     }
   }
-  )
+)
 
-  watch(
+watch(
   () => props.clickData,
   (val) => {
     if (val) {
       newClickData.value = val
     }
   }
-  )
+)
 
-  const emit = defineEmits(['treeClick'])
-  const handleTreeItem = (item) => {
+const emit = defineEmits(['treeClick'])
+const handleTreeItem = (item) => {
   emit('tree-click', item)
-  }
+}
 </script>
 <style lang="less" scoped>
-  .list-text {
+.list-text {
   font-size: 16px;
   color: #333;
   padding: 10px 0;
@@ -131,9 +119,9 @@
     color: #0058e1;
     cursor: pointer;
   }
-  }
+}
 
-  .parent {
+.parent {
   margin-bottom: 10px;
   background: rgba(0, 135, 225, 0.1);
   color: #333;
@@ -143,17 +131,17 @@
     background: #0058e1;
     cursor: pointer;
   }
-  }
+}
 
-  .leaf {
+.leaf {
   font-size: 14px;
   color: #555;
   cursor: pointer;
-  }
+}
 
-  .select {
+.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)"
-          :style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
-          <div class="img" :class="data.className"></div>
-          {{ data.name }}
+        <div class="first-title-text doc" :style="{ color: '技术文档' === titleData.name ? '#0058e1' : '' }"
+          @click="changeName({ 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;
-  margin-right: 20px;
-  background: rgba(244, 245, 248, 1);
-  overflow-y: scroll;
+  padding-left: 10px;
+  padding-top: 10px;
+  background: #f4f5f8;
   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%;