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

package/packages/lowcode/src/canvas.vue

@@ -182,6 +182,60 @@ const HTML_TAGS = new Set([
   'slot'
 ]);
 
+// kebab/camel 组件名 → Pascal 形式，便于统一比较
+function toPascal(name) {
+  return String(name).replace(/(^|-)(\w)/g, (m, sep, c) => c.toUpperCase());
+}
+
+// 表单容器：其内拖入的表单控件需包一层 es-form-item 节点（与源码结构一一对应）
+const FORM_CONTAINERS = ['EsForm'];
+
+// 需被 es-form-item 包裹的表单控件（Pascal 名）
+const FORM_CONTROLS = [
+  'EsIcons',
+  'EsRadio',
+  'EsRadioGroup',
+  'EsCheckbox',
+  'EsCheckboxGroup',
+  'EsInput',
+  'EsInputNumber',
+  'EsSelect',
+  'EsSelector',
+  'EsCascader',
+  'EsSwitch',
+  'EsSlider',
+  'EsTimePicker',
+  'EsDatePicker',
+  'EsUpload',
+  'EsRate',
+  'EsColorPicker',
+  'EsTransfer',
+  'EsCron',
+  'EsAutocomplete'
+];
+
+// 组件名 → 字段键前缀（对齐 field-render 的 COMPONENT_MAP）
+const COMP_TO_TYPE = {
+  EsInput: 'input',
+  EsInputNumber: 'number',
+  EsSelect: 'select',
+  EsSelector: 'selector',
+  EsCascader: 'cascader',
+  EsSwitch: 'switch',
+  EsDatePicker: 'date',
+  EsTimePicker: 'time',
+  EsUpload: 'upload',
+  EsRate: 'rate',
+  EsSlider: 'slider',
+  EsColorPicker: 'color',
+  EsTransfer: 'transfer',
+  EsRadio: 'radio',
+  EsRadioGroup: 'radio',
+  EsCheckbox: 'checkbox',
+  EsCheckboxGroup: 'checkbox',
+  EsTree: 'tree'
+};
+
 export default {
   name: 'Canvas',
   mixins: [busListener],
@@ -390,6 +444,65 @@ export default {
           this.notifyAllChange();
         }
       });
+
+      // 表单内字段排序（es-form 插槽直接子节点即 form-render 根）
+      this.initFormSortables();
+    },
+    /**
+     * 初始化表单内字段排序：每个 es-form 根元素（插槽直接子节点为
+     * form-render 的 es-form-item / 普通 Render 根，均带 data-id）挂一个
+     * 独立 Sortable 实例；单独 group 限制只能在表单内部排序，
+     * 拖拽结束后按 DOM 真实顺序写回所属 form 节点的 children
+     */
+    initFormSortables() {
+      const container = this.$refs.container;
+      if (!container) return;
+      const forms = Array.from(container.querySelectorAll('.es-form'));
+      // 先销毁旧实例，避免节点增删后残留
+      forms.forEach((el) => {
+        const existing = Sortable.get(el);
+        if (existing) {
+          existing.destroy();
+        }
+      });
+      forms.forEach((el) => {
+        new Sortable(el, {
+          animation: 150,
+          fallbackOnBody: true,
+          ghostClass: 'es-lowcode__canvas-ghost',
+          chosenClass: 'es-lowcode__canvas-chosen',
+          dragClass: 'es-lowcode__canvas-drag',
+          group: {
+            name: 'form-fields',
+            pull: false,
+            put: false
+          },
+          onEnd: () => {
+            // 表单节点 id 在 render.vue 包裹层的 data-id 上
+            const wrapper = el.closest('[data-id]');
+            const formId = wrapper && wrapper.getAttribute('data-id');
+            const node = formId ? this.findNodeById(formId) : null;
+            if (!node) return;
+
+            const domIds = Array.from(el.children)
+              .map((child) => child.getAttribute('data-id'))
+              .filter(Boolean);
+            const children = node.children || [];
+            const curIds = children.map((c) => c.id);
+            // 顺序未变化则不处理
+            if (curIds.join(',') === domIds.join(',')) return;
+
+            const byId = {};
+            children.forEach((c) => {
+              byId[c.id] = c;
+            });
+            const reordered = domIds.map((id) => byId[id]).filter(Boolean);
+            this.$set(node, 'children', reordered);
+            // 嵌套节点写回走 bus updateNode（按 id 定位 + 存历史）
+            bus.$emit('updateNode', node);
+          }
+        });
+      });
     },
     handleClickPage(page) {
       this.handleClick(page);
@@ -455,8 +568,21 @@ export default {
      */
     handleNodeDrop(data) {
       const { targetNode, droppedItem } = data;
-      const id = `${uuid()}`;
-      const newNode = { ...droppedItem, id };
+      let newNode = { ...droppedItem, id: `${uuid()}` };
+      // 组件库条目上的 props 是定义数组，深拷贝到节点；
+      // 取值由 props 面板改动后写入条目的 value 字段
+      if (Array.isArray(newNode.props)) {
+        newNode.props = newNode.props.map((p) => ({ ...p }));
+      }
+      // 表单容器内拖入表单控件：控件节点直接存 children（JSON 不存 es-form-item
+      // 包裹节点，包裹层由 form-render 渲染时生成），label/字段键记在 formItem 上
+      if (this.isFormContainer(targetNode) && this.isFormControl(droppedItem)) {
+        const type = COMP_TO_TYPE[toPascal(droppedItem.name)] || 'input';
+        newNode.formItem = {
+          label: droppedItem.description || '',
+          prop: this.buildFieldProp(targetNode, type)
+        };
+      }
       // 确保目标节点有 children 数组
       if (!targetNode.children) {
         this.$set(targetNode, 'children', []);
@@ -465,6 +591,33 @@ export default {
       // 通知 lowcode 更新整个页面数据
       bus.$emit('updateNode', targetNode);
     },
+    /**
+     * 生成表单内唯一字段键（type 前缀 + 序号，冲突自增）
+     */
+    buildFieldProp(targetNode, type) {
+      const children = targetNode.children || [];
+      let idx = children.length + 1;
+      let fieldName = type + idx;
+      while (
+        children.some((c) => c.formItem && c.formItem.prop === fieldName)
+      ) {
+        idx += 1;
+        fieldName = type + idx;
+      }
+      return fieldName;
+    },
+    /**
+     * 判断节点是否为表单容器（es-form）
+     */
+    isFormContainer(node) {
+      return !!node && FORM_CONTAINERS.includes(toPascal(node.name));
+    },
+    /**
+     * 判断拖入项是否为表单控件
+     */
+    isFormControl(item) {
+      return !!item && FORM_CONTROLS.includes(toPascal(item.name));
+    },
     /**
      * 处理 Render 子组件的数据变更（如调整大小等）
      * @param {Object} node 变更后的组件数据
@@ -592,6 +745,10 @@ export default {
           const component = JSON.parse(componentData);
           const id = `${uuid()}`;
           const newNode = { ...component, id };
+          // 组件库条目上的 props 是定义数组，深拷贝到节点，取值改动后写入条目 value
+          if (Array.isArray(newNode.props)) {
+            newNode.props = newNode.props.map((p) => ({ ...p }));
+          }
           // 元素与组件统一放入 children，用 type 区分
           this.children.push(newNode);
           // 通知 lowcode 同步更新

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

@@ -0,0 +1,305 @@
+<template>
+  <!-- 单个表单元素 render：表单控件节点（EsInput/EsSelect 等）→
+    es-form-item 包裹层（渲染时生成，JSON 不存包裹节点）+ 控件本体；
+    内部不接收拖入元素；仅支持宽度拖拽（字段可能需拖宽占多列），不提供高度手柄 -->
+  <es-form-item
+    class="es-lowcode__canvas--component"
+    :class="{ 'is-active': newNode.id === active }"
+    :data-id="newNode.id"
+    :style="newNode.style"
+    :label="formItem.label"
+    :prop="formItem.prop"
+    @click.native.stop="handleClick"
+  >
+    <component
+      :style="controlStyle"
+      :is="newNode.name"
+      v-bind="cleanProps"
+      v-on="newNode.events"
+      :key="instanceKey"
+      v-show="
+        newNode.directives['show'] !== undefined
+          ? newNode.directives['show']
+          : true
+      "
+    ></component>
+    <template v-if="newNode.id === active">
+      <div class="es-lowcode__handles">
+        <es-button
+          v-if="isRemove()"
+          type="text"
+          size="mini"
+          icon="es-icon-shanchu"
+          @click.stop="handleRemove"
+        ></es-button>
+      </div>
+      <!-- 仅多列表单提供宽度拖拽：单列时字段本就独占一行，拖宽无意义 -->
+      <template v-if="canResizeWidth">
+        <div
+          class="es-lowcode__resize-handle is-left es-icon-stretch"
+          @pointerdown="handleResizeStart($event, 'left')"
+          @dragstart="$event.preventDefault()"
+        >
+          <span class="es-lowcode__resize-size" v-show="direction === 'left'">{{
+            width
+          }}</span>
+        </div>
+        <div
+          class="es-lowcode__resize-handle is-right es-icon-stretch"
+          @pointerdown="handleResizeStart($event, 'right')"
+          @dragstart="$event.preventDefault()"
+        >
+          <span
+            class="es-lowcode__resize-size"
+            v-show="direction === 'right'"
+            >{{ width }}</span
+          >
+        </div>
+      </template>
+    </template>
+  </es-form-item>
+</template>
+
+<script>
+import EsButton from 'eoss/packages/button';
+import bus from 'eoss/src/utils/bus.js';
+import { propsToObject, getPropRaw } from './util/props-util.js';
+
+export default {
+  name: 'FormRender',
+  // lowcode.vue provide 了自身实例，notRemoves（禁止删除名单）从其读取
+  inject: {
+    lowcode: {
+      default: null
+    }
+  },
+  components: {
+    EsButton
+  },
+  props: {
+    node: {
+      type: Object,
+      default: null
+    },
+    page: {
+      type: Object,
+      default: null
+    },
+    active: {
+      type: String,
+      default: ''
+    },
+    //  声明仅为吸收父级统一绑定的 :drag（手柄显隐由 active 控制，预览端无 active 自然不显示）
+    drag: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    const newNode = JSON.parse(JSON.stringify(this.node)) || {};
+    //  directives 在页面结构上已定义，这里兼容子节点未携带的情况
+    newNode.directives = newNode.directives || {};
+    newNode.style = newNode.style || {};
+    return {
+      newNode,
+      resizingComponent: null,
+      initialMouseX: 0,
+      initialWidth: 0,
+      isResizing: false,
+      direction: ''
+    };
+  },
+  watch: {
+    node: {
+      handler(newVal) {
+        const node = JSON.parse(JSON.stringify(newVal)) || {};
+        node.directives = node.directives || {};
+        node.style = node.style || {};
+        this.newNode = node;
+      },
+      deep: true
+    }
+  },
+  computed: {
+    /**
+     * 表单元信息（label/字段键）：canvas 拖入时写入 node.formItem，
+     * 解析源码时由 es-form-item 包裹层拆包还原
+     */
+    formItem() {
+      return (this.newNode && this.newNode.formItem) || {};
+    },
+    /**
+     * 所属 es-form 节点：在页面树中反查包含当前字段的父节点
+     */
+    parentForm() {
+      const find = (nodes) => {
+        if (!nodes) return null;
+        for (const node of nodes) {
+          const children = node.children || [];
+          if (children.some((c) => c.id === this.newNode.id)) return node;
+          const found = find(children);
+          if (found) return found;
+        }
+        return null;
+      };
+      return this.page ? find([this.page]) : null;
+    },
+    /**
+     * 是否允许宽度拖拽：单列（columns 缺省或 <=1）表单不显示宽度手柄，
+     * 多列时字段可拖宽占多列
+     */
+    canResizeWidth() {
+      const columns = getPropRaw(
+        this.parentForm && this.parentForm.props,
+        'columns'
+      );
+      return (parseInt(columns, 10) || 1) > 1;
+    },
+    /**
+     * 手柄旁 span 展示的宽度：拖拽写入 style.width 后自动跟随，
+     * 无显式宽度（columns 列宽百分比布局）时从 DOM 取实际宽度
+     */
+    width() {
+      const w = parseInt(this.newNode.style && this.newNode.style.width, 10);
+      if (!isNaN(w)) return w;
+      return (this.$el && this.$el.offsetWidth) || 0;
+    },
+    /**
+     * 控件样式：表单字段默认撑满 form-item 内容区（宽度由 es-form-item 根的 style.width 控制）
+     */
+    controlStyle() {
+      const style = { ...((this.newNode && this.newNode.style) || {}) };
+      delete style.width;
+      delete style.height;
+      return { width: '100%', ...style };
+    },
+    /**
+     * 页面 data 变量：供 props 中 {{var}} 引用解析
+     */
+    pageData() {
+      return (this.page && this.page.data) || {};
+    },
+    /**
+     * 过滤掉 Vue 指令（v-xxx）的 props，避免它们作为普通属性传递给组件
+     */
+    cleanProps() {
+      if (!this.newNode) return {};
+      const result = {};
+      //  合并 HTML 属性
+      if (this.newNode.attrs) {
+        Object.assign(result, this.newNode.attrs);
+      }
+      //  合并组件 props：定义数组经 propsToObject 转取值对象（含 {{var}} 解析）
+      Object.assign(result, propsToObject(this.newNode.props, this.pageData));
+      return result;
+    },
+    /**
+     * 组件实例 key：节点 id + props 签名。
+     * 业务组件在 created 里按 props 拉数据、不 watch prop 变化，
+     * 源码视图改完 props 后必须换 key 强制重挂载，画布才会刷新
+     */
+    instanceKey() {
+      let sig = '';
+      try {
+        sig = JSON.stringify(this.cleanProps);
+      } catch (e) {
+        sig = '';
+      }
+      return (this.newNode ? this.newNode.id : '') + ':' + sig;
+    }
+  },
+  methods: {
+    /**
+     * 是否展示删除按钮：节点 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);
+    },
+    /**
+     * 处理字段点击事件（选中）；拖拽中不响应，避免误选
+     */
+    handleClick(event) {
+      if (this.isResizing) {
+        return;
+      }
+      this.$emit('click', this.newNode, event);
+    },
+    /**
+     * 宽度拖拽开始（仅 left/right，字段不提供高度拖拽）
+     * @param event 指针事件对象
+     * @param direction 拖拽方向 left/right
+     */
+    handleResizeStart(event, direction) {
+      event.preventDefault();
+      event.stopPropagation(); // 阻止事件冒泡，防止触发字段选中
+      this.direction = direction;
+      // 只响应鼠标左键或触摸
+      if (event.pointerType === 'mouse' && event.button !== 0) return;
+      this.resizingComponent = { ...this.newNode, direction };
+      this.initialMouseX = event.clientX;
+      this.initialWidth = this.width || 0;
+      document.addEventListener('pointermove', this.handleResizeMove);
+      document.addEventListener('pointerup', this.handleResizeEnd);
+    },
+    /**
+     * 宽度拖拽移动：实时写入 style.width（作用于 es-form-item 根），
+     * 上限钉到所属表单内容区宽度，下限保 40px 防止拖没
+     * @param event 指针事件对象
+     */
+    handleResizeMove(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.isResizing = true;
+      if (!this.resizingComponent) return;
+      const deltaX = event.clientX - this.initialMouseX;
+      let newWidth =
+        this.direction === 'right'
+          ? this.initialWidth + deltaX
+          : this.initialWidth - deltaX;
+      const formContent =
+        this.$el && this.$el.parentElement ? this.$el.parentElement : null;
+      const maxWidth = formContent ? formContent.clientWidth : 0;
+      newWidth = Math.max(40, newWidth);
+      if (maxWidth > 0) {
+        newWidth = Math.min(newWidth, maxWidth);
+      }
+      this.$set(this.newNode.style, 'width', `${newWidth}px`);
+    },
+    /**
+     * 宽度拖拽结束：经 bus updateNode 持久化到页面 JSON（lowcode.vue 按 id
+     * 写回页面树并存档历史），嵌套字段不走 canvas 顶层 index 式 handleChange
+     * @param event 指针事件对象
+     */
+    handleResizeEnd(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      bus.$emit('updateNode', this.newNode);
+      this.resizingComponent = null;
+      document.removeEventListener('pointermove', this.handleResizeMove);
+      document.removeEventListener('pointerup', this.handleResizeEnd);
+      //  释放鼠标时浏览器会在指针位置派发 click，若此时鼠标不在被拖元素上，
+      //  会误选中底下的其它元素；在捕获阶段吞掉紧随其后的这一次 click
+      const swallowClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        document.removeEventListener('click', swallowClick, true);
+      };
+      document.addEventListener('click', swallowClick, true);
+      // 延迟重置调整状态，避免触发点击事件
+      setTimeout(() => {
+        this.isResizing = false;
+        document.removeEventListener('click', swallowClick, true);
+      }, 200);
+    },
+    /**
+     * 处理字段删除事件
+     */
+    handleRemove() {
+      this.$emit('remove', this.newNode);
+    }
+  }
+};
+</script>

package/packages/lowcode/src/lowcode.vue

@@ -195,6 +195,8 @@ import EsRadio from 'eoss/packages/radio';
 import EsRadioGroup from 'eoss/packages/radio-group';
 import EsSelect from 'eoss/packages/select';
 import EsSelector from 'eoss/packages/selector';
+import librarys from './util/components';
+
 export default {
   name: 'EsLowcode',
   mixins: [historyMixin, busListener],
@@ -224,10 +226,7 @@ export default {
 
   props: {
     // url模式
-    urlMode: {
-      type: String,
-      required: true
-    },
+    urlMode: String,
     // 授权类型
     authorizeType: {
       type: Array,
@@ -246,7 +245,14 @@ export default {
     // 组件库数据
     library: {
       type: Array,
-      default: () => []
+      default: () => [
+        {
+          name: 'component',
+          label: 'Eoss',
+          collapse: true,
+          children: librarys
+        }
+      ]
     },
     // 分页信息
     pagination: {
@@ -271,7 +277,11 @@ export default {
     // 保存方法
     save: Function,
     // 发布方法
-    publish: Function
+    publish: Function,
+    notRemoves: {
+      type: Array,
+      default: () => []
+    }
   },
 
   data() {
@@ -460,12 +470,20 @@ export default {
           }
         });
       } else if (this.page.children) {
-        // 修改子组件属性
-        const index = this.page.children.findIndex((c) => c.id === updates.id);
-        if (index !== -1) {
-          const newComponent = { ...this.page.children[index], ...updates };
-          this.$set(this.page.children, index, newComponent);
-        }
+        // 修改子组件属性：递归全树定位，嵌套组件（如表单内字段）也要能写回
+        const updateInTree = (nodes) => {
+          if (!nodes) return false;
+          const index = nodes.findIndex((c) => c.id === updates.id);
+          if (index !== -1) {
+            this.$set(nodes, index, { ...nodes[index], ...updates });
+            return true;
+          }
+          for (const node of nodes) {
+            if (node.children && updateInTree(node.children)) return true;
+          }
+          return false;
+        };
+        updateInTree(this.page.children);
       }
       // 保存历史记录
       this.saveHistory();
@@ -532,7 +550,9 @@ export default {
         return;
       }
       this.publishTitle = page.status === 1 ? '查看' : '发布';
-      const url = this.urlMode ? this.urlMode.replace('{id}', page.id) : '';
+      const url = this.urlMode
+        ? this.urlMode.replace('{id}', page.id)
+        : page.id;
       this.readonly = page.status === 1;
       this.publishForm = { name: page.name, pid: page.pid || '', url: url };
       this.parentData = this.pagesData.filter((item) => item.type === 'page');