@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/visual/config/Input.vue

@@ -0,0 +1,712 @@
+<template>
+<div class="config-input" ref="configInput">
+  <div class="input-container">
+    <div class="input-inner">
+      <div class="input" ref="input" :contenteditable="!readonly? 'true': 'false'" @focus="inputFocus" @blur="onBlur" @paste="paste" @click="inputClick" @dblclick="onDblclick" :placeholder="isInputVariable?'输入“/”插入变量或函数': ''"
+        @input="changeValue"
+      ></div>
+    </div>
+    <div class="input-suffix" v-if="isInputVariable && !readonly" @click.stop>
+      <el-tooltip  effect="dark" content="点击插入变量或函数" placement="top" @click.stop>
+        <i class="epx-icon-bianliang"  @mousedown="openContextMenu"  @click.stop></i>
+      </el-tooltip>
+    </div>
+  </div>
+  <!-- 变量菜单打开时才渲染：里面有 2~3 棵 el-tree + el-tabs，面板里十几个输入框常驻渲染是点击卡顿的大头 -->
+  <div class="variable-menu__container" :style="{left: variablePos && variablePos.x , top: variablePos && variablePos.y}" v-if="showContentMenu" @click.stop >
+    <el-tree v-if="designer.mode==='template'" :data="templateAttributeTree" :props="templateAttributeProps" >
+      <template v-slot="{ data }">
+        <span :style="{flex: 1}" @mousedown="e=>addParams(data, e)">
+        {{data.text}}
+        </span>
+      </template>
+    </el-tree>
+    <el-tabs class="variable-tabs" v-else v-model="activeVariableTab">
+      <el-tab-pane label="插入变量" name="variable">
+        <el-tree class="variable-tree"  :data="variableList" :props="variableProps">
+          <template v-slot="{ data }">
+            <span :style="{flex: 1}" @mousedown="e=>addVariable(data, e)">
+            {{data.name || data.code}}
+            </span>
+          </template>
+        </el-tree>
+      </el-tab-pane>
+      <el-tab-pane label="插入函数" name="function">
+         <el-tree class="variable-tree"  :data="functionLibrary" :props="variableProps">
+          <template v-slot="{ data }">
+            <span :style="{flex: 1}" @mousedown="e=>addFunction(data, e)">
+            {{data.name || data.code}}
+            </span>
+          </template>
+        </el-tree>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+  <!-- 多语言面板里每种语言各嵌一个输入控件，persistent 关掉：点开地球图标才渲染、才建 popper -->
+  <el-popover
+    placement="bottom"
+    width="330"
+    trigger="click"
+    :persistent="false"
+    v-if="isInternational && !readonly"
+  >
+    <template v-slot:reference><i class="language-icon epx-icon-diqiu"></i></template>
+    <div class="language">
+      <div class="language-item" v-for="language in languageList" :key="language.id">
+        <label class="language-item__label" for="">{{language.name}}：</label>
+        <epx-visual-config-input :designer="designer" :value="i18nValue[language.id]" :isInternational="false" @change-configs="v=>changeLanguageValue(language.id, v)"></epx-visual-config-input>
+      </div>
+    </div>
+  </el-popover>
+</div>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { loadSystemVariables, loadFunctionTree } from './variable-sources'
+export default {
+  name: 'epx-visual-config-input',
+  props: {
+    designer: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    label: String,
+    value: [String, Number],
+    i18nValue: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    defaultValue: String,
+    change: Function,
+    readonly: Boolean,
+    regExp: String,
+    isInternational: {
+      type: Boolean,
+      default: true
+    },
+    inputVariable: {
+      type: Boolean,
+      default: false
+    },
+    pageParams: Array
+  },
+  data () {
+    return {
+      inputContent: '',
+      computedValue: '',
+      showContentMenu: false,
+      inputFocused: false,
+      templateAttributeProps: {
+        children: 'children',
+        label: 'text'
+      },
+      variableProps: {
+        children: 'children',
+        label: 'name'
+      },
+      systemVariableList: [],
+      activeVariableTab: 'variable',
+      functionLibrary: [],
+      variablePos: {}
+    }
+  },
+  watch: {
+    value (v) {
+      if (this.initValue) {
+        this.setInputContent(v)
+      }
+    },
+    // 首次打开变量菜单再拉系统变量与函数树；此前每个输入框挂载都各发两次请求
+    showContentMenu (v) {
+      if (v) this.ensureVariableSources()
+    }
+  },
+  computed: {
+    isInputVariable () {
+      return this.inputVariable || this.designer.mode === 'template'
+    },
+    languageList () {
+      const { LANGUAGES: languages = '', 'LANGUAGES#': languageNames = '', LANGUAGE_DEFAULT: defaultLanguage } = this.clientConfig
+      if (!languages) return []
+      const languageIdList = languages.split(',')
+      const languageNameList = languageNames.split(',')
+      const languageList = languageIdList.map((item, index) => ({ id: item, name: languageNameList[index] }))
+      return languageList.filter(item => item.id !== defaultLanguage)
+    },
+    pageVariableSets () {
+      return this.pageParams || this.designer.pageConfig?.variableSets || []
+    },
+    templateAttributeTree () {
+      return this.designer.mode === 'template' ? this.designer.templateAttributeTree : []
+    },
+    fieldConfigs () {
+      const fieldConfigs = { attriName: 'configInput', dataType: 'text', state: 'ADD', attriLabel: this.label, readonly: this.readonly ? '1' : '0', attribute: { international: '1' } }
+      if (this.regExp) {
+        fieldConfigs.attribute.format = 'reg_exp'
+        fieldConfigs.attribute.regexp = this.regExp
+      }
+      return fieldConfigs
+    },
+    variableList () {
+      return [{
+        name: '页面变量',
+        code: 'page',
+        children: this.pageVariableSets
+      }, {
+        name: '系统变量',
+        code: 'system',
+        children: this.systemVariableList
+      }, {
+        name: '自定义变量',
+        code: 'customize'
+      }]
+    }
+  },
+  methods: {
+    ensureVariableSources () {
+      if (this._variableSourcesLoaded) return
+      this._variableSourcesLoaded = true
+      loadSystemVariables(this.$http).then(list => { this.systemVariableList = list })
+      // 只读树：markRaw 掐掉整棵树的深度响应式（省的是依赖收集，不是 Proxy 本身）。
+      // 将来若要改树里某个节点并期望 UI 跟着变，正确做法是重新赋一份新数组，而不是把 markRaw 摘掉。
+      loadFunctionTree(this.$http).then(tree => { this.functionLibrary = markRaw(tree) })
+    },
+    getTemplateAttribute (key) {
+      for (const item of this.templateAttributeTree) {
+        if (item.entity.data.CODE === key) {
+          return item.entity.data
+        } else if (item.children && item.children.length > 0) {
+          for (const child of item.children) {
+            if (child.entity.data.CODE === key) return child.entity.data
+          }
+        }
+      }
+    },
+    highlightFunctionCall (expression) {
+      let result = ''
+      let i = 0
+
+      while (i < expression.length) {
+        const char = expression[i]
+
+        // 处理函数名
+        if (/[a-zA-Z]/.test(char)) {
+          let functionName = ''
+          while (i < expression.length && /[a-zA-Z]/.test(expression[i])) {
+            functionName += expression[i]
+            i++
+          }
+          if (expression[i] === '(') {
+            result += `<span class="function">${functionName}</span>`
+          } else {
+            result += `<span class="epx-visual-config-input__variable" contenteditable="false">${functionName}</span>`
+          }
+          continue
+        }
+
+        // 处理字符串
+        if (char === '"' || char === "'") {
+          const quote = char
+          result += `<span class="string">${quote}`
+          i++
+          while (i < expression.length && expression[i] !== quote) {
+            result += expression[i]
+            i++
+          }
+          if (i < expression.length) {
+            result += quote + '</span>'
+          }
+          i++
+          continue
+        }
+
+        // 处理数字
+        if (/[0-9]/.test(char)) {
+          let number = ''
+          while (i < expression.length && /[0-9.]/.test(expression[i])) {
+            number += expression[i]
+            i++
+          }
+          result += `<span class="number">${number}</span>`
+          continue
+        }
+
+        // 处理括号和逗号
+        if (char === '(' || char === ')' || char === ',') {
+          result += `<span class="parenthesis">${char}</span>`
+          i++
+          continue
+        }
+
+        // 其他字符
+        result += char
+        i++
+      }
+
+      return result
+    },
+    setInputContent (v = '') {
+      if (!v) return
+      const html =
+        String(v)
+          .replace(/\{\{([\w-.,|$#[\]()"'\s]+)\}\}/g, (match, key) => `<span class="epx-visual-config-input__expression" data-type="expression" contenteditable="false" data-value="{{${key}}}">${this.highlightFunctionCall(key)}</span>`)
+          .replace(/\$\[([\w-.|$#]+)\]/g, (match, key) => `<span class="epx-visual-config-input__variable" contenteditable="false" data-value="$[${key}]">${key}</span>`)
+          .replace(/@\[([\w-.|$#]+)\]/g, (match, key) => {
+            const param = this.getTemplateAttribute(key)
+            return `<span class="epx-visual-config-input__params" contenteditable="false" data-value="@[${key}]">${param?.NAME || key}</span>`
+          })
+      // 使用全局 xss 过滤器净化，白名单已在 main.js 中配置
+      this.inputContent = this.xss.process(html)
+      if (this.$refs.input) this.$refs.input.innerHTML = this.inputContent
+    },
+    getInputValue (v) {
+      const node = document.createElement('div')
+      node.innerHTML = v
+      // 获取变量标签
+      node.querySelectorAll('[data-type="expression"]').forEach(item => {
+        item.innerHTML = `{{${item.innerText}}}`
+      })
+
+      node.querySelectorAll('.epx-visual-config-input__variable').forEach(item => {
+        item.innerText = `$[${item.innerText}]`
+      })
+      node.querySelectorAll('.epx-visual-config-input__params').forEach(item => {
+        item.innerText = `${item.getAttribute('data-value')}`
+      })
+
+      node.querySelectorAll('div').forEach(item => {
+        item.parentNode.insertBefore(document.createTextNode('\n'), item)
+      })
+      return node.innerText
+    },
+    clearValue () {
+      if (this.inputFocused) {
+        this.$refs.input.innerHTML = ''
+        this.changeValue('')
+        this.$refs.input.focus()
+      }
+    },
+    changeValue (e) {
+      if (e.data === '/') {
+        if (!this.isInputVariable) return
+        this.showContentMenu = true
+        this.lastEditRange = null
+        const selection = window.getSelection()
+        const range = selection.getRangeAt(0)
+        const rect = range.getBoundingClientRect()
+        const inputRect = this.$refs.configInput.getBoundingClientRect()
+        const top = rect.bottom - inputRect.top
+        this.variablePos = {
+          x: 0,
+          y: top + 20 + 'px'
+        }
+      } else {
+        this.showContentMenu = false
+      }
+    },
+    insertAtCursor (el, newElement) {
+      const range = this.range
+      let selectedNode = range.startContainer
+      if (!this.$refs.input.contains(selectedNode)) {
+        selectedNode = this.$refs.input
+      }
+      const parent = selectedNode.nodeName === '#text' ? selectedNode.parentNode : selectedNode
+      // 删除当前文本节点
+      if (selectedNode.nodeName === '#text') {
+        const start = selectedNode.data.substring(0, range.startOffset)
+        const end = selectedNode.data.substring(range.startOffset)
+        parent.insertBefore(newElement, selectedNode)
+        const startNode = document.createTextNode(start.endsWith('/') ? start.slice(0, -1) : start)
+        parent.insertBefore(startNode, newElement)
+
+        if (end.length > 0) {
+          const endNode = document.createTextNode(end)
+          parent.insertBefore(endNode, newElement.nextSibling)
+        }
+      } else {
+        parent.insertBefore(newElement, parent.childNodes[range.startOffset])
+      }
+      selectedNode.data = ''
+    },
+    addVariable (variable, e) {
+      if (variable.children) return
+      const selection = window.getSelection()
+      const range = document.createRange()
+      const span = document.createElement('span')
+      span.className = 'epx-visual-config-input__variable'
+      if (variable.code === 'customize') {
+        const textNode = document.createTextNode(' ')
+        span.appendChild(textNode)
+        this.insertAtCursor(this.$refs.input, span)
+        range.setStart(span, 0)
+        range.setEnd(span, 1)
+      } else {
+        span.innerHTML = variable.code
+        span.contentEditable = 'false'
+        span.setAttribute('data-value', `$[${variable.code}]`)
+        this.insertAtCursor(this.$refs.input, span)
+        range.setStart(span.nextSibling, 0)
+        range.collapse(true)
+      }
+      e.preventDefault()
+      selection.removeAllRanges()
+      selection.addRange(range)
+    },
+    addFunction (item, e) {
+      if (!item.leaf) return
+      const selection = window.getSelection()
+      const range = document.createRange()
+      const span = document.createElement('span')
+      span.className = 'epx-visual-config-input__expression'
+      span.contentEditable = 'false'
+      span.innerHTML = item.code + '()'
+      span.setAttribute('data-type', 'expression')
+      span.setAttribute('data-value', `{{${item.code}}}`)
+      this.insertAtCursor(this.$refs.input, span)
+      range.setStart(span, 1)
+      range.collapse(true)
+      e.preventDefault()
+      selection.removeAllRanges()
+      selection.addRange(range)
+    },
+    addParams (data, e) {
+      e.preventDefault()
+      if (data.leaf) {
+        const param = data.entity.data
+        const span = document.createElement('span')
+        span.innerHTML = param.NAME
+        span.className = 'epx-visual-config-input__params'
+        span.contentEditable = 'false'
+        span.setAttribute('data-value', `@[${param.CODE}]`)
+        this.insertAtCursor(this.$refs.input, span)
+        this.$refs.input.focus()
+      }
+    },
+    inputFocus () {
+      this.inputFocused = true
+    },
+    paste (e) {
+      // 阻止默认粘贴行为，防止富文本 HTML 直接注入 contenteditable
+      e.preventDefault()
+      const text = e.clipboardData.getData('text/plain')
+      document.execCommand('insertText', false, text)
+      if (/@\[([\w-.|$#]+)\]/.test(text)) {
+        setTimeout(() => {
+          this.setInputContent(this.getInputValue(this.$refs.input.innerHTML))
+        }, 0)
+      }
+    },
+    onBlur (e) {
+      setTimeout(() => {
+        this.inputFocused = false
+        if (document.activeElement !== this.$refs.input) {
+          let value = this.getInputValue(this.$refs.input.innerHTML)
+
+          value = value !== this.defaultValue ? value : null
+          this.$emit('change-configs', value)
+          if (this.change) this.change(value)
+        }
+      }, 20)
+    },
+    onDblclick (e) {
+      if (e.target.className === 'epx-visual-config-input__variable') {
+        e.target.contentEditable = 'true'
+      }
+    },
+    inputClick (e) {
+      if (e.target.className === 'epx-visual-config-input__variable') {
+        if (e.target.contentEditable === 'false') {
+          e.target.contentEditable = 'true'
+          const selection = document.getSelection()
+          const range = document.createRange()
+          // const textNode = e.target.childNodes[0]
+          range.selectNodeContents(e.target)
+          range.collapse()
+          selection.removeAllRanges()
+          selection.addRange(range)
+        }
+      } else if (e.target.getAttribute('data-type') === 'expression' || e.target.parentNode.getAttribute('data-type') === 'expression') {
+        const node = e.target.getAttribute('data-type') === 'expression' ? e.target : e.target.parentNode
+        if (node.contentEditable === 'false') {
+          node.contentEditable = 'true'
+          const selection = document.getSelection()
+          const range = document.createRange()
+          // const textNode = node.childNodes[0]
+          range.selectNodeContents(node)
+          range.collapse()
+          selection.removeAllRanges()
+          selection.addRange(range)
+        }
+      } else {
+        document.querySelectorAll('.epx-visual-config-input__variable').forEach(span => {
+          span.contentEditable = 'false'
+        })
+        document.querySelectorAll('[data-type="expression"]').forEach(span => {
+          span.contentEditable = 'false'
+        })
+      }
+    },
+    changeLanguageValue (id, v) {
+      const languageValue = {
+        ...this.i18nValue,
+        [id]: v
+      }
+      this.$emit('change-language-config', languageValue)
+    },
+    openContextMenu (e) {
+      this.lastEditRange = window.getSelection().getRangeAt(0)
+      e.stopPropagation()
+      this.showContentMenu = true
+      const inputRect = this.$refs.configInput.getBoundingClientRect()
+      this.variablePos = {
+        x: 0,
+        y: inputRect.height + 20 + 'px'
+      }
+    },
+    selectionChange () {
+      const selection = window.getSelection()
+      if (selection.rangeCount === 0) {
+        return
+      }
+      const range = selection.getRangeAt(0)
+      if (this.$refs.input.contains(range.startContainer)) {
+        this.range = range
+        if (selection.focusNode.className !== 'epx-visual-config-input__variable' && selection.focusNode.parentNode && selection.focusNode.parentNode.className !== 'epx-visual-config-input__variable') {
+          document.querySelectorAll('.epx-visual-config-input__variable').forEach(span => {
+            span.contentEditable = 'false'
+          })
+        }
+      }
+    }
+  },
+  mounted () {
+    if (this.value === null || this.value === undefined) {
+      this.setInputContent(this.defaultValue)
+    } else {
+      this.setInputContent(this.value)
+    }
+    this.initValue = true
+    // 监听器存到实例上，unmounted 时移除；匿名闭包会让 window 永久持有本实例
+    this._onWindowClick = () => { this.showContentMenu = false }
+    window.addEventListener('click', this._onWindowClick)
+    document.addEventListener('selectionchange', this.selectionChange)
+
+    this.$refs.input.addEventListener('keydown', e => {
+      if (e.keyCode === 13) {
+        if (this.range && this.range.startContainer) {
+          let variableSpan = null
+          if (this.range.startContainer.className === 'epx-visual-config-input__variable') {
+            variableSpan = this.range.startContainer
+          } else if (this.range.startContainer.parentNode.className === 'epx-visual-config-input__variable') {
+            variableSpan = this.range.startContainer.parentNode
+          }
+          if (variableSpan) {
+            e.preventDefault()
+            variableSpan.contentEditable = false
+            // 选择下一个节点
+            const nextNode = variableSpan.nextSibling
+            let textNode = null
+            if (!nextNode || nextNode.nodeType !== 3) {
+              textNode = document.createTextNode()
+              if (!nextNode) {
+                variableSpan.parentNode.appendChild(textNode)
+              } else {
+                variableSpan.parentNode.insertBefore(textNode, nextNode)
+              }
+            } else {
+              textNode = nextNode
+            }
+            const selection = window.getSelection()
+            const range = selection.getRangeAt(0)
+            range.setStart(textNode, 0)
+
+            selection.removeAllRanges()
+            selection.addRange(range)
+          }
+        }
+      } else if (e.keyCode === 8) {
+        const startContainer = this.range.startContainer
+        // 清空变量元素
+        setTimeout(() => {
+          if (!this.$refs.input.contains(startContainer)) {
+            const selection = window.getSelection()
+            const range = selection.getRangeAt(0)
+
+            selection.removeAllRanges()
+            selection.addRange(range)
+          }
+        }, 0)
+      }
+    })
+  },
+  unmounted () {
+    window.removeEventListener('click', this._onWindowClick)
+    document.removeEventListener('selectionchange', this.selectionChange)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.config-input {
+  display: flex;
+  position: relative;
+}
+.input-container{
+  position: relative;
+  width: 180px;
+  border: 1px solid var(--epx-border);
+  border-radius: var(--epx-radius-base);
+  &:has(.input-suffix) {
+    .input-inner {
+      padding-right: 30px;
+    }
+  }
+}
+.input-inner {
+  width: 100%;
+  height: 34px;
+  padding: 5px 15px;
+
+}
+.input {
+  flex: 1;
+  line-height: 24px;
+  color: #606266;
+  white-space: pre;
+  overflow: hidden;
+  overflow-x: auto;
+  scrollbar-width: none;
+  &[contenteditable='true']:empty::before {
+    content: attr(placeholder);
+    color: #a9a9a9;
+  }
+}
+.input-suffix {
+  position: absolute;
+  right: 6px;
+  bottom: 9px;
+  z-index: 10;
+  display: inline-block;
+  width: 20px;
+  line-height: 20px;
+  text-align: center;
+  color: #888;
+  cursor: pointer;
+  background: #F2F3F7;
+  border-radius: var(--epx-radius-s);
+}
+.variable-menu__container {
+  position: absolute;
+  z-index: 999;
+  width: 200px;
+  background: var(--epx-bg-card);
+  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15);
+  border-radius: var(--epx-radius-base);
+  border: 1px solid #DDE0E6;
+  height: 360px;
+  overflow: auto;
+  top: 36px;
+  left: 0;
+}
+.variable-menu__header {
+  padding: 0 10px;
+  line-height: 32px;
+  font-weight: 600;
+}
+.variable-tabs {
+
+    :deep(.el-tabs__header) {
+      margin-bottom: 10px;
+    }
+    :deep(.el-tabs__nav) {
+      width: 100%;
+    }
+    :deep(.el-tabs__item) {
+      width: 50%;
+      padding: 0;
+      text-align: center;
+    }
+    :deep(.el-tabs__active-bar) {
+      width: 50%!important;
+    }
+    :deep(.el-tabs__content) {
+      overflow: visible;
+    }
+
+}
+.variable-tree {
+
+    :deep(.el-tree-node__content) {
+      height: 36px;
+    }
+
+}
+
+.variable-item {
+  padding: 0 10px;
+  cursor: pointer;
+  color: #333;
+  line-height: 32px;
+  &:hover {
+    @include bg_color_primary(.2);
+  }
+}
+.language-icon {
+  cursor: pointer;
+  margin-left: 8px;
+  font-size: var(--epx-font-size-l);
+  @include font_color_primary;
+}
+
+.language {
+  padding: 10px;
+}
+
+.language-item {
+  display: flex;
+  align-items: center;
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+}
+.language-item__label {
+  width: 80px;
+  margin-right: 10px;
+  text-align: right;
+}
+.language-item__input {
+  width: 220px;
+
+    :deep(.el-input__inner) {
+      width: 220px;
+    }
+
+}
+.language-operate {
+  float: right;
+  margin: 10px 0;
+}
+</style>
+<style lang="scss">
+@include b(visual-config-input) {
+  @include e(variable) {
+    padding: 0 2px;
+    border-radius: var(--epx-radius-base);
+    @include bg_color_primary;
+    color:#fff;
+    margin: 0 2px;
+  }
+  @include e(params) {
+    padding: 0 2px;
+    border-radius: var(--epx-radius-base);
+    background: #E6A23C;
+    color:#fff;
+    margin: 0 2px;
+  }
+}
+</style>