ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-config/configComponentLibs/FormItem.vue

@@ -0,0 +1,133 @@
+<script setup>
+
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  parent: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  currentColumn: {
+    type: Object,
+    default: () => ({})
+  },
+  newParent: {
+    type: Array,
+    default: () => []
+  },
+  allConfigComponentMap: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+
+/**
+ *
+ * @param {*} item
+ * @param {*} items
+ */
+const setIsShow = (item, items) => {
+  if (items.length === 0) {
+    return true
+  }
+  if (item?.isShow === undefined) return true
+  return item.isShow(item, items)
+}
+</script>
+
+<template>
+  <el-form-item class="base-form-item">
+    <template #label>
+      <el-tooltip effect="dark"
+                  :content="data.label"
+                  placement="left"
+                  v-if="data.label.length > 4">
+        {{ data.label }}
+      </el-tooltip>
+      <span v-else>{{ data.label }}</span>
+    </template>
+    <template v-if="[undefined, ''].includes(data.componentType)">
+      <div class="component"
+           :style="{ gap: data.gap + 'px' }">
+        <div v-for="component in data.components"
+             :key="component.key"
+             :style="{flex: component.flex}"
+             v-show="setIsShow(component, parent.children)"
+        >
+
+          <component :is="allConfigComponentMap[component.componentType]"
+                     :parent="data"
+
+                     :currentColumn="currentColumn"
+                     :data="component" />
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <component :is="allConfigComponentMap[data.componentType]"
+                 :data="data"
+                 v-if="setIsShow(data, newParent)"
+                 :parent="parent"
+                 :currentColumn="currentColumn"
+      />
+    </template>
+
+  </el-form-item>
+</template>
+
+<style lang="scss" scoped>
+.base-form-item {
+  margin-bottom: 8px;
+  &-component-name {
+    line-height: 40px;
+    text-align: center;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  &-item {
+    padding: 0 12px;
+    margin: 12px 0;
+  }
+  .component {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+  :deep() {
+    --el-component-size: 26px;
+
+    .el-form-item__label {
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--theme-font-color);
+    }
+    .el-form-item__content{
+      line-height: initial;
+    }
+
+    .el-input__wrapper {
+      background-color: var(--theme-block-bg);
+      box-shadow: 0 0 0 1px var(--theme-border-color, var(--theme-border-color)) inset;
+    }
+
+    .el-input__suffix {
+      color: var(--el-input-icon-color, var(--el-text-color-placeholder))
+    }
+
+    .el-form-item__content {
+      display: grid
+    }
+
+
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-config/configComponentLibs/Input.vue

@@ -0,0 +1,205 @@
+<script setup>
+import { computed, ref, unref, inject } from 'vue'
+
+import useModalValue from '../hooks/useModelValue'
+
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  configValue: {
+    type: Object,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// 是否配置后缀
+const suffix = computed(() => {
+  return props.config?.componentProps?.suffix ?? {}
+})
+// 是否配置后缀内容
+const append = computed(() => {
+  return props.config?.componentProps?.append ?? {}
+})
+// 是否有底部结构
+const bottom = computed(() => {
+  return props.config?.componentProps?.bottom ?? {}
+})
+
+const onClickAppend = () => {
+}
+
+/**
+ *  输入框内容改变
+ */
+const onChange = (e) => {
+  props.config.componentEvent?.change?.({
+    config: props.config,
+    configValue: props.configValue,
+    activeComponent: props.activeComponent,
+    value: props.configValue[props.config.key]
+  })
+}
+
+const getDisabled = computed(() => {
+  const value = props.configValue[props.config.key]
+  if (value?.startsWith?.('#d_')) return true
+  const disabled = props.config?.componentProps?.disabled
+  if (typeof disabled === 'boolean') {
+    return disabled
+  }
+  return false
+})
+
+const onBlur = (e) => {
+  props.config.componentEvent?.blur?.({
+    config: props.config,
+    configValue: props.configValue,
+    activeComponent: props.activeComponent,
+    value: props.configValue[props.config.key]
+  })
+}
+const onFocus = (e) => {
+  props.config.componentEvent?.focus?.({
+    config: props.config,
+    configValue: props.configValue,
+    activeComponent: props.activeComponent,
+    value: props.configValue[props.config.key]
+  })
+}
+const onClear = (e) => {
+  props.config.componentEvent?.clear?.({
+    config: props.config,
+    configValue: props.configValue,
+    activeComponent: props.activeComponent,
+    value: props.configValue[props.config.key]
+  })
+}
+
+const { modelValue } = useModalValue(props)
+
+
+</script>
+
+<template>
+  <div class="base-input">
+    <el-input v-model="modelValue"
+              :clearable="true"
+              :disabled="getDisabled"
+              @change="onChange"
+              @blur="onBlur"
+              @focus="onFocus"
+              @clear="onClear"
+              :type="config.componentProps?.type || 'text'"
+              v-bind="config.componentProps"
+    >
+      <template v-if="suffix.name" #suffix>
+        <span>{{ suffix.name }}</span>
+      </template>
+      <template v-if="append.name" #append>
+        <el-button v-if="append.icon"
+                   :icon="append.icon"
+                   @click="onClickAppend"></el-button>
+        <el-button v-else>{{ append.name }}</el-button>
+      </template>
+    </el-input>
+    <div v-if="bottom.name">{{ bottom.name }}</div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.base-input {
+  text-align: center;
+  display: flex;
+  align-items: center;
+
+  .dropdownContainer{
+    flex: 1;
+    .dropdownList{
+      width: 100%;
+    outline: none;
+    box-shadow: none;
+    background-color: var(--theme-block-bg);
+    border: 1px solid var(--theme-border-color);
+    :deep(.p-dropdown-label){
+      padding: 0;
+      text-align: left;
+      color: var(--theme-font-color);
+      font-size: 14px;
+    padding: 2px;
+    }
+  }
+  }
+
+
+  .more{
+    height: 100%;
+    cursor: pointer;
+    .el-icon{
+      width: 25px;
+      height: 100%;
+    }
+  }
+
+
+    .el-button {
+      line-height: 26px;
+      height: 26px;
+      padding: 0 5px;
+    }
+
+    :deep(.el-input-group__append) {
+      // background-color: var(--theme-active-bg);
+      background-color: var(--theme-block-bg);
+      box-shadow: 0 0 0 1px var(--theme-border-color, var(--theme-border-color)) inset;
+    }
+
+
+  .el-input {
+
+    :deep(.el-input__wrapper) {
+      background-color: var(--theme-block-bg);
+      border: 1px solid var(--theme-border-color);
+      box-shadow: none;
+
+
+      &:focus {
+        border-color: var(--theme-gl-bg) !important;
+      }
+
+
+      input {
+        color: var(--theme-font-color);
+      }
+    }
+  }
+}
+
+.code {
+  width: 500px;
+  height: 500px;
+  // background-color: var(--theme-active-bg);
+}
+</style>
+<style lang="less">
+.code-popper {
+  // background: var(--theme-bg) !important;
+  background-color: var(--theme-block-bg);
+  width: auto !important;
+  border: 1px solid var(--theme-border-color) !important;
+
+  .el-popper__arrow {
+    &::before {
+      // background: var(--theme-bg) !important;
+      background-color: var(--theme-block-bg);
+      border: 1px solid var(--theme-border-color) !important;
+    }
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-config/configComponentLibs/InputNumber.vue

@@ -0,0 +1,101 @@
+<script setup>
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  configValue: {
+    type: Object,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const onChange = (val) => {
+  props.config.componentEvent?.change?.({
+    config: props.config,
+    value: val,
+    configValue: props.configValue,
+    activeComponent: props.activeComponent
+  })
+}
+const onBlur = (val) => {
+  props.config.componentEvent?.blur?.({
+    config: props.config,
+    value: val,
+    configValue: props.configValue,
+    activeComponent: props.activeComponent
+  })
+}
+const onFocus = (val) => {
+  props.config.componentEvent?.focus?.({
+    config: props.config,
+    value: val,
+    configValue: props.configValue,
+    activeComponent: props.activeComponent
+  })
+}
+
+</script>
+
+<template>
+  <div class="base-input-number">
+    <el-input-number
+      v-model="configValue[config.key]"
+      v-bind="config.componentProps"
+      @change="onChange"
+      @blur="onBlur"
+      @focus="onFocus"
+      controls-position="right">
+    </el-input-number>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base-input-number {
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  justify-content: space-between;
+  :deep() {
+    .el-input-number {
+      width: 100%;
+
+      &__increase {
+        --el-input-number-controls-height: 12px;
+        background: var(--theme-active-bg);
+        border-bottom: 1px solid var(--theme-border-color);
+        border-left: 1px solid var(--theme-border-color);
+      }
+
+      &__decrease {
+        --el-input-number-controls-height: 12px;
+        background: var(--theme-active-bg);
+        border-left: 1px solid var(--theme-border-color);
+      }
+    }
+  }
+
+
+:deep(.el-input__wrapper) {
+  background-color: var(--theme-block-bg);
+  border: 1px solid var(--theme-border-color);
+  box-shadow: none;
+
+  &:focus {
+    border-color: var(--theme-gl-bg) !important;
+  }
+
+  input {
+
+
+    color: var(--theme-font-color);
+  }
+}
+
+
+}
+</style>

package/src/views/designer/modules/ibsp-config/configComponentLibs/InterfaceParamConfig.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from 'vue';
+
+import InterfaceParam from '../components/InterfaceParam.vue';
+
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  configValue: {
+    type: Object,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const visible = ref(false);
+
+
+const onClick = () => {
+  // debugger
+  if (!props.config.componentProps?.interfaceType?.id) {
+    ElMessage.warning('请先选择接口');
+    return;
+  }
+  visible.value = true;
+};
+
+const onOk = (params) => {
+  props.configValue[props.config.key] = params;
+};
+
+</script>
+
+<template>
+  <div class="interface-parma-config">
+    <el-button @click="onClick">
+      接口参数配置
+    </el-button>
+    <InterfaceParam v-if="visible"
+                    v-model="visible"
+                    :component="activeComponent"
+                    :interfaceType="config.componentProps?.interfaceType"
+                    :param-value="configValue[config.key]"
+                    @ok="onOk"/>
+  </div>
+</template>

package/src/views/designer/modules/ibsp-config/configComponentLibs/Modal.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed, ref, markRaw } from 'vue'
+import { Setting } from '@element-plus/icons-vue';
+
+import Dialog from './Dialog.vue'
+import Drawer from './Drawer.vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  config: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  configValue: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const dialogVisible = ref(false)
+/** */
+const openDialog = () => {
+  dialogVisible.value = true
+
+}
+/** */
+const handleClose = (e) => {
+  dialogVisible.value = false
+}
+
+const component = computed(() => {
+  return markRaw(props.config.componentProps.type === 'dialog' ? Dialog : Drawer)
+})
+</script>
+
+<template>
+  <div class="base-modal">
+    <div class="btn">
+      <Setting style="width: 1em; height: 1em; margin-right: 8px;cursor: pointer;" @click="openDialog"/>
+    </div>
+    <Teleport to="#app">
+      <component :is="component"
+                 v-if="dialogVisible"
+                 v-model="dialogVisible"
+                 :config="config"
+                 :configValue="configValue"
+                 :activeComponent="activeComponent"></component>
+    </Teleport>
+
+  </div>
+</template>
+
+<style lang="less" scoped>
+.base-modal {
+  .btn {
+    text-align: right;
+  }
+
+    .el-drawer {
+      background-color: var(--theme-bg);
+
+      :deep(&__header) {
+        box-shadow: inset 0px -1px 0px 0px #363841;
+        padding: 15px;
+        margin: 0;
+      }
+
+      :deep(&__footer) {
+        border-top: 1px solid #363841;
+        text-align: left;
+      }
+    }
+
+}
+</style>

package/src/views/designer/modules/ibsp-config/configComponentLibs/MonacoEditor.vue

@@ -0,0 +1,108 @@
+<!-- <script setup>
+import { onMounted, onBeforeUnmount, nextTick, ref, computed } from 'vue';
+import { debounce } from 'lodash-es'
+import { editor } from 'monaco-editor/esm/vs/editor/editor.main'
+import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution' // 代码高亮
+import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController' // 引入查找控件
+const props = defineProps({
+  options: {
+    type: Object,
+    default: () => ({
+      language: 'javascript',
+      value: '',
+      height: 212
+    })
+  }
+})
+
+const emit = defineEmits(['updateData'])
+
+const code = ref(props.options.value)
+const codeStyle = computed(() => {
+  return {
+    height: props.options.height + 'px'
+  }
+})
+onMounted(() => {
+  nextTick(() => {
+    initMonacoEditor()
+  })
+})
+/** */
+const initMonacoEditor = () => {
+  const monacoEditor = editor.create(document.getElementById('container'), {
+    value: code.value || 'function abc(){}',
+    theme: 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
+    readOnly: false, // 是否可编辑 // 是否为只读模式
+    language: props.options.language, // 语言类型
+    acceptSuggestionOnCommitCharacter: true, // 接受关于提交字符的建议
+    acceptSuggestionOnEnter: 'on', // 接受输入建议 "on" | "off" | "smart" //-如果设置off 编辑器上的代码补全显示了,但却不补上
+    accessibilityPageSize: 10, // 辅助功能页面大小 Number 说明：控制编辑器中可由屏幕阅读器读出的行数。警告：这对大于默认值的数字具有性能含义。
+    accessibilitySupport: 'off', // 辅助功能支持 控制编辑器是否应在为屏幕阅读器优化的模式下运行。
+    autoClosingBrackets: 'always', // 是否自动添加结束括号(包括中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"
+    autoClosingDelete: 'always', // 是否自动删除结束括号(包括中括号) "always" | "never" | "auto"
+    autoClosingOvertype: 'always', // 是否关闭改写 即使用insert模式时是覆盖后面的文字还是不覆盖后面的文字 "always" | "never" | "auto"
+    autoClosingQuotes: 'always', // 是否自动添加结束的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"
+    autoIndent: 'None', // 控制编辑器在用户键入、粘贴、移动或缩进行时是否应自动调整缩进
+    automaticLayout: true, // 自动布局
+    foldingStrategy: 'indentation', // 折叠方式  auto | indentation
+    codeLens: false, // 是否显示codeLens 通过 CodeLens，你可以在专注于工作的同时了解代码所发生的情况 – 而无需离开编辑器。 可以查找代码引用、代码更改、关联的 Bug、工作项、代码评审和单元测试。
+    codeLensFontFamily: '', // codeLens的字体样式
+    codeLensFontSize: 14, // codeLens的字体大小
+    colorDecorators: false, // 呈现内联色彩装饰器和颜色选择器
+    comments: {
+      ignoreEmptyLines: true, // 插入行注释时忽略空行。默认为真。
+      insertSpace: true // 在行注释标记之后和块注释标记内插入一个空格。默认为真。
+    }, // 注释配置
+    contextmenu: true, // 启用上下文菜单
+    columnSelection: false, // 启用列编辑 按下shift键位然后按↑↓键位可以实现列选择 然后实现列编辑
+    autoSurround: 'never', // 是否应自动环绕选择
+    copyWithSyntaxHighlighting: true, // 是否应将语法突出显示复制到剪贴板中 即 当你复制到word中是否保持文字高亮颜色
+    cursorBlinking: 'Solid', // 光标动画样式
+    cursorSmoothCaretAnimation: true, // 是否启用光标平滑插入动画  当你在快速输入文字的时候 光标是直接平滑的移动还是直接"闪现"到当前文字所处位置
+    cursorStyle: 'UnderlineThin', // "Block"|"BlockOutline"|"Line"|"LineThin"|"Underline"|"UnderlineThin" 光标样式
+    cursorSurroundingLines: 0, // 光标环绕行数 当文字输入超过屏幕时 可以看见右侧滚动条中光标所处位置是在滚动条中间还是顶部还是底部 即光标环绕行数 环绕行数越大 光标在滚动条中位置越居中
+    cursorSurroundingLinesStyle: 'all', // "default" | "all" 光标环绕样式
+    cursorWidth: 2, // <=25 光标宽度
+    minimap: {
+      enabled: false // 是否启用预览图
+    }, // 预览图设置
+    folding: true, // 是否启用代码折叠
+    links: true, // 是否点击链接
+    overviewRulerBorder: false, // 是否应围绕概览标尺绘制边框
+    renderLineHighlight: 'gutter', // 当前行突出显示方式
+    roundedSelection: false, // 选区是否有圆角
+    scrollBeyondLastLine: false // 设置编辑器是否可以滚动到最后一行之后
+
+  })
+  const getValue = debounce(() => {
+    const value = monacoEditor.getValue() // 获取编辑器中的语句
+    emit('updateData', value)
+  }, 1000)
+
+  // 监听编辑器内容变化
+  monacoEditor.onDidChangeModelContent(() => {
+    getValue()
+  })
+}
+</script>
+<template>
+  <div
+    id="container"
+    class="code-editor"
+    :style="codeStyle"></div>
+</template>
+<style scoped>
+.code-editor {
+  width: 100%;
+  min-height: 212;
+}
+</style> -->
+<script setup>
+//
+</script>
+
+<template>
+  <div></div>
+</template>
+