Bladeren bron

新增分组后自动定位到该位置,issues:#I3ZSTG

BillDowney 4 jaren geleden
bovenliggende
commit
6de0a9dcae

+ 7 - 6
magic-editor/src/console/src/components/editor/magic-script-editor.vue

@@ -836,12 +836,13 @@ export default {
             const $scrollRect = scrollbar.getBoundingClientRect()
             const $itemDom = document.getElementById('ma-tab-item-' + this.selected.tmp_id)
             if ($itemDom) {
-              const $itemRect = $itemDom.getBoundingClientRect()
-              if ($itemRect.left < $scrollRect.left) {
-                scrollbar.scrollLeft += $itemRect.left - $scrollRect.left
-              } else if ($scrollRect.left + $scrollRect.width < $itemRect.left + $itemRect.width) {
-                scrollbar.scrollLeft += $itemRect.left + $itemRect.width - $scrollRect.left - $scrollRect.width
-              }
+              // const $itemRect = $itemDom.getBoundingClientRect()
+              // if ($itemRect.left < $scrollRect.left) {
+              //   scrollbar.scrollLeft += $itemRect.left - $scrollRect.left
+              // } else if ($scrollRect.left + $scrollRect.width < $itemRect.left + $itemRect.width) {
+              //   scrollbar.scrollLeft += $itemRect.left + $itemRect.width - $scrollRect.left - $scrollRect.width
+              // }
+              $itemDom.scrollIntoView(true)
             }
           })
         }

+ 6 - 1
magic-editor/src/console/src/components/resources/magic-api-list.vue

@@ -26,6 +26,7 @@
       <template #folder="{ item }">
         <div
             v-if="item._searchShow !== false"
+            :id="'magic-api-list-' + item.id"
             :class="{ 'ma-tree-select': item.selectRightItem }"
             :draggable="true"
             :style="{ 'padding-left': 17 * item.level + 'px' }"
@@ -90,7 +91,7 @@ import MagicTree from '../common/magic-tree.vue'
 import request from '@/api/request.js'
 import MagicDialog from '@/components/common/modal/magic-dialog.vue'
 import MagicInput from '@/components/common/magic-input.vue'
-import { replaceURL, download as downloadFile, requestGroup } from '@/scripts/utils.js'
+import { replaceURL, download as downloadFile, requestGroup, goToAnchor } from '@/scripts/utils.js'
 import contants from '@/scripts/contants.js'
 import Key from '@/scripts/hotkey.js'
 
@@ -522,6 +523,10 @@ export default {
             bus.$emit('status', `分组「${this.createGroupObj.name}」创建成功`)
             this.deleteOrAddGroupToTree(this.tree, this.createGroupObj)
             this.rebuildTree()
+            const id = this.createGroupObj.id
+            this.$nextTick(() => {
+              goToAnchor('#magic-api-list-' + id)
+            })
             this.initCreateGroupObj()
           })
         }

+ 6 - 1
magic-editor/src/console/src/components/resources/magic-function-list.vue

@@ -89,10 +89,11 @@ import MagicTree from '@/components/common/magic-tree.vue'
 import request from '@/api/request.js'
 import MagicDialog from '@/components/common/modal/magic-dialog.vue'
 import MagicInput from '@/components/common/magic-input.vue'
-import { replaceURL, requestGroup } from '@/scripts/utils.js'
+import { replaceURL, requestGroup, goToAnchor } from '@/scripts/utils.js'
 import JavaClass from '@/scripts/editor/java-class.js'
 import Key from '@/scripts/hotkey.js'
 import contants from '@/scripts/contants.js'
+
 export default {
   name: 'MagicFunctionList',
   props: {
@@ -490,6 +491,10 @@ export default {
             bus.$emit('status', `分组「${this.createGroupObj.name}」创建成功`)
             this.deleteOrAddGroupToTree(this.tree, this.createGroupObj)
             this.rebuildTree()
+            const id = this.createGroupObj.id
+            this.$nextTick(() => {
+              goToAnchor('#magic-api-list-' + id)
+            })
             this.initCreateGroupObj()
           })
         }

+ 11 - 1
magic-editor/src/console/src/scripts/utils.js

@@ -84,4 +84,14 @@ const deepClone = (obj) => {
   }
   return o;
 }
-export {replaceURL, isVisible, formatJson, formatDate, paddingZero, download, requestGroup, deepClone}
+
+// 展示锚点对象
+const goToAnchor = (dom) => {
+  if (typeof dom === 'string') {
+    dom = document.querySelector(dom)
+  }
+  if (dom) {
+    dom.scrollIntoView(true)
+  }
+}
+export {replaceURL, isVisible, formatJson, formatDate, paddingZero, download, requestGroup, deepClone, goToAnchor}