vue2-client 1.8.267 → 1.8.269

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.267",
+  "version": "1.8.269",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/LowCodeComponent/LowCodePageOrganization.vue

@@ -22,7 +22,12 @@
               <a-menu-divider />
               <a-menu-item key="split" :disabled="determineLevel(treeKey) !== 'item'"><a-icon type="fullscreen" />&nbsp;&nbsp;拆分</a-menu-item>
               <a-menu-item key="add" :disabled="determineLevel(treeKey) === 'item'"><a-icon type="plus-square" />&nbsp;&nbsp;添加</a-menu-item>
-              <a-menu-item key="rename" :disabled="treeKey.length > 2 && treeKey.length <= 5"><a-icon type="italic" />&nbsp;&nbsp;重命名</a-menu-item>
+              <a-menu-item key="rename" :disabled="determineLevel(treeKey) !== 'item' && determineLevel(treeKey) !== 'page'"><a-icon type="italic" />&nbsp;&nbsp;重命名</a-menu-item>
+              <!--              <a-menu-divider />-->
+              <!--              <a-sub-menu title="添加组件">-->
+              <!--                <a-menu-item key="addComponent_111">111</a-menu-item>-->
+              <!--                <a-menu-item key="addComponent_222">222</a-menu-item>-->
+              <!--              </a-sub-menu>-->
               <a-menu-divider />
               <a-menu-item key="delete"><a-icon type="delete" />&nbsp;&nbsp;删除</a-menu-item>
             </a-menu>
@@ -62,6 +67,7 @@ export default {
       type: Object,
       required: true,
     },
+    // 可以由外侧控制哪个节点被选中
     selectTreeNode: {
       type: String,
       default: undefined
@@ -86,6 +92,7 @@ export default {
         return 'item'
       }
     },
+    // 将树中的key转换回原始ID
     getOriginalKey (treeKey) {
       if (treeKey.startsWith('page')) {
         return treeKey.substring('page_'.length)
@@ -97,6 +104,7 @@ export default {
         return treeKey
       }
     },
+    // 根据ID，返回拖拽级别和类型，便于拖拽模式判断
     determineDragLevel (id) {
       if (id.startsWith('page')) {
         return {
@@ -172,6 +180,7 @@ export default {
       // 能到这不return的证明都是非法移动
       this.$message.error('不合法的拖拽！')
     },
+    // 删除
     handleDelete (targetType, originalKey) {
       const _this = this
       if (targetType === 'item') {
@@ -213,8 +222,10 @@ export default {
         })
       }
     },
+    // 复制
     handleCopy (treeKey, targetType) {
       const originalKey = this.getOriginalKey(treeKey)
+      // 获取复制对象
       let temp
       if (targetType === 'container_page') {
         temp = lowcodeUtils.getContainerPageOuterByContainerPageId(originalKey, this.config)
@@ -223,7 +234,6 @@ export default {
       }
       // 复制
       let copy = JSON.parse(JSON.stringify(temp))
-      console.warn('copy', copy)
       if (targetType === 'page') {
         // 重新修改id和title
         copy.id = 'page_' + lowcodeUtils.nanoidWithoutSymbol(6)
@@ -254,6 +264,7 @@ export default {
         this.$message.success('复制成功！')
       }
     },
+    // 粘贴
     handlePaste (targetType, originalKey) {
       // 同级别内容不能粘贴到另一个中
       if (targetType === this.copyCache.type) {
@@ -280,7 +291,8 @@ export default {
       // 其余操作均不合法
       this.$message.error('该操作不合法！')
     },
-    handleRename (originalKey) {
+    // 重命名
+    handleRename (targetType, originalKey) {
       const target = lowcodeUtils.getConfig(originalKey, this.config)
       this.renameId = target.id
       if (target.title) {
@@ -292,6 +304,7 @@ export default {
       }
       this.showRenameModal = true
     },
+    // 拆分
     handleSplit (originalKey) {
       const _this = this
       this.$confirm({
@@ -304,6 +317,7 @@ export default {
         },
       })
     },
+    // 添加
     handleAdd (targetType, originalKey) {
       if (targetType === 'page' || targetType === 'container_page') {
         this.$emit('add', originalKey, 'row')
@@ -328,7 +342,7 @@ export default {
           this.handlePaste(targetType, originalKey)
           return
         case 'rename':
-          this.handleRename(originalKey)
+          this.handleRename(targetType, originalKey)
           return
         case 'split':
           this.handleSplit(originalKey)
@@ -340,39 +354,18 @@ export default {
     // 处理架构树点击事件
     handleTreeSelect (value) {
       this.selectedKeys = value
+      // 如果是反选
+      if (value.length === 0) {
+        this.$emit('treeOrganizationClick', null)
+        return
+      }
+      const type = this.determineLevel(value[0])
+      if (type === 'row' || type === 'page') {
+        return
+      }
       this.$emit('treeOrganizationClick', this.getOriginalKey(value[0]))
-      // 如果选中的id只有两位证明是页面容器
-      // let isPage = false
-      // if (value[0].length === 2) {
-      //   isPage = true
-      // }
-      // for (let i = 0; i < this.config.page.length; i++) {
-      //   const pageTemp = this.config.page[i]
-      //   if (isPage) {
-      //     if (pageTemp.id === value[0]) {
-      //       this.$emit('treeOrganizationClick', pageTemp.id, 'page')
-      //       return
-      //     } else {
-      //       continue
-      //     }
-      //   }
-      //   // 如果点击的是行，行的id就是页面id + _ + uuid
-      //   if (pageTemp.id === value[0].split('_')[0]) {
-      //     this.$emit('treeOrganizationClick', pageTemp.id, 'page')
-      //     return
-      //   }
-      //   for (let j = 0; j < pageTemp.body.length; j++) {
-      //     const rowTemp = pageTemp.body[j]
-      //     for (let k = 0; k < rowTemp.length; k++) {
-      //       const itemTemp = rowTemp[k]
-      //       if (itemTemp.id === value[0]) {
-      //         this.$emit('treeOrganizationClick', itemTemp.id, 'component')
-      //         return
-      //       }
-      //     }
-      //   }
-      // }
     },
+    // 初始化树
     initTree (config, container = undefined) {
       const result = []
       // 从配置中，抽取组件，初始化成树的格式
@@ -417,17 +410,31 @@ export default {
             } else {
               name = item.id
             }
+            // 如果item进行了嵌套，递归调用
             if (item.type === 'container_page') {
               this.initTree(item, result[i].children[j])
             } else {
-              result[i].children[j].children.push({
-                title: name,
-                key: item.id,
-                children: [],
-                slots: {
-                  icon: 'appstore',
-                },
-              })
+              // 如果是container则显示为列容器
+              if (item.type === 'container') {
+                name = '列容器'
+                result[i].children[j].children.push({
+                  title: name,
+                  key: item.id,
+                  children: [],
+                  slots: {
+                    icon: 'pause',
+                  },
+                })
+              } else {
+                result[i].children[j].children.push({
+                  title: name,
+                  key: item.id,
+                  children: [],
+                  slots: {
+                    icon: 'appstore',
+                  },
+                })
+              }
             }
           }
         }
@@ -445,20 +452,30 @@ export default {
   },
   data () {
     return {
+      // 树的数据
       treeData: [],
+      // 控制树的渲染
       showTree: false,
+      // 控制重命名弹框显隐
       showRenameModal: false,
+      // 复制的缓存
       copyCache: undefined,
+      // 重命名绑定变量
       pageNewName: undefined,
+      // 重命名对象的id
       renameId: undefined,
+      // 在树中已选中的key
       selectedKeys: []
     }
   },
   watch: {
+    // 如果外侧指定了某个节点，让树选中该节点
     selectTreeNode: {
       handler (newVal) {
         if (newVal) {
           this.selectedKeys = [newVal]
+        } else {
+          this.selectedKeys = []
         }
       }
     }

package/src/base-client/components/common/LowCodePageRender/editorPageRender.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width: 100%">
     <template v-for="(page,pageIndex) in pageConfig.page">
-      <!--   拖拽时显示宽度   -->
+      <!--   拖拽时显示的临时容器   -->
       <template v-if="showDragSpan">
         <div style="display: flex" :key="pageIndex">
           <template v-for="item in dragConfig">
@@ -11,6 +11,7 @@
           </template>
         </div>
       </template>
+      <!--   渲染器主体   -->
       <template v-for="(row,rowIndex) in page.body">
         <a-row :key="pageIndex + '_' + rowIndex">
           <template v-if="!showDragSpan">
@@ -171,6 +172,7 @@ export default {
       drawVisible: {},
       // 控制递归渲染
       renderSub: true,
+      // 用于控制组件外框闪烁
       colClassName: ''
     }
   },
@@ -188,6 +190,7 @@ export default {
     })
   },
   methods: {
+    // 将钩子函数格式化成mixin的格式并传入
     resolveLifeCycleEvent (config) {
       if (!config.onEvent || !config.onEvent.lifeCycle) {
         return undefined
@@ -212,22 +215,26 @@ export default {
       }
       this.$forceUpdate()
     },
+    // 递归拖拽完成后的回调
     handleDrag (targetEle, nextEle) {
       this.$emit('spanDrag', targetEle, nextEle)
     },
+    // 递归容器删除后的回调
     handleContainerDelete (id) {
       this.$emit('containerDelete', id)
     },
+    // 刷新递归的渲染器
     refreshSubRender () {
       this.renderSub = false
       this.$nextTick(() => {
         this.renderSub = true
       })
     },
+    // 递归点击组件后的回调
     clickComponentInner (configItem) {
       this.$emit('clickComponentInEditor', configItem, this)
     },
-    // 开始拖拽
+    // 拖拽改变Span
     dragStart (event, id, row) {
       // 获取目标html元素
       const targetElement = event.srcElement
@@ -439,6 +446,7 @@ export default {
           runLogic(eachEvent.logicName, param, eachEvent.serviceName)
             .then(res => { logicCallBackFunction(this.componentsMap, res) })
         } else if (eachEvent.eventType === 'changeProps') {
+          // 修改组件props
           const targetConfig = lowcodeUtils.getComponentConfig(eachEvent.target, this.pageConfig.page)
           targetConfig.props[eachEvent.targetKey] = data
           lowcodeLog(
@@ -448,8 +456,8 @@ export default {
             false,
             true
           )
-          // 打印日志
         } else if (eachEvent.eventType === 'log') {
+          // 打印日志
           lowcodeLog(
             JSON.stringify(data),
             '打印日志',
@@ -457,8 +465,8 @@ export default {
             false,
             true
           )
-          // 修改组件的值
         } else if (eachEvent.eventType === 'changeValue') {
+          // 修改组件的值
           // 寻找target
           targetComponentId = eachEvent.target
           const targetVM = this.componentsMap[targetComponentId]
@@ -481,7 +489,9 @@ export default {
         }
       })
     },
+    // 组件闪烁
     twink (id) {
+      // 定义关键帧间隔
       const frame = 400
       this.$refs[id][0].className = 'colWithBorder'
       setTimeout(() => {

package/src/base-client/components/common/XAddNativeForm/XAddNativeForm.vue

@@ -8,7 +8,7 @@
       v-bind="formItemLayout"
       :layout="layout"
       :rules="rules">
-      <a-row :gutter="16">
+      <a-row :gutter="16" type="flex">
         <x-form-item
           v-for="(item, index) in realJsonData"
           :key="index"
@@ -37,6 +37,7 @@
             :disabled="itemDisabled(item)"
             :readonly="readonly(item)"
             :files="files"
+            :style="layout ==='inline'?{marginTop:'5px'}:undefined"
             :form="form[groupItem.model]"
             :images="images"
             :service-name="serviceName"
@@ -64,6 +65,7 @@
             :disabled="itemDisabled(formItem)"
             :readonly="readonly(formItem)"
             :files="files"
+            :style="layout ==='inline'?{marginTop:'5px'}:undefined"
             :form="form[groupItem.model]"
             :images="images"
             :service-name="serviceName"
@@ -736,8 +738,6 @@ export default {
           } else {
             this.form[item.model] = modifyModelData.data[item.model] + ''
           }
-        } else {
-          this.form[item.model] = undefined
         }
       }
       // 对分组表单进行处理

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -19,6 +19,7 @@
           v-model="form[attr.model]"
           :read-only="readOnly"
           :disabled="disabled && !readOnly"
+          :whitespace="true"
           style="flex: 1; width: auto; min-width: 0;"
           :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"/>
         <a-button
@@ -40,6 +41,7 @@
       <a-input
         v-else
         v-model="form[attr.model]"
+        :whitespace="true"
         :read-only="readOnly"
         :disabled="disabled && !readOnly"
         style="width:100%"

package/src/base-client/components/common/XReport/XReportDemo.vue

@@ -8,7 +8,7 @@
       :local-config="test"
       :config-data="test_data"
       :edit-mode="false"
-      :display-only="false"
+      :display-only="true"
       :show-save-button="false"
       :dont-format="true"/>
     <a-button @click="testExport">导出</a-button>

package/src/base-client/components/common/XReport/XReportTrGroup.vue

@@ -61,7 +61,19 @@
           </template>
           <template v-else-if="cell.type === 'images'">
             <template v-if="getDeepObject(configData.images, cell.dataIndex) === undefined || getDeepObject(configData.images, cell.dataIndex).length === 0">
-              <span>无</span>
+              <template v-if="getDeepObject(configData, cell.dataIndex) === undefined || getDeepObject(configData, cell.dataIndex).length === 0">
+                <span>无</span>
+              </template>
+              <template v-else>
+                <template v-if="typeof getDeepObject(configData, cell.dataIndex) === 'object'">
+                  <template  v-for="(img,imgIndex) in getDeepObject(configData, cell.dataIndex)">
+                    <span :key="imgIndex" style="margin-right: 5%">{{ img.name }}</span>
+                  </template>
+                </template>
+                <template v-else>
+                  <span style="margin-right: 5%">{{formatImgStr(getDeepObject(configData, cell.dataIndex))[0].name}}</span>
+                </template>
+              </template>
             </template>
             <template v-else v-for="(img,imgIndex) in getDeepObject(configData.images, cell.dataIndex)">
               <span :key="imgIndex" style="margin-right: 5%">{{ img.name }}</span>
@@ -427,6 +439,18 @@ export default {
     updateImg (data) {
       this.$emit('updateImg', data)
     },
+    formatImgStr (str) {
+      const result = []
+      const arr = str.split('/')
+      result.push({
+        uid: nanoid(6),
+        url: str,
+        name: arr[arr.length - 1],
+        status: 'done'
+      })
+      this.uploadParams.acceptCount = 1
+      return result
+    },
     checkImg (index, type) {
       let target
       if (type === 'configData') {
@@ -435,16 +459,7 @@ export default {
         target = this.config.tempData[index]
       }
       if (typeof target !== 'object') {
-        const result = []
-        const arr = target.split('/')
-        result.push({
-          uid: nanoid(6),
-          url: target,
-          name: arr[arr.length - 1],
-          status: 'done'
-        })
-        this.uploadParams.acceptCount = 1
-        return result
+        return this.formatImgStr(target)
       }
       target.forEach(obj => {
         if (obj.uid === undefined) {

package/src/pages/lowCode/lowCodeEditor.vue

@@ -133,6 +133,7 @@
                 <h3>组件ID</h3>
                 <h4>{{ editorPropertiesConfig.id }}</h4>
               </template>
+              <h4>{{ editorPropertiesConfig.type }}</h4>
               <!--    切换    -->
               <a-menu v-model="editorPanelCurrent" mode="horizontal" @click="() => null">
                 <a-menu-item key="properties">属性</a-menu-item>
@@ -142,7 +143,7 @@
               <div v-if="editorPanelCurrent[0] === 'properties'">
                 <div v-if="editorPropertiesConfig.props !== undefined">
                   <div>
-                    栅格数:<a-input :default-value="editorPropertiesConfig.span" @change="changeSpan"/>
+                    栅格数:<a-input :default-value="editorPropertiesConfig.span" @change="changeSpan" :key="editorPropertiesConfig.id"/>
                   </div>
                   <template v-for="(value,key) in editorPropertiesConfig.props">
                     <div :key="editorPropertiesConfig.id + '_' + key">
@@ -616,7 +617,9 @@ export default {
       addComponentTemp: { type: 'page' },
       // 控制添加页面容器弹框显隐
       showPageContainerAddModal: false,
+      // 控制钩子函数编辑弹框显隐
       showLifeCycleFunctionEditor: false,
+      // 指定架构树选中哪个节点
       selectTreeNode: undefined
     }
   },
@@ -627,12 +630,14 @@ export default {
     }
   },
   methods: {
+    // 架构树新增
     handleTreeAdd (id, type) {
+      // 如果目标是行，则添加容器
       if (type === 'container') {
-        const lastIndex = id.lastIndexOf('_')
-        const pageId = id.substring(0, lastIndex)
-        const rowIndex = id.substring(lastIndex + 1)
-        const row = lowcodeUtils.getRowByRowId(pageId, rowIndex - 1, this.config)
+        // 获取行对象
+        const rowConfig = lowcodeUtils.getPageIdAndRowIndexByRowId(id)
+        const row = lowcodeUtils.getRowByRowId(rowConfig.pageId, rowConfig.rowIndex - 1, this.config)
+        // 如果是空行，直接添加容器
         if (row.length === 0) {
           row.push({
             type: 'container',
@@ -640,6 +645,7 @@ export default {
             id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
           })
         } else {
+          // 如果不是空行，将最后一个元素的span平分给新的容器
           const lastSpan = row[row.length - 1].span
           const firstSpan = Math.round(lastSpan / 2)
           const newSpan = lastSpan - firstSpan
@@ -651,11 +657,19 @@ export default {
           })
         }
       } else {
+        // 如果不是行，则添加行
         const page = lowcodeUtils.getPageConfigById(id, this.config)
-        page.body.push([])
+        page.body.push([
+          {
+            type: 'container',
+            span: 24,
+            id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+          }
+        ])
       }
       this.refreshOrganization()
     },
+    // 为架构树过滤配置，只显示当前激活的页面配置
     filterOrganizationConfig () {
       const result = { page: [] }
       this.config.page.forEach(page => {
@@ -665,7 +679,9 @@ export default {
       })
       return result
     },
+    // 处理拆分
     handleSplit (id, isVertical) {
+      // 获取目标对象，目标行和对象在行中的Index
       const target = lowcodeUtils.getComponentConfig(id, this.config)
       const row = lowcodeUtils.getRowConfigByComponentId(id, this.config)
       let index
@@ -675,8 +691,11 @@ export default {
           break
         }
       }
+      // 将目标对象缓存
       const cache = JSON.parse(JSON.stringify(target))
+      // 是否为垂直拆分
       if (isVertical) {
+        // 垂直拆分，嵌套page容器
         const temp = {
           type: 'container_page',
           span: cache.span,
@@ -692,7 +711,9 @@ export default {
           ]
         }
         cache.span = 24
+        // 第一行放缓存的原始对象
         temp.page[0].body[0].push(cache)
+        // 第二行新增容器
         temp.page[0].body[1] = []
         temp.page[0].body[1].push({
           type: 'container',
@@ -701,6 +722,8 @@ export default {
         })
         row.splice(index, 1, temp)
       } else {
+        // 如果是水平拆分
+        // 将原先对象span一分为二，添加容器
         const outerSpan = cache.span
         const firstSpan = Math.round(outerSpan / 2)
         const secondSpan = outerSpan - firstSpan
@@ -713,24 +736,23 @@ export default {
       }
       this.refreshOrganization()
     },
-    refreshRender () {
-      this.renderPreview = false
-      this.renderModalPreview = false
-      this.renderDrawPreview = false
-      this.$nextTick(() => {
-        this.renderPreview = true
-        this.renderModalPreview = true
-        this.renderDrawPreview = true
-      })
-    },
     // 添加页面容器弹框确认
     handleAddPageContainerModalOk () {
+      const pageId = 'page_' + lowcodeUtils.nanoidWithoutSymbol(6)
       const result = {
-        id: 'page_' + lowcodeUtils.nanoidWithoutSymbol(6),
+        id: pageId,
         type: this.addComponentTemp.type,
         title: this.addComponentTemp.title,
         width: this.addComponentTemp.width,
-        body: []
+        body: [
+          [
+              {
+                type: 'container',
+                span: 24,
+                id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
+              }
+          ]
+        ]
       }
       this.addComponentTemp = { type: 'page' }
       this.config.page.push(result)
@@ -752,6 +774,7 @@ export default {
     },
     // 通过组件类型和key解析出该key对应的中文定义
     resolveEditorPropsLabel (type, key) {
+      // 获取配置中的定义
       const def = lowcodeUtils.getEditorConfigByType(type)
       const propsDef = def.properties
       const targetDef = propsDef[key]
@@ -766,7 +789,7 @@ export default {
     // 架构重命名
     rename (id, newName) {
       const target = lowcodeUtils.getConfig(id, this.config)
-      if (id.length <= 2) {
+      if (target.type === 'page') {
         target.title = newName
       } else {
         target.name = newName
@@ -806,30 +829,15 @@ export default {
     },
     // 点击架构树
     treeOrganizationClick (id) {
-      // 如果类型是page证明，选中的是最外层容器
-      // if (type === 'page') {
-      //   this.mainPageMenu[0] = id
-      //   this.activeMainPage = id
-      //   for (let i = 0; i < this.config.page.length; i++) {
-      //     if (this.config.page[i].id === this.activeMainPage) {
-      //       this.activeMainPageType = this.config.page[i].type
-      //       break
-      //     }
-      //   }
-      //   this.$forceUpdate()
-      // } else if (type === 'component') {
-      //   this.config.page.forEach(page => {
-      //     page.body.forEach(row => {
-      //       row.forEach(item => {
-      //         if (item.id === id) {
-      //           this.mainPageMenu[0] = page.id
-      //           this.activeMainPage = page.id
-      //           this.activeMainPageType = page.type
-      //           this.$forceUpdate()
-      //         }
-      //       })
-      //     })
-      //   })
+      // 如果是反选
+      if (id === null) {
+        // 清除编辑框
+        this.editorPropertiesConfig = {}
+        this.targetContainer = undefined
+        // 清除容器select
+        lowcodeUtils.unCheckAll(this.config)
+        return
+      }
       let target
       if (id.includes('container_page')) {
         target = lowcodeUtils.getContainerPageOuterByContainerPageId(id, this.config)
@@ -838,7 +846,9 @@ export default {
       }
       // 将组件选中
       this.clickComponentInEditor(target)
-      this.twink(id)
+      if (!id.includes('container')) {
+        this.twink(id)
+      }
     },
     // 架构树拖拽事件
     handleTreeDrag (dragKey, dropKey, dragLevel, dropLevel, dropPosition, dragType) {
@@ -905,18 +915,16 @@ export default {
               // 保存目标
               targetCache = target.body[dropConfig.rowIndex - 1]
               // 插入
-              console.warn('temp', JSON.parse(JSON.stringify(target)))
-              console.warn('temp', dropConfig.rowIndex - 1)
               if (dropPosition < 0) {
                 target.body.splice(dropConfig.rowIndex - 1, 1, cache, targetCache)
               } else {
                 target.body.splice(dropConfig.rowIndex - 1, 1, targetCache, cache)
               }
               // 清理占位
-              for (let i = 0; i < target.body.length; i++) {
-                const item = target.body[i]
+              for (let i = 0; i < father.body.length; i++) {
+                const item = father.body[i]
                 if (item.placeHold) {
-                  target.body.splice(i, 1)
+                  father.body.splice(i, 1)
                   break
                 }
               }
@@ -952,10 +960,10 @@ export default {
                 target.splice(targetIndex, 1, targetCache, cache)
               }
               // 清理占位
-              for (let i = 0; i < target.length; i++) {
-                const item = target[i]
+              for (let i = 0; i < father.length; i++) {
+                const item = father[i]
                 if (item.placeHold) {
-                  target.splice(i, 1)
+                  father.splice(i, 1)
                   break
                 }
               }
@@ -991,10 +999,10 @@ export default {
                 target.splice(targetIndex, 1, targetCache, cache)
               }
               // 清理占位
-              for (let i = 0; i < target.length; i++) {
-                const item = target[i]
+              for (let i = 0; i < father.length; i++) {
+                const item = father[i]
                 if (item.placeHold) {
-                  target.splice(i, 1)
+                  father.splice(i, 1)
                   break
                 }
               }
@@ -1057,43 +1065,21 @@ export default {
 
       this.refreshOrganization()
     },
-    cleanPlaceHolder (config) {
-      for (let i = 0; i < config.page.length; i++) {
-        const page = config.page[i]
-        if (page.placeHold) {
-          config.page.splice(i, 1)
-          return true
-        }
-        for (let j = 0; j < page.body.length; j++) {
-          const row = page.body[j]
-          if (row.placeHold) {
-            page.splice(j, 1)
-            return true
-          }
-          for (let k = 0; k < row.length; k++) {
-            const item = row[k]
-            if (item.placeHold) {
-              row.splice(k, 1)
-              return true
-            }
-            if (item === 'container_page') {
-              const flag = this.cleanPlaceHolder(item)
-              if (flag) {
-                return true
-              }
-            }
-          }
-        }
-      }
-    },
     // 主页面标签切换
     handleMainPageMenuChange (value) {
-      this.activeMainPage = value.key
-      for (let i = 0; i < this.config.page.length; i++) {
-        if (this.config.page[i].id === this.activeMainPage) {
-          this.activeMainPageType = this.config.page[i].type
-          this.refreshOrganization()
-          return
+      // 如果和之前选择的不一样
+      if (value.key !== this.activeMainPage) {
+        // 清空属性编辑
+        this.editorPropertiesConfig = {}
+        this.targetContainer = undefined
+        // 切换菜单
+        this.activeMainPage = value.key
+        for (let i = 0; i < this.config.page.length; i++) {
+          if (this.config.page[i].id === this.activeMainPage) {
+            this.activeMainPageType = this.config.page[i].type
+            this.refreshOrganization()
+            return
+          }
         }
       }
     },
@@ -1101,11 +1087,6 @@ export default {
     determinePageType (type) {
       return lowcodeUtils.resolvePageType(type)
     },
-    // 架构添加组件后，将配置添加到config中
-    handleAddComponent (config) {
-      this.config.page.push(config)
-      this.refreshOrganization()
-    },
     // 打开logic回调编辑弹框
     openLogicCallbackEditor () {
       if (!this.eventEditorContent.logicCallBackFunction) {
@@ -1147,10 +1128,9 @@ export default {
         this.deleteContainerPage(id)
       }
     },
+    // 删除容器页面
     deleteContainerPage (id) {
-      console.warn('id', id)
       const target = lowcodeUtils.getContainerPageOuterByContainerPageId(id, this.config)
-      console.warn('target', target)
       target.type = 'container'
       delete target.page
       this.targetContainer = undefined
@@ -1169,10 +1149,11 @@ export default {
     },
     // 删除页面容器
     deletePage (page) {
-      console.warn('123', page)
+      // 清空页面下所有组件的注册信息
       page.body.forEach(row => {
         row.forEach(item => {
           if (item.type === 'container_page') {
+            // 如果是容器页面，递归
             this.deletePage(item.page)
           } else {
             delete this.$children[0]._provided.componentsMap[item.id]
@@ -1223,6 +1204,7 @@ export default {
       }
       this.showJSEventEditor = true
     },
+    // 打开钩子函数编辑器
     openEventLifeCycleJSEditor () {
       if (!this.eventEditorContent.LifeCycleFunction) {
         this.eventEditorContent.LifeCycleFunction = LifeCycleFunctionTemplate
@@ -1405,48 +1387,6 @@ export default {
         }
         // 如果是page类型，添加两个容器。其他类型添加一个容器
         if (this.config.page[targetIndex].type === 'page') {
-          // this.config.page[targetIndex].body.push([
-          //   {
-          //     type: 'container_page',
-          //     span: 12,
-          //     id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6),
-          //     page: [
-          //       {
-          //         id: 'container_page_' + lowcodeUtils.nanoidWithoutSymbol(6),
-          //         type: 'page',
-          //         body: [
-          //           [
-          //             {
-          //               type: 'container',
-          //               span: 24,
-          //               id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
-          //             }
-          //           ]
-          //         ]
-          //       }
-          //     ]
-          //   },
-          //   {
-          //     type: 'container_page',
-          //     span: 12,
-          //     id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6),
-          //     page: [
-          //       {
-          //         id: 'container_page_' + lowcodeUtils.nanoidWithoutSymbol(6),
-          //         type: 'page',
-          //         body: [
-          //           [
-          //             {
-          //               type: 'container',
-          //               span: 24,
-          //               id: 'container_' + lowcodeUtils.nanoidWithoutSymbol(6)
-          //             }
-          //           ]
-          //         ]
-          //       }
-          //     ]
-          //   }
-          // ])
           this.config.page[targetIndex].body.push([
             {
               type: 'container',
@@ -1490,6 +1430,7 @@ export default {
             this.refreshOrganization()
           },
           onCancel: () => {
+            // 垂直拆分
             targetItem.type = 'container_page'
             targetItem.page = [{
               id: 'container_page_' + lowcodeUtils.nanoidWithoutSymbol(6),
@@ -1567,11 +1508,29 @@ export default {
     },
     // 选中某个组件
     clickComponentInEditor (configItem) {
+      if (!configItem) {
+        return
+      }
       // 同步选中架构
+      // 将选中的节点清空，在$nextTick再赋值，保证组件能watch到改变
+      this.selectTreeNode = undefined
       if (configItem.type === 'container_page') {
-        this.selectTreeNode = 'container_page_' + configItem.page[0].id
+        this.$nextTick(() => {
+          this.selectTreeNode = 'container_page_' + configItem.page[0].id
+        })
       } else {
-        this.selectTreeNode = configItem.id
+        // 如果目标不是容器，回显架构树
+        if (configItem.type !== 'container') {
+          this.$nextTick(() => {
+            this.selectTreeNode = configItem.id
+          })
+          lowcodeUtils.unCheckAll(this.config)
+        } else if (!configItem.selected) {
+          // 如果目标是容器，但不是反选容器，回显架构树
+          this.$nextTick(() => {
+            this.selectTreeNode = configItem.id
+          })
+        }
       }
       this.editorPropertiesConfig = {}
       // 如果选中的是容器
@@ -1586,6 +1545,8 @@ export default {
           // 将目标设置为选定
           configItem.selected = true
           this.targetContainer = configItem
+          this.editorPropertiesConfig = configItem
+          this.editorPropertiesConfig.props = {}
         }
         return
       }
@@ -1630,6 +1591,7 @@ export default {
         this.editorPropertiesConfig = 'unregistered'
       }
     },
+    // 架构树点击某个节点后，在渲染器中，让组件闪烁
     twink (id) {
       const allRefs = Object.keys(this.$refs)
       allRefs.forEach(ref => {
@@ -1653,148 +1615,148 @@ export default {
     this.supportedEventType = [...lowcodeComponentMixin.supportedEventType]
     // 深拷贝外侧传来的配置
     this.config = JSON.parse(JSON.stringify(this.originalConfig))
-    this.config = {
-      page: [
-        {
-          id: 'page_KBjw2i',
-          type: 'page',
-          title: '111',
-          body: [
-            [
-              {
-                type: 'XFormTable',
-                span: 12,
-                id: 'XFormTable_BV6Nwk',
-                selected: false,
-                props: {
-                  queryParamsName: '',
-                  serviceName: ''
-                },
-                selfEvent: [
-                  'action'
-                ]
-              },
-              {
-                type: 'XAddNativeForm',
-                span: 12,
-                id: 'XAddNativeForm_ekihTp',
-                selected: false,
-                props: {
-                  configNameForLowCode: '',
-                  systemNameForLowCode: ''
-                },
-                selfEvent: [
-                  'onSubmit'
-                ]
-              }
-            ],
-            [
-              {
-                type: 'XTreeOne',
-                span: 12,
-                id: 'XTreeOne_szu7Al',
-                selected: false
-              },
-              {
-                type: 'XDescriptions',
-                span: 12,
-                id: 'XDescriptions_DTkbEg',
-                selected: false,
-                props: {
-                  title: '111',
-                  content: {
-                    c_f_user_phone: '2323',
-                    c_f_total_fee: 33356,
-                    c_f_address: '22',
-                    c_f_meterlen: 2,
-                    c_f_bank_card_number: '23',
-                    c_f_create_user: '超级管理员',
-                    c_f_customer: '23',
-                    c_f_balance: 33356,
-                    c_f_create_date: '2024-06-23 21:31:24',
-                    c_f_operator_date: '2024-06-23 21:31:24',
-                    c_f_total_times: 2,
-                    c_f_user_name: '23',
-                    c_f_comments: '323',
-                    c_id: 39,
-                    c_f_operatorid: '15',
-                    c_f_operator: '超级管理员',
-                    c_f_orgid: '9'
-                  },
-                  configName: 'Unit_Desc_Config',
-                  serviceName: 'af-revenue',
-                  getRealData: true
-                },
-                selfEvent: []
-              }
-            ]
-          ]
-        },
-        {
-          id: 'page_FgItf6',
-          type: 'page',
-          title: '22',
-          body: [
-            [
-              {
-                type: 'container',
-                span: 4,
-                id: 'container_ir2gR2',
-                selected: false
-              },
-              {
-                type: 'container_page',
-                span: 10,
-                id: 'container_xIRHGg',
-                selected: true,
-                page: [
-                  {
-                    id: 'container_page_IgYw9u',
-                    type: 'page',
-                    body: [
-                      [
-                        {
-                          type: 'container',
-                          span: 24,
-                          id: 'container_tqVFCL'
-                        }
-                      ],
-                      [
-                        {
-                          type: 'container',
-                          span: 24,
-                          id: 'container_i8VXCZ'
-                        }
-                      ]
-                    ]
-                  }
-                ]
-              },
-              {
-                type: 'container',
-                span: 10,
-                id: 'container_PT9n3Q',
-                selected: false
-              }
-            ],
-            [
-              {
-                type: 'container',
-                span: 18,
-                id: 'container_q04vQr',
-                selected: false
-              },
-              {
-                type: 'container',
-                span: 6,
-                id: 'container_MKwNvz',
-                selected: false
-              }
-            ]
-          ]
-        }
-      ]
-    }
+    // this.config = {
+    //   page: [
+    //     {
+    //       id: 'page_KBjw2i',
+    //       type: 'page',
+    //       title: '111',
+    //       body: [
+    //         [
+    //           {
+    //             type: 'XFormTable',
+    //             span: 12,
+    //             id: 'XFormTable_BV6Nwk',
+    //             selected: false,
+    //             props: {
+    //               queryParamsName: '',
+    //               serviceName: ''
+    //             },
+    //             selfEvent: [
+    //               'action'
+    //             ]
+    //           },
+    //           {
+    //             type: 'XAddNativeForm',
+    //             span: 12,
+    //             id: 'XAddNativeForm_ekihTp',
+    //             selected: false,
+    //             props: {
+    //               configNameForLowCode: '',
+    //               systemNameForLowCode: ''
+    //             },
+    //             selfEvent: [
+    //               'onSubmit'
+    //             ]
+    //           }
+    //         ],
+    //         [
+    //           {
+    //             type: 'XTreeOne',
+    //             span: 12,
+    //             id: 'XTreeOne_szu7Al',
+    //             selected: false
+    //           },
+    //           {
+    //             type: 'XDescriptions',
+    //             span: 12,
+    //             id: 'XDescriptions_DTkbEg',
+    //             selected: false,
+    //             props: {
+    //               title: '111',
+    //               content: {
+    //                 c_f_user_phone: '2323',
+    //                 c_f_total_fee: 33356,
+    //                 c_f_address: '22',
+    //                 c_f_meterlen: 2,
+    //                 c_f_bank_card_number: '23',
+    //                 c_f_create_user: '超级管理员',
+    //                 c_f_customer: '23',
+    //                 c_f_balance: 33356,
+    //                 c_f_create_date: '2024-06-23 21:31:24',
+    //                 c_f_operator_date: '2024-06-23 21:31:24',
+    //                 c_f_total_times: 2,
+    //                 c_f_user_name: '23',
+    //                 c_f_comments: '323',
+    //                 c_id: 39,
+    //                 c_f_operatorid: '15',
+    //                 c_f_operator: '超级管理员',
+    //                 c_f_orgid: '9'
+    //               },
+    //               configName: 'Unit_Desc_Config',
+    //               serviceName: 'af-revenue',
+    //               getRealData: true
+    //             },
+    //             selfEvent: []
+    //           }
+    //         ]
+    //       ]
+    //     },
+    //     {
+    //       id: 'page_FgItf6',
+    //       type: 'page',
+    //       title: '22',
+    //       body: [
+    //         [
+    //           {
+    //             type: 'container',
+    //             span: 4,
+    //             id: 'container_ir2gR2',
+    //             selected: false
+    //           },
+    //           {
+    //             type: 'container_page',
+    //             span: 10,
+    //             id: 'container_xIRHGg',
+    //             selected: true,
+    //             page: [
+    //               {
+    //                 id: 'container_page_IgYw9u',
+    //                 type: 'page',
+    //                 body: [
+    //                   [
+    //                     {
+    //                       type: 'container',
+    //                       span: 24,
+    //                       id: 'container_tqVFCL'
+    //                     }
+    //                   ],
+    //                   [
+    //                     {
+    //                       type: 'container',
+    //                       span: 24,
+    //                       id: 'container_i8VXCZ'
+    //                     }
+    //                   ]
+    //                 ]
+    //               }
+    //             ]
+    //           },
+    //           {
+    //             type: 'container',
+    //             span: 10,
+    //             id: 'container_PT9n3Q',
+    //             selected: false
+    //           }
+    //         ],
+    //         [
+    //           {
+    //             type: 'container',
+    //             span: 18,
+    //             id: 'container_q04vQr',
+    //             selected: false
+    //           },
+    //           {
+    //             type: 'container',
+    //             span: 6,
+    //             id: 'container_MKwNvz',
+    //             selected: false
+    //           }
+    //         ]
+    //       ]
+    //     }
+    //   ]
+    // }
     this.refreshOrganization()
   }
 }

package/src/theme/default/style.less

@@ -33,8 +33,7 @@
 
 // 美化滚动条
 ::-webkit-scrollbar{
-  height: 9px;
-  width: 9px;
+  width: 7px;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -54,4 +53,5 @@
 
 ::-webkit-scrollbar-thumb:hover {
   background: @primary-3;
+  border: 0;
 }

package/src/utils/lowcode/lowcodeComponentMixin.js

@@ -4,15 +4,18 @@ import lowcodeLog from '@vue2-client/utils/lowcode/lowcodeLog'
 import { uuid } from '@vue2-client/utils/util'
 export default {
   props: {
+    // 组件ID用于注册组件到Map中
     mixinComponentId: {
       type: String,
       required: false,
       default: uuid()
     },
+    // 所有Props的集合
     propsData: {
       type: Object,
       default: () => {}
     },
+    // 钩子函数
     lifeCycleFunction: {
       type: Array,
       default: undefined
@@ -20,6 +23,10 @@ export default {
   },
   data () {
     return {
+      // 组件暴露给低代码平台的变量
+      // 该变量由各个组件选择性暴露
+      // 比如XFormTable可以将点击action后，该行信息保存在此变量中，便于其他组件调用
+      // 使用$lowCodeSetData来修改此变量的值
       dataForLowCode: {}
     }
   },
@@ -69,6 +76,7 @@ export default {
     $lowCodeSetData (key, value) {
       this.dataForLowCode[key] = value
     },
+    // 解析传入的钩子函数并执行
     resolveLifeCycleFunctionAndRun (lifeCycleName) {
       if (this.lifeCycleFunction && this.lifeCycleFunction.length > 0) {
         this.lifeCycleFunction.forEach(param => {

package/src/utils/lowcode/lowcodeUtils.js

@@ -54,6 +54,7 @@ export function getPageByComponentID (id, config) {
   }
 }
 
+// 根据组件id获取当前行
 export function getRowByComponentId (id, config) {
   for (let i = 0; i < config.page.length; i++) {
     const page = config.page[i]