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

package/src/visual/Component.vue

@@ -0,0 +1,1342 @@
+<script>
+// @jsx-vue3（T33：T30 JSX 批漏掉的 6 个文件，见 .claude/codemod/codemod-jsx-vue3-tail6.mjs）
+import ConfigOptions from './config/Options.vue'
+import { getCached, attributeTreeKey } from './config/remote-cache'
+import { compileShowCondition } from './config/show-condition'
+import { evalWith } from '@epxing/utils/src/eval-with'
+/* eslint-disable no-eval */
+import { mapState, mapGetters } from 'vuex'
+import { isEqual, cloneDeep } from 'lodash-es'
+
+// 只挑出与上次提交不同的 key；上次有、这次没有的 key 送 null（让 designer 删掉该字段）
+function diffPatch (prev, next) {
+  const patch = {}
+  let changed = false
+  for (const key in next) {
+    if (!isEqual(prev[key], next[key])) {
+      patch[key] = next[key]
+      changed = true
+    }
+  }
+  for (const key in prev) {
+    if (!(key in next)) {
+      patch[key] = null
+      changed = true
+    }
+  }
+  return changed ? patch : null
+}
+
+export default {
+  name: 'epx-visual-component',
+  components: {
+    [ConfigOptions.name]: ConfigOptions
+  },
+  props: {
+    designer: Object,
+    widget: Object,
+    id: [String, Number],
+    metaId: String,
+    upMetaId: String,
+    upMetaViewId: String,
+    componentInfo: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    compConfig: {
+
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    globalConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    upComponent: {
+      type: String,
+      default: ''
+    },
+    upId: String,
+    upComponentInstance: Object,
+    pageActionList: {
+      type: Array
+    },
+    pageRuleList: {
+      type: Array
+    },
+    pageRelationList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    pageAllFieldList: {
+      type: Array
+    },
+    pageParams: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    scopeConfigs: Object
+  },
+  provide () {
+    return {
+      // 供 epx-visual-config-form-item 调用 renderFormItem：每个配置项在自己的子组件里渲染，只依赖自己读到的 key
+      visualComponent: this
+    }
+  },
+  inject: {
+    pageId: {
+      type: String
+    },
+    pageConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    getPageMetaId: {
+      type: Function
+    },
+    getItemConfigs: {
+      type: Function
+    },
+    changeItemConfigs: {
+      type: Function
+    },
+    updateWidget: {
+      type: Function
+    },
+    setContainerDefaultItems: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      spanOptions: [],
+      config: {},
+      defaultConfigs: {},
+      componentActionList: null, // 列表页面单独请求
+      componentTreeFieldStore: null, // 放在配置页
+      configOptions: [],
+      FunctionOption: [],
+      commonOperates: [],
+      componentMetaId: null,
+      metaViewId: null,
+      componentRuleList: null,
+      componentRelationList: null,
+      foldMap: {},
+      opened: {}
+    }
+  },
+  computed: {
+    ...mapState({
+      pages: state => state.page.configs,
+      metas: state => state.meta.metas
+    }),
+    ...mapGetters([
+      'getPageById',
+      'getCodeById',
+      'getMeta',
+      'getMetaRelationFields',
+      'getMetaViewFields'
+    ]),
+    pageMetaId () {
+      return this.getPageMetaId && this.getPageMetaId()
+    },
+    currentPage () {
+      const page = this.getPageById(this.pageId) || this.designer.page
+      return page
+    },
+    currentMetaId () {
+      return this.componentMetaId || this.upMetaId || this.metaId || this.pageMetaId
+    },
+    currentMetaViewId () {
+      return this.metaViewId || this.upMetaViewId
+    },
+    currentMeta () {
+      const meta = this.getMeta(this.currentMetaId)
+      if (!meta && this.currentMetaId) {
+        this.$store.dispatch({
+          type: 'ADD_META',
+          metaId: this.currentMetaId
+        })
+      }
+      return meta || null
+    },
+    pageMeta () {
+      return this.getMeta(this.pageMetaId)
+    },
+    itemConfigs () {
+      return this.getItemConfigs()
+    },
+    allConfigs: {
+      get () {
+        const all = { ...this.config }
+        const allConfigs = this.$_.assignWith(all, this.defaultConfigs, (value, defaultValue) => {
+          return this.$_.isNil(value) ? defaultValue : value
+        })
+        return allConfigs
+      },
+      set (v) {
+      }
+    },
+    isDefaultValue () {
+      return (key) => {
+        const { [key]: defaultValue } = this.defaultConfigs
+        const { [key]: value } = this.config
+        return defaultValue !== undefined && (value === undefined || this.$_.isEqual(value, defaultValue))
+      }
+    },
+
+    actionList () {
+      return this.componentActionList || this.pageActionList || []
+    },
+    ruleList () {
+      return this.componentRuleList || this.pageRuleList || []
+    },
+    relationList () {
+      return this.componentRelationList || this.pageRelationList || []
+    },
+    treeFieldStore () {
+      return this.getMetaViewFields(this.currentMetaId, this.currentMetaViewId)
+    },
+    functionList () {
+      const { JS = '' } = this.globalConfigs
+      const result = JS.match(/export\sfunction\s(\w+)/g)
+      const functionList = []
+      if (!result) return []
+      result.forEach(item => {
+        functionList.push(item.replace(/export\sfunction\s/, ''))
+      })
+      return functionList
+    },
+    getConfigMetaId () {
+      return item => {
+        if (item.metaId) return item.metaId
+        else if (item.dynamicMetaId) {
+          const getFieldRelatedMeta = (field) => {
+            const fieldConfigs = this.currentMeta.getAllFieldConfigs().find(item => item.attriName === field[0] || field)
+            return fieldConfigs.codeKey
+          }
+          const el = JSON.parse(item.dynamicMetaId).el.replace(/^#{(.*)}$/, '$1')
+          // 表达式里可用 getFieldRelatedMeta / configs：显式传作用域，不能靠直接 eval 捕获（见 eval-with.js）
+          return evalWith(el, { getFieldRelatedMeta, configs: this.allConfigs }, this)
+        }
+        return this.currentMetaId
+      }
+    },
+    showConfigOptions () {
+      const showFn = (item) => {
+        let flag = true
+        if (item.showFlag) {
+          for (const key in item.showFlag) {
+            if (Array.isArray(item.showFlag[key])) {
+              if (!item.showFlag[key].includes(this.allConfigs[key])) flag = false
+            } else {
+              // eslint-disable-next-line eqeqeq
+              if (item.showFlag[key] != this.allConfigs[key]) flag = false
+            }
+          }
+        }
+        if (flag && item.showCondition) {
+          // 表达式编译有缓存，同一段 showCondition 只 new Function 一次；解析失败给用户提示（只提示一次）
+          const compiled = compileShowCondition(item.showCondition, msg => this.$message && this.$message.error(msg))
+          if (compiled === false) {
+            flag = false
+          } else if (compiled) {
+            try {
+              flag = compiled.call(this, this.allConfigs)
+            } catch (error) {
+              console.error(error)
+              flag = false
+            }
+          }
+        }
+        return flag
+      }
+      // 此前每次都 cloneDeep 整棵配置项树再过滤；现在有 children 的项给浅拷贝，
+      // 没有 children 的项保持原引用，子组件 props 不变就不重渲染
+      const result = []
+      for (const item of this.configOptions) {
+        if (!showFn(item)) continue
+        result.push(item.children ? { ...item, children: item.children.filter(showFn) } : item)
+      }
+      return result
+    },
+    variableTree () {
+      const variableSets = this.designer.pageConfig?.variableSets || []
+      const { iterator } = this.allConfigs
+      const variableList = variableSets.map(item => ({ ...item, type: 'variable', text: item.name || item.code, code: item.code }))
+      if (iterator?.data) {
+        variableList.push({
+          type: 'variable',
+          text: this.selectedWidget.title + '_迭代变量',
+          code: iterator.name || 'item'
+        })
+      }
+      return [...(this.treeFieldStore || []), {
+        code: 'PAGE_VARIABLE',
+        text: '页面变量',
+        children: variableList
+      }]
+    },
+    $formatScope () {
+      return (scopeParams, data = {}) => {
+        const _scopeParams = this.$_.cloneDeep(scopeParams)
+        const that = this
+        const paramData = { ...this.$tab, ...this.$query, ...this.$pageParams, ...that.$compData }
+        for (const scopeKey in _scopeParams) {
+          const scope = _scopeParams[scopeKey]
+          if (!scope) continue
+          let values = scope.values
+          if (/#\{([\w-.|$#]+)\}/.test(values)) {
+            values = values.replace(/#\{([\w-.|$#]+)\}/, (match, key) => {
+              try {
+                return evalWith(`that.${key}`, { that }) || evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
+              } catch (error) {
+                return scope.values
+              }
+            })
+          }
+          if (/\$\[([\w-_.|$#]+)\]/.test(values)) {
+            values = values.replace(/\$\[([\w-.|$#]+)\]/, (match, key) => {
+              try {
+                return that.$util.getValueByPath(key, this) || that.$util.getValueByPath(key, paramData) || ''
+              } catch (error) {
+                return scope.values
+              }
+            })
+          }
+          if (/#\[([\w-.|$#]+)\]/.test(values)) {
+            values = values.replace(/#\[([\w-.|$#]+)\]/, (match, key) => {
+              try {
+                return evalWith(`data.${key}`, { data }) || ''
+              } catch (error) {
+                return scope.values
+              }
+            })
+          }
+          if (/\{\{([\w-_.,|$#[\]()"'\s]+)\}\}/g.test(values)) {
+            values = values.replace(/\{\{([\w-.,|$#[\]()"'\s]+)\}\}/g, (macth, key) => {
+              try {
+              // 执行表达式
+                return this.$util.evalExpression(key, paramData)
+              } catch (error) {
+                return `{{${key}}}`
+              }
+            })
+          }
+          scope.values = values
+          if (scope.scopeParams) {
+            scope.scopeParams = this.$formatScope(scope.scopeParams, data)
+          }
+        }
+        return _scopeParams
+      }
+    }
+  },
+  watch: {
+    pageParams: {
+      handler (v) {
+      },
+      deep: true
+    },
+    config: {
+      handler (v) {
+        if (v.metaId) this.componentMetaId = v.metaId
+        this.metaViewId = v.metaViewId
+        this.scheduleCommit()
+      },
+      deep: true
+    },
+    currentMetaId: {
+      handler (v) {
+        this.getActionList(v)
+        this.getRuleList(v)
+        this.getAllFields(v)
+        this.refreshConfigOptions(true)
+      },
+      immediate: true
+    },
+    currentMetaViewId: {
+      handler (v) {
+        this.getAllFields()
+        this.refreshConfigOptions(true)
+      },
+      immediate: true
+    },
+    actionList (v) {
+      this.refreshConfigOptions(false)
+    },
+    ruleList (v) {
+      this.refreshConfigOptions(false)
+    },
+    relationList (v) {
+      this.refreshConfigOptions(false)
+    },
+    pageRuleList () {
+      this.getOperateOptions()
+    }
+  },
+  methods: {
+    // 单 key 取值：config 里为 nil 时退回默认值。渲染配置项时用它而不是 allConfigs[key]，
+    // 让每个配置项子组件只依赖自己的 key，而不是整个 allConfigs computed
+    getConfigValue (key) {
+      const value = this.config[key]
+      return this.$_.isNil(value) ? this.defaultConfigs[key] : value
+    },
+    // deep watch 的回调只排队：同一微任务周期内的多次改动合并成一次提交
+    scheduleCommit () {
+      if (this._commitScheduled) return
+      this._commitScheduled = true
+      Promise.resolve().then(() => {
+        this._commitScheduled = false
+        this.commitConfig()
+      })
+    },
+    // getConfigs / getComponentSetting 仍全量计算（子类可覆盖，且只有几千次比较），
+    // 但只把与上次提交不同的 key 写回 designer——此前每次输入都全量写回，整个画布跟着重算
+    commitConfig () {
+      if (this.$.isUnmounted) return
+      const configs = this.getConfigs() || {}
+      const setting = this.getComponentSetting() || {}
+      const last = this._lastCommitted || { configs: {}, setting: {} }
+      const configPatch = diffPatch(last.configs, configs)
+      const settingPatch = diffPatch(last.setting, setting)
+      this._lastCommitted = { configs: cloneDeep(configs), setting: cloneDeep(setting) }
+      if (configPatch) this.changeItemConfigs(this.id, configPatch)
+      if (settingPatch && this.designer) this.designer.updateWidget(this.id, settingPatch)
+    },
+    // 配置项刷新入口：同一微任务周期内只执行首次（两个 immediate watcher 会在挂载期连续同步触发两次）。
+    // 首次是同步执行的，不延后——created 里 32 个子类的 initConfig 依赖这个时序。
+    refreshConfigOptions (withDefaults) {
+      if (this._refreshTicket) return
+      this._refreshTicket = true
+      Promise.resolve().then(() => { this._refreshTicket = false })
+      if (withDefaults) this.initDefaultConfigs()
+      this.initConfigOptions()
+      this.afterConfigOptions()
+    },
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: false,
+        span: 24,
+        xsspan: 24
+      }
+    },
+    getEntityRelation (v) {
+      const mainEntity = v || this.currentMetaId
+      // 关联对象树只跟主对象有关：同一主对象全局只请求一次（子类 watcher 会在一次选中里连调两次）
+      getCached('relation:' + mainEntity, () => this.$http.$get({
+        entityId: 'FM_ENTITY_RELATION',
+        action: 'getEntityRelationTree',
+        mainEntity
+      }))
+        .then(data => {
+          data.forEach(relation => {
+            relation.label = relation.title
+            relation.value = relation.flag
+            relation.children = relation.childrens
+            if (relation.childrens) {
+              relation.childrens.forEach(childRelation => {
+                childRelation.value = relation.flag + '#' + childRelation.flag
+                childRelation.label = childRelation.title
+              })
+            }
+          })
+          this.componentRelationList = data
+        })
+    },
+    getField (field) {
+      const code = typeof field === 'string' ? field : (field && (field.attriName || field.code))
+      if (!code) return null
+      const store = this.treeFieldStore || []
+      for (const meta of store) {
+        const fieldInfo = (meta.children || []).find(item => item.linkCode === code || item.field === code || item.code === code)
+        if (fieldInfo) return fieldInfo
+      }
+      if (code.includes('|')) {
+        // 关联字段：按 linkFlag 定位关联对象后再查找字段
+        const links = code.split('|')
+        const fieldCode = links.pop()
+        const linkFlag = links.join('|').toUpperCase()
+        const linkMeta = store.find(meta => meta.linkFlag && String(meta.linkFlag).toUpperCase() === linkFlag)
+        if (linkMeta) {
+          return (linkMeta.children || []).find(item => item.code === fieldCode || item.linkCode === code) || null
+        }
+      }
+      return null
+    },
+    // 视图切换时是否允许按新视图过滤已配置字段：
+    // 字段树未加载成功时不过滤（否则会误删全部字段）；
+    // 初次选中组件时 metaViewId 从空变为已保存值属于配置回显，也不过滤，仅用户真正切换视图时才过滤
+    canFilterFieldsByView (v) {
+      if (!this.treeFieldStore || !this.treeFieldStore.length) return false
+      if (!this._metaViewTouched) {
+        this._metaViewTouched = true
+        if (v === this._initialMetaViewId) return false
+      }
+      return true
+    },
+    async initConfigOptions () {
+      const baseOptions = [
+        { key: 'componentName', label: '组件名称' },
+        { key: 'componentEvents', label: '组件事件', type: 'event' },
+        { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
+        { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
+        { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
+      ]
+      // 已有配置项时不先打回基础项（那会闪一下并多渲染一轮），等数据到了整体替换
+      if (!this.configOptions || this.configOptions.length === 0) this.configOptions = baseOptions
+      if (this.componentInfo.ID || this.componentInfo.templateId) {
+        let eventList = this.getCodeById('EVENT')
+        if (!eventList) {
+          await this.$store.dispatch({
+            type: 'ADD_LIST',
+            key: 'EVENT'
+          })
+            .then(data => {
+              eventList = data
+            })
+        }
+        const params = {
+          action: 'getPageAttributeTree',
+          entityId: 'FM_PAGE_ATTRIBUTE',
+          pageId: this.componentInfo.ID || this.componentInfo.templateId,
+          showEntity: '1',
+          order_field: 'ORDER_NUM',
+          order_mode: 'asc'
+        }
+        if (this.widget?.type === 'template') {
+          params['scope.TEMPLATE'] = this.componentInfo.ID
+          params.entityId = 'FM_TEMPLATE_ATTRIBUTE'
+        } else {
+          params['scope.PAGE'] = this.componentInfo.ID || this.componentInfo.templateId
+        }
+        // 同一实体 + 页面的配置项树全局只请求一次；取到的是独立副本，下面的 formatData 可以放心原地改
+        const isTemplate = this.widget?.type === 'template'
+        const cacheKey = attributeTreeKey({ entityId: params.entityId, pageId: isTemplate ? this.componentInfo.ID : (this.componentInfo.ID || this.componentInfo.templateId), isTemplate })
+        getCached(cacheKey, () => this.$http.getTree(params))
+          .then(data => {
+            if (data && data.length > 0) {
+              const component = this.componentInfo || {}
+              const meta = this.currentMeta || {}
+              const pageMeta = this.pageMeta || {}
+              const that = this
+              let keywordFields = []
+              const { label, keyNames = [] } = meta
+              if (meta && meta.id) {
+                meta.allFields = meta.getAllFields()
+                keywordFields = [...keyNames]
+                if (label) {
+                  keywordFields.push(label)
+                }
+              }
+              // 配置项的动态默认值 / 动态选项表达式可引用这些名字：显式传作用域，不能靠直接 eval 捕获（见 eval-with.js）
+              const evalScope = { component, meta, pageMeta, that, keywordFields }
+              const formatData = (arr, fieldFlag = false) => {
+                arr.forEach(item => {
+                  const { TYPE, CODE, NAME, CODE_KEY, RELATED_ENTITY, RELATED_ENTITY_KEY, SHOW_CONDITION, DYNAMIC_META_ID, OBJECT_SCOPE, FIELD_EDITABLE, DEFAULT_VALUE_TYPE, DEFAULT_VALUE, DEFAULT_VALUE_DYNAMIC, INPUT_VARIABLE, NOTE, SHOW_NOTE, MULTIPLE, SHOW_SUB_FIELD, LIMIT_DATATYPE, OBJECT_FLAG, CUSTOM_FUNCTION, CODE_KEY_SET, CUSTOM_CODE_KEY, EVENT, IS_TREE, FIELD_CONFIGS, REG_EXP, INPUTABLE, DYNAMIC_OPTION } = item.entity.data
+                  try {
+                    if (DEFAULT_VALUE_TYPE === 'dynamic') {
+                      if (DEFAULT_VALUE_DYNAMIC) item.defaultValue = evalWith(DEFAULT_VALUE_DYNAMIC, { ...evalScope, item }, this)
+                    } else if (DEFAULT_VALUE) {
+                      if (TYPE === 'switch' || TYPE === 'num') {
+                        item.defaultValue = evalWith(DEFAULT_VALUE, { ...evalScope, item }, this)
+                      } else if (TYPE === 'operates') {
+                        item.defaultValue = JSON.parse(DEFAULT_VALUE)
+                      } else {
+                        item.defaultValue = DEFAULT_VALUE
+                      }
+                    }
+                  } catch (error) {
+                    console.error(error)
+                  }
+                  if (DYNAMIC_OPTION) {
+                    try {
+                      item.options = evalWith(`that.${DYNAMIC_OPTION}`, { that }, this)
+                    } catch (error) {
+                      console.error(error)
+                    }
+                  }
+
+                  if (!this.$_.isNil(item.defaultValue)) {
+                    this.defaultConfigs[CODE] = item.defaultValue
+                  }
+                  let attriName = CODE
+                  if (fieldFlag && CODE.includes('.')) {
+                    attriName = CODE.split('.')[1]
+                  }
+                  item.key = attriName
+                  item.label = NAME
+                  item.type = TYPE
+                  item.showCondition = SHOW_CONDITION
+                  item.dynamicMetaId = DYNAMIC_META_ID
+                  item.code = CODE_KEY
+                  item.object = RELATED_ENTITY
+                  item.dataKey = RELATED_ENTITY_KEY
+                  item.fieldEditable = FIELD_EDITABLE
+                  item.inputVariable = INPUT_VARIABLE === '1'
+                  item.tip = NOTE
+                  item.showTip = SHOW_NOTE === '1'
+                  item.regExp = REG_EXP
+                  if (INPUTABLE) item.inputable = INPUTABLE === '1'
+                  if (MULTIPLE)item.multiple = MULTIPLE !== '0'
+                  if (TYPE === 'field') {
+                    if (SHOW_SUB_FIELD)item.showSubField = SHOW_SUB_FIELD === '1'
+                    if (LIMIT_DATATYPE)item.limit = { dataType: LIMIT_DATATYPE.split(',') }
+                  } else if (TYPE === 'object') {
+                    if (OBJECT_FLAG)item.flag = OBJECT_FLAG
+                    if (IS_TREE)item.isTree = IS_TREE
+                    if (FIELD_CONFIGS)item.fieldConfigs = JSON.parse(FIELD_CONFIGS)
+                  } else if (TYPE === 'custom') {
+                    if (CUSTOM_FUNCTION) {
+                      if (typeof this[CUSTOM_FUNCTION] === 'function') {
+                        item.renderContent = this[CUSTOM_FUNCTION]
+                      }
+                    }
+                  }
+                  if (EVENT) {
+                    const event = {}
+                    eventList.forEach(item => {
+                      if (EVENT.includes(item.code)) {
+                        event[item.code] = item.name
+                      }
+                    })
+                    item.eventList = event
+                  }
+                  if (CODE_KEY_SET === '1' && CUSTOM_CODE_KEY) {
+                    item.options = JSON.parse(CUSTOM_CODE_KEY)
+                  }
+                  if (OBJECT_SCOPE) {
+                    const scope = JSON.parse(OBJECT_SCOPE)
+                    item.scopeParams = scope.scopeParams
+                  }
+                  if (item.children) {
+                    const flag = item.children.length > 0 && TYPE === 'field'
+                    formatData(item.children, flag)
+                  }
+                })
+              }
+              formatData(data)
+              this.configOptions = data
+            }
+          })
+      }
+    },
+    afterConfigOptions () {
+      if (this.upComponentInstance) {
+        // T29/$children：upComponentInstance 是 epx-component 包装，其内渲染的组件带 ref="component"
+      // （同 AddFormItem.vue:465 的既有写法）。Vue3 已移除 $children。
+        const upComponent = this.upComponentInstance.$refs.component || {}
+        const { subConfigOptions = [], subDefaultConfigs = {} } = upComponent
+        this.configOptions = [...subConfigOptions, ...this.configOptions]
+        this.defaultConfigs = {
+          ...subDefaultConfigs,
+          ...this.defaultConfigs
+        }
+      }
+    },
+    initConfig () {
+      const config = this.$_.cloneDeep(this.compConfig)
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      this.config = config
+      this.afterInitConfig()
+    },
+    afterInitConfig () {},
+    getActionList (v) {
+      if (!v || (v === this.pageMetaId && this.pageActionList)) return
+      getCached(`api:${v}`, () => this.$http.list({ action: 'getEntityAllApi', entityId: 'FM_ENTITY_API', metaId: v }))
+        .then(data => {
+          if (v === this.currentMetaId) {
+            this.componentActionList = data.entitys.map(item => ({ label: item.LABEL || item.NAME, value: item.NAME }))
+          }
+        })
+    },
+    getRuleList (v) {
+      if (!v || (v === this.pageMetaId && this.pageRuleList)) return
+      getCached(`rule:${v}`, () => this.$http.list({ entityId: 'ACT_RE_MODEL', 'scope.ENTITY': v, 'scope.CATEGORY': '2' }))
+        .then(data => {
+          if (v === this.currentMetaId) {
+            this.componentRuleList = data.entitys.map(item => ({ label: item.NAME || item.KEY, value: item.KEY }))
+          }
+        })
+    },
+    getFieldOptions () {
+      this.fieldOptions = [
+        { key: 'attriName', label: '字段', readonly: true },
+        { key: 'configWay', label: '配置方式', type: 'radio', options: [{ label: '默认配置', value: 'default' }, { label: '自定义', value: 'custom' }], defaultValue: 'default' },
+        { key: 'attriLabel', label: '名称', type: 'text' },
+        { key: 'width', label: '宽度', type: 'text', defaultValue: '120' },
+        { key: 'isLabel', label: '外部标签', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
+        { key: 'locked', label: '是否锁定', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
+        { key: 'color', label: '字体颜色', type: 'color', defaultValue: '#333' },
+        {
+          key: 'detailPageId',
+          label: '字段详情页面',
+          type: 'object',
+          object: 'FM_PAGE_CONFIG',
+          showFlag: {
+            dataType: ['object', 'multiobject']
+          }
+        }
+      ]
+    },
+    // 处理器列表 / 通用操作只跟组件类型（componentInfo.ID）有关：同类型面板全局只请求一次，
+    // created 与 pageRuleList 变化各触发一次也共享同一份
+    getHandlerList () {
+      getCached('handlers:' + this.componentInfo.ID, () => this.$http.list({
+        action: 'pageHandlersList',
+        entityId: 'FM_PAGE_HANDLERS',
+        pageId: this.componentInfo.ID,
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc'
+      }))
+        .then(data => {
+          this.handlerList = data.entitys.map(item => ({ label: item.NAME, value: item.CODE }))
+        })
+    },
+    getCommonOperates () {
+      getCached('commonOps:' + this.componentInfo.ID, () => this.$http.list({
+        action: 'pageCommonOperatesList',
+        entityId: 'FM_PAGE_COMMON_OPERATES',
+        pageId: this.componentInfo.ID,
+        link: 'handler,component|left join',
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc'
+      }))
+        .then(data => {
+          if (data.entitys && data.entitys.length > 0) {
+            this.commonOperates = data.entitys.map(item => {
+              const handler = {}
+              if (item.TEXT) handler.text = item.TEXT
+              if (item.HANDLER) handler.handler = item['HANDLER|CODE']
+              if (item.UI) handler.ui = item.UI
+              if (item.ICON) handler.icon = item.ICON
+              if (item.ACTION) handler.action = item.ACTION
+              if (item.COMPONENT) handler.component = item['COMPONENT|CODE']
+              if (item.NUM) handler.num = item.NUM
+              if (item.CONFIRM) handler.confirm = item.CONFIRM === '1'
+              if (item.CONFIRM_MSG) handler.confirmMsg = item.CONFIRM_MSG
+              if (item.SUCCESS_MSG) handler.successMsg = item.SUCCESS_MSG
+              if (item.FAIL_MSG) handler.failMsg = item.FAIL_MSG
+              if (item.OPEN_MODE) handler.openMode = item.OPEN_MODE
+              if (item.MOVE_TYPE) handler.moveType = item.MOVE_TYPE
+              if (item.PAGE_TYPE) handler.pageType = item.PAGE_TYPE
+              if (item.PAGE_FLAG) handler.pageFlag = item.PAGE_FLAG
+              if (item.TERMINAL) handler.terminal = item.TERMINAL
+              if (item.PARAMS) {
+                handler.params = eval('(' + item.PARAMS + ')')
+              }
+              return handler
+            })
+          }
+        })
+    },
+    // 一对多字段的函数选项（列表类面板的字段设置用）：代码表全局只请求一次
+    getFunctionOption () {
+      getCached('codes:ONEMORE_FIELD_FUNCTION', () => this.$http.getCodes({ key: 'ONEMORE_FIELD_FUNCTION' }))
+        .then(data => {
+          this.FunctionOption = data.map(item => ({ value: item.code, name: item.name }))
+        })
+    },
+    getOperateOptions () {
+      this.getHandlerList()
+      this.getCommonOperates()
+      this.operateConfigs = [
+        {
+          key: 'base',
+          title: '基本',
+          options: ['text', 'ui', 'type', 'icon', 'preview']
+        },
+        {
+          key: 'event',
+          title: '事件',
+          options: ['metaId', 'handler', 'action', 'rule', 'moveType', 'openMode', 'page', 'pageType', 'menuId', 'serviceId', 'webLinkUrl', 'printWay', 'printCode', 'cptName', 'destActivityId', 'processNode', 'function', 'params', 'beforeTrigger', 'afterTrigger', 'afterTriggerPage', 'afterTriggerPageOpenMode', 'afterTriggerParams']
+        },
+        {
+          key: 'advance',
+          title: '高级',
+          options: ['terminal', 'num', 'limitFlag', 'limitCondition', 'limitTip', 'showConditionType', 'showCondition', 'showConditionEl', 'confirm', 'confirmMsg', 'confirmButtonText', 'cancelButtonText', 'successMsg', 'failMsg', 'mask']
+        }
+      ]
+    },
+
+    // 筛选条件字段
+    getAllFields  (v) {
+      if (!this.currentMetaId) return []
+      if (!this.treeFieldStore) {
+        return this.$store.dispatch({
+          type: 'ADD_META_VIEW_FIELDS',
+          metaId: this.currentMetaId,
+          viewId: this.metaViewId
+        })
+      }
+      return this.treeFieldStore
+    },
+    changeConfigItem (key, value) {
+      this.config[key] = value
+    },
+    changeLanguageConfig (key, value) {
+      this.config[`${key}.i18n`] = value
+    },
+    changeEl (key, value) {
+      if (value) {
+        this.changeConfigItem(key, JSON.parse(value).el)
+      } else {
+        this.changeConfigItem(key, null)
+      }
+    },
+    getConfigs () {
+      // 获取配置
+      const _configs = {}
+      for (const key in this.config) {
+        let configOption = {}
+        for (const item of this.configOptions) {
+          if (item.key === key) {
+            configOption = item
+            break
+          } else if (item.children) {
+            for (const child of item.children) {
+              if (child.key === key) {
+                configOption = child
+                break
+              }
+            }
+          }
+        }
+        /* else if (key === 'orderFields' || key === 'order_field') {
+          if (this.config[key]) {
+            _configs.order_field = this.config[key].map(item => (item.attriName || item))
+            _configs.order_mode = this.config[key].map(item => (item.sort || 'asc'))
+          }
+        } */
+        if (configOption.allocation === 'component') { // 组件设置项
+        } else if (!this.$_.isEqual(this.config[key], this.defaultConfigs[key]) || configOption.key === 'componentName') {
+          _configs[key] = this.config[key]
+        } else {
+          _configs[key] = null
+        }
+      }
+
+      // 保留高级设置的配置
+      const advanceKeys = ['showIf', 'iterator', 'showTerminal', 'componentEvents']
+      advanceKeys.forEach(key => {
+        if (this.compConfig[key] !== undefined) {
+          _configs[key] = this.compConfig[key]
+        }
+      })
+
+      return _configs
+    },
+    getComponentSetting () {
+      const _setting = {}
+      const componentAttris = ['flex', 'layout', 'direction', 'justify', 'align', 'style', 'componentName', 'span', 'xsspan', 'items', 'countScopeParams']
+      for (const key in this.config) {
+        const isAttri = componentAttris.find(item => item === key || item + '.i18n' === key)
+        const configOption = this.configOptions.find(item => item.key === key) || {}
+        if (configOption.allocation === 'component' || isAttri) {
+          if (!this.$_.isEqual(this.config[key], this.defaultConfigs[key])) {
+            _setting[key] = this.config[key]
+          }
+        }
+      }
+      return _setting
+    },
+    switchAccordion (key) {
+      this.foldMap[key] = !this.foldMap[key]
+    },
+
+    /**
+     * renderFunctions
+     */
+    renderFormItem (item) {
+      const defaultValue = this.$_.isNil(item.defaultValue) ? this.defaultConfigs[item.key] : item.defaultValue
+      if (item.type === 'report') {
+        return (
+          <epx-visual-config-design-report
+            value={this.getConfigValue(item.key)}
+            defaultValue={this.defaultConfigs[item.key]}
+          />
+        )
+      }
+      // T33 JSX 转 Vue3：`<span>` 是 Vue2 的具名插槽写法（编成 vnode.data.slot），
+      // Vue3 没有 `slot` attribute —— 那个 span 会掉进**默认插槽**里、标签区变空。
+      // 改用 @vue/babel-plugin-jsx 的 `v-slots`。
+      const labelSlot = item.type === 'font'
+        ? () => (
+          <span>
+            <i class="epx-visual-component__form-item-fold-icon el-icon-caret-right" onClick={() => (this.opened[item.key] = !this.opened[item.key])}></i>
+            {item.label}
+          </span>
+        )
+        : ((item.showTip !== false) && item.tip)
+          ? () => (
+            <span>
+              {item.label}
+              <el-tooltip content={item.tip} placement="top">
+                <i class="el-icon-warning epx-visual-component__form-item-tip"></i>
+              </el-tooltip>
+            </span>
+          )
+          : null
+      // 外层用同类名的 div 代替 ElRow 组件：这里没有 gutter / 对齐配置，ElRow 只多一个组件实例
+      return (
+        <div class="el-row" key={item.key}>
+          <el-form-item label={`${item.label}`} class={{ 'is-default': this.isDefaultValue(item.key), 'epx-visual-component__form-item': true, ['epx-visual-component__form-item--' + item.type]: true, 'epx-visual-component__form-item--opened': this.opened[item.key] }} v-slots={labelSlot ? { label: labelSlot } : {}}>
+            {
+              item.renderContent
+                ? (
+                  <div>
+                    {item.renderContent(item)}
+                  </div>
+                )
+                : item.type === 'radio' ? (
+                  <epx-visual-config-radio
+                    code={item.code}
+                    option-list={item.options}
+                    value={this.getConfigValue(item.key)}
+                    inputable={item.inputable}
+                    defaultValue={defaultValue}
+                    onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                  />
+                ) : item.type === 'checkbox' ? (
+                  <epx-visual-config-checkbox
+                    code={item.code}
+                    option-list={item.options}
+                    value={this.getConfigValue(item.key)}
+                    defaultValue={defaultValue}
+                    onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                  />
+                ) : item.type === 'switch' ? (
+                  <epx-visual-config-switch
+                    value={this.getConfigValue(item.key)}
+                    defaultValue={defaultValue}
+                    onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                  />
+                ) : item.type === 'action' ? (
+                  <epx-visual-config-list
+                    option-list={this.actionList}
+                    value={this.getConfigValue(item.key)}
+                    defaultValue={defaultValue}
+                    code={item.code}
+                    label={item.label}
+                    multiple={item.multiple}
+                    onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                  />
+                ) : item.type === 'rule' ? (
+                  <epx-visual-config-list
+                    option-list={this.ruleList}
+                    value={this.getConfigValue(item.key)}
+                    defaultValue={defaultValue}
+                    code={item.code}
+                    label={item.label}
+                    multiple={item.multiple}
+                    onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                  />
+                ) : item.type === 'tree' ? (
+                  <epx-visual-config-tree
+                    option-list={item.options}
+                    value={this.getConfigValue(item.key)}
+                    defaultValue={defaultValue}
+                    onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                  />
+                )
+                  : item.type === 'row' ? (
+                    <epx-visual-config-row
+                      value={this.config[item.key]}
+                      defaultValue={defaultValue}
+                      treeFieldStore={this.treeFieldStore}
+                      field-options={this.rowFieldOptions || this.fieldOptions}
+                      pageParams={this.pageParams}
+                      pageGlobalConfigs={this.globalConfigs}
+                      changeItemConfigs={this.changeItemConfigs}
+                      scopeConfigs={this.scopeConfigs}
+                      functionOption={this.FunctionOption}
+                      onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                    />
+                  ) : item.type === 'list' ? (
+                    <epx-visual-config-list
+                      option-list={item.options}
+                      value={this.getConfigValue(item.key)}
+                      defaultValue={defaultValue}
+                      code={item.code}
+                      label={item.label}
+                      multiple={item.multiple}
+                      onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                    />
+                  ) : item.type === 'select' ? (
+                    <epx-visual-config-select
+                      option-list={item.options}
+                      value={this.getConfigValue(item.key)}
+                      defaultValue={defaultValue}
+                      onChangeConfigs={item.change || this.changeConfigItem.bind(this, item.key)}
+                    />
+                  )
+                    : item.type === 'list-field' || (item.type === 'field' && item.fieldEditable === '1') ? (
+                      <epx-visual-config-list-field
+                        value={this.config[item.key]}
+                        componentMetaId={this.componentMetaId}
+                        defaultValue={defaultValue}
+                        rule-list={this.ruleList}
+                        treeFieldStore={this.treeFieldStore}
+                        functionOption={this.FunctionOption}
+                        scopeConfigs={this.scopeConfigs}
+                        pageParams={this.pageParams}
+                        pageGlobalConfigs={this.globalConfigs}
+                        field-options={(item.type === 'field' && item.children && item.children.length > 0) ? item.children : this.fieldOptions}
+                        changeItemConfigs={this.changeItemConfigs}
+                        onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                      />
+                    )
+                      : item.type === 'field' ? (
+                        <epx-visual-config-field
+                          value={this.config[item.key]}
+                          defaultValue={defaultValue}
+                          rule-list={this.ruleList}
+                          metaId={item.metaId || this.getConfigMetaId(item)}
+                          treeFieldStore={this.treeFieldStore}
+                          multiple={item.multiple}
+                          limit={item.limit}
+                          scopeConfigs={this.scopeConfigs}
+                          defaultShowSubField={item.showSubField}
+                          onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                        />
+                      )
+                        : item.type === 'm-field' ? (
+                          <epx-visual-config-m-list-field
+                            value={this.config[item.key]}
+                            defaultValue={this.defaultConfigs[item.key]}
+                            treeFieldStore={this.treeFieldStore}
+                            field-options={this.fieldOptions}
+                            pageParams={this.pageParams}
+                            onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                          />
+                        ) : item.type === 'order-field' ? (
+                          <epx-visual-config-order-field
+                            value={this.config[item.key]}
+                            defaultValue={defaultValue}
+                            metaId={item.metaId || this.getConfigMetaId(item)}
+                            treeFieldStore={this.treeFieldStore}
+                            onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                          />
+                        )
+                          : item.type === 'operates' || item.type === 'operate' ? (
+                            <epx-visual-config-operate
+                              designer={this.designer}
+                              value={this.config[item.key]}
+                              defaultValue={defaultValue}
+                              configs={this.config}
+                              metaId={item.metaId}
+                              compMetaId={this.getConfigMetaId(item)}
+                              common-operates={item.commonOperates || this.commonOperates}
+                              operate-options={{ ...(this.operateOptions || {}), ...(item.operateOptions || {}) }}
+                              operate-configs={this.operateConfigs}
+                              treeFieldStore={this.treeFieldStore}
+                              pageParams={this.pageParams}
+                              handlerList={item.handlerList || this.handlerList}
+                              action-list={this.actionList}
+                              rule-list={this.ruleList}
+                              scopeConfigs={this.scopeConfigs}
+                              pageGlobalConfigs={this.globalConfigs}
+                              changeItemConfigs={this.changeItemConfigs}
+                              onChangeOperate={this.changeOperate && this.changeOperate.bind(this, item.key)}
+                              onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                            />
+                          )
+                            : item.type === 'scope' ? (
+                              <epx-visual-config-scope
+                                designer={this.designer}
+                                value={this.config[item.key]}
+                                pageParams={this.pageParams}
+                                treeFieldStore={this.treeFieldStore}
+                                extendFields={item.extendFields}
+                                componentMetaId={this.getConfigMetaId(item)}
+                                scopeConfigs={this.scopeConfigs}
+                                onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                              />
+                            ) : item.type === 'el' ? (
+                              <epx-rule
+                                formulaType='web'
+                                modelValue={this.getConfigValue(item.key)}
+                                onChange={this.changeEl.bind(this, item.key) }
+                                metaId={this.getConfigMetaId(item)}
+                                variableList={this.variableTree}
+                                fieldConfigs={{ state: 'EDIT', functionType: 'web' }}
+                              >
+                              </epx-rule>
+                            )
+                              : item.type === 'num' ? (
+                                <epx-visual-config-number
+                                  value={this.getConfigValue(item.key)}
+                                  defaultValue={defaultValue}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                />
+                              ) : item.type === 'chart' ? (
+                                <epx-visual-config-chart
+                                  value={this.getConfigValue(item.key)}
+                                  defaultValue={defaultValue}
+                                  onCallback={item.callback}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                />
+                              ) : item.type === 'params' ? (
+                                <epx-visual-config-params
+                                  value={this.getConfigValue(item.key)}
+                                  defaultValue={defaultValue}
+                                  treeFieldStore={this.treeFieldStore}
+                                  pageParams={this.pageParams}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                />
+                              ) : item.type === 'object' || item.type === 'multiobject' ? (
+                                <epx-visual-config-object
+                                  type={item.type}
+                                  value={this.getConfigValue(item.key)}
+                                  defaultValue={defaultValue}
+                                  object={item.object}
+                                  label={item.label}
+                                  dataKey={item.dataKey}
+                                  fieldConfigs={item.fieldConfigs}
+                                  flag={item.flag}
+                                  isTree={item.isTree}
+                                  scopeParams={item.key === 'metaViewId' ? [{ field: 'ENTITY', values: this.componentMetaId }] : this.$formatScope(item.scopeParams)}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                />
+                              ) : item.type === 'font' ? (
+                                <epx-visual-config-font
+                                  value={this.getConfigValue(item.key)}
+                                  defaultValue={this.defaultConfigs[item.key]}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                />
+                              ) : item.type === 'color' ? (
+                                <epx-visual-config-color
+                                  value={this.getConfigValue(item.key)}
+                                  defaultValue={this.defaultConfigs[item.key]}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                />
+                              ) : item.type === 'page' ? (
+                                <epx-visual-config-item-page
+                                  value={this.getConfigValue(item.key)}
+                                  defaultValue={this.defaultConfigs[item.key]}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                >
+                                </epx-visual-config-item-page>
+                              ) : item.type === 'event' ? (
+                                <epx-visual-config-event
+                                  value={this.getConfigValue(item.key)}
+                                  defaultValue={defaultValue}
+                                  functionList={this.functionList}
+                                  eventList={item.eventList}
+                                  pageGlobalConfigs={this.globalConfigs}
+                                  changeItemConfigs={this.changeItemConfigs}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                />
+                              ) : item.type === 'function' ? (
+                                <epx-visual-config-function
+                                  designer={this.designer}
+                                  value={this.getConfigValue(item.key)}
+                                  defaultValue={defaultValue}
+                                  functionList={this.functionList}
+                                  pageGlobalConfigs={this.globalConfigs}
+                                  onInput={this.changeConfigItem.bind(this, item.key)}
+                                />
+                              ) : item.type === 'html' ? (
+                                <epx-visual-config-html
+                                  designer={this.designer}
+                                  value={this.getConfigValue(item.key)}
+                                  defaultValue={this.defaultConfigs[item.key]}
+                                  i18nValue={this.getConfigValue(item.key + '.i18n')}
+                                  pageGlobalConfigs={this.globalConfigs}
+                                  changeItemConfigs={this.changeItemConfigs}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                  onChange-language-config={this.changeLanguageConfig.bind(this, item.key)}
+                                />
+                              ) : item.type === 'image' ? (
+                                <epx-visual-config-image
+                                  designer={this.designer}
+                                  label={item.label}
+                                  value={this.getConfigValue(item.key)}
+                                  defaultValue={this.defaultConfigs[item.key]}
+                                  pageGlobalConfigs={this.globalConfigs}
+                                  changeItemConfigs={this.changeItemConfigs}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                />
+                              ) : item.type === 'textarea' ? (
+                                <epx-visual-config-textarea
+                                  designer={this.designer}
+                                  label={item.label}
+                                  value={this.getConfigValue(item.key)}
+                                  i18nValue={this.getConfigValue(item.key + '.i18n')}
+                                  defaultValue={this.defaultConfigs[item.key]}
+                                  inputVariable={item.inputVariable}
+                                  change={item.change}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                  onChange-language-config={this.changeLanguageConfig.bind(this, item.key)}
+                                />
+                              ) : (
+                                <epx-visual-config-input
+                                  designer={this.designer}
+                                  label={item.label}
+                                  value={this.getConfigValue(item.key)}
+                                  i18nValue={this.getConfigValue(item.key + '.i18n')}
+                                  defaultValue={this.defaultConfigs[item.key]}
+                                  inputVariable={item.inputVariable}
+                                  regExp={item.regExp}
+                                  readonly={item.readonly}
+                                  change={item.change}
+                                  onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                                  onChange-language-config={this.changeLanguageConfig.bind(this, item.key)}
+                                />
+                              )
+            }
+          </el-form-item>
+        </div>
+      )
+    }
+  },
+  created () {
+    this._lastCommitted = null
+    this._commitScheduled = false
+    // 记录进入配置面板时已保存的视图 id，用于区分"配置回显"和"用户切换视图"
+    this._initialMetaViewId = (this.compConfig || {}).metaViewId
+    for (let i = 0; i <= 24; i++) {
+      this.spanOptions.push({ label: i, value: i })
+    }
+    this.handlerList = [
+      { label: '打开指定页面', value: 'goPage' },
+      { label: '打开指定应用', value: 'goApp' },
+      { label: '打开指定链接', value: 'Link' },
+      { label: '发起通用请求', value: 'commonAction' },
+      { label: '发起业务规则', value: 'commonRuleAction' },
+      { label: '报表打印', value: 'print' },
+      { label: '下载文件', value: 'downloadFile' },
+      { label: '返回', value: 'backPage' },
+      { label: '自定义JS', value: 'customJs' }
+    ]
+    this.initConfig()
+    this.getFieldOptions()
+    this.getOperateOptions()
+    // 上级组件是标签页
+    // if (this.upComponent === 'page-tabs') {
+    //   // 添加标签页数量配置
+    //   this.configOptions.splice(1, 0, {
+    //     key: 'tabCount', label: '标签页显示数量', type: 'radio', allocation: 'component', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false
+    //   }, {
+    //     key: 'countScopeParams', label: '标签页数量范围', type: 'scope', allocation: 'component'
+    //   })
+    // }
+  },
+  render () {
+    return (
+      <div class="epx-visual-component">
+        <epx-visual-config-options configOptions={this.showConfigOptions} />
+      </div>
+    )
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(visual-component) {
+  padding: 0 16px;
+
+  @include e(accordion) {
+    @include when(fold) {
+      margin-bottom: 10px;
+      @include e(accordion-icon) {
+        transform: rotate(180deg)
+      }
+      @include e(accordion-body) {
+        display: none;
+      }
+    }
+  }
+  @include e(accordion-header) {
+    width: calc(100% + 32px);
+    display: flex;
+    height: 40px;
+    padding: 0 16px;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(31, 56, 88, 0.1);
+    position: relative;
+    left: -16px;
+  }
+  @include e(accordion-body) {
+    padding: 12px 0;
+  }
+  @include e(accordion-icon) {
+    font-size: var(--epx-font-size-l);
+    cursor: pointer;
+    transition: all .5s;
+  }
+
+  @include e(form-item) {
+    &.el-form-item{
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .el-form-item__header {
+      flex-shrink: 0;
+    }
+    >.el-form-item__content {
+      flex: 1;
+    }
+    .el-form-item__label {
+      flex-shrink: 0;
+      line-height: 20px;
+      padding: 10px 8px 10px 0;
+    }
+    @include e(form-item-tip) {
+      color: #999;
+      cursor: pointer;
+      margin-left: 2px;
+    }
+    @include m(font) {
+      display: block;
+      .el-form-item__label {
+        width: 100%!important;
+      }
+      .el-form-item__content{
+        display: none;
+      }
+    }
+    @include m(opened) {
+      @include e(form-item-fold-icon) {
+        transform: rotate(90deg);
+      }
+      .el-form-item__content{
+        display: block;
+      }
+    }
+  }
+  @include e(form-item-fold-icon){
+    cursor: pointer;
+    transition: all .5s;
+  }
+  // 配置项懒加载占位：高度贴近一行配置项，滚进视口后换成真实控件时跳动小
+  @include e(placeholder) {
+    height: 40px;
+    margin-bottom: 18px;
+    border-radius: var(--epx-radius-s);
+    background: linear-gradient(90deg, var(--el-fill-color) 25%, var(--el-fill-color-lighter) 37%, var(--el-fill-color) 63%);
+    background-size: 400% 100%;
+    animation: epx-visual-placeholder-loading 1.4s ease infinite;
+  }
+}
+@keyframes epx-visual-placeholder-loading {
+  0% { background-position: 100% 50%; }
+  100% { background-position: 0 50%; }
+}
+</style>