ibsp-fg-page 4.0.2

package/src/views/designer/hooks/keyboardModule/modules/cvx.js

@@ -0,0 +1,543 @@
+/**
+ * cv快捷键
+ * ctrl + c 复制 交互/组件/容器
+ * ctrl + v 粘贴 交互/组件/容器
+ * ctrl + x 剪切 交互/组件/容器
+ */
+import { useClipboard } from '@vueuse/core'
+import { useActiveElement } from '@vueuse/core'
+import { ElMessage } from 'element-plus'
+import CryptoJS from 'crypto-js'
+import { groupBy } from 'lodash-es'
+import { v4 } from 'uuid'
+
+import { useKeyboard } from '@/hooks/useKeyboard';
+import { registerCommand, executeCommand } from '@/models/command';
+import { detectOS } from '@/utils/index'
+// import useKeyboard from '@/views/designer/hooks/useKeyboard';
+import { DesignComponent } from '@/models/useComponentModel'
+// import interactiveDataPlus from '@/views/designer/modules/eventConfigModule/stores/interactiveDataPlus.js'
+import { getUuid, checkClipboardPermissions } from '@/utils'
+import { ActionType, historyStackModel } from '@/models/useHistoryStackModel'
+let hasClipboardPermission = false
+
+let pastedData = ''
+/** 获取页面选中的文字 */
+const getSelectedContent = () => window.getSelection().toString()
+
+/** 处理粘贴事件 */
+const handlePasteInteractive = (data, interactiveDataPlusStore) => {
+  // 如果粘贴的是动作------------------------------------------
+  if (data?.targetComponents || Array.isArray(data)) {
+    const actions = Array.isArray(data) ? data : [data]
+    actions.forEach(i => {
+      i.id = getUuid()
+      i.targetComponents?.forEach(item => {
+        item.id = getUuid()
+        item.active = false
+      })
+    })
+    const currentOperationWhereItem = interactiveDataPlusStore.currentOperationWhereItem
+    const currentActiveItem = interactiveDataPlusStore.currentActiveItem
+    if (currentActiveItem.targetComponents) {
+      const list = currentOperationWhereItem?.list
+      const currentId = currentActiveItem.id
+      const index = list.findIndex(item => item.id === currentId)
+      list.splice(index + 1, 0, ...actions)
+      interactiveDataPlusStore.currentActiveItem = list[index + 1]
+      interactiveDataPlusStore.setActiveItem(list[index + 1])
+    } else if (currentActiveItem.whereActions?.length) {
+      const emptyItem = currentActiveItem.whereActions.find(item => item.where.value === '')
+      emptyItem.list.push(...actions)
+      interactiveDataPlusStore.currentActiveEventId = currentActiveItem?.id
+      interactiveDataPlusStore.currentActiveItem = emptyItem.list.at(-1)
+      interactiveDataPlusStore.setActiveItem(emptyItem.list.at(-1))
+    } else if (currentActiveItem?.where) {
+      const list = currentActiveItem?.list
+      list.push(...actions)
+      interactiveDataPlusStore.currentActiveItem = list.at(-1)
+      interactiveDataPlusStore.setActiveItem(list.at(-1))
+    }
+    currentActiveItem.active = false
+
+    return
+  } else
+  // 如果粘贴的是条件 ------------------------------------------
+    if (data.where) {
+      data.id = getUuid()
+      data.list.forEach(item => {
+        item.id = getUuid()
+
+        item.targetComponents?.forEach(i => {
+          i.id = getUuid()
+        })
+      })
+      const currentOperationWhereItem = interactiveDataPlusStore.currentOperationWhereItem
+      const currentActiveItem = interactiveDataPlusStore.currentActiveItem
+      const eventItem = interactiveDataPlusStore.currentOperationEventItem
+      if (eventItem.whereActions?.length >= 2) {
+        data.where.value = 'elseIf'
+        data.where.label = '否则 如果'
+      }
+      if (currentActiveItem.whereActions?.length) {
+        const emptyIndex = currentActiveItem.whereActions.findIndex(item => item.where.value === '')
+        currentActiveItem.whereActions.splice(emptyIndex, 0, data)
+        interactiveDataPlusStore.currentActiveEventId = currentActiveItem?.id
+        currentActiveItem.active = false
+      } else if (currentActiveItem?.where) {
+        const index = eventItem.whereActions?.findIndex(item => item.id === currentActiveItem.id)
+        eventItem.whereActions.splice(index + 1, 0, data)
+        currentActiveItem.active = false
+      }
+
+
+    } else
+    // 如果粘贴的事件 ---------------------------------------------
+      if (data.whereActions) {
+        /** 更新id */
+        const updateListId = (list) => {
+          for (let index = 0; index < list.length; index++) {
+            const item = list[index];
+            item.id = getUuid()
+            const children = item?.list || item?.targetComponents
+            if (children) {
+              updateListId(children)
+            }
+          }
+        }
+        updateListId(data.whereActions)
+        const currentActiveItem = interactiveDataPlusStore.currentActiveItem
+        if (currentActiveItem.whereActions) {
+          const emptyIndex = currentActiveItem.whereActions.findIndex((item) => item.where.value === '')
+          const dataEmptyIndex = data.whereActions.findIndex(item => item.where.value === '')
+          currentActiveItem.whereActions[emptyIndex].list.push(...(data.whereActions[dataEmptyIndex]?.list || []))
+          data.whereActions.splice(dataEmptyIndex, 1)
+          currentActiveItem.whereActions.splice(emptyIndex, 0, ...data.whereActions)
+          if (currentActiveItem.whereActions?.length >= 2) {
+            currentActiveItem.whereActions.forEach((item) => {
+              if (item.where.value) {
+                item.where.value = 'elseIf'
+                item.where.label = '否则 如果'
+              }
+
+            })
+            const oneWhere = currentActiveItem.whereActions[0].where
+            oneWhere.value = 'if'
+            oneWhere.label = ' 如果'
+          }
+          interactiveDataPlusStore.currentActiveItem = currentActiveItem.whereActions
+          interactiveDataPlusStore.setActiveItem(currentActiveItem.whereActions)
+          interactiveDataPlusStore.currentActiveEventId = currentActiveItem?.id
+
+        }
+      }
+  interactiveDataPlusStore.currentActiveItem = data
+  interactiveDataPlusStore.setActiveItem(data)
+}
+
+const KEY = 'ibsp_copy_key'
+/** jia mi */
+function encryptMessage(message, key) {
+  let keyHex = CryptoJS.enc.Hex.parse(key);
+  let encrypted = CryptoJS.AES.encrypt(message, keyHex, { mode: CryptoJS.mode.ECB });
+  return encrypted.toString();
+}
+/** jie mi */
+function decryptMessage(ciphertext, key) {
+  // 将密钥转换为 WordArray 对象
+  let keyHex = CryptoJS.enc.Hex.parse(key);
+  // 使用 AES 解密
+  let decrypted = CryptoJS.AES.decrypt(ciphertext, keyHex, { mode: CryptoJS.mode.ECB });
+  return decrypted.toString(CryptoJS.enc.Utf8);
+}
+
+
+/**
+ * 键盘快捷键描述
+ */
+export const info = [
+  {
+    key: 'ctrl_C',
+    label: '复制',
+    description: '复制交互/组件/容器'
+  },
+  {
+    key: 'ctrl_V',
+    label: '粘贴',
+    description: '粘贴交互/组件/容器'
+  },
+  {
+    key: 'ctrl_X',
+    label: '剪切',
+    description: '剪切交互/组件/容器'
+  }
+]
+
+/** 获取粘贴板文本 */
+const getPasteText = async (isLocal)=>{
+  let text = ''
+  if (hasClipboardPermission) {
+    if (navigator.clipboard) {
+      text = await navigator.clipboard.readText()
+    } else if (localStorage.getItem) {
+      text = localStorage.getItem('ibsp_copy_text')
+      localStorage.setItem('ibsp_copy_text', '')
+    } else if (document.execCommand) {
+      const activeElement = useActiveElement()
+      activeEl = activeElement.value
+      isExecCommand = true
+      let textarea = document.getElementById('paste-text')
+      textarea.focus();
+      document.execCommand('paste');
+      await (() => new Promise(r => {
+        setTimeout(() => r(), 10)
+      }))();
+      text = textarea.value.trim();
+      textarea.value = '';
+    }
+  } else {
+    if (isLocal) {
+      text = localStorage.getItem('ibsp_copy_text')
+    } else {
+      text = pastedData
+    }
+    pastedData = null
+  }
+  return text
+}
+const copyComponent = (page, component)=>{
+
+
+  const isBatch = Array.isArray(component)
+  const res = isBatch ?
+    component.map(
+      item=>page.generateComponentPreviewData(page.store.componentStore.queryComponentDataTreePlat(item)) // 复制多个
+    ) :
+    page.generateComponentPreviewData(page.store.componentStore.queryComponentDataTreePlat(component)) // 复制单个
+
+  const source = JSON.stringify({
+    type: 'component',
+    data: res,
+    isBatch
+  })
+  const { copy } = useClipboard({ source, legacy: true })
+  copy(source)
+    .then((val)=>{
+      ElMessage.success('成功')
+      localStorage.setItem('ibsp_copy_text', source)
+      document.getElementById('ibspTextarea').focus();
+    })
+    .catch(e=>{
+      ElMessage.error('组件复制失败, 请更换浏览器， err: ', e.message)
+    })
+}
+const delComponent = (page, component) => {
+  if (component) {
+    executeCommand('deleteComponent', component, false)
+  }
+}
+const copyInteractive = (page, interactiveDataPlusStore)=>{
+  const currentActiveItem = interactiveDataPlusStore.currentActiveItem
+  const activeActionSet = interactiveDataPlusStore.activeActionSet
+  const source = JSON.stringify({
+    type: 'interactive',
+    data: activeActionSet.size >= 2 ? Array.from(activeActionSet) : currentActiveItem
+  })
+  const { copy } = useClipboard({ source, legacy: true })
+  copy(source).then((val)=>{
+    ElMessage.success('事件复制成功')
+  })
+    .catch(e=>{
+      ElMessage.error('事件复制失败, 请更换浏览器， err: ', e.message)
+    })
+}
+let prevNum = 1
+let prevId = ''
+const createComponent = (item, page, isFist = false)=>{
+  const source = item.source === 'systemApp' ? 'ibspMisComplib' : item.source
+  const configComponent = page.localComponents[source.lib]?.[source.id]
+  const params = {
+    component: item,
+    page
+  }
+  if ((source.type !== 'layout' || source.type !== 'container') && item.parentSectionId) {
+    params.component.position = {
+      ...item.position,
+      x: item.position.x,
+      y: item.position.y
+    }
+    if (isFist) {
+      // 相同组件多次复制偏移10px
+      if (item.componentMetaId === prevId) {
+        prevNum++
+      } else {
+        prevNum = 1
+        prevId = item.componentMetaId
+      }
+      params.component.position.x = item.position.x + 10 * prevNum
+      params.component.position.y = item.position.y + 10 * prevNum
+
+      const store = page.store.componentStore
+      const parent = store.queryComponentParent(item.id)
+      if (parent) {
+        const list = store.queryComponentChildrenData(parent.id)
+        params.component.name = params.component.name + list.filter(i=>i.label === item.label).length
+      }
+    }
+
+  }
+  const component = new DesignComponent(configComponent, {
+    ...params,
+    isPageInit: true
+  })
+
+  if (isFist) {
+    component.click(component)
+  }
+
+  return component;
+
+}
+const generateId = (id, suffixId)=>{
+  return id.replace(/.{13}$/, suffixId);
+}
+/** 生成组件 */
+const generateComponent = (data, {
+  suffixId,
+  parentId,
+  page,
+  component
+} = {}, callback)=>{
+  const [fistComponent, ...moreComponents] = data
+  const components = []
+  if (component.componentMetaId === 'section-layout' && (fistComponent.componentMetaId === 'section-layout')) {
+    ElMessage.warning('自由布局不支持嵌套复制')
+    return
+  }
+  fistComponent.parentId = parentId
+  if (!moreComponents?.length) {
+    const id = 'copy_' + v4()
+    fistComponent.id = id
+    fistComponent.uId = id
+  } else {
+    fistComponent.id = generateId(fistComponent.id, suffixId)
+    fistComponent.uId = generateId(fistComponent.id, suffixId)
+  }
+  const _fistComponent = createComponent(fistComponent, page, true)
+  components.push({
+    id: fistComponent.id,
+    index: page.store.componentStore.componentData.findIndex(a => a.id === fistComponent.id),
+    component: JSON.parse(JSON.stringify(_fistComponent.generatePreviewData()))
+  })
+  if (!moreComponents?.length) {
+    if (callback) {
+      callback(components);
+    }
+    return
+  }
+  moreComponents.forEach(item=>{
+    item.id = generateId(item.id, suffixId)
+    item.uId = generateId(item.id, suffixId)
+    if (item.parentId) {
+      item.parentId = generateId(item.parentId, suffixId)
+    }
+    let _componentItem = createComponent(item, page)
+    components.push({
+      id: item.id,
+      index: page.store.componentStore.componentData.findIndex(a => a.id === _componentItem.id),
+      component: JSON.parse(JSON.stringify(_componentItem.generatePreviewData()))
+    })
+  })
+  if (callback) {
+    callback(components);
+  }
+}
+
+const pasteComponent = (page, component, isLocal = false)=>{
+  getPasteText(isLocal).then((text)=>{
+    if (!text?.startsWith?.('{"type":"component')) {
+      return
+    }
+    try {
+      let parentId = null;
+
+      const content = JSON.parse(text)
+      const data = content.isBatch ? content.data : [content.data]
+      if (!data?.length) return
+      if (content.type === 'component') {
+        if (!component?.active) {
+
+          component = content.isBatch ? data[0]?.[0] : data[0]
+        }
+        if (!component) return
+        parentId = component.type === 'layout' ? component.id : component.parentId
+        const suffixId = Date.now()
+
+        let components = [];
+        data.forEach(item =>{
+          generateComponent(item, {
+            suffixId,
+            parentId,
+            page,
+            component
+          }, (_components) => {
+            components = [...components, ..._components];
+          })
+        })
+
+        historyStackModel.push({
+          actionType: ActionType.CopyComponent,
+          changes: components,
+          label: '复制组件'
+        })
+
+      }
+    } catch (e) {
+      console.error('粘贴失败: ', e.message)
+    }
+  })
+}
+const pasteInteractive = (page, interactiveDataPlusStore)=>{
+  getPasteText().then((text)=>{
+    if (!text?.startsWith?.('{"type":"config-interactive')) {
+      return
+    }
+    try {
+      const content = JSON.parse(text)
+      if (content.type === 'interactive') {
+        const data = content.data
+        handlePasteInteractive(data, interactiveDataPlusStore)
+      }
+    } catch (e) {
+      console.error('粘贴失败: ', e.message)
+    }
+  })
+}
+
+
+export default (page)=>{
+  const componentStore = page.store.componentStore
+  const interactiveDataPlusStore = {}
+  const equipment = detectOS()
+
+  const applyClipboard = (e, val)=>{
+    if (getSelectedContent() || !val) {
+      return
+    }
+    if (interactiveDataPlusStore.currentActiveItem) {
+      // eslint-disable-next-line no-unused-expressions
+      e === 1 ? copyInteractive(page, interactiveDataPlusStore) : pasteInteractive(page, interactiveDataPlusStore)
+      return
+    }
+    if (e === 1) {
+      const component = componentStore.activeComponent || (componentStore.selections.length ? componentStore.selections : null)
+      if (component) {
+        copyComponent(page, component)
+      }
+      return
+    }
+
+    if (componentStore.activeComponent) {
+      pasteComponent(page, componentStore.activeComponent)
+    }
+
+  }
+
+  registerCommand('copyComponent', (components)=>{
+    copyComponent(page, components || componentStore.activeComponent)
+  })
+  registerCommand('pasteComponent', ()=>{
+    pasteComponent(page, componentStore.activeComponent, true)
+  })
+  registerCommand('cutComponent', (components) => {
+    copyComponent(page, components || componentStore.activeComponent)
+    delComponent(page, components || componentStore.activeComponent)
+  })
+  registerCommand('component.create', (data, parentId, isBatch = false)=>{
+    if (!Array.isArray(data)) return
+    if (isBatch) {
+      data.forEach((item, index)=>{
+        const suffixId = Date.now() + index
+        generateComponent(item, {
+          suffixId,
+          parentId,
+          page
+        })
+      })
+      return
+    }
+    const suffixId = Date.now()
+    generateComponent(data, {
+      suffixId,
+      parentId,
+      page
+    })
+  })
+  if (equipment === 'MacOS') {
+    // useKeyboard().onKey('Command_C', (val) => {
+    //   applyClipboard(1, val)
+    // })
+    // useKeyboard().onKey('Command_V', (val) => {
+    //   applyClipboard(2, val)
+    // })
+    // useKeyboard().onKey('Command_X', (val) => {
+    //   applyClipboard(1, val)
+    //   if (val) {
+    //     delComponent(page, componentStore.activeComponent || componentStore.selections)
+    //   }
+    // })
+
+
+  }
+
+  useKeyboard()
+    .onKey('Command_C')
+    .onKey('Ctrl_C')
+    .selector('#app-designer-container')
+    .filter(() => {
+      return !getSelectedContent()
+    })
+    .subscribe((e) => {
+      applyClipboard(1, true)
+    })
+  useKeyboard()
+    .onKey('Command_X')
+    .onKey('Ctrl_X')
+    .selector('#app-designer-container')
+    .subscribe(() => {
+      applyClipboard(1, true)
+      delComponent(page, componentStore.activeComponent || componentStore.selections)
+    })
+
+  useKeyboard(null, null, {
+    preventDefault: false
+  })
+    .onKey('Command_V')
+    .onKey('Ctrl_V')
+    .selector('#app-designer-container')
+    .subscribe((e) => {
+      applyClipboard(2, true)
+    })
+
+
+  setTimeout(() => {
+    checkClipboardPermissions().then((val) => {
+      hasClipboardPermission = val
+      if (!hasClipboardPermission) {
+        document.getElementById('ibspTextarea').addEventListener('paste', (evt
+        ) => {
+          evt.preventDefault();
+          evt.stopPropagation();
+          let clipboardData = evt.clipboardData || window.clipboardData;
+          pastedData = clipboardData.getData('Text');
+          pasteComponent(page, componentStore.activeComponent, true)
+
+        })
+      } else {
+        document.getElementById('ibspTextarea').style.display = 'none';
+      }
+    })
+  }, 1000);
+
+
+}

package/src/views/designer/hooks/keyboardModule/modules/del.js

@@ -0,0 +1,47 @@
+import useKeyboard from '@/views/designer/hooks/useKeyboard';
+import { executeCommand } from '@/models/command';
+
+/*
+* 键盘快捷键描述
+*/
+export const info = [
+  {
+    key: 'delete',
+    name: '删除',
+    desc: '删除选中的组件/容器/交互等'
+  },
+]
+/**
+ * 删除组件， 如果有激活的组件，删除激活的组件，如果没有激活的组件，删除选中的组件
+ */
+const deleteComponent = (page)=>{
+  const componentStore = page.store.componentStore
+  let components = []
+  const activeComponent = componentStore.activeComponent
+  if (activeComponent) {
+    components = [activeComponent]
+  } else {
+    const selectComponents = componentStore.componentData.filter(item=>item.selectActive)
+    if (selectComponents.length > 1) {
+      components = selectComponents
+    }
+  }
+  if (components.length) {
+    executeCommand('deleteComponent', components)
+  } else {
+    const activeComponent = page.store.componentStore.activeComponent
+    if (activeComponent) {
+      executeCommand('deleteComponent', activeComponent)
+    }
+  }
+
+}
+
+export default (page)=>{
+  useKeyboard().onKey('Delete', (val)=>{
+    if (val) {
+      deleteComponent(page)
+    }
+  })
+
+}

package/src/views/designer/hooks/keyboardModule/modules/direction.js

@@ -0,0 +1,38 @@
+import { computed } from 'vue';
+
+import { executeCommand } from '@/models/command';
+const move = (components, p, o, e)=>{
+  e.preventDefault()
+  executeCommand('group.mark.close')
+  for (const item of components) {
+    item.position[p] = item.position[p] + o
+  }
+}
+export default (page)=>{
+  const componentStore = page.store.componentStore
+  const components = computed(()=>{
+    const c = componentStore.activeComponent ? [componentStore.activeComponent] : componentStore.componentData.filter(item=>item.selectActive)
+    return c.flatMap(component=> componentStore.queryComponentDataTreePlat(component))
+  })
+  document.addEventListener('keydown', (e)=>{
+    if (!components.value.length || document.activeElement?.tagName === 'INPUT') return;
+    let num = e.shiftKey ? 10 : 1
+    switch (e.key) {
+    case 'ArrowUp':
+      move(components.value, 'y', -num, e)
+      break;
+    case 'ArrowDown':
+      move(components.value, 'y', +num, e)
+      break;
+    case 'ArrowLeft':
+      move(components.value, 'x', -num, e)
+      break;
+    case 'ArrowRight':
+      move(components.value, 'x', +num, e)
+      break;
+    default:
+      break;
+    }
+  })
+
+}

package/src/views/designer/hooks/keyboardModule/modules/redo.js

@@ -0,0 +1,22 @@
+import { historyStackModel } from '@/models/useHistoryStackModel';
+// import useKeyboard from '@/views/designer/hooks/useKeyboard';
+import { useKeyboard } from '@/hooks/useKeyboard';
+
+export default (page)=>{
+  useKeyboard()
+    .onKey('Ctrl_Shift_Z')
+    .onKey('Command_Shift_Z')
+    .selector('#app-designer-container')
+    .subscribe(() => {
+      historyStackModel.redo(page);
+    })
+
+  useKeyboard()
+    .onKey('ctrl_y')
+    .onKey('Command_Y')
+    .selector('#app-designer-container')
+    .subscribe(() => {
+      historyStackModel.redo(page);
+    })
+
+}

package/src/views/designer/hooks/keyboardModule/modules/undo.js

@@ -0,0 +1,12 @@
+import { historyStackModel } from '@/models/useHistoryStackModel';
+import { useKeyboard } from '@/hooks/useKeyboard';
+
+export default (page)=>{
+  useKeyboard()
+    .onKey('Ctrl_Z')
+    .onKey('Command_Z')
+    .selector('#app-designer-container')
+    .subscribe(() => {
+      historyStackModel.undo(page)
+    })
+}

package/src/views/designer/hooks/useConfigComponent.js

@@ -0,0 +1,28 @@
+import { defineAsyncComponent, markRaw } from 'vue';
+
+import configModule from '@/views/designer/modules/ibsp-config';
+
+export const configComponentMap = {}
+
+/**
+ * 初始化配置项组件
+ * @date 2024/1/28 - 20:39:25
+ * @async
+ */
+export const initConfigComponent = async () => {
+  for (const key in configModule) {
+    const component = configModule[key];
+    configComponentMap[key] = markRaw(defineAsyncComponent(() => component))
+  }
+
+}
+
+/**
+ * 获取配置项组件
+ * @date 2024/1/28 - 20:39:44
+ * @param {String} key 组件Key
+ */
+export const getConfigComponent = (key) => {
+  return configComponentMap[key];
+}
+