From bba86294dfcf2d995423b58fb2d76da6a708e05e Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Wed, 3 Aug 2022 13:36:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=80=E6=9C=AF=E6=96=87=E6=A1=A3=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/assets/menu/new-bg.png              | Bin 0 -> 2949 bytes
 .../components/abilityDocTree.vue             | 236 +++++++++---------
 front/src/views/instructionManual/index.vue   |  63 +++--
 3 files changed, 157 insertions(+), 142 deletions(-)
 create mode 100644 front/src/assets/menu/new-bg.png

diff --git a/front/src/assets/menu/new-bg.png b/front/src/assets/menu/new-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b3c5ef9fd61ac0816586e9b2ddacb92866326e9
GIT binary patch
literal 2949
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

literal 0
HcmV?d00001

diff --git a/front/src/views/instructionManual/components/abilityDocTree.vue b/front/src/views/instructionManual/components/abilityDocTree.vue
index a88e101a..3523542d 100644
--- a/front/src/views/instructionManual/components/abilityDocTree.vue
+++ b/front/src/views/instructionManual/components/abilityDocTree.vue
@@ -1,159 +1,147 @@
 <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="[
-            newClickData.title === item.title ? 'select' : '',
-            level === 1 ? 'parent' : '',
-            judgeLeaf(item) ? 'leaf' : '',
-          ]"
-          class="list-text"
-        >
+        <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)" />
           <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 {
-    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'
+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'
 
-  const props = defineProps({
-    dataList: {
-      type: Array,
-      default: () => [],
+const props = defineProps({
+  dataList: {
+    type: Array,
+    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 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) => {
-    if (item.children && item.children.length > 0) {
-      return false
+// 判断是不是叶子节点
+const judgeLeaf = (item) => {
+  if (item.children && item.children.length > 0) {
+    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) => {
-    if (!(item.children && item.children.length > 0)) {
-      if (newClickData.value.title !== '') {
-        handleTreeItem(item)
-      } else {
-        handleTreeItem({ title: '' })
-      }
-    }
-    if (item.children && item.children.length > 0) {
-      item.show = !item.show
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
+      newDataList.value = val
     }
   }
+)
 
-  watch(
-    () => props.dataList,
-    (val) => {
-      if (val) {
-        newDataList.value = val
-      }
+watch(
+  () => props.clickData,
+  (val) => {
+    if (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 {
-    font-size: 16px;
-    color: #333;
-    padding: 10px 0;
-    cursor: pointer;
-    padding-left: 10px;
-    border-bottom: 1px solid #ccc;
-    overflow: hidden;
-    /*文本不会换行*/
-    white-space: nowrap;
-    /*当文本溢出包含元素时，以省略号表示超出的文本*/
-    text-overflow: ellipsis;
+.list-text {
+  font-size: 16px;
+  color: #333;
+  padding: 10px 0;
+  cursor: pointer;
+  padding-left: 10px;
+  border-bottom: 1px solid #ccc;
+  overflow: hidden;
+  /*文本不会换行*/
+  white-space: nowrap;
+  /*当文本溢出包含元素时，以省略号表示超出的文本*/
+  text-overflow: ellipsis;
 
-    &: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 {
+  &:hover {
     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>
diff --git a/front/src/views/instructionManual/index.vue b/front/src/views/instructionManual/index.vue
index b7956605..b7617fcd 100644
--- a/front/src/views/instructionManual/index.vue
+++ b/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%;