ibsp-fg-page 4.0.2

package/src/views/designer/modules/config-page/src/index.vue

@@ -0,0 +1,120 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import ConfigIndex from '@ibsp-config/ConfigIndex.vue';
+import { ActionType, historyStackModel } from '@models/useHistoryStackModel';
+
+import config from './config.js';
+
+const props = defineProps({
+  page: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const nextUiLoading = ref(false)
+let oldPageValue = JSON.parse(JSON.stringify(props.page.pageConfigValue))
+let pageList = config({ page: props.page, nextUiLoading })
+const pageConfigValue = props.page.pageConfigValue
+
+const _addChangeEvent = (list)=>{
+  return list.map(item => {
+    let _componentEvent = item.componentEvent || {};
+    let _change = _componentEvent.change;
+    _componentEvent.change = (opts) => {
+      const { label, key } = opts.config
+      historyStackModel.push({
+        actionType: ActionType.UpdateCanvas,
+        changes: {
+          prop: `pageConfigValue.canvasPage.${key}`,
+          value: JSON.parse(JSON.stringify(props.page.pageConfigValue.canvasPage[key])),
+          oldValue: JSON.parse(JSON.stringify(oldPageValue.canvasPage[key]))
+        },
+        label: `修改页面${label}值`
+      })
+      oldPageValue = JSON.parse(JSON.stringify(props.page.pageConfigValue))
+      if (_change && typeof _change === 'function') {
+        _change(opts)
+      }
+    }
+    item.componentEvent = _componentEvent;
+    if (item.children?.length) {
+      item.children = _addChangeEvent(item.children)
+    }
+    return item;
+  })
+}
+pageList[1].children = _addChangeEvent(pageList[1].children)
+
+watch(()=>props.page.id, ()=>{
+  oldPageValue = JSON.parse(JSON.stringify(props.page.pageConfigValue))
+  pageList = config({ page: props.page, nextUiLoading })
+  pageList[1].children = _addChangeEvent(pageList[1].children)
+})
+
+
+</script>
+
+<template>
+  <div class="page-config">
+    <ConfigIndex :config-value="page.pageConfigValue" :config-list="pageList" />
+    <Teleport to="body">
+      <div :style="{
+             '--start--transform':nextUITheme ? 'rotate(0deg)': 'rotate(480deg)',
+             '--start--border-radius': nextUITheme ? '5px': '60%',
+             '--end--transform':nextUITheme ? 'rotate(480deg)': 'rotate(0deg)',
+             '--end--border-radius': nextUITheme ? '60%': '5px',
+           }"
+           class="nextUi-switch-loading"
+           v-if="nextUiLoading">
+        <div class="loader"></div>
+      </div>
+    </Teleport>
+
+  </div>
+</template>
+
+<style lang="less" scoped>
+.nextUi-switch-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--theme-bg);
+  backdrop-filter: blur(30px);
+  z-index: 99999;
+
+  .loader {
+  width: 7em;
+  height: 7em;
+  background: linear-gradient(-45deg, var(--ibsp-theme-color) 0%, var(--ibsp-theme-color2) 100% );
+  animation: spin 1.1s infinite;
+  border-radius: 5px;
+}
+
+.loader::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(-45deg, var(--ibsp-theme-color) 0%, var(--ibsp-theme-color2) 100%  );
+  transform: translate3d(0, 0, 0) scale(0.95);
+  filter: blur(30px);
+}
+
+@keyframes spin {
+  0% {
+    transform:var(--start--transform);
+    border-radius: var(--start--border-radius);
+  }
+
+  100% {
+    transform: var(--end--transform);
+    border-radius: var(--end--border-radius);
+  }
+}
+}
+</style>

package/src/views/designer/modules/config-props/index.ts

@@ -0,0 +1,3 @@
+import PropsConfig from './src/index.vue'
+
+export default PropsConfig

package/src/views/designer/modules/config-props/propsConfig.service.ts

@@ -0,0 +1 @@
+export default class PropsConfigService {}

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

@@ -0,0 +1,576 @@
+<script setup>
+import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref } from 'vue';
+import { message } from 'ant-design-vue';
+import Input from '@config-props/src/components/Input.vue'
+import Switch from '@config-props/src/components/Switch.vue'
+import Radio from '@config-props/src/components/Radio.vue'
+import Collapse from '@config-props/src/components/Collapse.vue'
+import BorderPlus from '@config-props/src/components/BorderPlus.vue'
+import Background from '@config-props/src/components/Background.vue'
+import { ActionType, historyStackModel } from '@models/useHistoryStackModel';
+import { useComponentStore } from '@/stores';
+
+const componentStore = useComponentStore();
+const props = defineProps({
+  activeComponent: {
+    type: Object,
+    default: () => ({
+    })
+  },
+  page: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const monacoCodeRef = ref()
+const MonacoCode = defineAsyncComponent(()=>import('@nextui/monacoCode/MonacoCode.vue'))
+const parentContainer = computed(() => {
+  return props.page.store.componentStore.componentData.find(item => item.id === props.activeComponent?.parentId)
+})
+
+const getVisibility = computed({
+  get: () => {
+    const v = props.activeComponent.baseStyle['--visibility'] ?? 'visible'
+    return v === 'visible'
+  },
+  set: (val) => {
+    props.activeComponent.baseStyle['--visibility'] = val ? 'visible' : 'hidden'
+    props.activeComponent.visible = val
+  }
+})
+
+const onChangePosition = (val, key) => {
+  console.log(val, key);
+  if (['x', 'y'].includes(key.toLocaleLowerCase())) {
+    props.activeComponent.propChange(`position.${key}`, `oldPosition.${key}`, `改变${props.activeComponent.name}位置`, ActionType.MoveComponent)
+  }
+  if (props.activeComponent?.type !== 'layout') return
+  const layoutConfig = props.activeComponent?.componentValue?.props?.layoutConfig
+  if (val !== '100%' && layoutConfig.display === 'flex') {
+    const parentLayoutConfig = parentContainer.value?.componentValue?.props?.layoutConfig
+    if (!parentLayoutConfig) {
+      return
+    }
+    if (parentLayoutConfig.flexDirection === 'row' && key === 'w') {
+      layoutConfig.flex = 'none'
+    } else if (parentLayoutConfig.flexDirection === 'column' && key === 'h') {
+      layoutConfig.flex = 'none'
+    }
+
+
+  }
+}
+
+const onChangeUId = (val) => {
+  const componentData = props.page.store.componentStore.componentData
+  const uId = componentData.filter(item => item.uId === val)
+  if (uId.length > 1) {
+    message.error('组件标识重复');
+    props.activeComponent.uId = props.activeComponent.id
+  }
+}
+
+const fontSize = computed({
+  get: () => {
+    const f = props.activeComponent.baseStyle.fontSize
+    // 判断是否是数字
+    if (!isNaN(Number(f))) {
+      return f
+    }
+    // 去除单位
+    return Number(f ? f.replace('px', '') : 12)
+  },
+  set: (val) => {
+    props.activeComponent.baseStyle.fontSize = val + 'px'
+  }
+})
+
+const fontFamily = computed({
+  get: () => {
+    return props.activeComponent.baseStyle.fontFamily?.split?.(',') || []
+  },
+  set: (val) => {
+    props.activeComponent.baseStyle.fontFamily = val.join(',')
+  }
+})
+
+const letterSpacing = computed({
+  get: () => {
+    const f = props.activeComponent.baseStyle.letterSpacing
+    // 判断是否是数字
+    if (!isNaN(Number(f))) {
+      return f
+    }
+    // 去除单位
+    return Number(f ? f.replace('px', '') : 0)
+  },
+  set: (val) => {
+    props.activeComponent.baseStyle.letterSpacing = val + 'px'
+  }
+})
+// const radius = computed({
+//   get: () => {
+//     return props.data.borderRadius ? props.data.borderRadius.replace('px', '') : 0
+//   },
+//   set: (val) => {
+//     props.data.borderRadius = val + 'px'
+//   }
+// })
+
+// const borderRadius = computed({
+//   get: () => {
+//     return props.activeComponent.baseStyle.borderRadius
+//   },
+//   set: (val) => {
+//     // 获取val数字部分
+//     const reg = /^
+
+
+//     // props.activeComponent.baseStyle.borderRadius = val + 'px'
+//   }
+// })
+
+const onClickSaveCss = ()=>{
+  props.activeComponent.insertCSS()
+
+}
+const onChangeCustomStyle = ()=>{
+  props.activeComponent.insertCSS()
+}
+
+const isFormContainer = computed(() => {
+  return props.activeComponent.source.id === 'formContainer';
+})
+
+const isSubFormContainer = computed(() => {
+  return props.activeComponent.source.id === 'subFormContainer';
+})
+
+const formDataType = computed(() => {
+  return props.page.getConfigComponent({component: props.activeComponent})?.dataType ?? [{label: '文本', value: 'Text'}]
+})
+
+</script>
+
+<template>
+  <div class="common-props-config"
+       id="ibsp-common-props-config"
+       v-if="activeComponent?.id">
+    <Collapse title="基础配置"
+              :defaultOpen="true"
+              class="base-component-config">
+      <Input v-model="activeComponent.name"
+             :props="{
+               type: 'text',
+               placeholder: '请输入容器名称'
+             }"
+             label="组件名称"
+      />
+      <!--      位置配置-->
+      <div class="config-item">
+        <div class="label">
+          <span>位置尺寸</span>
+        </div>
+        <div class="position">
+          <Input v-for="item in Object.keys(activeComponent?.position || {})"
+                 :key="item"
+                 v-model="activeComponent.position[item]"
+                 :props="{
+                   type: 'text',
+                   rightText: item.toUpperCase()
+                 }"
+                 :isNumber="!!(activeComponent.parentSectionId)"
+                 :disabled="activeComponent.componentMetaId === 'section-layout-group'"
+                 :isSection="!!activeComponent.parentSectionId"
+                 v-show="item !== 'z'"
+                 class="input-position"
+                 @onInputChange="(val) => onChangePosition(val, item)" />
+        </div>
+      </div>
+    </Collapse>
+    <Collapse
+      title="表单配置"
+      :defaultOpen="true"
+      class="base-component-config"
+      v-if="isFormContainer || activeComponent.inForm"
+    >
+      <div class="base-style-config-list">
+        <Input
+          v-if="isFormContainer"
+          v-model="activeComponent.form.model"
+          :props="{
+            type: 'text',
+            placeholder: '请输入表单标识'
+          }"
+          label="表单标识"
+        />
+        <Input
+          v-if="activeComponent.inForm"
+          v-model="activeComponent.form.model"
+          :props="{
+            type: 'text',
+            placeholder: '请输入字段标识'
+          }"
+          label="字段标识"
+        />
+        <Input
+          v-if="isFormContainer || isSubFormContainer"
+          v-model="activeComponent.form.key"
+          :props="{
+            type: 'text',
+            placeholder: '请输入表单主键标识'
+          }"
+          label="主键标识"
+        />
+        <el-form-item
+          v-if="activeComponent.inForm && isSubFormContainer"
+          label="子表单类型"
+          label-width="80px"
+        >
+          <el-radio-group v-model="activeComponent.formConfig.subFormType">
+            <el-radio-button label="重复表" value="table" />
+            <el-radio-button label="重复节" value="section" />
+          </el-radio-group>
+        </el-form-item>
+        <Switch
+          v-if="activeComponent.inForm || isFormContainer"
+          v-model="activeComponent.formConfig.showLabel"
+          label="显示标签"/>
+        <Input
+          v-if="(activeComponent.inForm || isFormContainer) && activeComponent.formConfig.showLabel"
+          v-model="activeComponent.formConfig.labelWidth"
+          :props="{
+            type: 'text',
+            placeholder: '请输入字段标识'
+          }"
+          label="标签宽度"
+        />
+        <el-form-item
+          v-if="(activeComponent.inForm || isFormContainer) && activeComponent.formConfig.showLabel"
+          label="标签位置"
+          label-width="80px"
+        >
+          <el-radio-group v-model="activeComponent.formConfig.labelPosition">
+            <el-radio-button label="左边" value="left" />
+            <el-radio-button label="右边" value="right" />
+            <el-radio-button label="上边" value="top" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-if="activeComponent.inForm && activeComponent.type === 'form'"
+          label="数据类型"
+          label-width="80px"
+        >
+          <el-select
+            style="width: 100%;"
+            v-model="activeComponent.form.dataType"
+            placeholder="请选择数据类型"
+          >
+            <el-option
+              v-for="item of formDataType"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+
+        </el-form-item>
+        <el-form-item
+          v-if="activeComponent.inForm && activeComponent.type === 'form' && activeComponent.form.dataType === 'Text'"
+          label="最大长度"
+          label-width="80px"
+        >
+          <el-input-number
+            controls-position="right"
+            style="width: 100%;"
+            v-model="activeComponent.form.mexLength"
+            placeholder="请输入文本最大长度"
+          ></el-input-number>
+
+        </el-form-item>
+        <el-form-item
+          v-if="activeComponent.inForm && activeComponent.type === 'form' && activeComponent.form.dataType === 'Double'"
+          label="小数位数"
+          label-width="80px"
+        >
+          <el-input-number
+            controls-position="right"
+            style="width: 100%;"
+            v-model="activeComponent.form.decimalPlaces"
+            placeholder="请输入小数位数"
+          ></el-input-number>
+
+        </el-form-item>
+      </div>
+    </Collapse>
+    <Collapse title="基础样式/其他配置" :noCollapse="false">
+      <div class="base-style-config-list">
+        <el-form-item label="字体颜色"
+                      class="color-item"
+                      label-width="70px">
+          <el-color-picker  v-model="activeComponent.baseStyle.color" show-alpha></el-color-picker>
+          <el-input v-model="activeComponent.baseStyle.color"></el-input>
+        </el-form-item>
+        <el-form-item label="字体大小" label-width="70px">
+          <el-input-number v-model="fontSize"
+                           controls-position="right"
+                           :min="1"
+                           :max="100"></el-input-number>
+        </el-form-item>
+        <el-form-item label="字体间距" label-width="70px">
+          <el-input-number v-model="letterSpacing"
+                           controls-position="right"
+                           :min="-100"
+                           :max="1000"></el-input-number>
+        </el-form-item>
+        <el-form-item label="字体" label-width="70px">
+          <el-select style="width: 100%;"
+                     v-model="fontFamily"
+                     placeholder="请选择字体"
+                     multiple>
+            <el-option label="宋体" value="宋体"></el-option>
+            <el-option label="微软雅黑" value="微软雅黑"></el-option>
+            <el-option label="黑体" value="黑体"></el-option>
+            <el-option label="Arial" value="Arial"></el-option>
+            <el-option label="Verdana" value="Verdana"></el-option>
+            <el-option label="pinia" value="pinia"></el-option>
+          </el-select>
+
+        </el-form-item>
+
+        <el-form-item label="背景颜色" label-width="70px">
+          <Background :activeComponent="activeComponent" />
+        </el-form-item>
+        <el-form-item label="圆角大小" label-width="70px">
+          <Input v-model="activeComponent.baseStyle.borderRadius"
+                 :props="{
+                   type: 'text',
+                   min: 0
+                 }"
+                 class="input-padding" />
+        </el-form-item>
+        <el-form-item label="基础边框" label-width="70px">
+          <BorderPlus :data="activeComponent.baseStyle" />
+        </el-form-item>
+
+        <el-form-item label="内边距" label-width="70px">
+          <div class="padding">
+            <Input  v-model="activeComponent.baseStyle.paddingLeft"
+                    :props="{
+                      type: 'text',
+                      rightText: '左'
+                    }"
+                    class="input-padding" />
+
+            <Input v-model="activeComponent.baseStyle.paddingRight"
+                   :props="{
+                     type: 'text',
+                     rightText: '右'
+                   }"
+                   class="input-padding" />
+
+            <Input v-model="activeComponent.baseStyle.paddingTop"
+                   :props="{
+                     type: 'text',
+                     rightText: '上'
+                   }"
+                   class="input-padding" />
+
+            <Input v-model="activeComponent.baseStyle.paddingBottom"
+                   :props="{
+                     type: 'text',
+                     rightText: '下'
+                   }"
+                   class="input-padding" />
+
+          </div>
+
+        </el-form-item>
+        <el-form-item label="外边距" label-width="70px">
+          <div class="margin">
+            <Input v-model="activeComponent.baseStyle.marginLeft"
+                   :props="{
+                     type: 'text',
+                     rightText: '左'
+                   }"
+                   class="input-margin" />
+
+            <Input v-model="activeComponent.baseStyle.marginRight"
+                   :props="{
+                     type: 'text',
+                     rightText: '右'
+                   }"
+                   class="input-margin" />
+
+            <Input v-model="activeComponent.baseStyle.marginTop"
+                   :props="{
+                     type: 'text',
+                     rightText: '上'
+                   }"
+                   class="input-margin" />
+
+            <Input v-model="activeComponent.baseStyle.marginBottom"
+                   :props="{
+                     type: 'text',
+                     rightText: '下'
+                   }"
+                   class="input-margin" />
+
+          </div>
+        </el-form-item>
+        <el-form-item label="显示控制" label-width="70px">
+          <el-switch v-model="getVisibility"
+                     active-color="#13ce66"
+                     inactive-color="#ff4949"
+                     active-text="显示"
+                     inactive-text="隐藏"></el-switch>
+        </el-form-item>
+        <el-form-item label="组件标识" label-width="70px">
+          <el-input @change="onChangeUId" v-model="activeComponent.uId"></el-input>
+        </el-form-item>
+        <el-form-item label="自定义样式" label-width="90px">
+          <el-switch @change="onChangeCustomStyle" v-model="activeComponent.customResources.css.state"></el-switch>
+        </el-form-item>
+        <el-form-item
+          label-width="100%"
+          style="flex-direction: column"
+          class="el-form-item-css"
+          v-if="activeComponent.customResources.css.state">
+          <template #label>
+            <div class="el-form-item-css-label">
+              <span style="font-size: 12px;">css样式 会覆盖原有样式 谨慎填写!</span>
+              <el-button size="small" @click="onClickSaveCss">运行</el-button>
+            </div>
+          </template>
+          <MonacoCode :editorProps="{
+                        language:'css',
+                        minimap:{
+                          enabled:false
+                        },
+                        automaticLayout:true
+                      }"
+                      ref="monacoCodeRef"
+                      :style="{
+                        height:'400px'
+                      }"
+                      v-model="activeComponent.customResources.css.content" />
+        </el-form-item>
+      </div>
+    </Collapse>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.common-props-config {
+  width: 100%;
+  margin-bottom: 10px;
+
+  :deep(.el-collapse-item) {
+    padding-bottom: 0 !important;
+
+    .el-input {
+      --el-input-text-color: var(--theme-font-color);
+      --el-input-bg-color: var(--theme-block-bg);
+      --el-border-color: var(--theme-border-color);
+      box-shadow: none;
+    }
+
+    .el-input-number__increase,
+    .el-input-number__decrease {
+      background: var(--theme-active-bg);
+      border-bottom: 1px solid var(--theme-border-color);
+      border-left: 1px solid var(--theme-border-color);
+    }
+
+  }
+
+  :deep(.el-form-item__label) {
+    user-select: none !important;
+
+  }
+
+  .config-item {
+    display: flex;
+
+    justify-content: space-between;
+
+    .label {
+      width: 70px;
+      margin-right: 10px;
+      flex-shrink: 0;
+    }
+
+    .position {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      width: 100%;
+      justify-content: space-between;
+
+      .input-position {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        width: 48%;
+      }
+    }
+  }
+
+  .base-style-config-list {
+
+    .color-item {
+      :deep(.el-form-item__content) {
+        display: flex;
+        align-items: center;
+
+        .el-input {
+          flex: 1;
+          margin-left: 3px;
+        }
+      }
+    }
+
+    .el-form-item {
+      margin-bottom: 5px;
+
+      :deep(.el-input-number) {
+        width: 100%;
+      }
+
+      :deep(>.el-form-item__label) {
+        justify-content: flex-start !important;
+
+      }
+
+      :deep(.el-form-item__label) {
+        color: var(--theme-font-color) !important;
+
+      }
+    }
+
+    .padding,
+    .margin {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .input-padding,
+      .input-margin {
+        width: 48%;
+      }
+    }
+
+  }
+
+.el-form-item-css{
+  .el-form-item-css-label{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+}
+</style>