https://www.hardvogue.com/src/hooks/block.js

1import Hook from './hook.js'
2import { findNode } from './common.js'
3export default class HookBlock extends Hook {
4  constructor(ctx, params, module) {
5    super(ctx, params, 'block', module)
6  }
7  static beforeAddPackage(designBox, targetDir) {
8    let { packageItem, $selfDoc } = designBox.getInsideData()
9    // console.log(`beforeAddPackage block`,packageItem , targetDir);
10    let breadcrumb = ctx.state.template.block.breadcrumb
11    if (packageItem.children?.length && packageItem.dir !== targetDir) {
12      if (breadcrumb) {
13        let tabsItem = findNode(breadcrumb, node => node.type === 'column-tabs')
14        if (tabsItem) {
15          let activeIndex = window.columnTabsState?.[tabsItem.attr_id]?.activeIndex || 0
16          // if (activeIndex > 0) {
17            // 按column-tabs中的栏目顺序插入新模块
18
19            // let prev_tab_panel = tabsItem.content.data[activeIndex - 1].tab_panel
20            // const targetTabKey = prev_tab_panel[prev_tab_panel.length - 1].relate_tab_key
21            let targetTabKey = ''
22            for (let index = activeIndex; index > 0; index--) {
23              let prev_tab_panel = tabsItem.content.data[activeIndex - 1].tab_panel
24              targetTabKey = prev_tab_panel[prev_tab_panel.length - 1]?.relate_tab_key
25              if (targetTabKey) break
26            }
27            const mainBlock = ctx.state.template.block.main
28            // console.log(`targetTabKey`, targetTabKey);
29            if (targetTabKey && mainBlock) {
30              const targetModule = mainBlock.children.find(item => {
31                if (item.tab_key === targetTabKey) {
32                  return true
33                }
34              })
35              if (targetModule) return targetModule
36            } else if (mainBlock) { // 前面一个都没有，插入第一位。
37              // return { dir: 'module', parent_attr_id: mainBlock.attr_id }
38              window.ctx.state.addPackageState = { from: 'column-tabs', insertIndex: -1 }
39            }
40          // }
41        }
42      }
43      return packageItem.children[packageItem.children.length - 1]
44    } else if (!packageItem.children?.length && packageItem.dir !== targetDir && breadcrumb) {
45      let tabsItem = findNode(breadcrumb, node => node.type === 'column-tabs')
46      if (tabsItem && ctx.state.template.block.main) {
47        window.ctx.state.addPackageState = { from: 'column-tabs', insertIndex: -1 }
48      }
49    }
50  }
51  
52  afterRender() {
53    // console.log(`afterRender block`);
54    /**
55     * 检查当前tab内容是否为空
56    ------------------------------------------------------------ */
57    let breadcrumb = ctx.state.template.block.breadcrumb
58    if (breadcrumb) {
59      let tabsItem = findNode(breadcrumb, node => node.type === 'column-tabs')
60      if (tabsItem) {
61        let activeIndex = window.columnTabsState?.[tabsItem.attr_id]?.activeIndex || 0
62        const current_tab_panel = tabsItem.content.data[activeIndex].tab_panel
63        let $main = document.querySelector('[package-block-type="main"]')
64        // console.log(`afterRender block`, current_tab_panel);
65        
66        if (!current_tab_panel?.length) {
67          $main?.classList.add('fake-blank-package')
68        } else {
69          $main?.classList.remove('fake-blank-package')
70        }
71      }
72    }
73  }
74}