ibsp-fg-page 4.0.2

package/src/views/designer/modules/config-props/src/ScriptConfig.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import Collapse from '@config-props/src/components/Collapse.vue'
+
+const props = defineProps({
+  activeComponent: {
+    type: Object,
+    default: () => ({
+    })
+  },
+  page: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const componentScript = computed(() => props.activeComponent?.componentScript || []);
+
+watch(() => props.activeComponent, () => {
+
+})
+
+const svgList: {[key: string]: string} = {
+  CSS: '<svg t="1705243713719" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17390" width="200" height="200"><path d="M110.592 108.544h808.96v808.96H110.592z" fill="#FFEA00" p-id="17391"></path><path d="M944.128 0H83.968C38.912 0 2.048 36.864 2.048 81.92v143.36h61.44V102.4c0-22.528 18.432-40.96 40.96-40.96h819.2c22.528 0 40.96 18.432 40.96 40.96v122.88h61.44V81.92c0-45.056-36.864-81.92-81.92-81.92z m20.48 921.6c0 22.528-18.432 40.96-40.96 40.96H104.448c-22.528 0-40.96-18.432-40.96-40.96v-122.88H2.048v143.36c0 45.056 36.864 81.92 81.92 81.92h860.16c45.056 0 81.92-36.864 81.92-81.92v-143.36h-61.44v122.88z" fill="" p-id="17392"></path><path d="M63.488 286.72h901.12v450.56H63.488z" fill="#FFEA00" p-id="17393"></path><path d="M38.912 366.592c0 36.864 4.096 61.44 4.096 94.208 0 18.432-10.24 36.864-43.008 38.912v30.72c34.816 0 43.008 20.48 43.008 38.912 0 32.768-4.096 57.344-4.096 94.208 0 53.248 18.432 69.632 61.44 69.632H124.928v-28.672h-10.24c-26.624 0-32.768-10.24-32.768-43.008 0-28.672 2.048-55.296 2.048-88.064 0-34.816-10.24-51.2-32.768-55.296v-2.048c24.576-8.192 32.768-22.528 32.768-57.344 0-32.768-2.048-59.392-2.048-88.064 0-30.72 6.144-43.008 32.768-43.008H124.928v-28.672H100.352c-40.96-2.048-61.44 14.336-61.44 67.584z m534.528 129.024l-45.056-18.432c-26.624-10.24-53.248-22.528-53.248-49.152 0-26.624 22.528-43.008 55.296-43.008 28.672 0 53.248 10.24 73.728 30.72l26.624-32.768c-24.576-26.624-61.44-40.96-100.352-40.96-63.488 0-108.544 38.912-108.544 92.16 0 49.152 34.816 73.728 67.584 86.016l45.056 20.48c30.72 14.336 53.248 22.528 53.248 53.248 0 28.672-22.528 47.104-63.488 47.104-32.768 0-63.488-14.336-88.064-38.912l-26.624 30.72-22.528-26.624c-20.48 22.528-43.008 34.816-73.728 34.816-59.392 0-96.256-49.152-96.256-126.976 0-77.824 38.912-124.928 96.256-124.928 26.624 0 47.104 12.288 65.536 30.72l28.672-32.768c-20.48-22.528-53.248-40.96-94.208-40.96-81.92-8.192-147.456 57.344-147.456 165.888s63.488 169.984 147.456 169.984c40.96 0 73.728-16.384 98.304-43.008 30.72 26.624 69.632 43.008 112.64 43.008 71.68 0 116.736-43.008 116.736-96.256 0-49.152-28.672-71.68-67.584-90.112z m229.376 0l-45.056-18.432c-26.624-10.24-53.248-22.528-53.248-49.152 0-26.624 22.528-43.008 55.296-43.008 28.672 0 53.248 10.24 73.728 30.72l26.624-32.768c-24.576-26.624-61.44-40.96-100.352-40.96-63.488 0-108.544 38.912-108.544 92.16 0 49.152 34.816 73.728 67.584 86.016l45.056 20.48c30.72 14.336 53.248 22.528 53.248 53.248 0 28.672-22.528 47.104-63.488 47.104-32.768 0-63.488-14.336-88.064-38.912L634.88 634.88c30.72 30.72 71.68 49.152 118.784 49.152 71.68 0 116.736-43.008 116.736-96.256 0-51.2-28.672-73.728-67.584-92.16z m182.272-34.816c0-32.768 4.096-57.344 4.096-94.208 0-53.248-18.432-69.632-61.44-69.632H903.168v28.672h12.288c26.624 0 32.768 12.288 32.768 43.008 0 28.672-2.048 55.296-2.048 88.064 0 34.816 8.192 51.2 32.768 55.296v2.048c-26.624 8.192-34.816 24.576-34.816 59.392 0 32.768 2.048 59.392 2.048 88.064 0 30.72-6.144 43.008-32.768 43.008H903.168v28.672h24.576c40.96 0 61.44-16.384 61.44-69.632 0-36.864-4.096-61.44-4.096-94.208 0-18.432 10.24-38.912 43.008-38.912v-30.72c-34.816 0-43.008-20.48-43.008-38.912z" fill="" p-id="17394"></path></svg>',
+  JS: '<svg t="1705242101309" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10655" width="200" height="200"><path d="M238.592 155.648H399.36v450.56C399.36 809.984 302.08 880.64 146.432 880.64c-37.888 0-87.04-6.144-118.784-17.408l18.432-130.048c22.528 7.168 51.2 12.288 82.944 12.288 67.584 0 110.592-30.72 110.592-141.312V155.648h-1.024z m301.056 547.84c41.984 22.528 110.592 44.032 179.2 44.032 73.728 0 113.664-30.72 113.664-78.848 0-43.008-33.792-69.632-119.808-99.328-118.784-40.96-197.632-107.52-197.632-211.968C515.072 235.52 617.472 143.36 785.408 143.36c81.92 0 139.264 16.384 182.272 35.84L931.84 308.224c-27.648-13.312-79.872-33.792-148.48-33.792-69.632 0-103.424 32.768-103.424 68.608 0 45.056 38.912 65.536 132.096 101.376 125.952 46.08 184.32 112.64 184.32 214.016 0 119.808-91.136 221.184-286.72 221.184-81.92 0-161.792-22.528-201.728-44.032l31.744-132.096z" fill="#F4DE51" p-id="10656"></path></svg>'
+}
+const getSvgIcon = (data: any) => {
+  const type: any = data.scriptType?.split?.('-')?.at?.(-1) || data.funcType?.split?.('-')?.at?.(-1)
+  if (svgList[type]) {
+    return svgList[type]
+  }
+
+  return ''
+}
+
+</script>
+<template>
+  <div v-if="componentScript.length">
+    <Collapse title="组件脚本"
+              :defaultOpen="true"
+              class="base-component-script-config">
+      <div class="script-config-list-item"
+           v-for="item of componentScript"
+           :key="item.id">
+        <i class="svg-icon" v-html="getSvgIcon(item)"></i>
+        <span>{{ item.scriptName }}</span>
+      </div>
+    </Collapse>
+  </div>
+</template>
+<style lang="less" scoped>
+.script-config-list-item{
+  display: flex;
+  align-items: center;
+  .svg-icon{
+    width: 14px;
+    height: 14px;
+    display: flex;
+    align-items: center;
+    margin-right: 5px;
+    :deep(svg){
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

package/src/views/designer/modules/config-props/src/components/Background.vue

@@ -0,0 +1,372 @@
+<script setup>
+import { defineAsyncComponent } from 'vue';
+import configComponents from '@ibsp-config/index.ts'
+import IbspSelect from '@components-ibsp/IbspSelect.vue'
+
+import Input from './Input.vue'
+
+const props = defineProps({
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const handlePx = (val)=> ((typeof val === 'number' || !isNaN(val)) && val) ? val + 'px' : val
+let prevColor;
+const SelectResource = defineAsyncComponent(()=>configComponents.SelectResource)
+
+const onChangeBackgroundType = (val) => {
+  console.log(props.activeComponent.baseStyle, 'val');
+  if (val === 'none') {
+    prevColor = props.activeComponent.baseStyle.backgroundColor
+    props.activeComponent.baseStyle.backgroundColor = ''
+    props.activeComponent.baseStyle.backgroundImage = ''
+  } else if (val === 'color') {
+    if (props.activeComponent.baseStyle.backgroundColor === 'transparent') {
+      props.activeComponent.baseStyle.backgroundColor = ''
+    }
+    if (prevColor) {
+      props.activeComponent.baseStyle.backgroundColor = prevColor
+    }
+    props.activeComponent.baseStyle.backgroundImage = ''
+  } else if (val === 'image') {
+    props.activeComponent.baseStyle.backgroundImage = ''
+  } else if (val === 'transparent') {
+    props.activeComponent.baseStyle.backgroundColor = 'transparent'
+    props.activeComponent.baseStyle.backgroundImage = ''
+  }
+}
+const onSelectResource = (res)=>{
+  props.activeComponent.baseStyle.backgroundImage = `url("${res.value}")`
+}
+const onClearResource = ()=>{
+  props.activeComponent.baseStyle.backgroundImage = ''
+}
+
+const onChangeBackgroundSize = () => {
+  props.activeComponent.baseStyle.backgroundSize = `${handlePx(props.activeComponent.baseStyle['--backgroundSize-w'])} ${handlePx(props.activeComponent.baseStyle['--backgroundSize-h'])}`
+}
+
+const onChangeBackgroundPosition = () => {
+  props.activeComponent.baseStyle.backgroundPosition = `${handlePx(props.activeComponent.baseStyle['--backgroundPosition-x'])} ${handlePx(props.activeComponent.baseStyle['--backgroundPosition-y'])}`
+}
+
+const onChangeBackgroundSizeType = (val) => {
+  if (val === 'auto') {
+    props.activeComponent.baseStyle.backgroundSize = 'auto'
+  } else if (val === 'length') {
+    props.activeComponent.baseStyle.backgroundSize = `${handlePx(props.activeComponent.baseStyle['--backgroundSize-w'])} ${handlePx(props.activeComponent.baseStyle['--backgroundSize-h'])}`
+  } else if (val === 'cover') {
+    props.activeComponent.baseStyle.backgroundSize = 'cover'
+  } else if (val === 'contain') {
+    props.activeComponent.baseStyle.backgroundSize = 'contain'
+  }
+}
+
+const form = {
+  '--backgroundSize-w': '',
+  '--backgroundSize-h': '',
+  '--backgroundPosition-x': '',
+  '--backgroundPosition-y': '',
+  '--backgroundType': '',
+  '--backgroundSize-type': ''
+
+}
+
+</script>
+
+<template>
+  <div class="background-props-config">
+    <el-form-item label="类型">
+      <IbspSelect v-model="activeComponent.baseStyle['--backgroundType']"
+                  :options="[
+                    {
+                      label: '无',
+                      value: 'none'
+                    },
+                    {
+                      label: '透明',
+                      value: 'transparent'
+                    },
+                    {
+                      label: '颜色',
+                      value: 'color'
+                    },
+                    {
+                      label: '图片',
+                      value: 'image'
+                    }
+                  ]"
+                  @change="onChangeBackgroundType"
+      />
+    </el-form-item>
+    <el-form-item label="背景颜色"
+                  v-if="activeComponent.baseStyle['--backgroundType'] === 'color'"
+                  style="margin-bottom: 10px;">
+      <div style="display: flex; justify-content: center; width: 100%; gap: 2px;">
+        <el-color-picker    show-alpha v-model="activeComponent.baseStyle.backgroundColor" />
+        <el-input  v-model="activeComponent.baseStyle.backgroundColor" />
+      </div>
+    </el-form-item>
+    <template v-if="activeComponent.baseStyle['--backgroundType'] === 'image'">
+      <el-form-item label="图片资源" style="margin-bottom: 10px;">
+        <!-- <el-input  v-model="activeComponent.baseStyle.backgroundImage" /> -->
+
+        <el-tooltip
+
+          :content="activeComponent.baseStyle?.['--bg-resource']?.name "
+          placement="top-start"
+        >
+          <el-text truncated> <span class="resource-name">{{ activeComponent.baseStyle?.['--bg-resource']?.name }}</span></el-text>
+        </el-tooltip>
+
+        <component @ok="onSelectResource"
+                   @clear="onClearResource"
+                   :is="SelectResource"
+                   v-model="activeComponent.baseStyle['--bg-resource']" />
+      </el-form-item>
+      <el-form-item label="图片大小" >
+        <IbspSelect v-model="activeComponent.baseStyle['--backgroundSize-type']"
+                    :options="[
+                      {
+                        label: '自动',
+                        value: 'auto'
+                      },
+                      {
+                        label: '长度',
+                        value: 'length'
+                      },
+                      {
+                        label: '覆盖',
+                        value: 'cover'
+                      },
+                      {
+                        label: '填充',
+                        value: 'contain'
+                      }
+                    ]"
+                    @change="onChangeBackgroundSizeType"
+        />
+      </el-form-item>
+      <el-form-item label="图片宽高"
+                    class="image-size"
+                    v-if="activeComponent.baseStyle?.['--backgroundSize-type'] === 'length'">
+        <Input
+          v-model="activeComponent.baseStyle['--backgroundSize-w']"
+          :props="{
+            type: 'text',
+            rightText: 'W'
+          }"
+          @change="onChangeBackgroundSize"
+        />
+        <Input
+          v-model="activeComponent.baseStyle['--backgroundSize-h']"
+          @change="onChangeBackgroundSize"
+          :props="{
+            type: 'text',
+            rightText: 'H'
+          }" />
+      </el-form-item>
+      <el-form-item label="图片位置" class="image-size">
+        <Input
+          v-model="activeComponent.baseStyle['--backgroundPosition-x']"
+          :props="{
+            type: 'text',
+            rightText: 'X'
+          }"
+          @change="onChangeBackgroundPosition"
+        />
+
+        <Input
+          v-model="activeComponent.baseStyle['--backgroundPosition-y']"
+          @change="onChangeBackgroundPosition"
+          :props="{
+            type: 'text',
+            rightText: 'Y'
+          }" />
+      </el-form-item>
+      <el-form-item label="图片重复" >
+        <IbspSelect v-model="activeComponent.baseStyle.BackgroundRepeat"
+                    :options="[
+                      {
+                        label: '不重复',
+                        value: 'no-repeat'
+                      },
+                      {
+                        label: '水平重复',
+                        value: 'repeat-x'
+                      },
+                      {
+                        label: '垂直重复',
+                        value: 'repeat-y'
+                      },
+                      {
+                        label: '水平垂直重复',
+                        value: 'repeat'
+                      }
+                    ]"
+
+        />
+      </el-form-item>
+
+      <el-form-item label="图片固定" >
+        <IbspSelect v-model="activeComponent.baseStyle.backgroundAttachment"
+                    :options="[
+                      {
+                        label: '不固定',
+                        value: 'scroll'
+                      },
+                      {
+                        label: '固定',
+                        value: 'fixed'
+                      }
+                    ]"
+
+        />
+      </el-form-item>
+
+      <el-form-item label="图片延伸" >
+        <IbspSelect v-model="activeComponent.baseStyle.backgroundClip"
+                    :options="[
+                      {
+                        label: '不延伸',
+                        value: 'border-box'
+                      },
+                      {
+                        label: '延伸到边框',
+                        value: 'padding-box'
+                      },
+                      {
+                        label: '延伸到内容',
+                        value: 'content-box'
+                      },
+                      {
+                        label: '文字前景色',
+                        value: 'text'
+                      }
+                    ]"
+        />
+      </el-form-item>
+
+
+    </template>
+
+    <template v-if="activeComponent.baseStyle['--backgroundType'] !== 'none'">
+      <el-form-item label="背景滤镜" >
+        <IbspSelect v-model="activeComponent.baseStyle['filter']"
+                    :options="[
+                      {
+                        label: '无',
+                        value: 'none'
+                      },
+                      {
+                        label: '模糊',
+                        value: 'blur(5px)'
+                      },
+                      {
+                        label: '灰度',
+                        value: 'grayscale(100%)'
+                      },
+                      {
+                        label: '反转',
+                        value: 'invert(100%)'
+                      },
+                      {
+                        label: '饱和度',
+                        value: 'saturate(7)'
+                      },
+                      {
+                        label: '对比度',
+                        value: 'contrast(5)'
+                      },
+                      {
+                        label: '亮度',
+                        value: 'brightness(0.5)'
+                      },
+                      {
+                        label: '透明度',
+                        value: 'opacity(20%)'
+                      },
+                      {
+                        label: '阴影',
+                        value: 'drop-shadow(8px 8px 10px red)'
+                      }
+                    ]"
+
+        />
+      </el-form-item>
+
+      <el-form-item label="背景后滤" >
+        <IbspSelect v-model="activeComponent.baseStyle['backdrop-filter']"
+                    :options="[
+                      {
+                        label: '无',
+                        value: 'none'
+                      },
+                      {
+                        label: '模糊',
+                        value: 'blur(5px)'
+                      },
+                      {
+                        label: '灰度',
+                        value: 'grayscale(100%)'
+                      },
+                      {
+                        label: '反转',
+                        value: 'invert(100%)'
+                      },
+                      {
+                        label: '饱和度',
+                        value: 'saturate(7)'
+                      },
+                      {
+                        label: '对比度',
+                        value: 'contrast(5)'
+                      },
+                      {
+                        label: '亮度',
+                        value: 'brightness(0.5)'
+                      },
+                      {
+                        label: '透明度',
+                        value: 'opacity(20%)'
+                      },
+                      {
+                        label: '阴影',
+                        value: 'drop-shadow(8px 8px 10px red)'
+                      }
+                    ]"
+
+        />
+      </el-form-item>
+
+    </template>
+
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.background-props-config{
+  width: 100%;
+  height: 100%;
+  .el-form-item{
+    margin-bottom: 0;
+    :deep(.ibsp-select){
+      margin-bottom: 10px;
+    }
+  }
+  .image-size{
+    :deep(.el-form-item__content){
+      display: flex;
+    justify-content: space-between;
+    >div{
+      width: 48%;
+    }
+    }
+
+  }
+}
+
+</style>

package/src/views/designer/modules/config-props/src/components/BorderPlus.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  }
+})
+// props.data['--visibilityWidth'] = 'left,right,top,bottom'
+// watch(()=>props.data['--visibilityWidth'], (val) => {
+//   if (!val) {
+//     // props.data['--visibilityWidth'] = 'left,right,top,bottom'
+//   }
+// }, { immediate: true })
+
+const handlePx = (val)=> ((typeof val === 'number' || !isNaN(val)) && val) ? val + 'px' : val
+
+
+const visibility = computed({
+  get: () => {
+    return props.data['--visibilityWidth']?.split(',')?.filter(item => item !== '')
+  },
+  set: (val) => {
+    props.data['--visibilityWidth'] = val.join(',')
+  }
+})
+const width = computed({
+  get: () => {
+    return props.data.borderWidth ? Number(props.data.borderWidth.replace('px', '')) : 0
+  },
+  set: (val) => {
+    props.data.borderWidth = val + 'px'
+  }
+})
+
+const radius = computed({
+  get: () => {
+    return props.data.borderRadius ? props.data.borderRadius.replace('px', '') : 0
+  },
+  set: (val) => {
+    props.data.borderRadius = val + 'px'
+  }
+})
+const directions = ['top', 'right', 'bottom', 'left'];
+
+const onChangeVisibility = (val) => {
+  const originalWidth = props.data['--originalWidth'] || '0px';
+  directions.forEach((item, index) => {
+    if (val?.includes?.(item)) {
+      props.data[`border-${item}-width`] = originalWidth
+    } else {
+      props.data[`border-${item}-width`] = '0px';
+    }
+  });
+
+  // const borderWidths = ['0px', '0px', '0px', '0px'];
+  // const directions = ['top', 'right', 'bottom', 'left'];
+  // directions.forEach((item, index) => {
+  //   if (val && val.includes(item)) {
+  //     borderWidths[index] = props.data.borderWidth ? props.data.borderWidth : '0px';
+  //   } else {
+  //     props.data[`border${item.replace(item[0], item[0].toUpperCase())}Width`] = '0px';
+  //   }
+  // });
+
+  // const borderWidth = borderWidths.join(' ');
+  // props.data['--originalWidth'] = props.data.borderWidth
+  // props.data.borderWidthStyle = borderWidth
+}
+
+const onChangeBorderWidth = (val) => {
+  props.data['--originalWidth'] = handlePx(val)
+  props.borderWidth = handlePx(val)
+}
+
+
+</script>
+
+<template>
+
+  <div class="border-plus-config">
+    <div class="color">
+      <el-form-item label="颜色" >
+        <el-color-picker v-model="data.borderColor" show-alpha></el-color-picker>
+      </el-form-item>
+      <el-form-item label="样式">
+        <el-select v-model="data.borderStyle"
+                   placeholder="请选择"
+        >
+          <el-option label="继承" value="inherit"></el-option>
+          <el-option label="无" value="none"></el-option>
+          <el-option label="实线" value="solid"></el-option>
+          <el-option label="虚线" value="dashed"></el-option>
+          <el-option label="点线" value="dotted"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="宽度" v-if="data.borderStyle !== 'none'">
+        <el-input-number v-model="width"
+                         controls-position="right"
+                         :min="0"
+
+                         @change="onChangeBorderWidth"
+                         :max="100"></el-input-number>
+      </el-form-item>
+      <el-form-item label="可见性" v-if="width>0">
+        <el-checkbox-group v-model="visibility" @change="onChangeVisibility">
+          <el-checkbox label="top">上</el-checkbox>
+          <el-checkbox label="right">右</el-checkbox>
+          <el-checkbox label="bottom">下</el-checkbox>
+          <el-checkbox label="left">左</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </div>
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.border-plus-config {
+    width: 100%;
+    .el-form-item{
+        margin-bottom: 5px;
+    }
+
+}
+
+</style>