eoss 0.1.0-alpha.24 → 0.1.0-alpha.26

package/packages/lowcode/src/canvas.vue

@@ -16,21 +16,26 @@
         <div
           class="es-lowcode__canvas--components"
           ref="container"
+          :key="page && page.style ? page.style.display : ''"
           :style="getStyle(page)"
         >
           <Render
             class="es-lowcode__canvas--component"
             :class="{ 'is-active': active === node.id }"
-            v-for="(node, index) in components"
+            v-for="(node, index) in children"
             :key="node.id"
             :node="node"
+            :page="page"
             :active="active"
             :span="page && page.span"
-            @click="handleClick(node)"
+            @click="handleClick"
             @change="
-              (newNode, direction) => handleChange(newNode, index, direction)
+              (newNode, direction, initialWidth) =>
+                handleChange(newNode, index, direction, initialWidth)
             "
-            @remove="handleRemove(index)"
+            @remove="handleRemoveNode"
+            @drop="handleNodeDrop"
+            @selectAncestor="selectNode"
           />
         </div>
       </es-scrollbar>
@@ -48,6 +53,125 @@ import {
 import bus from 'eoss/src/utils/bus.js';
 import Sortable from 'sortablejs';
 
+// 原生 HTML 元素标签名集合
+const HTML_TAGS = new Set([
+  'a',
+  'abbr',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'body',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'head',
+  'header',
+  'hgroup',
+  'hr',
+  'html',
+  'i',
+  'iframe',
+  'img',
+  'input',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'link',
+  'main',
+  'map',
+  'mark',
+  'menu',
+  'meta',
+  'meter',
+  'nav',
+  'noscript',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'script',
+  'section',
+  'select',
+  'slot',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'style',
+  'sub',
+  'summary',
+  'sup',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'title',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr',
+  // 特殊元素
+  'component',
+  'slot'
+]);
+
 export default {
   name: 'Canvas',
   components: {
@@ -64,7 +188,7 @@ export default {
       styles: {},
       active: '',
       isEmpty: true,
-      components: [],
+      children: [],
       columns: 1,
       gap: 0,
       widths: {},
@@ -79,12 +203,11 @@ export default {
     page: {
       handler(val) {
         this.isEmpty = !val;
-        this.components = (val && val.children) || [];
+        this.children = (val && val.children) || [];
         this.$nextTick(() => {
           this.initSortable();
-          if (val && val.style && val.style.display === 'masonry') {
-            this.layoutWaterfall();
-          }
+          // 始终调用 layoutWaterfall，内部根据 display 类型决定是否执行瀑布流布局
+          this.layoutWaterfall();
         });
       },
       deep: true,
@@ -125,10 +248,37 @@ export default {
       const style = page.style || {};
       this.columns = parseInt(style.columns || 1, 10);
       this.gap = parseInt(style.gap || 0, 10);
+
+      // 仅 masonry 模式执行瀑布流布局
+      if (style.display !== 'masonry') {
+        // 清除之前瀑布流设置的绝对定位样式（保留 width/height，grid/flex 模式下有效）
+        this.children.forEach((item) => {
+          if (!item.style) this.$set(item, 'style', {});
+          if (item.style.position) this.$set(item.style, 'position', '');
+          if (item.style.left) this.$set(item.style, 'left', '');
+          if (item.style.top) this.$set(item.style, 'top', '');
+          // grid 模式宽度由列宽/span 决定，移除瀑布流残留的 width
+          if (style.display === 'grid' && item.style.width) {
+            this.$delete(item.style, 'width');
+          }
+          // flex 模式下空的原生元素（如空 div）没有宽高会塌成 0，补默认可见尺寸
+          if (style.display === 'flex' && this.isHtmlElement(item.name)) {
+            if (!item.style.width) this.$set(item.style, 'width', '100px');
+            if (!item.style.height) this.$set(item.style, 'height', '100px');
+          }
+        });
+        const container = this.$refs.container;
+        if (container) {
+          container.style.height = '';
+        }
+        this.widths = [];
+        return;
+      }
+
       this.widths = layoutWaterfall(
         this,
         this.$refs.container,
-        this.components,
+        this.children,
         this.columns,
         this.gap
       );
@@ -137,11 +287,30 @@ export default {
       const style = page ? page.style || {} : {};
 
       let { columns, span, ...styles } = style;
-      if (styles.display && styles.display !== 'masonry') {
-        delete styles.display;
+
+      // gap 纯数字时补 px，保证 CSS 生效
+      if (
+        styles.gap !== undefined &&
+        styles.gap !== '' &&
+        !isNaN(parseFloat(styles.gap)) &&
+        !/px|%|em|rem|vh|vw$/.test(String(styles.gap).trim())
+      ) {
+        styles.gap = `${styles.gap}px`;
       }
-      if (styles.display && styles.display === 'grid' && columns) {
-        styles['grid-template-columns'] = `repeat(${columns}, 1fr)`;
+
+      if (styles.display === 'grid') {
+        // grid 模式：转换为 grid-template-columns，保留 display: grid
+        if (columns) {
+          styles['grid-template-columns'] = `repeat(${columns}, 1fr)`;
+        }
+        styles['grid-gap'] = styles.gap || '0px';
+      } else if (styles.display === 'flex') {
+        // flex 模式：保留 display: flex，gap 生效；默认换行让间隙可见
+        styles.gap = styles.gap || '0px';
+        if (!styles['flex-wrap']) styles['flex-wrap'] = 'wrap';
+      } else if (styles.display) {
+        // masonry 及其它 display 不应用到容器
+        delete styles.display;
       }
       return styles;
     },
@@ -169,78 +338,201 @@ export default {
           pull: true,
           put: true
         },
-        onEnd: (evt) => {
-          const oldIndex = evt.oldIndex;
-          const newIndex = evt.newIndex;
+        onEnd: () => {
+          // 拖拽结束后读取 DOM 的真实顺序，避免索引计算错误
+          const container = this.$refs.container;
+          if (!container) return;
+
+          const domIds = Array.from(container.children)
+            .map((el) => el.getAttribute('data-id'))
+            .filter(Boolean);
 
-          // 如果位置没有变化则不处理
-          if (
-            oldIndex === newIndex ||
-            oldIndex === undefined ||
-            newIndex === undefined
-          )
-            return;
+          // 顺序未变化则不处理
+          const curIds = this.children.map((c) => c.id);
+          if (curIds.join(',') === domIds.join(',')) return;
 
-          // 移动组件数组中的元素
-          const movedItem = this.components[oldIndex];
-          this.components.splice(newIndex, 0, movedItem);
-          this.components.splice(
-            oldIndex > newIndex ? oldIndex + 1 : oldIndex,
-            1
-          );
-          // 通知 lowcode 同步更新 page.children
-          this.notifyChildrenChange();
+          // 按 DOM 顺序重建节点列表
+          const byId = {};
+          this.children.forEach((c) => {
+            byId[c.id] = c;
+          });
+          const newCombined = domIds.map((id) => byId[id]).filter(Boolean);
+
+          // 按 DOM 顺序写回 children
+          this.children = newCombined;
+          this.notifyAllChange();
         }
       });
     },
     handleClickPage(page) {
       this.handleClick(page);
-      // this.$nextTick(() => {
-      //   this.layoutWaterfall();
-      // });
     },
     /**
      * 处理组件点击事件
      * @param {Object} comp 被点击的组件
      */
-    handleClick(comp) {
+    handleClick(comp, event) {
+      // Alt + 点击：选择父级元素
+      if (event && event.altKey) {
+        const parentId = this.findParentId(comp.id);
+        if (parentId) {
+          this.active = parentId;
+          bus.$emit('componentClick', parentId);
+          return;
+        }
+      }
       this.active = comp.id;
       bus.$emit('componentClick', comp.id);
     },
+    /**
+     * 查找指定节点的父节点 ID
+     * @param {String} nodeId - 节点 ID
+     * @returns {String|null} 父节点 ID，如果未找到则返回 null
+     */
+    findParentId(nodeId) {
+      // 如果节点是顶层节点，返回页面 ID
+      for (const node of this.children) {
+        if (node.id === nodeId) {
+          return this.page ? this.page.id : null;
+        }
+      }
+      // 递归查找父节点
+      const findParent = (nodes, targetId) => {
+        if (!nodes) return null;
+        for (const node of nodes) {
+          if (node.children) {
+            for (const child of node.children) {
+              if (child.id === targetId) {
+                return node.id;
+              }
+            }
+            const found = findParent(node.children, targetId);
+            if (found) return found;
+          }
+        }
+        return null;
+      };
+      return findParent(this.children, nodeId);
+    },
+    /**
+     * 通过面包屑选择指定节点
+     * @param {String} nodeId - 节点 ID
+     */
+    selectNode(nodeId) {
+      this.active = nodeId;
+      bus.$emit('componentClick', nodeId);
+    },
+    /**
+     * 处理嵌套节点的拖放事件：将拖动的元素/组件添加到目标节点的 children 中
+     * @param {Object} data - 包含 targetNode 和 droppedItem
+     */
+    handleNodeDrop(data) {
+      const { targetNode, droppedItem } = data;
+      const id = `${uuid()}`;
+      const newNode = { ...droppedItem, id };
+      // 确保目标节点有 children 数组
+      if (!targetNode.children) {
+        this.$set(targetNode, 'children', []);
+      }
+      targetNode.children.push(newNode);
+      // 通知 lowcode 更新整个页面数据
+      bus.$emit('updateNode', targetNode);
+    },
     /**
      * 处理 Render 子组件的数据变更（如调整大小等）
      * @param {Object} node 变更后的组件数据
      * @param {Number} index 组件在列表中的索引
      */
-    handleChange(node, index, direction) {
-      const old = this.components[index];
-      const oldWidth = parseInt(old.style.width, 10);
+    handleChange(node, index, direction, initialWidth) {
+      const combined = this.children;
+      const old = combined[index];
       const width = parseInt(node.style.width, 10);
+      const parentDisplay =
+        this.page && this.page.style && this.page.style.display;
+
       if (direction === 'left' || direction === 'right') {
-        //  margin 在盒模型之外，占列槽的实际宽度要算上它；
-        //  border-box 下 width 本身已含 border，不需再扣
-        const occupied = width + getHorizontalMargin(node.style);
-        if (width > oldWidth) {
-          node.style.span = Math.ceil(occupied / this.widths.columnWidth);
+        if (parentDisplay === 'flex') {
+          // flex 下拖动宽度为精确宽度；若设置了 flex 填充则移除，展示真实宽度
+          if (node.style.flex) this.$delete(node.style, 'flex');
+          // width 已由 render 写入，保留
         } else {
-          node.style.span = Math.floor(occupied / this.widths.columnWidth);
+          // grid/masonry 下按整列调整：拖动停止后宽度增加 +1 列，减少 -1 列
+          const columns = parseInt(this.page.style.columns || 2, 10);
+          const currentSpan = node.style.span || 1;
+          let newSpan = currentSpan;
+          if (width > initialWidth) {
+            newSpan = Math.min(currentSpan + 1, columns);
+          } else if (width < initialWidth) {
+            newSpan = Math.max(currentSpan - 1, 1);
+          }
+          this.$set(node.style, 'span', newSpan);
+          if (parentDisplay === 'grid') {
+            // grid 下宽度由列控制，清除精确宽度
+            this.$delete(node.style, 'width');
+          }
         }
+      } else if (direction === 'top' || direction === 'bottom') {
+        // 高度调整：直接保留 style.height，无需额外处理
       }
-      this.components.splice(index, 1, node);
+      // 更新 children
+      this.children.splice(index, 1, node);
       // 通知 lowcode 更新对应组件
       this.notifyComponentChange(node);
       this.$nextTick(() => {
         this.layoutWaterfall();
       });
     },
+    /**
+     * 递归查找指定 ID 的节点（含顶层与嵌套）
+     * @param {String} nodeId - 节点 ID
+     * @returns {Object|null} 节点对象
+     */
+    findNodeById(nodeId) {
+      const find = (nodes) => {
+        if (!nodes) return null;
+        for (const node of nodes) {
+          if (node.id === nodeId) return node;
+          if (node.children) {
+            const found = find(node.children);
+            if (found) return found;
+          }
+        }
+        return null;
+      };
+      return find(this.children);
+    },
+    /**
+     * 处理删除事件：支持删除顶层节点与嵌套节点
+     * @param {Object} node 被删除的节点
+     */
+    handleRemoveNode(node) {
+      const topIndex = this.children.findIndex((c) => c.id === node.id);
+      if (topIndex > -1) {
+        // 顶层节点
+        this.children.splice(topIndex, 1);
+      } else {
+        // 嵌套节点：从父节点的 children 中移除
+        const parentId = this.findParentId(node.id);
+        const parent = this.findNodeById(parentId);
+        if (parent && parent.children) {
+          const idx = parent.children.findIndex((c) => c.id === node.id);
+          if (idx > -1) parent.children.splice(idx, 1);
+        }
+      }
+      // 通知 lowcode 同步更新
+      this.notifyAllChange();
+      this.$nextTick(() => {
+        this.layoutWaterfall();
+      });
+    },
     /**
      * 处理组件删除事件
      * @param {Number} index 被删除的组件索引
      */
     handleRemove(index) {
-      this.components.splice(index, 1);
-      // 通知 lowcode 同步更新 page.children
-      this.notifyChildrenChange();
+      this.children.splice(index, 1);
+      // 通知 lowcode 同步更新
+      this.notifyAllChange();
       this.$nextTick(() => {
         this.layoutWaterfall();
       });
@@ -250,10 +542,12 @@ export default {
      * @param {Event} event 拖动事件对象
      */
     handleDragOver(event) {
+      // 仅对组件库拖入生效，避免干扰 Sortable 排序
+      const isComponentDrag =
+        event.dataTransfer && event.dataTransfer.types.includes('component');
+      if (!isComponentDrag) return;
       event.preventDefault();
-      if (event.dataTransfer) {
-        event.dataTransfer.dropEffect = 'copy';
-      }
+      event.dataTransfer.dropEffect = 'copy';
     },
     /**
      * 处理拖动放置事件
@@ -270,18 +564,25 @@ export default {
         if (componentData) {
           const component = JSON.parse(componentData);
           const id = `${uuid()}`;
-          // 生成新组件并添加到列表
-          this.components.push({ ...component, id });
-          // 通知 lowcode 同步更新 page.children
-          this.notifyChildrenChange();
+          const newNode = { ...component, id };
+          // 元素与组件统一放入 children，用 type 区分
+          this.children.push(newNode);
+          // 通知 lowcode 同步更新
+          this.notifyAllChange();
         }
       }
     },
     /**
-     * 通知 lowcode 更新整个 children 列表
+     * 判断是否为原生 HTML 元素
+     */
+    isHtmlElement(name) {
+      return HTML_TAGS.has(name);
+    },
+    /**
+     * 通知 lowcode 同步更新 children
      */
-    notifyChildrenChange() {
-      bus.$emit('updateChildren', [...this.components]);
+    notifyAllChange() {
+      bus.$emit('updateChildren', [...this.children]);
     },
     /**
      * 通知 lowcode 更新单个组件数据

package/packages/lowcode/src/editor.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script>
-import { registerVueCompletions } from './monaco-vue-completions';
-import { repairJson } from './json-repair';
+import { registerVueCompletions } from './util/monaco-vue-completions';
+import { repairJson } from './util/json-repair';
 
 // monaco 模块加载缓存，多个编辑器实例共用同一次动态加载
 let monacoLoader = null;
@@ -141,6 +141,9 @@ export default {
                 scrollBeyondLastLine: false,
                 fontSize: 13,
                 tabSize: 2,
+                // 当前行高亮配置
+                renderLineHighlight: 'all', // 高亮当前行（包含 gutter 和行背景）
+                renderLineHighlightOnlyWhenFocus: false, // 即使未聚焦也高亮
                 // 代码提示相关配置
                 quickSuggestions: {
                   other: true, // 普通代码区输入时自动提示
@@ -337,3 +340,13 @@ export default {
   }
 };
 </script>
+
+<style>
+/* Monaco 编辑器当前行高亮样式 - 使用全局样式 */
+.monaco-editor .current-line {
+  background-color: rgba(255, 213, 0, 0.15) !important;
+}
+.monaco-editor .current-line-margin-top {
+  background-color: rgba(255, 213, 0, 0.15) !important;
+}
+</style>

package/packages/lowcode/src/iframe.vue

@@ -0,0 +1,60 @@
+<template>
+  <es-card class="module-card">
+    <div slot="header" class="module-card-header" v-if="title || more">
+      <i class="iconfont shujuchaoshi module-card-header-title-icon"></i>
+      <span class="module-card-header-title">{{ title }}</span>
+      <span
+        class="module-card-header-right"
+        v-if="more && showHandle"
+        @click="handleMore"
+      >
+        更多
+        <i class="es-icon-you"></i>
+      </span>
+    </div>
+    <iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>
+  </es-card>
+</template>
+
+<script>
+export default {
+  name: 'Frame',
+
+  components: {},
+
+  props: {
+    title: String,
+    more: String,
+    url: String,
+    showHandle: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {};
+  },
+
+  computed: {},
+
+  watch: {},
+
+  created() {},
+
+  mounted() {},
+
+  methods: {}
+};
+</script>
+<style lang="scss" scoped>
+// @import '@/assets/style/home.scss';
+// ::v-deep {
+// 	.es-card__body {
+// 		height: 100%;
+// 	}
+// 	.es-card__header + .es-card__body {
+// 		height: calc(100% - 43px);
+// 	}
+// }
+</style>