eoss 0.1.0-alpha.39 → 0.1.0-alpha.40

package/packages/lowcode/src/modules.vue

@@ -6,22 +6,39 @@
       lazy
       v-for="(items, index) in contents"
       :key="items.name"
+      v-show="items.children && items.children.length"
     >
-      <es-collapse
-        v-model="actives"
-        v-show="items.children.length"
-        v-if="items.collapse"
-      >
-        <es-collapse-item
-          :title="item.label"
-          class="es-lowcode__modules--content"
-          v-for="item in items.children"
-          :name="item.name"
-          :key="item.name"
+      <es-scrollbar>
+        <es-collapse
+          v-model="actives"
+          v-show="items.children.length"
+          v-if="items.collapse"
         >
+          <es-collapse-item
+            :title="item.label"
+            class="es-lowcode__modules--content"
+            v-for="item in items.children"
+            :name="item.label"
+            :key="item.label"
+          >
+            <div
+              class="es-lowcode__modules--item"
+              v-for="ele in item.children"
+              :key="ele.name"
+              draggable="true"
+              @dragstart="handleDragStart($event, ele)"
+            >
+              <span class="es-lowcode__modules--item-dom">{{ ele.name }}</span>
+              <span class="es-lowcode__modules--item-desc">{{
+                ele.description
+              }}</span>
+            </div>
+          </es-collapse-item>
+        </es-collapse>
+        <div v-else class="es-lowcode__modules--contents">
           <div
             class="es-lowcode__modules--item"
-            v-for="ele in item.children"
+            v-for="ele in items.children"
             :key="ele.name"
             draggable="true"
             @dragstart="handleDragStart($event, ele)"
@@ -31,22 +48,8 @@
               ele.description
             }}</span>
           </div>
-        </es-collapse-item>
-      </es-collapse>
-      <div v-else class="es-lowcode__modules--contents">
-        <div
-          class="es-lowcode__modules--item"
-          v-for="ele in items.children"
-          :key="ele.name"
-          draggable="true"
-          @dragstart="handleDragStart($event, ele)"
-        >
-          <span class="es-lowcode__modules--item-dom">{{ ele.name }}</span>
-          <span class="es-lowcode__modules--item-desc">{{
-            ele.description
-          }}</span>
         </div>
-      </div>
+      </es-scrollbar>
     </es-tab-pane>
   </es-tabs>
 </template>
@@ -68,21 +71,34 @@ export default {
   },
   data() {
     return {
-      active: '0'
+      active: '0',
+      // 折叠面板展开项（v-model 可写）
+      actives: []
     };
   },
-  computed: {
-    actives() {
-      const content = this.contents[Number(this.active)];
-      return (
-        (content &&
-          content.children &&
-          content.children.map((item) => item.name)) ||
-        []
-      );
+  watch: {
+    active: {
+      immediate: true,
+      handler() {
+        this.resetActives();
+      }
+    },
+    contents() {
+      this.resetActives();
     }
   },
   methods: {
+    /**
+     * 重置折叠面板展开项为当前标签下全部分组
+     */
+    resetActives() {
+      const content = this.contents[Number(this.active)];
+      this.actives =
+        (content &&
+          content.children &&
+          content.children.map((item) => item.label)) ||
+        [];
+    },
     /**
      * 处理拖动开始事件
      * @param event 拖动事件对象

package/packages/lowcode/src/render.vue

@@ -30,23 +30,28 @@
           : true
       "
     >
-      <template v-if="newNode.children && newNode.children.length > 0">
-        <Render
-          class="is-child"
-          v-for="(child, index) in newNode.children"
-          :class="{ 'is-active': active === child.id }"
-          :key="child.id"
-          :node="child"
-          :page="page"
-          :active="active"
-          :drag="false"
-          @click="(node, event) => $emit('click', node, event)"
-          @drop="(e) => $emit('drop', e)"
-          @remove="(node) => $emit('remove', node)"
-          @selectAncestor="(id) => $emit('selectAncestor', id)"
-        />
-      </template>
-      <template v-else>{{ resolvedText || newNode.description }}</template>
+      <!-- 不用 v-if 包裹：children 为空时 v-if 会产出空注释节点，
+        导致 EsForm 等组件误判默认插槽有内容而不渲染 slot fallback -->
+      <!-- 子节点统一递归渲染；表单控件子节点（带 formItem 标记）由
+        form-render 渲染，es-form-item 包裹层渲染时生成、JSON 不存 -->
+      <component
+        :is="childRender(child)"
+        class="is-child"
+        v-for="child in newNode.children"
+        :class="{ 'is-active': active === child.id }"
+        :key="child.id"
+        :node="child"
+        :page="page"
+        :active="active"
+        :drag="false"
+        @click="(node, event) => $emit('click', node, event)"
+        @drop="(e) => $emit('drop', e)"
+        @remove="(node) => $emit('remove', node)"
+        @selectAncestor="(id) => $emit('selectAncestor', id)"
+      />
+      <!-- 插槽文本同样不能用 v-if/v-else：假分支的空注释节点会被误判为插槽内容，
+        改用 v-for 空数组，无文本时不产出任何插槽节点 -->
+      <template v-for="t in slotTexts">{{ t }}</template>
     </component>
     <template v-if="newNode.id === active">
       <div class="es-lowcode__handles">
@@ -67,6 +72,7 @@
           </es-dropdown-menu>
         </es-dropdown>
         <es-button
+          v-if="isRemove()"
           type="text"
           size="mini"
           icon="es-icon-shanchu"
@@ -121,11 +127,14 @@
 
 <script>
 import Frame from './iframe.vue';
+import { propsToObject } from './util/props-util.js';
+import FormRender from './form-render.vue';
 
 import EsButton from 'eoss/packages/button';
 import EsDropdown from 'eoss/packages/dropdown';
 import EsDropdownItem from 'eoss/packages/dropdown-item';
 import EsDropdownMenu from 'eoss/packages/dropdown-menu';
+
 // 容器布局样式（需应用到内层 component，而非外层包裹 div）
 const LAYOUT_PROPS = [
   'display',
@@ -139,7 +148,20 @@ const LAYOUT_PROPS = [
 ];
 export default {
   name: 'Render',
-  components: { Frame, EsButton, EsDropdown, EsDropdownItem, EsDropdownMenu },
+  // lowcode.vue provide 了自身实例，notRemoves（禁止删除名单）等编辑器级配置从其读取
+  inject: {
+    lowcode: {
+      default: null
+    }
+  },
+  components: {
+    Frame,
+    FormRender,
+    EsButton,
+    EsDropdown,
+    EsDropdownItem,
+    EsDropdownMenu
+  },
   props: {
     node: {
       type: Object,
@@ -254,6 +276,28 @@ export default {
       }
       return textExpr;
     },
+    /**
+     * 插槽文本：仅当无 children 时产出，
+     * 保证 EsForm 等组件在无字段时默认插槽为空、fallback 生效
+     */
+    slotTexts() {
+      const node = this.newNode;
+      if (!node) {
+        return [];
+      }
+      const hasChildren =
+        Array.isArray(node.children) && node.children.length > 0;
+      if (hasChildren) {
+        return [];
+      }
+      return [this.resolvedText || node.description || ''];
+    },
+    /**
+     * 页面 data 变量：供 props 中 {{var}} 引用解析
+     */
+    pageData() {
+      return (this.page && this.page.data) || {};
+    },
     /**
      * 过滤掉 Vue 指令（v-xxx）的 props，避免它们作为普通属性传递给组件
      * 指令统一存在 directives 字段，这里仅兼容历史数据中混入 props 的 v- 键
@@ -265,13 +309,8 @@ export default {
       if (this.newNode.attrs) {
         Object.assign(result, this.newNode.attrs);
       }
-      //  合并组件 props（跳过 Vue 指令）
-      if (this.newNode.props) {
-        Object.keys(this.newNode.props).forEach((key) => {
-          if (key.startsWith('v-')) return;
-          result[key] = this.newNode.props[key];
-        });
-      }
+      //  合并组件 props：定义数组经 propsToObject 转取值对象（含 {{var}} 解析）
+      Object.assign(result, propsToObject(this.newNode.props, this.pageData));
       return result;
     },
     /**
@@ -410,6 +449,22 @@ export default {
   mounted() {},
   beforeDestroy() {},
   methods: {
+    /**
+     * 子节点渲染器：表单控件子节点（canvas 拖入/源码解析时写入 formItem 标记）
+     * 由 form-render 渲染（es-form-item 包裹层渲染时生成），其余走通用 Render
+     */
+    childRender(child) {
+      return child && child.formItem ? 'FormRender' : 'Render';
+    },
+    /**
+     * 是否展示删除按钮：节点 canRemove 未显式禁止，
+     * 且 id 不在 lowcode 的 notRemoves（禁止删除名单）中
+     */
+    isRemove() {
+      if (this.newNode.canRemove === false) return false;
+      const notRemoves = (this.lowcode && this.lowcode.notRemoves) || [];
+      return !notRemoves.includes(this.newNode.id);
+    },
     /**
      * 处理组件大小调整开始事件
      * @param event 指针事件对象