ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/layout/flexLayout/index.vue

@@ -0,0 +1,344 @@
+<script setup>
+import { computed, inject, onMounted, ref, onBeforeMount } from 'vue';
+
+import {MiddlewareComponentDes as ComponentMiddleware} from '@ibsp-component-lib'
+
+import useComponentStore from '@/stores/useComponentStore';
+import { DesignComponent } from '@/models/useComponentModel'
+
+const props = defineProps({
+  //  容器对象
+  component: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  page: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  eventValues: {
+    type: Object,
+    default: () => ({})
+  },
+  propsValues: {
+    type: Object,
+    default: () => ({})
+  },
+  app: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+// const res = props.page.useDataModel(props.propsValues.model, {
+//   watch() {
+//     return props.propsValues.model
+//   }
+// })
+// console.log(res);
+const componentStore = useComponentStore();
+
+const $bus = inject('$bus');
+const updateDirectionTooltip = inject('updateDirectionTooltip') || window.updateDirectionTooltip;
+
+const layoutContainerRef = ref(null);
+
+const dragEnterActive = ref(false)
+
+onMounted(() => {
+  props.component.dom = layoutContainerRef.value;
+});
+
+
+/**
+ *  处理页面组件之间进行拖拽
+ * @param {*} e
+ * @param {*} item
+ */
+const handleComponentDrag = (e, exchangeComponentId) => {
+  if (!exchangeComponentId) return
+  if (props.component.draggableComponent === exchangeComponentId) {
+    e.currentTarget.style.opacity = 1
+    e.currentTarget?.children.forEach(item => {
+      if (props.component.draggableComponent === item.id) {
+        item.style.opacity = 1
+      }
+    })
+  }
+  const exchangeComponent = componentStore.componentDataMap[exchangeComponentId]
+  exchangeComponent.parentId = props.component.id
+  exchangeComponent.setActiveComponent()
+
+  $bus.emit('updateComponetToolbar')
+};
+
+/**
+ * 处理拖拽过来的组件
+ * @param {*} e 拖拽事件
+ */
+const onDrop = (e) => {
+  console.log('onDrop', props.component.name);
+
+  dragEnterActive.value = false
+  let layoutID = e.dataTransfer.getData('layoutID')
+  const exchangeComponentId = e.dataTransfer.getData('exchangeComponentId')
+  const componentSource = e.dataTransfer.getData('componentSource');
+  if (!layoutID && !exchangeComponentId && !componentSource) {
+    return
+  }
+  handleComponentDrag(e, exchangeComponentId) // 处理页面组件之间进行拖拽
+
+  if (layoutID) {
+    let dom = componentStore.componentDataMap[layoutID]?.dom
+    if (!dom) return
+    setTimeout(() => {
+      dom.classList.remove('is-hover')
+    }, 10);
+  }
+  props.component.draggableComponent = ''
+  /**
+   * 处理组件库拖拽过来的组件
+   */
+
+  if (!componentSource) return;
+  const source = JSON.parse(componentSource);
+  let configComponent = props.page.localComponents[source.lib]?.[source.id]
+  const _ = new DesignComponent(configComponent, {
+    parentId: source.id !== 'other-popup' ? props.component.id : props.page.store.componentStore.componentData[0]?.id,
+    page: props.page,
+    mountedCallbackFn: () => {
+      updateDirectionTooltip()
+    }
+  })
+
+
+};
+
+
+let targetComponent = ref({ left: 0, top: 0, right: 0, bottom: 0 })
+
+
+// #region  **************  容器内组件进行拖拽  **************
+
+/** 组件拖拽开始 */
+const onDragstart = (e, item) => {
+  e.dataTransfer.setData('exchangeComponentId', item.id)
+  e.dataTransfer.setData('layoutID', props.component.id)
+  // e.target.style.opacity = 0.001
+  props.component.draggableComponent = item.id
+};
+
+/**
+ * 拖拽进入容器
+ */
+const onDragEnter = () => {
+  dragEnterActive.value = true
+}
+/**
+ * 拖拽离开容器
+ */
+const onDragleave = () => {
+  dragEnterActive.value = false
+}
+const OnDrag = (e, item) => {
+  let dom = componentStore.componentDataMap[item.parentId]?.ref?.dom
+  dom.classList.add('is-hover')
+}
+// #endregion
+
+
+onMounted(() => {
+  updateDirectionTooltip()
+})
+
+const layoutChildren = computed(() => {
+  return componentStore.queryComponentChildrenData(props.component.id)
+})
+
+const onDragOver = () => {
+  setTimeout(() => {
+    updateDirectionTooltip()
+  }, 50);
+
+}
+
+onBeforeMount(()=>{
+  props.eventValues?.onBeforeMount?.()
+})
+
+</script>
+
+<template>
+  <div :id="component.id"
+       ref="layoutContainerRef"
+       :class="{
+         'layout-container': true,
+         'drag-active': dragEnterActive,
+         'active': component.active,
+         [`layout-${component?.id}`]: true
+       }"
+       :data-parentid="component.parentId"
+       :style="component.getComponentStyles()"
+       @dragenter.stop="onDragEnter"
+       @dragleave.stop="onDragleave"
+       @drop.stop="onDrop"
+       @click.stop="eventValues.click?.()"
+  >
+
+    <template v-for="item in layoutChildren" :key="item.id">
+
+      <template v-if="item.type === 'layout'">
+        <ComponentMiddleware
+          :component="item"
+          :page="page"
+          :app="app"
+          :disableClick="item.componentMetaId === 'section-layout'"
+        />
+      </template>
+
+      <template v-else-if="item.componentMetaId === 'formContainer'">
+        <ComponentMiddleware
+          :component="item"
+          :page="page"
+          :app="app"
+        />
+      </template>
+
+      <template v-else-if="item.id === 'other-popup'">
+        <Teleport to="#app-preview-wrap">
+          <ComponentMiddleware
+            :component="item"
+            :page="page"
+            :app="app"
+            @dragstart="onDragstart($event, item)"
+            :key="item?.key || item?.id"
+          />
+        </Teleport>
+      </template>
+
+      <template v-else>
+        <ComponentMiddleware
+          v-on="item?.eventInstance?.events"
+          :component="item"
+          :page="page"
+          :app="app"
+          :key="item?.key || item?.id"
+          :style="{
+            '--targetLeft': targetComponent.left,
+            '--targetTop': targetComponent.top,
+            '--targetWidth': item.contentContainer?0: targetComponent.width,
+            '--targetHeight': targetComponent.height,
+            '--targetRight': targetComponent.right,
+            '--targetBottom': targetComponent.bottom
+          }"
+          :class="{
+            'component-container': false,
+            'component-active': item.active
+          }"
+          @dragstart="onDragstart($event, item)"
+          @drag="OnDrag($event, item)"
+          @dragover="onDragOver"
+        />
+      </template>
+    </template>
+
+  </div>
+</template>
+
+<style lang="less" scoped>
+.layout-container {
+  padding: var(--container-padding) !important;
+  // border: var(--container-border-width) dashed #c9cdd4;
+  outline-style: dashed;
+  outline-width: var(--container-border-width);
+  gap: var(--container-padding);
+  outline-color: #848282;
+  // transition: ibsp-outline 0.3s;
+  position: relative;
+
+  &:not(:has(:hover)):hover {
+    outline-color: #F77234;
+    outline-width: 2px;
+    outline-style: solid;
+    z-index: 11;
+  }
+
+  &.is-hover {
+    outline-color: #F77234;
+    outline-width: 1px;
+    outline-style: solid;
+    z-index: 11;
+  }
+}
+
+.component-container {
+  // gap: var(--container-padding);
+  outline-style: dashed;
+  outline-width: 1px;
+  outline-color: var(--theme-font-color);
+
+
+  &::after {
+    position: absolute;
+    left: var(--targetLeft);
+    top: var(--targetTop);
+    bottom: var(--targetBottom);
+    right: var(--targetRight);
+    // padding: var(--container-padding) !important;
+    width: var(--targetWidth);
+    height: var(--targetHeight);
+    z-index: 8;
+    content: "";
+  }
+
+  &.is-hover {
+    outline-color: #1784FC;
+    outline-width: 1px;
+    outline-style: solid;
+  }
+}
+
+.component-active {
+  // border-color: var(--theme-gl-bg) !important;
+  outline-color: #1784FC;
+  outline-width: 2px;
+  outline-style: solid;
+
+  &.is-hover {
+    outline-width: 2px;
+  }
+}
+
+.drag-active {
+
+  // ibsp-outline: 1px solid red !important;
+  // content: '';
+  // position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    width: calc(100% - 10px);
+    height: 3px;
+    left: 5px;
+    top: 3px;
+    background-color: var(--theme-gl-bg);
+  }
+}
+
+.active {
+  // border: 1px solid var(--theme-gl-bg);
+  // border-color: var(--theme-gl-bg) !important;
+  outline: 2px solid #F77234;
+  gap: var(--container-padding);
+  z-index: 9;
+
+  &.is-hover {
+    outline-color: #F77234;
+    outline-width: 2px;
+    outline-style: solid;
+    z-index: 10;
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/layout/grid-drag-layout/config.js

@@ -0,0 +1,26 @@
+import Index from './index.vue'
+export default {
+  id: 'ibsp-grid-drag-layout',
+  label: '网格布局',
+  icon: {
+    type: 'svg',
+    value: '组件库'
+  },
+  sort: 3,
+  type: 'layout',
+  visible: false,
+  isContainer: true,
+  setup: ({ store })=>{
+    return {
+      config: {
+        props: [
+        ]
+      }
+
+    }
+
+  },
+  render({ component }) {
+    return Index
+  }
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/layout/grid-drag-layout/hooks/useDragGrid.ts

@@ -0,0 +1,3 @@
+export default ()=>{
+
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/layout/grid-drag-layout/index.vue

@@ -0,0 +1,40 @@
+<script setup>
+import useDragGrid from './hooks/useDragGrid'
+useDragGrid()
+</script>
+
+<template>
+  <div class="grid-drag-layout" >
+    <div class="grid-item"
+         v-for="i in 3"
+         :key="i">
+      <h3>{{ i }}</h3>
+    </div>
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+  .grid-drag-layout {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(-90deg, var(--theme-border-color) 1px, transparent 1px) 0% 0% / 100px 100px, linear-gradient(var(--theme-border-color) 1px, transparent 1px) 0% 0% / 100px 100px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
+    grid-gap: 10px;
+
+    .grid-item{
+
+      border: 1px solid #ccc;
+      background-color: #fff;
+      padding: 20px;
+      cursor: move;
+      transition: background-color 0.3s ease;
+      &:hover {
+        background-color: #ddd;
+      }
+    }
+  }
+</style>

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/layout/gridLayout/config.ts

@@ -0,0 +1,36 @@
+import Render from './render.vue'
+
+export default {
+  id: 'gridContainer', // id必须是唯一
+  label: '栅格布局',
+  icon: {
+    type: 'svg', // 图标类型
+    value: '栅格布局' // 图标值
+  },
+  position: {
+    h: 'auto'
+  },
+  sort: 1,
+  type: 'layout',
+  isContainer: true,
+  setup: ({ store }) => {
+    return {
+      config: {
+        props: [
+          {
+            label: '行间隔',
+            componentType: 'InputNumber',
+            componentProps: {
+              min: 0
+            },
+            key: 'gap',
+            value: 10
+          }
+        ]
+      }
+    }
+  },
+  render({ component }) {
+    return component.mode === 'Design' ? import('./index.vue') : Render
+  }
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/layout/gridLayout/gird-row/config.ts

@@ -0,0 +1,37 @@
+import Render from './render.vue';
+
+export default {
+  id: 'gridRowContainer', // id必须是唯一
+  label: '栅格行',
+  icon: {
+    type: 'svg', // 图标类型
+    value: '表格行' // 图标值
+  },
+  position: {
+    h: 'auto'
+  },
+  sort: 1,
+  type: 'layout',
+  visible: false,
+  isContainer: true,
+  setup: ({ store })=>{
+    return {
+      config: {
+        props: [
+          {
+            label: '列间隔',
+            componentType: 'InputNumber',
+            componentProps: {
+              min: 0
+            },
+            key: 'gutter',
+            value: 10
+          }
+        ]
+      }
+    }
+  },
+  render({ component }) {
+    return component.mode === 'Design' ? import('./index.vue') : Render
+  }
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/layout/gridLayout/gird-row/index.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { GridRowProps } from '../types/gridProps';
+import type { GridColItem } from '../types/grid';
+
+import {MiddlewareComponentDes as ComponentMiddleware} from '@ibsp-component-lib';
+import { DesignComponent } from '@models/useComponentModel';
+import { useComponentStore } from '@/stores';
+
+const props = defineProps(GridRowProps);
+
+const componentStore = useComponentStore();
+
+const rowChildren = computed<GridColItem<IBSP.IComponent.PreviewComponent>[]>(() => {
+  return props.row?.cols ?? [];
+})
+
+const addRows = (rowIndex: number, insetIndex: number) => {
+  insetIndex = insetIndex < 0 ? 0 : insetIndex;
+  const row = new DesignComponent(props.page?.localComponents?.common?.gridRowContainer, {
+    page: props.page,
+    parentId: props.tableId,
+    addCallbackFn(comInstance: IBSP.IComponent.DesignComponent, pageStore: IbspStore) {
+      (pageStore.componentStore.componentData as unknown as IBSP.IComponent.DesignComponent[]).splice(insetIndex, 0, comInstance);
+    }
+  });
+  row.name = `第${rowIndex < 0 ? 0 : rowIndex}行`;
+
+}
+
+defineExpose({
+  getDesignActionButton(): IBSP.Action.ActiveComponentAction[] {
+    return [
+      {
+        icon: {
+          type: 'svg',
+          value: '上插入行'
+        },
+        name: '上插入行',
+        action() {
+          const insetIndex = componentStore.componentData.findIndex(item => item.id === props.row?.id);
+          addRows(props.rowIndex - 1, insetIndex)
+          props.component?.setActiveComponent();
+        }
+      },
+      {
+        icon: {
+          type: 'svg',
+          value: '下插入行'
+        },
+        name: '下插入行',
+        action() {
+          const insetIndex = componentStore.componentData.findIndex(item => item.id === props.row?.id);
+          addRows(props.rowIndex + 1, insetIndex + 1)
+          props.component?.setActiveComponent();
+        }
+      },
+      {divide: true},
+      {
+        icon: {
+          type: 'svg',
+          value: '右插入列'
+        },
+        name: '添加一列',
+        action() {
+          const col = new DesignComponent(props.page?.localComponents?.common?.GridColContainer, {
+            page: props.page,
+            parentId: props.row?.id
+          });
+          col.name = `${props.row?.name}_第${rowChildren.value.length + 1}列`;
+          props.component?.setActiveComponent();
+        }
+      }
+    ]
+  }
+
+})
+
+</script>
+<template>
+  <div
+    :id="component?.id"
+    class="layout-container grid-row-container"
+    :style="{
+      '--row-name': `${row?.name ? `'${row?.name}(栅格行)'` : '栅格行'}`
+    }"
+    :class="{
+      'active': component?.active,
+    }"
+  >
+    <el-row
+      :gutter="propsValues?.gutter"
+    >
+      <template v-for="(item , index) of rowChildren" :key="item.id">
+        <el-col
+          :span="item?.component?.componentValue?.props?.span"
+          :offset="item?.component?.componentValue?.props?.offset"
+        >
+          <ComponentMiddleware
+            v-on="item?.component?.eventInstance?.events"
+            :component="item.component"
+            :page="page!"
+            :app="app"
+            :rowIndex="rowIndex"
+            :rowLength="rowLength"
+            :colIndex="index"
+            :colLength="rowChildren.length"
+            :rows="rows"
+            :col="item"
+            :tableStyle="tableStyle"
+            :tableId="tableId"
+            :rowId="component?.id"
+          />
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+</template>
+<style lang="scss" scoped>
+.layout-container {
+  padding: var(--container-padding) !important;
+  outline-style: dashed;
+  outline-width: var(--container-border-width);
+  gap: var(--container-padding);
+  outline-color: #848282;
+  position: relative;
+
+  &:not(:has(:hover)):hover {
+    outline-color: #F77234;
+    outline-width: 2px;
+    outline-style: solid;
+    z-index: 11;
+  }
+
+  &.is-hover {
+    outline-color: #F77234;
+    outline-width: 1px;
+    outline-style: solid;
+    z-index: 11;
+  }
+}
+.active {
+  // border: 1px solid var(--theme-gl-bg);
+  // border-color: var(--theme-gl-bg) !important;
+  outline: 2px solid #F77234;
+  gap: var(--container-padding);
+  z-index: 9;
+
+  &.is-hover {
+    outline-color: #F77234;
+    outline-width: 2px;
+    outline-style: solid;
+    z-index: 10;
+  }
+}
+.grid-row-container{
+  --row-name: '栅格行';
+  &::before{
+    content: var(--row-name);
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    font-size: 12px;
+    color: #999;
+    background: #eee;
+    border-radius: 2px;
+    padding: 2px 3px;
+    line-height: 12px;
+    transform: scale(0.5);
+    transform-origin: left top;
+  }
+}
+</style>