super-page-runtime 0.0.1-tmp2

package/src/utils/container-style-util.ts

@@ -0,0 +1,237 @@
+import type { Component } from '../../../src/utils/interfaces/page-design-types'
+/**
+ * 生成通用的样式和Class
+ */
+export function caculateCommonStyle(
+  configure: Component,
+  commonStyle: any,
+  commonClass: any
+): void {
+  //清空设置
+  const tempStyle: any = {}
+  let tempClass = ''
+  const thisProps = configure.props ? configure.props : {}
+  const thisStyle = configure.style ? configure.style : {}
+  const thisSize = thisProps.size ? thisProps.size : {}
+  //宽度
+  //固定
+  //默认按100
+  if (thisSize.widthType == 'fix' && thisSize.fixWidth) {
+    tempStyle['width'] = thisSize.fixWidth
+    if (!tempStyle['width'].indexOf || tempStyle['width'].indexOf('px') == -1) {
+      tempStyle['width'] = tempStyle['width'] + 'px'
+    }
+  } else {
+    if (thisSize.flexSpan) {
+      tempClass += ' el-col-' + thisSize.flexSpan
+    } else {
+      tempClass += ' el-col-24'
+    }
+  }
+  //margin
+  //外边距 设计有套一层，在此设置外部的边距
+  if (thisStyle.marginTop) {
+    tempStyle['margin-top'] = thisStyle.marginTop + 'px'
+  }
+  if (thisStyle.marginRight) {
+    tempStyle['margin-right'] = thisStyle.marginRight + 'px'
+  }
+  if (thisStyle.marginBottom) {
+    tempStyle['margin-bottom'] = thisStyle.marginBottom + 'px'
+  }
+  if (thisStyle.marginLeft) {
+    tempStyle['margin-left'] = thisStyle.marginLeft + 'px'
+  }
+  //高度
+  if (thisSize.fixHeight) {
+    tempStyle['height'] = thisSize.fixHeight
+    if (!tempStyle['height'].indexOf || tempStyle['height'].indexOf('px') == -1) {
+      tempStyle['height'] = tempStyle['height'] + 'px'
+    }
+  }
+  //检查是否固定位置
+  const position = thisProps.position
+  //工具栏位置
+  if (position == 'top' || position == 'bottom') {
+    //position: -webkit-sticky
+    tempStyle['position'] = 'fixed !important'
+    tempStyle['z-index'] = '1'
+    //找展示容器的位置
+    //const contentObj = document.getElementsByClassName("amb-design-board");
+    const contentObj = [thisRef.value.parentNode]
+    if (contentObj && contentObj.length > 0) {
+      const contentRec = contentObj[0].getBoundingClientRect()
+      if (position == 'top') {
+        tempStyle['top'] = contentRec.top + 'px'
+      }
+      if (position == 'bottom') {
+        tempStyle['bottom'] = '10px'
+      }
+    }
+    //宽
+    const thisRec = thisRef.value.getBoundingClientRect()
+    tempStyle['width'] = thisRec.width + 'px'
+  } else if (thisStyle.position) {
+    //按定位设置
+    tempStyle['position'] = thisStyle.position
+    if (thisStyle.position != 'relative') {
+      //其余需要默认当前的宽度
+      if (!tempStyle['width']) {
+        const thisRec = thisRef.value.getBoundingClientRect()
+        tempStyle['width'] = thisRec.width + 'px'
+      }
+      if (thisStyle.left) {
+        tempStyle['left'] = thisStyle.left + 'px'
+      }
+      if (thisStyle.top) {
+        tempStyle['top'] = thisStyle.top + 'px'
+      }
+    }
+  }
+  commonStyle.value = tempStyle
+  commonClass.value = tempClass
+}
+
+/**
+ * 样式转换
+ * @param configure
+ * @param designStyle 动态样式名
+ * @param designClass 动态class
+ */
+export function caculateComponentStyle(
+  configure: any,
+  designStyle: any,
+  designClass: any,
+  designHeaderStyle: any
+): void {
+  //清空设置
+  const tempStyle: any = {}
+  const tempHeaderStyle: any = {}
+  let tempClass = ''
+  //从默认值中获取
+  let defineStyle: any = {}
+  if (configure.default && configure.default.style) {
+    Object.assign(defineStyle, configure.default.style)
+  }
+  //设计内容覆盖
+  if (configure.style) {
+    for (let pro in configure.style) {
+      const proValue = configure.style[pro]
+      if (proValue != undefined && proValue != null && proValue != '') {
+        defineStyle[pro] = proValue
+      }
+    }
+  }
+
+  //加粗
+  if (defineStyle.fontWeight) {
+    tempStyle['font-weight'] = 'bold'
+  }
+  //倾斜
+  if (defineStyle.incline) {
+    tempStyle['font-style'] = 'italic'
+  }
+  //字号
+  if (defineStyle.fontSize) {
+    tempStyle['font-size'] = defineStyle.fontSize
+  }
+  //颜色
+  if (defineStyle.color) {
+    tempStyle['color'] = defineStyle.color
+  }
+  if (defineStyle.textAlign) {
+    tempStyle['text-align'] = defineStyle.textAlign
+  }
+  //背景颜色
+  if (defineStyle.backgroundColor) {
+    tempStyle['background-color'] = defineStyle.backgroundColor
+  }
+  //背景图片 待设置
+  //内边距
+  if (defineStyle.paddingTop) {
+    tempStyle['padding-top'] = defineStyle.paddingTop + 'px'
+  }
+  if (defineStyle.paddingRight) {
+    tempStyle['padding-right'] = defineStyle.paddingRight + 'px'
+  }
+  if (defineStyle.paddingBottom) {
+    tempStyle['padding-bottom'] = defineStyle.paddingBottom + 'px'
+  }
+  if (defineStyle.paddingLeft) {
+    tempStyle['padding-left'] = defineStyle.paddingLeft + 'px'
+  }
+  //线宽
+  if (defineStyle.borderWidth && defineStyle.borderColor) {
+    tempStyle['border'] =
+      defineStyle.borderWidth +
+      'px ' +
+      (defineStyle.borderType ? defineStyle.borderType : 'solid') +
+      ' ' +
+      defineStyle.borderColor
+    //线框圆角
+    if (defineStyle.radius) {
+      tempStyle['border-radius'] = defineStyle.radius + 'px'
+    }
+  }
+
+  //阴影
+  if (defineStyle.shadowColor) {
+    let shadow = (defineStyle.shadowTop ? defineStyle.shadowTop : '0') + 'px '
+    shadow += (defineStyle.shadowRight ? defineStyle.shadowRight : '0') + 'px '
+    shadow += (defineStyle.shadowBottom ? defineStyle.shadowBottom : '0') + 'px '
+    shadow += (defineStyle.shadowLeft ? defineStyle.shadowLeft : '0') + 'px '
+    shadow += defineStyle.shadowColor
+    tempStyle['box-shadow'] = shadow
+  }
+
+  //自定义class
+  if (defineStyle.customClass) {
+    tempClass += ' ' + defineStyle.customClass.replace(/;/g, ' ')
+  }
+
+  //自定义样式
+  if (defineStyle.customStyle) {
+    const strs = defineStyle.customStyle.replace(/[\r\n]/g, '').split(';')
+    for (let index = 0; index < strs.length; index++) {
+      const ss = strs[index].split(':')
+      if (ss.length > 1 && ss[0] && ss[1]) {
+        if (!isNaN(ss[0])) {
+          continue
+        }
+        tempStyle[ss[0]] = ss[1]
+      }
+    }
+  }
+  //标题的样式
+  //加粗
+  if (defineStyle.headerFontWeight) {
+    tempHeaderStyle['font-weight'] = 'bold'
+  }
+  //倾斜
+  if (defineStyle.headerIncline) {
+    tempHeaderStyle['font-style'] = 'italic'
+  }
+  //字号
+  if (defineStyle.headerFontSize) {
+    tempHeaderStyle['font-size'] = defineStyle.headerFontSize
+  }
+  //颜色
+  if (defineStyle.headerColor) {
+    tempHeaderStyle['color'] = defineStyle.headerColor
+  }
+  if (defineStyle.headerTextAlign) {
+    tempHeaderStyle['text-align'] = defineStyle.headerTextAlign
+  } else {
+    tempHeaderStyle['text-align'] = 'left'
+  }
+  //背景颜色
+  if (defineStyle.headerBackgroundColor) {
+    tempHeaderStyle['background-color'] = defineStyle.headerBackgroundColor
+  }
+
+  designStyle.value = tempStyle
+  designClass.value = tempClass
+  if (designHeaderStyle) {
+    designHeaderStyle.value = tempHeaderStyle
+  }
+}

package/src/utils/eventBus.ts

@@ -0,0 +1,14 @@
+import mitt from 'mitt'
+
+const emitter = mitt()
+interface eventBus {
+  $on: any
+  $emit: any
+  $off: any
+}
+const bus: eventBus = {
+  $on: emitter.on,
+  $emit: emitter.emit,
+  $off: emitter.off
+}
+export default bus