eoss 0.1.0-alpha.20 → 0.1.0-alpha.21

package/packages/lowcode/src/attribute.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="es-lowcode__attribute" :style="styles">
+    <es-tabs class="es-lowcode__attribute--tabs" v-model="active" type="card">
+      <es-tab-pane label="样式" name="1" lazy>
+        <styles :model="current" @change="handleModelUpdate"></styles>
+      </es-tab-pane>
+      <es-tab-pane label="绑定" name="2" lazy>
+        <bind :model="current" @change="handleModelUpdate"></bind>
+      </es-tab-pane>
+      <es-tab-pane label="定义" name="3" lazy>
+        <property :model="current" @change="handleModelUpdate"></property>
+      </es-tab-pane>
+      <es-tab-pane label="函数" name="4" lazy>
+        <functions :model="current" @change="handleModelUpdate"></functions>
+      </es-tab-pane>
+      <es-tab-pane label="依赖" name="5" lazy>
+        <dependency :model="current" @change="handleModelUpdate"></dependency>
+      </es-tab-pane>
+    </es-tabs>
+    <div class="es-lowcode__attribute--handle" @click.self="handleClick"></div>
+  </div>
+</template>
+
+<script>
+import bus from 'eoss/src/utils/bus.js';
+import Property from './attribute/property.vue';
+import Styles from './attribute/styles.vue';
+import Bind from './attribute/bind.vue';
+import Functions from './attribute/function.vue';
+import Dependency from './attribute/dependency.vue';
+
+export default {
+  name: 'Attribute',
+  components: {
+    Property,
+    Styles,
+    Bind,
+    Functions,
+    Dependency
+  },
+  props: {
+    page: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      styles: { width: 0 },
+      show: false,
+      active: '1',
+      selected: '',
+      /** 当前选中组件的深拷贝副本，仅用于子组件展示 */
+      current: {}
+    };
+  },
+  computed: {},
+  watch: {
+    show(val) {
+      this.styles.width = val ? '350px' : '0px';
+    }
+  },
+  mounted() {
+    /**
+     * 监听组件点击事件，更新当前选中的组件
+     */
+    bus.$on('componentClick', (id) => {
+      this.show = true;
+      this.selected = id;
+      if (this.page) {
+        this.current = this.getComponent(this.page);
+      }
+    });
+    /**
+     * 监听页面切换事件，同步刷新当前选中组件
+     */
+    bus.$on('updatePage', () => {
+      if (this.selected && this.page) {
+        this.current = this.getComponent(this.page);
+      }
+    });
+  },
+  methods: {
+    /**
+     * 处理点击事件
+     */
+    handleClick() {
+      this.show = false;
+    },
+    /**
+     * 从 page 树中查找并返回指定组件的深拷贝
+     * 支持页面本身和嵌套子组件的查找
+     * @param {Object} page - 页面对象或组件对象
+     * @returns {Object} 组件深拷贝对象，未找到返回空对象
+     */
+    getComponent(page) {
+      if (!page || !this.selected) return {};
+      // 先匹配页面本身
+      if (page.id === this.selected) return JSON.parse(JSON.stringify(page));
+      // 再在 children 树中递归查找
+      if (page.children && page.children.length) {
+        const found = this.findInTree(page.children, this.selected);
+        if (found && found.id) return JSON.parse(JSON.stringify(found));
+      }
+      return {};
+    },
+    /**
+     * 在树结构中递归查找指定 ID 的组件
+     * @param {Array} children - 子组件数组
+     * @param {String} id - 目标组件 ID
+     * @returns {Object|null} 找到的组件或空对象
+     */
+    findInTree(children, id) {
+      for (const child of children) {
+        if (child.id === id) return child;
+        if (child.children && child.children.length) {
+          const found = this.findInTree(child.children, id);
+          if (found) return found;
+        }
+      }
+      return {};
+    },
+    /**
+     * 处理模型更新（来自属性子组件）
+     * 合并当前组件 ID 后通过 bus 转发给 lowcode 数据中心
+     * 注意：此处不更新 current，避免触发子组件 model watcher 覆盖编辑状态
+     * current 只在点击组件或切换页面时才重新同步
+     * @param {Object} updates - 子组件传递的更新字段（如 { style: {...} }, { attrs: {...} } 等）
+     */
+    handleModelUpdate(updates) {
+      bus.$emit('updateComponent', { ...updates, id: this.selected });
+    }
+  }
+};
+</script>

package/packages/lowcode/src/canvas.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="es-lowcode__canvas" ref="waterfallContainer">
+    <div
+      class="es-lowcode__canvas--content"
+      :class="{
+        'is-empty': isEmpty,
+        'is-active': active === (page && page.id)
+      }"
+      :style="styles"
+      @drop="handleDrop"
+      @dragover="handleDragOver"
+      @click.stop="handleClickPage(page)"
+    >
+      <es-empty description="请新建或打开文件" v-if="isEmpty" />
+      <es-scrollbar v-else>
+        <div
+          class="es-lowcode__canvas--components"
+          ref="container"
+          :style="getStyle(page)"
+        >
+          <Render
+            class="es-lowcode__canvas--component"
+            :class="{ 'is-active': active === node.id }"
+            v-for="(node, index) in components"
+            :key="node.id"
+            :node="node"
+            :active="active"
+            :span="page && page.span"
+            @click="handleClick(node)"
+            @change="
+              (newNode, direction) => handleChange(newNode, index, direction)
+            "
+            @remove="handleRemove(index)"
+          />
+        </div>
+      </es-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import Render from './render.vue';
+import {
+  uuid,
+  layoutWaterfall
+} from 'eoss/src/utils/util.js';
+import bus from 'eoss/src/utils/bus.js';
+import Sortable from 'sortablejs';
+
+export default {
+  name: 'Canvas',
+  components: {
+    Render
+  },
+  props: {
+    page: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      styles: {},
+      active: '',
+      isEmpty: true,
+      components: [],
+      columns: 1,
+      gap: 0,
+      widths: {},
+      resizeObserver: null
+    };
+  },
+  watch: {
+    /**
+     * 深度监听 page prop 变化，同步渲染组件列表
+     * 所有数据修改由 lowcode 统一处理，Canvas 只负责读取和展示
+     */
+    page: {
+      handler(val) {
+        this.isEmpty = !val;
+        this.components = (val && val.children) || [];
+        this.$nextTick(() => {
+          this.initSortable();
+          if (val && val.style && val.style.display === 'masonry') {
+            this.layoutWaterfall();
+          }
+        });
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initSortable();
+      // 监听容器大小变化
+      this.resizeObserver = new ResizeObserver(() => {
+        this.layoutWaterfall();
+      });
+      const container = this.$refs.waterfallContainer;
+      if (container) {
+        this.resizeObserver.observe(container);
+      }
+    });
+    /**
+     * 监听changeSize事件，动态更新Canvas样式
+     * @param type 大小类型，'size' 或 'app'
+     * @param size 大小值，根据类型不同而不同
+     */
+    bus.$on('changeSize', (type, size) => {
+      this.styles = {};
+      if (type === 'app') {
+        this.styles.width = '750px';
+      }
+      if (type === 'custom') {
+        this.styles = size;
+      }
+    });
+  },
+  methods: {
+    layoutWaterfall() {
+      const page = this.page;
+      if (!page) return;
+      const style = page.style || {};
+      this.columns = parseInt(style.columns || 1, 10);
+      this.gap = parseInt(style.gap || 0, 10);
+      this.widths = layoutWaterfall(
+        this,
+        this.$refs.container,
+        this.components,
+        this.columns,
+        this.gap
+      );
+    },
+    getStyle(page) {
+      const style = page ? page.style || {} : {};
+
+      let { columns, span, ...styles } = style;
+      if (styles.display && styles.display !== 'masonry') {
+        delete styles.display;
+      }
+      if (styles.display && styles.display === 'grid' && columns) {
+        styles['grid-template-columns'] = `repeat(${columns}, 1fr)`;
+      }
+      return styles;
+    },
+    /**
+     * 初始化Sortable拖拽功能
+     */
+    initSortable() {
+      if (!this.$refs.container) return;
+
+      const view = this.$refs.container;
+      // 先销毁已存在的Sortable实例
+      const existingSortable = Sortable.get(view);
+      if (existingSortable) {
+        existingSortable.destroy();
+      }
+
+      new Sortable(view, {
+        animation: 150,
+        fallbackOnBody: true,
+        ghostClass: 'es-lowcode__canvas-ghost',
+        chosenClass: 'es-lowcode__canvas-chosen',
+        dragClass: 'es-lowcode__canvas-drag',
+        group: {
+          name: 'shared',
+          pull: true,
+          put: true
+        },
+        onEnd: (evt) => {
+          const oldIndex = evt.oldIndex;
+          const newIndex = evt.newIndex;
+
+          // 如果位置没有变化则不处理
+          if (
+            oldIndex === newIndex ||
+            oldIndex === undefined ||
+            newIndex === undefined
+          )
+            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();
+        }
+      });
+    },
+    handleClickPage(page) {
+      this.handleClick(page);
+      // this.$nextTick(() => {
+      //   this.layoutWaterfall();
+      // });
+    },
+    /**
+     * 处理组件点击事件
+     * @param {Object} comp 被点击的组件
+     */
+    handleClick(comp) {
+      this.active = comp.id;
+      bus.$emit('componentClick', comp.id);
+    },
+    /**
+     * 处理 Render 子组件的数据变更（如调整大小等）
+     * @param {Object} node 变更后的组件数据
+     * @param {Number} index 组件在列表中的索引
+     */
+    handleChange(node, index, direction) {
+      const old = this.components[index];
+      const oldWidth = parseInt(old.style.width, 10);
+      const width = parseInt(node.style.width, 10);
+      if (direction === 'left' || direction === 'right') {
+        if (width > oldWidth) {
+          node.style.span = Math.ceil(width / this.widths.columnWidth);
+        } else {
+          node.style.span = Math.floor(width / this.widths.columnWidth);
+        }
+      }
+      this.components.splice(index, 1, node);
+      // 通知 lowcode 更新对应组件
+      this.notifyComponentChange(node);
+      this.$nextTick(() => {
+        this.layoutWaterfall();
+      });
+    },
+    /**
+     * 处理组件删除事件
+     * @param {Number} index 被删除的组件索引
+     */
+    handleRemove(index) {
+      this.components.splice(index, 1);
+      // 通知 lowcode 同步更新 page.children
+      this.notifyChildrenChange();
+      this.$nextTick(() => {
+        this.layoutWaterfall();
+      });
+    },
+    /**
+     * 处理拖动结束事件
+     * @param {Event} event 拖动事件对象
+     */
+    handleDragOver(event) {
+      event.preventDefault();
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'copy';
+      }
+    },
+    /**
+     * 处理拖动放置事件
+     * @param {Event} event 拖动事件对象
+     */
+    handleDrop(event) {
+      event.preventDefault();
+      if (this.isEmpty) {
+        this.$message.warning('请选择页面!');
+        return;
+      }
+      if (event.dataTransfer) {
+        const componentData = event.dataTransfer.getData('component');
+        if (componentData) {
+          const component = JSON.parse(componentData);
+          const id = `${uuid()}`;
+          // 生成新组件并添加到列表
+          this.components.push({ ...component, id });
+          // 通知 lowcode 同步更新 page.children
+          this.notifyChildrenChange();
+        }
+      }
+    },
+    /**
+     * 通知 lowcode 更新整个 children 列表
+     */
+    notifyChildrenChange() {
+      bus.$emit('updateChildren', [...this.components]);
+    },
+    /**
+     * 通知 lowcode 更新单个组件数据
+     * @param {Object} comp 变更后的组件数据
+     */
+    notifyComponentChange(comp) {
+      bus.$emit('updateComponent', { ...comp });
+    }
+  },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+};
+</script>

package/packages/lowcode/src/json.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="es-lowcode__json">
+    <pre>{{ page }}</pre>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Json',
+
+  components: {},
+
+  props: {},
+
+  data () {
+    return {
+    };
+  },
+
+  computed: {},
+
+  watch: {},
+
+  created() {},
+
+  mounted() {},
+
+  methods: {}
+}
+
+</script>
+<style lang="scss" scoped></style>