From 97c0aaf2d1a375bae21253c924ebfc79f078e3d0 Mon Sep 17 00:00:00 2001
From: marvzhang <tikazyq@163.com>
Date: Mon, 2 Mar 2020 09:36:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=9B=B8=E5=85=B3=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Documentation/Documentation.vue           | 52 +++++++++++++++----
 frontend/src/store/modules/doc.js             |  4 +-
 frontend/src/utils/doc.js                     | 12 ++++-
 frontend/src/views/layout/Layout.vue          | 12 ++---
 4 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/Documentation/Documentation.vue b/frontend/src/components/Documentation/Documentation.vue
index 3c03b267..9abde012 100644
--- a/frontend/src/components/Documentation/Documentation.vue
+++ b/frontend/src/components/Documentation/Documentation.vue
@@ -2,15 +2,16 @@
   <el-tree
     :data="docData"
     ref="documentation-tree"
-    node-key="path"
+    node-key="fullUrl"
   >
-    <span class="custom-tree-node" :class="data.active ? 'active' : ''" slot-scope="{ node, data }">
+    <span class="custom-tree-node" :class="[data.active ? 'active' : '', `level-${data.level}`]"
+          slot-scope="{ node, data }">
       <template v-if="data.level === 1 && data.children && data.children.length">
         <span>{{node.label}}</span>
       </template>
       <template v-else>
         <span>
-          <a :href="data.url" target="_blank" style="display: block">
+          <a :href="data.fullUrl" target="_blank" style="display: block" @click="onClickDocumentationLink">
             {{node.label}}
           </a>
         </span>
@@ -39,6 +40,18 @@ export default {
       if (this.$route.path === '/') return '/'
       const m = this.$route.path.match(/(^\/\w+)/)
       return m[1]
+    },
+    currentDoc () {
+      // find current doc
+      let currentDoc
+      for (let i = 0; i < this.$utils.doc.docs.length; i++) {
+        const doc = this.$utils.doc.docs[i]
+        if (this.pathLv1 === doc.path) {
+          currentDoc = doc
+          break
+        }
+      }
+      return currentDoc
     }
   },
   watch: {
@@ -47,27 +60,39 @@ export default {
     }
   },
   methods: {
+    isActiveNode (d) {
+      // check match
+      if (!this.currentDoc) return false
+      return !!d.url.match(this.currentDoc.pattern)
+    },
     update () {
       // expand related documentation list
       setTimeout(() => {
         this.docData.forEach(d => {
+          // parent node
+          const isActive = this.isActiveNode(d)
           const node = this.$refs['documentation-tree'].getNode(d)
-          let isActive = false
-          for (let i = 0; i < this.$utils.doc.docs.length; i++) {
-            const pattern = this.$utils.doc.docs[i]
-            if (d.url.match(pattern)) {
-              isActive = true
-              break
-            }
-          }
           node.expanded = isActive
           this.$set(d, 'active', isActive)
+
+          // child nodes
+          d.children.forEach(c => {
+            const node = this.$refs['documentation-tree'].getNode(c)
+            const isActive = this.isActiveNode(c)
+            if (!node.parent.expanded && isActive) {
+              node.parent.expanded = true
+            }
+            this.$set(c, 'active', isActive)
+          })
         })
       }, 100)
     },
     async getDocumentationData () {
       // fetch api data
       await this.$store.dispatch('doc/getDocData')
+    },
+    onClickDocumentationLink () {
+      this.$st.sendEv('全局', '点击右侧文档链接')
     }
   },
   async created () {
@@ -80,5 +105,10 @@ export default {
 <style scoped>
   .el-tree >>> .custom-tree-node.active {
     color: #409eff;
+    /*text-decoration: underline;*/
+  }
+
+  .el-tree >>> .custom-tree-node.level-1 {
+    font-weight: bolder;
   }
 </style>
diff --git a/frontend/src/store/modules/doc.js b/frontend/src/store/modules/doc.js
index 7d2e9e98..4472e6e7 100644
--- a/frontend/src/store/modules/doc.js
+++ b/frontend/src/store/modules/doc.js
@@ -38,12 +38,12 @@ const actions = {
     commit('SET_DOC_DATA', Object.values(cache).map(d => {
       d.level = 1
       d.label = d.title
-      d.url = process.env.VUE_APP_DOC_URL + '/' + d.url
+      d.fullUrl = process.env.VUE_APP_DOC_URL + '/' + d.url
       if (d.children) {
         d.children = d.children.map(c => {
           c.level = 2
           c.label = c.title
-          c.url = process.env.VUE_APP_DOC_URL + '/' + c.url
+          c.fullUrl = process.env.VUE_APP_DOC_URL + '/' + c.url
           return c
         })
       }
diff --git a/frontend/src/utils/doc.js b/frontend/src/utils/doc.js
index ae41c282..20983988 100644
--- a/frontend/src/utils/doc.js
+++ b/frontend/src/utils/doc.js
@@ -6,15 +6,23 @@ export default {
     },
     {
       path: '/spiders',
-      pattern: '^Spider'
+      pattern: '^Spider|^SDK|^Integration|^CI/Git'
     },
     {
       path: '/tasks',
-      pattern: '^Task'
+      pattern: '^Task|^Architecture/Task'
     },
     {
       path: '/schedules',
       pattern: '^Schedule'
+    },
+    {
+      path: '/nodes',
+      pattern: '^Node|^Architecture/Node'
+    },
+    {
+      path: '/setting',
+      pattern: '^Notification'
     }
   ]
 }
diff --git a/frontend/src/views/layout/Layout.vue b/frontend/src/views/layout/Layout.vue
index b7aaa004..8576be57 100644
--- a/frontend/src/views/layout/Layout.vue
+++ b/frontend/src/views/layout/Layout.vue
@@ -25,7 +25,7 @@
         :title="$t('Related Documentation')"
         :visible.sync="isShowDocumentation"
         :before-close="onCloseDocumentation"
-        size="360px"
+        size="300px"
       >
         <documentation/>
       </el-drawer>
@@ -81,11 +81,11 @@ export default {
     },
     onClickDocumentation () {
       this.isShowDocumentation = true
-
-      this.$st.sendEv('全局', '点击页面文档')
+      this.$st.sendEv('全局', '打开右侧文档')
     },
     onCloseDocumentation () {
       this.isShowDocumentation = false
+      this.$st.sendEv('全局', '关闭右侧文档')
     }
   },
   async created () {
@@ -125,15 +125,15 @@ export default {
     position: fixed;
     right: 25px;
     bottom: 20px;
-    font-size: 24px;
+    font-size: 32px;
     cursor: pointer;
     color: #909399;
   }
 </style>
 
 <style scoped>
-  .documentation .el-tree {
-    margin-left: 20px;
+  .documentation >>> .el-drawer__body {
+    overflow: auto;
   }
 
   .documentation >>> span[role="heading"]:focus {