ibsp-fg-page 4.0.2

package/src/views/designer/modules/config-interactive/src/components/IbspInteractivePanel.vue

@@ -0,0 +1,253 @@
+<script setup>
+import { reactive, ref, computed, watch, onBeforeUnmount, onMounted } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import { Tabs } from '@nextui'
+
+import SelectInteractiveList from './SelectInteractiveList.vue'
+import IbspInteractivceList from './IbspInteractivceList.vue'
+import ConfigActionIndex from './ConfigActionIndex.vue'
+
+import { inject } from '@/models/service'
+
+const props = defineProps({
+  interactionList: {
+    type: Array,
+    default: () => ([
+    ])
+  },
+  actionMap: {
+    type: Object,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  },
+  page: {
+    type: Object,
+    default: () => ({})
+  },
+  actionData: {
+    type: Array,
+    default: () => ([])
+  },
+  eventData: {
+    type: Array,
+    default: () => ([])
+  }
+})
+const target = computed(()=>{
+  if (props.activeComponent?.id) {
+    return props.activeComponent
+  }
+  return props.page
+})
+const currentInteraction = ref(cloneDeep(props.interactionList))
+const interactiveService = inject('interactive')
+const currentTabId = ref('event')
+const currentAction = ref(null)
+const currentActionTarget = ref(null)
+let clickWhereAction = null
+const data = reactive([
+  { label: '事件', id: 'event' },
+  { label: '动作', id: 'action' }
+])
+
+const getListData = computed(() => {
+  if (currentTabId.value === 'event') {
+    return props.eventData
+  }
+  return props.actionData
+})
+
+const clickActionItem = (target, action, whereAction) => {
+  target.updating = false
+  currentAction.value = action
+  currentActionTarget.value = target
+  clickWhereAction = whereAction
+}
+const clickAddTarget = (target, action) => {
+  currentAction.value = action
+  currentActionTarget.value = target
+}
+const clickAction = (whereAction, action) => {
+  clickWhereAction = whereAction
+}
+
+const onSelectInteractive = (item) => {
+  if (currentTabId.value === 'event') {
+    interactiveService.addInteractiveEvent(item, currentInteraction.value, props.activeComponent)
+    currentTabId.value = 'action'
+  } else if (currentTabId.value === 'action') {
+    console.log('currentActionTarget', clickWhereAction);
+    const actionItem = (interactiveService.currentActiveConfig.type === 'action' || interactiveService.currentActiveConfig.type === 'targetComponent') && clickWhereAction ? interactiveService.addInteractiveAction(item, clickWhereAction) : interactiveService.addInteractiveAction(item)
+    currentAction.value = actionItem
+    currentActionTarget.value = actionItem.targetComponents.find(item=>item.updating)
+    currentActionTarget.value.updating = false
+  }
+}
+const delConfigCallback = (type) => {
+  console.log('delConfigCallback', type);
+  if (type === 'targetComponent') {
+    currentAction.value = null
+    currentActionTarget.value = null
+  }
+}
+
+watch(()=>interactiveService.currentActiveConfig.data?.id, (id)=>{
+  if (interactiveService.currentActiveConfig.type !== 'targetComponent' && currentActionTarget.value?.id !== id) {
+    currentActionTarget.value = null
+    currentAction.value = null
+  }
+})
+
+onMounted(()=>{
+  interactiveService.currentPanelState = true
+  const current = interactiveService.setPanelActive(currentInteraction.value)
+  if (interactiveService.panelType === 'targetComponent') {
+    currentAction.value = current.action
+    currentActionTarget.value = current.target
+    current.target.updating = false
+  }
+})
+
+onBeforeUnmount(()=>{
+  interactiveService.currentPanelState = false
+  interactiveService.clearPanelIds()
+  interactiveService.panelHistoryStack.clear()
+})
+
+defineExpose({
+  getInteractive: ()=>{
+    return currentInteraction.value
+  }
+})
+
+</script>
+
+<template>
+  <div class="ibsp-interactive-panel"
+       id="ibsp-interactive-panel"
+  >
+    <div class="interactive-list-panel">
+      <div class="header">
+        <Tabs v-model="currentTabId" :data="data" />
+      </div>
+      <div class="main">
+        <SelectInteractiveList
+          @select="onSelectInteractive"
+          :data="getListData"
+        />
+      </div>
+    </div>
+    <div class="interactive-action-panel">
+      <div class="header">
+        <span>交互配置</span>
+      </div>
+      <div class="main">
+        <IbspInteractivceList
+          :page="page"
+          :interaction="currentInteraction"
+          :active-component="activeComponent"
+          :actionMap="actionMap"
+          @clickActionItem="clickActionItem"
+          @clickActionItemName="clickActionItem"
+          @clickAddTarget="clickAddTarget"
+          @clickAction="clickAction"
+          :delConfigCallback="delConfigCallback"
+          :isOpenActionConfig="false"
+        />
+      </div>
+    </div>
+    <div class="action-info">
+      <div class="header">
+        <span>动作配置</span>
+      </div>
+      <div class="main">
+        <template v-if="currentAction?.key" >
+          <ConfigActionIndex :action-item="currentAction"
+                             @click.stop="()=>{}"
+                             :page="page"
+                             :key="currentActionTarget.id"
+                             :allActionConfigMap="actionMap"
+                             :actionComponentItem="currentActionTarget"
+                             :isOpenActionConfig="false"
+                             :activeComponent="activeComponent" />
+        </template>
+        <el-skeleton v-else />
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-interactive-panel{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    padding:   0 10px;
+    border-top: 1px solid var(--theme-border-color);
+    border-bottom: 1px solid var(--theme-border-color);
+    >div{
+
+        height: 100%;
+        .header{
+            height: 48px;
+            border-bottom: 1px solid var(--theme-border-color);
+            line-height: 48px;
+        }
+        .main{
+            height: calc(100% - 48px);
+            overflow: auto;
+            padding: 10px
+        }
+    }
+    .action-info{
+        width: 270px;
+        .header{
+          padding: 0 10px;
+        }
+    }
+    .interactive-action-panel{
+        flex: 1;
+        border-right: 1px solid var(--theme-border-color);
+        overflow: auto;
+        .header{
+          padding: 0 10px;
+        }
+        .main{
+          // 滚动条
+          &::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+            border-radius: 3px;
+          }
+          &::-webkit-scrollbar-thumb {
+            background-color: var(--theme-border-color);
+            border-radius: 3px;
+          }
+          &::-webkit-scrollbar-track {
+            background-color: var(--theme-bg);
+        }
+      }
+    }
+    .interactive-list-panel{
+        width: 260px;
+        .header{
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          :deep(.ibsp-next-ui-tabs){
+            width: 95% !important;
+          }
+        }
+        .main{
+          padding: 0;
+        }
+
+        border-right: 1px solid var(--theme-border-color);
+    }
+}
+
+</style>

package/src/views/designer/modules/config-interactive/src/components/PopUpContainer.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+  position: {
+    type: Object,
+    default: () => ({})
+  },
+  width: {
+    type: Number,
+    default: 300
+  },
+  height: {
+    type: Number,
+    default: 500
+  }
+})
+
+const visible = defineModel()
+
+const style = computed(() => {
+  // 判断y是否超出屏幕
+  let y = props.position.y
+  // console.log('props.position.y', props.position);
+  // if (props.position.y + parseInt(props.height) > window.innerHeight) {
+  //   y = window.innerHeight - parseInt(props.height)
+  // }
+  return {
+    width: props.width + 'px',
+    height: props.height + 'px',
+    left: `${props.position.x}px`,
+    top: `${y}px`,
+    position: 'fixed',
+    zIndex: 4000
+  }
+})
+const onClick = () => {
+  visible.value = false
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" :style="style">
+      <slot></slot>
+      <div @click.stop="onClick" class="mark"></div>
+    </div>
+
+  </Teleport>
+</template>
+
+<style scoped>
+  .mark {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.15);
+    z-index: 3999;
+  }
+</style>

package/src/views/designer/modules/config-interactive/src/components/SelectInteractiveList.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { ref, onBeforeUnmount, computed, onMounted } from 'vue';
+
+import IbspSearchInput from '@/components/ibsp/IbspSearchInput.vue';
+const props = defineProps({
+  data: {
+    type: Array,
+    default: ()=>([
+      {
+        id: 'componentAction',
+        category: '组件动作',
+        list: [
+          {
+            label: 'Action1',
+            key: 'ClosePopup',
+          }
+        ]
+      }
+    ])
+  },
+  clickClose: {
+    type: Boolean,
+    default: true
+  }
+})
+const searchValue = ref('')
+const emit = defineEmits(['close', 'select'])
+
+
+const data = computed(() => {
+  return props.data.map(item => {
+    return {
+      ...item,
+      list: item.list.filter(action => {
+        return action.label.includes(searchValue.value)
+      })
+    }
+  }).filter(item => {
+    return item.list.length > 0
+  })
+})
+
+</script>
+
+<template>
+  <div class="select-interactive-list">
+    <header>
+      <IbspSearchInput initFocus v-model="searchValue" />
+    </header>
+    <main>
+      <div v-for="item in data" :key="item.id">
+        <div class="select-interactive-category">
+          <el-divider>{{ item.category }}</el-divider>
+          <div class="select-interactive-item"
+               v-for="action in item.list"
+               :data-disabled="action.disabled"
+               @click.stop="()=>emit('select', action)"
+               :key="action.key">
+            <div class="select-interactive-item">
+              <span>{{ action.label }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.select-interactive-list{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--theme-bg);
+    position: relative;
+    z-index: 4000;
+  overflow: auto;
+  // 滚动条
+  &::-webkit-scrollbar {
+    width: 6px;
+
+  }
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+    padding: 10px;
+    header{
+        height: 40px;
+        width: 100%;
+    }
+    main{
+        flex: 1;
+        [data-disabled="true"]{
+          cursor: not-allowed;
+          filter: grayscale(1);
+          pointer-events: none;
+         opacity: 0.5;
+        }
+         .select-interactive-item{
+        padding: 3px;
+        cursor: pointer;
+           border-radius: 4px;
+
+        &:hover{
+          background-color: var(--theme-gl-bg);
+          color: var(--theme-gl-color);
+        }
+      }
+    }
+}
+</style>

package/src/views/designer/modules/config-interactive/src/hooks/useEventAction.js

@@ -0,0 +1,61 @@
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+/**
+ * @description 事件动作hooks
+ */
+export default () => {
+
+
+  /**
+   *  确认删除弹窗
+   * @param callbackFn 成功回调函数
+   * @param errMessage 错误提示信息
+   * @param errCallbackFn 错误回调函数
+   * @param tipMessage 提示信息
+   * @param title 标题
+   * @param type 类型
+   */
+  const confirmDeletePopup = ({
+    successCallbackFn = () => {
+    },
+    errCallbackFn = null,
+    errMessage = null,
+    tipMessage = '请确认删除',
+    title = '提示',
+    type = 'warning',
+  }) => {
+    ElMessageBox({
+      title,
+      message: tipMessage,
+      type,
+      showCancelButton: true
+    })
+      .then(() => {
+        successCallbackFn()
+        ElMessage.success('删除成功');
+      })
+      .catch((err) => {
+        if (err === 'cancel') {
+          return;
+        }
+        if (errCallbackFn) {
+          errCallbackFn()
+        }
+        if (errMessage) {
+          ElMessage.error(errMessage);
+          return
+        }
+        ElMessage.error('删除失败: ', err.message);
+      })
+  }
+
+
+  return {
+    // categoryContainerComponents,
+    // activeComponent,
+    // interactionDataList,
+    confirmDeletePopup,
+  }
+
+
+}

package/src/views/designer/modules/config-interactive/src/hooks/useInteractiveContext.ts

@@ -0,0 +1,77 @@
+import { inject } from '@/models/service'
+type Context = IBSP.ContextMenu.MenuItemOption & {
+    id: string
+  }
+  type ActionConfigType = 'event' | 'where' | 'action' | 'targetComponent'
+const contexts:Context[] = [
+  {
+    id: 'delete',
+    key: 'Del',
+    label: '删除',
+    value: (type:ActionConfigType, options:any) => {
+      return inject('interactive').delInteractiveConfig(type, options)
+    },
+    icon: {
+      type: 'svg',
+      value: '删除'
+    }
+  },
+  {
+    id: 'divider',
+    divider: true
+  },
+  {
+    id: 'copy',
+    key: 'Ctrl+C',
+    label: '复制',
+    value: (type:ActionConfigType, options:any) => {
+      return inject('interactive').copyInteractiveConfig(type, options)
+    },
+    icon: {
+      type: 'svg',
+      value: '复制'
+    },
+  },
+  {
+    id: 'paste',
+    key: 'Ctrl+V',
+    label: '粘贴',
+    value: (type:ActionConfigType, options:any) => {
+      return inject('interactive').pasteInteractiveConfig(type, options)
+
+    },
+    icon: {
+      type: 'svg',
+      value: '粘贴'
+    },
+  },
+  {
+    id: 'cut',
+    key: 'Ctrl+X',
+    label: '剪切',
+    value: (type:ActionConfigType, options:any) => {
+      return inject('interactive').cutInteractiveConfig(type, options)
+    },
+    icon: {
+      type: 'svg',
+      value: '剪切'
+    },
+  },
+]
+
+export default (type:ActionConfigType)=>{
+
+  switch (type) {
+  case 'event':
+    return contexts.filter(item=>['delete'].includes(item.id))
+  case 'where':
+    return contexts.filter(item=>['delete'].includes(item.id))
+  case 'action':
+    return contexts.filter(item=>['delete'].includes(item.id))
+  case 'targetComponent':
+    return contexts.filter(item=>['delete'].includes(item.id))
+  default:
+    return []
+  }
+
+}