ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/builtinContainer/drag-container/vueDrag/utils/dom.js

@@ -0,0 +1,60 @@
+import { isFunction } from './fns'
+
+// 将选择器与父元素匹配
+export function matchesSelectorToParentElements (el, selector, baseNode) {
+  let node = el
+
+  const matchesSelectorFunc = [
+    'matches',
+    'webkitMatchesSelector',
+    'mozMatchesSelector',
+    'msMatchesSelector',
+    'oMatchesSelector'
+  ].find(func => isFunction(node[func]))
+
+  if (!isFunction(node[matchesSelectorFunc])) return false
+
+  do {
+    if (node[matchesSelectorFunc](selector)) return true
+    if (node === baseNode) return false
+    node = node.parentNode
+  } while (node)
+
+  return false
+}
+
+export function getComputedSize ($el) {
+  const style = window.getComputedStyle($el)
+
+  return [
+    parseFloat(style.getPropertyValue('width'), 10),
+    parseFloat(style.getPropertyValue('height'), 10)
+  ]
+}
+// 添加事件
+export function addEvent (el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.attachEvent) {
+    el.attachEvent('on' + event, handler)
+  } else if (el.addEventListener) {
+    el.addEventListener(event, handler, true)
+  } else {
+    el['on' + event] = handler
+  }
+}
+
+// 删除事件
+export function removeEvent (el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.detachEvent) {
+    el.detachEvent('on' + event, handler)
+  } else if (el.removeEventListener) {
+    el.removeEventListener(event, handler, true)
+  } else {
+    el['on' + event] = null
+  }
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/builtinContainer/drag-container/vueDrag/utils/fns.js

@@ -0,0 +1,39 @@
+export function isFunction (func) {
+  return (typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]')
+}
+
+export function snapToGrid (grid, pendingX, pendingY, scale = 1) {
+  const x = Math.round((pendingX / scale) / grid[0]) * grid[0]
+  const y = Math.round((pendingY / scale) / grid[1]) * grid[1]
+
+  return [x, y]
+}
+
+export function getSize (el) {
+  const rect = el.getBoundingClientRect()
+
+  return [
+    parseInt(rect.width),
+    parseInt(rect.height)
+  ]
+}
+
+export function computeWidth (parentWidth, left, right) {
+  return parentWidth - left - right
+}
+
+export function computeHeight (parentHeight, top, bottom) {
+  return parentHeight - top - bottom
+}
+
+export function restrictToBounds (value, min, max) {
+  if (min !== null && value < min) {
+    return min
+  }
+
+  if (max !== null && max < value) {
+    return max
+  }
+
+  return value
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/builtinContainer/drag-container/vueDrag/vue-draggable-resizable.css

@@ -0,0 +1,125 @@
+.vdr {
+  touch-action: none;
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px dashed #d6d6d6;
+}
+.handle {
+  box-sizing: border-box;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #ffffff;
+  border: 1px solid var(--theme-gl-bg);
+  box-shadow: 0 0 2px var(--theme-gl-bg);
+  border-radius: 2px;
+}
+.handle-tl {
+  top: -5px;
+  left: -5px;
+  cursor: nw-resize;
+}
+.handle-tm {
+  top: -5px;
+  left: calc(50% - 4px);
+  /*margin-left: -5px;*/
+  cursor: n-resize;
+}
+.handle-tr {
+  top: -5px;
+  right: -5px;
+  cursor: ne-resize;
+}
+.handle-ml {
+  top: calc(50% - 4px);
+  /*margin-top: -5px;*/
+  left: -5px;
+  cursor: w-resize;
+}
+.handle-mr {
+  top: calc(50% - 4px);
+  /*margin-top: -5px;*/
+  right: -5px;
+  cursor: e-resize;
+}
+.handle-bl {
+  bottom: -5px;
+  left: -5px;
+  cursor: sw-resize;
+}
+.handle-bm {
+  bottom: -5px;
+  left: calc(50% - 4px);
+  /*margin-left: -5px;*/
+  cursor: s-resize;
+}
+.handle-br {
+  bottom: -5px;
+  right: -5px;
+  cursor: se-resize;
+}
+/*旋转handle*/
+.handle-rot {
+  top: 0;
+  left: 50%;
+  margin-top: -20px;
+  margin-left: -1px;
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  cursor: grab;
+  transform: translate(-50%, 0);
+}
+.handle-rot:before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  width: 0;
+  height: 7px;
+  border-left: 1px solid #000000;
+  transform: translate(-50%, 0);
+}
+.ref-line{
+  position: absolute;
+  background-color: var(--theme-gl-bg);
+  z-index: 9999;
+
+}
+.ref-line .line-h-num{
+  color: var(--theme-font-color);
+  /* width: 40px; */
+  height: 20px;
+  display: block;
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.ref-line .line-v-num{
+  color: var(--theme-font-color);
+  /* width: 40px; */
+  height: 20px;
+  display: block;
+  position: absolute;
+  top: 50%;;
+  left: -10px;;
+  transform: translateY(-50%);
+}
+.v-line{
+  width: 1px;
+
+}
+.h-line{
+  height: 1px;
+}
+@media only screen and (max-width: 768px) {
+  [class*="handle-"]:before {
+    content: '';
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    top: -10px;
+    position: absolute;
+  }
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/builtinContainer/index.ts

@@ -0,0 +1,4 @@
+export { default as DragContainer } from './drag-container/index.vue'
+export { default as ContentContainer } from './content-container/index.vue'
+export { default as ContentContainerPre } from './content-container/ContentContainerPre.vue'
+export { default as ContentContainerDes } from './content-container/ContentContainerDes.vue'

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/card/Template.vue

@@ -0,0 +1,214 @@
+<script setup lang='ts'>
+import { computed } from 'vue'
+const props = defineProps<{
+  dataModel: any,
+  dataValues: any,
+  propsValues: any,
+  eventValues: any
+}>()
+console.log('props', props);
+
+const title = computed(() => {
+  return props.dataModel.item?.data?.[props.dataValues?.titleField] ?? props.dataValues?.titleField
+})
+
+const headerStyle = computed(() => {
+  return {
+    backgroundColor: props.propsValues?.header.backgroundColor,
+    color: props.propsValues?.header.color,
+    fontSize: props.propsValues?.header.fontSize + 'px',
+    height: props.propsValues?.header.height + 'px',
+    padding: props.propsValues?.header.padding
+  }
+})
+
+const footerStyle = computed(()=>{
+  return {
+    backgroundColor: props.propsValues?.footer.backgroundColor,
+    color: props.propsValues?.footer.color,
+    height: props.propsValues?.footer.height + 'px',
+    padding: props.propsValues?.footer.padding
+  }
+})
+
+const mainStyle = computed(()=>{
+  const {header, footer} = props.propsValues
+  const headerHeight = header.show ? header.height : 0
+  const footerHeight = footer.show ? footer.height : 0
+  return {
+    height: `calc(100% - ${footerHeight + headerHeight}px)`,
+    padding: props.propsValues?.content.padding
+  }
+})
+
+const topTags = computed<any>(() => {
+  return Object.values(props.dataValues.tagColumn?.tags.tagConfig || {}).filter((item:any) => item.position === 'top')
+    .sort((a:any, b:any) => a.sort - b.sort)
+})
+
+const bottomTags = computed<any>(() => {
+  return Object.values(props.dataValues.tagColumn?.tags.tagConfig || {}).filter((item:any) => item.position === 'bottom')
+    .sort((a:any, b:any) => a.sort - b.sort)
+})
+
+const tagContent = (item:any)=>{
+  return props.dataModel.item?.data?.[item.content] ?? item.content
+}
+
+// ----------------- 事件处理 -----------------
+
+
+const onClickRight = () => {
+  props.eventValues?.headerRightClick?.()
+}
+
+</script>
+
+<template>
+  <div class="card-item">
+    <header :style="headerStyle" v-show="propsValues.header?.show">
+      <div class="left"
+           :style="{
+             lineHeight:headerStyle.height
+           }">
+        <div class="icon" v-if="propsValues.header.iconType !== 'none'">
+          <template
+            v-if="propsValues.header.iconType === 'block'"
+          >
+            <i class="color-block"
+               :style="{
+                 backgroundColor: propsValues.header.blockColor
+               }"></i>
+          </template>
+          <template
+            v-else-if="propsValues.header.iconType === 'icon'"
+          >
+            <img :src="propsValues.header.icon?.content"
+                 alt=""
+                 v-if="propsValues.header.icon?.type === 'svg'"
+                 style="width: 20px; height: 20px;"
+            >
+            <span v-else :class="propsValues.header.icon?.content"></span>
+          </template>
+        </div>
+        <div class="title"><span>{{ title}}</span></div>
+      </div>
+      <div class="right" @click.stop="onClickRight">
+        <template v-for="(item,index) in topTags" :key="index">
+          <div :style="{
+                 float: item.align,
+                 display:'inline',
+                 lineHeight:headerStyle.height
+               }"
+               v-show="item.show"
+          >
+            <template v-if="item.type === 'text'">
+              <el-text :type="item.colorType">{{ tagContent(item) }}</el-text>
+            </template>
+            <template v-else-if="item.type === 'icon'">
+              <img :src="item.icon?.content"
+                   alt=""
+                   v-if="item.icon?.type === 'svg'"
+                   style="width: 20px; height: 20px;"
+              >
+              <span v-else :class="item.icon?.content"></span>
+              <el-text  :type="item.colorType">{{ tagContent(item) }}</el-text>
+            </template>
+            <template v-else-if="item.type === 'tag'">
+              <el-tag :type="item.colorType">{{ tagContent(item) }}</el-tag>
+            </template>
+            <template v-else-if="item.type === 'button'">
+              <el-button :type="item.colorType">{{ tagContent(item) }}</el-button>
+            </template>
+          </div>
+
+        </template>
+      </div>
+    </header>
+    <main :style="mainStyle">
+      <slot></slot>
+    </main>
+    <footer v-show="propsValues.footer?.show" :style="footerStyle">
+      <div class="footer-container">
+        <template v-for="(item,index) in bottomTags" :key="index">
+          <div :style="{
+            float: item.align,
+            display:'inline',
+            lineHeight: footerStyle.height
+          }">
+            <template v-if="item.type === 'text'">
+              <el-text :type="item.colorType">{{ tagContent(item)}}</el-text>
+            </template>
+            <template v-else-if="item.type === 'icon'">
+              <img :src="item.icon?.content"
+                   alt=""
+                   v-if="item.icon?.type === 'svg'"
+                   style="width: 20px; height: 20px;"
+              >
+              <span v-else :class="item.icon?.content"></span>
+              <el-text  :type="item.colorType">{{ tagContent(item) }}</el-text>
+            </template>
+            <template v-else-if="item.type === 'tag'">
+              <el-tag :type="item.colorType">{{ tagContent(item) }}</el-tag>
+            </template>
+            <template v-else-if="item.type === 'button'">
+              <el-button :type="item.colorType">{{ tagContent(item) }}</el-button>
+            </template>
+          </div>
+
+        </template>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.card-item{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    >header {
+
+    border-bottom: 1px solid #e5e5e5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .left{
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      margin-right: 5px;
+    }
+    .right{
+      flex: 1;
+    }
+    .icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+
+      .color-block {
+        width: 6px;
+        height: 16px;
+        background: #1989FA;
+      }
+      &:has(.color-block) {
+        width: 6px;
+      }
+    }
+  }
+   main {
+    width: 100%;
+  }
+  footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid #e5e5e5;
+    .footer-container{
+      width: 100%;
+    }
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/card/config/config.js

@@ -0,0 +1,37 @@
+import dataConfig from './data'
+import propsConfig from './props'
+export default {
+  id: 'ibsp-card-container',
+  label: '卡片容器',
+  icon: {
+    type: 'svg',
+    value: '卡片容器'
+  },
+  type: 'container',
+  isContainer: true,
+  contentContainer: true,
+  sort: 2,
+  setup: (props)=>{
+    return {
+      baseStyle: {
+        borderRadius: '12px',
+        backgroundColor: '#fff',
+        color: '#333',
+        fontColor: '#333',
+        overflow: 'hidden',
+        '--visibilityWidth': 'left,right,top,bottom',
+        borderColor: '#e5e5e5',
+        borderWidth: '1px',
+        borderStyle: 'solid'
+      },
+      config: {
+        props: propsConfig(),
+        data: dataConfig(props),
+        event: [
+        ]
+      }
+
+    }
+  },
+  render: ()=>import('../index.vue')
+}

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/card/config/data.js

@@ -0,0 +1,191 @@
+export default ({app, dataModel})=>{
+  const {selectDataModel} = app.commonlyConfig
+
+  const formatLabel = (label)=>{
+    return typeof label === 'string' && label.length > 4 ?
+      label.substring(0, 4) + '...' :
+      label
+  }
+  return [
+    selectDataModel({
+      show: ()=>dataModel.value.target === 'data'
+    }),
+    {
+      label: '选择标题字段',
+      key: 'titleField',
+      value: '卡片标题',
+      componentType: 'Select',
+      componentProps: {
+        options: ()=>dataModel.value.item ? dataModel.value.item.fields : [],
+        'allow-create': true
+      }
+    },
+    {
+      label: '标签配置',
+      key: 'tagColumn',
+      componentType: 'Tab',
+      componentProps: {
+        tabPosition: 'left'
+      },
+      componentEvent: {
+      },
+      children: [
+        {
+          label: '标签',
+          key: 'tags',
+          children: [
+            {
+              label: '拖拽tab',
+              key: 'tagConfig',
+              value: '',
+              componentType: 'DragTab',
+              componentProps: {
+                disabledCopy: true,
+                concatProps: {
+                  label: 'typeName',
+                  show: 'show',
+                  sort: 'sort',
+                  key: 'key'
+                },
+                configValues() {
+                  return []
+                }
+              },
+              componentEvent: {
+                addColumn: ({ newColumn, activeComponent, page })=>{
+
+                  const label = formatLabel(newColumn.content)
+
+                  page.utils.addComponentEvent(activeComponent, {
+                    id: newColumn.key,
+                    label: label + '点击事件',
+                    key: newColumn.key,
+                    value: ()=>{},
+                    category: '标签点击事件'
+                  })
+                },
+                deleteColumn: ({ deleteColumn, activeComponent, page })=>{
+                  page.utils.removeComponentEvent(activeComponent, deleteColumn.key)
+                }
+              },
+              baseConfig: [
+                {
+                  key: 'key',
+                  show: false
+                },
+                {
+                  key: 'sort',
+                  show: false
+                },
+                {
+                  label: '显示',
+                  key: 'show',
+                  value: true,
+                  componentType: 'Switch'
+                },
+                {
+                  key: 'typeName',
+                  show: false,
+                  value: '文本'
+                },
+                {
+                  label: '标签内容类型',
+                  key: 'type',
+                  value: 'text',
+                  componentType: 'Select',
+                  componentProps: {
+                    options: [
+                      {label: '文本', value: 'text'},
+                      {label: '图标', value: 'icon'},
+                      {label: '标签', value: 'tag'},
+                      {label: '按钮', value: 'button'}
+                    ]
+                  },
+                  componentEvent: {
+                    change: ({item, configValue})=>{
+                      configValue.typeName = item.label
+                    }
+                  }
+                },
+                {
+                  label: '标签位置',
+                  key: 'position',
+                  value: 'top',
+                  componentType: 'Select',
+                  componentProps: {
+                    options: [
+                      {label: '顶部', value: 'top'},
+                      {label: '底部', value: 'bottom'}
+                    ]
+                  }
+                },
+                {
+                  label: '对齐方式',
+                  key: 'align',
+                  value: 'right',
+                  componentType: 'Select',
+                  componentProps: {
+                    options: [
+                      {label: '左对齐', value: 'left'},
+                      {label: '右对齐', value: 'right'}
+                    ]
+                  }
+                },
+
+                {
+                  label: '内容文本',
+                  key: 'content',
+                  value: '卡片内容',
+                  componentType: 'Select',
+                  componentProps: {
+                    options: ()=>dataModel.value.item ? dataModel.value.item.fields : [],
+                    'allow-create': true,
+                    filterable: true
+                  },
+                  componentEvent: {
+                    change: ({ activeComponent, configValue })=>{
+                      const eventItem = activeComponent.componentConfig.event.find(item=>item.key === configValue.key)
+                      console.log('eventItem', eventItem);
+
+                      if (eventItem) {
+                        const label = formatLabel(configValue.content)
+                        eventItem.label = label + '点击事件'
+                      }
+                    }
+                  }
+                },
+                {
+                  label: '图标',
+                  key: 'icon',
+                  value: '',
+                  componentType: 'SelectIcon',
+                  show: ({type})=>type === 'icon'
+                },
+                {
+                  label: '颜色类型',
+                  key: 'colorType',
+                  value: 'default',
+                  componentType: 'Select',
+                  componentProps: {
+                    options: [
+                      {label: '默认', value: 'default'},
+                      {label: '主题', value: 'primary'},
+                      {label: '成功', value: 'success'},
+                      {label: '警告', value: 'warning'},
+                      {label: '危险', value: 'danger'},
+                      {label: '信息', value: 'info'},
+                      {label: '文本', value: 'text'}
+                    ]
+                  }
+                }
+              ]
+            }
+
+          ]
+        }
+      ]
+    }
+
+
+  ]
+}