eoss 0.1.0-alpha.40 → 0.1.0-alpha.41

package/packages/lowcode/src/form-render.vue

@@ -6,14 +6,14 @@
     class="es-lowcode__canvas--component"
     :class="{ 'is-active': newNode.id === active }"
     :data-id="newNode.id"
-    :style="newNode.style"
-    :label="formItem.label"
-    :prop="formItem.prop"
+    :style="rootStyle"
+    :label="newNode.label"
+    :prop="newNode.name"
     @click.native.stop="handleClick"
   >
     <component
       :style="controlStyle"
-      :is="newNode.name"
+      :is="newNode.nodeName"
       v-bind="cleanProps"
       v-on="newNode.events"
       :key="instanceKey"
@@ -93,6 +93,11 @@ export default {
     drag: {
       type: Boolean,
       default: true
+    },
+    //  声明仅为吸收 canvas 顶层统一绑定的 :span（grid 跨列实际读 node.style.span）
+    span: {
+      type: [Number, String],
+      default: 1
     }
   },
   data() {
@@ -121,13 +126,6 @@ export default {
     }
   },
   computed: {
-    /**
-     * 表单元信息（label/字段键）：canvas 拖入时写入 node.formItem，
-     * 解析源码时由 es-form-item 包裹层拆包还原
-     */
-    formItem() {
-      return (this.newNode && this.newNode.formItem) || {};
-    },
     /**
      * 所属 es-form 节点：在页面树中反查包含当前字段的父节点
      */
@@ -145,10 +143,12 @@ export default {
       return this.page ? find([this.page]) : null;
     },
     /**
-     * 是否允许宽度拖拽：单列（columns 缺省或 <=1）表单不显示宽度手柄，
-     * 多列时字段可拖宽占多列
+     * 是否允许宽度拖拽：单列（columns 缺省或 <=1）表单内字段不显示宽度手柄，
+     * 多列时字段可拖宽占多列；顶层/孤儿控件（无 form 父节点）在瀑布流等
+     * 布局下需要宽度拖拽，始终显示
      */
     canResizeWidth() {
+      if (!this.parentForm) return true;
       const columns = getPropRaw(
         this.parentForm && this.parentForm.props,
         'columns'
@@ -164,6 +164,18 @@ export default {
       if (!isNaN(w)) return w;
       return (this.$el && this.$el.offsetWidth) || 0;
     },
+    /**
+     * 包裹层样式：节点 style 直出（瀑布流的 position/left/top 在其内），
+     * 页面 grid 布局时 span 转 gridColumn（与 Render componentStyle 同口径）
+     */
+    rootStyle() {
+      const style = { ...((this.newNode && this.newNode.style) || {}) };
+      if (this.page && this.page.style && this.page.style.display === 'grid') {
+        const span = style.span;
+        if (span && span > 1) style.gridColumn = `span ${span}`;
+      }
+      return style;
+    },
     /**
      * 控件样式：表单字段默认撑满 form-item 内容区（宽度由 es-form-item 根的 style.width 控制）
      */

package/packages/lowcode/src/json.vue

@@ -1,20 +1,20 @@
 <template>
-  <editor
+  <es-code-editor
     class="es-lowcode-json__editor"
     v-model="pages"
     language="json"
     ref="editorRef"
     @save="handleSave"
-  ></editor>
+  ></es-code-editor>
 </template>
 
 <script>
-import editor from './editor.vue';
+import EsCodeEditor from 'eoss/packages/code-editor';
 export default {
   name: 'LowJson',
 
   components: {
-    editor
+    EsCodeEditor
   },
 
   props: {

package/packages/lowcode/src/lowcode.vue

@@ -183,7 +183,7 @@ import {
   batchList
 } from 'eoss/src/config/api.js';
 import { loading } from 'eoss/src/utils/util';
-import { migrateDirectives } from './util/source-parser';
+import { migrateDirectives } from 'eoss/src/utils/source-parser.js';
 import historyMixin from './mixins/history.js';
 import busListener from './mixins/bus-listener.js';
 import EsButton from 'eoss/packages/button';

package/packages/lowcode/src/modules.vue

@@ -58,10 +58,17 @@ import EsCollapse from 'eoss/packages/collapse';
 import EsCollapseItem from 'eoss/packages/collapse-item';
 import EsTabPane from 'eoss/packages/tab-pane';
 import EsTabs from 'eoss/packages/tabs';
+import EsScrollbar from 'eoss/packages/scrollbar';
 
 export default {
   name: 'Modules',
-  components: { EsCollapse, EsCollapseItem, EsTabPane, EsTabs },
+  components: {
+    EsCollapse,
+    EsCollapseItem,
+    EsTabPane,
+    EsTabs,
+    EsScrollbar
+  },
 
   props: {
     contents: {

package/packages/lowcode/src/render.vue

@@ -19,7 +19,7 @@
     <component
       v-else
       :style="innerLayoutStyle"
-      :is="newNode.name"
+      :is="newNode.nodeName"
       :height="newHeight"
       v-bind="cleanProps"
       v-on="newNode.events"
@@ -32,8 +32,8 @@
     >
       <!-- 不用 v-if 包裹：children 为空时 v-if 会产出空注释节点，
         导致 EsForm 等组件误判默认插槽有内容而不渲染 slot fallback -->
-      <!-- 子节点统一递归渲染；表单控件子节点（带 formItem 标记）由
-        form-render 渲染，es-form-item 包裹层渲染时生成、JSON 不存 -->
+      <!-- 子节点统一递归渲染；表单控件子节点（form-controls 清单命中，
+        与是否在 es-form 内无关）由 form-render 渲染，es-form-item 包裹层渲染时生成、JSON 不存 -->
       <component
         :is="childRender(child)"
         class="is-child"
@@ -129,6 +129,7 @@
 import Frame from './iframe.vue';
 import { propsToObject } from './util/props-util.js';
 import FormRender from './form-render.vue';
+import { isFormControlNode, toPascal } from './util/form-controls.js';
 
 import EsButton from 'eoss/packages/button';
 import EsDropdown from 'eoss/packages/dropdown';
@@ -403,8 +404,8 @@ export default {
         for (const child of children) {
           result.push({
             id: child.id,
-            label: child.name || '元素',
-            name: child.name
+            label: child.nodeName || '元素',
+            name: child.nodeName
           });
           result.push(...collectDescendants(child));
         }
@@ -430,7 +431,7 @@ export default {
         for (const node of nodes) {
           const currentPath = [
             ...path,
-            { id: node.id, label: node.name || '元素', name: node.name }
+            { id: node.id, label: node.nodeName || '元素', name: node.nodeName }
           ];
           if (node.id === targetId) return currentPath;
           const children = Array.isArray(node.children) ? node.children : [];
@@ -450,11 +451,15 @@ export default {
   beforeDestroy() {},
   methods: {
     /**
-     * 子节点渲染器：表单控件子节点（canvas 拖入/源码解析时写入 formItem 标记）
-     * 由 form-render 渲染（es-form-item 包裹层渲染时生成），其余走通用 Render
+     * 子节点渲染器：表单控件子节点仅在 es-form 内由 form-render 渲染
+     * （es-form-item 包裹层）；es-form 外（页面根/普通容器）拖入的控件
+     * 裸渲染走通用 Render
      */
     childRender(child) {
-      return child && child.formItem ? 'FormRender' : 'Render';
+      if (!isFormControlNode(child)) return 'Render';
+      return toPascal(this.newNode.nodeName) === 'EsForm'
+        ? 'FormRender'
+        : 'Render';
     },
     /**
      * 是否展示删除按钮：节点 canRemove 未显式禁止，

package/packages/lowcode/src/source.vue

@@ -1,23 +1,23 @@
 <template>
-  <editor
+  <es-code-editor
     class="es-lowcode-source__editor"
     :value="source"
     language="html"
     ref="editorRef"
     @save="handleSave"
-  ></editor>
+  ></es-code-editor>
 </template>
 
 <script>
-import editor from './editor.vue';
-import { generateVueSource } from './util/source-generator';
-import { parseVueSource } from './util/source-parser';
+import EsCodeEditor from 'eoss/packages/code-editor';
+import { generateVueSource } from 'eoss/src/utils/source-generator.js';
+import { parseVueSource } from 'eoss/src/utils/source-parser.js';
 
 export default {
   name: 'Source',
 
   components: {
-    editor
+    EsCodeEditor
   },
 
   props: {