eoss 0.1.0-alpha.24 → 0.1.0-alpha.25

package/packages/lowcode/src/render.vue

@@ -2,17 +2,30 @@
   <div :style="newNode.style" :data-id="newNode.id" @click.stop="handleClick">
     <component
       :is="newNode.name"
-      v-bind="newNode.props"
+      v-bind="cleanProps"
       v-on="newNode.events"
       :key="newNode.id"
+      v-text="resolvedText"
+      v-show="
+        newNode.directives['show'] !== undefined
+          ? newNode.directives['show']
+          : true
+      "
     >
       <template v-if="newNode.children && newNode.children.length > 0">
         <Render
           v-for="child in newNode.children"
           :key="child.id"
           :node="child"
+          :page="page"
         />
       </template>
+      <template v-else-if="newNode.directives['text']">
+        <!-- v-text 已经通过组件的 v-text 属性渲染 -->
+      </template>
+      <template v-else-if="newNode.template">
+        <div v-html="renderTemplate(newNode.template)"></div>
+      </template>
       <template v-else>
         {{ newNode.description }}
       </template>
@@ -75,6 +88,10 @@ export default {
       type: Object,
       default: null
     },
+    page: {
+      type: Object,
+      default: null
+    },
     active: {
       type: String,
       default: ''
@@ -85,8 +102,11 @@ export default {
     }
   },
   data() {
+    const newNode = JSON.parse(JSON.stringify(this.node)) || {};
+    //  directives 在页面结构上已定义，这里兼容子节点未携带的情况
+    newNode.directives = newNode.directives || {};
     return {
-      newNode: JSON.parse(JSON.stringify(this.node)),
+      newNode,
       resizingComponent: null,
       initialMouseX: 0,
       initialMouseY: 0,
@@ -102,11 +122,61 @@ export default {
   watch: {
     node: {
       handler(newVal) {
-        this.newNode = JSON.parse(JSON.stringify(newVal));
+        const node = JSON.parse(JSON.stringify(newVal)) || {};
+        node.directives = node.directives || {};
+        this.newNode = node;
       },
       deep: true
     }
   },
+  computed: {
+    /**
+     * 解析 text 指令中的表达式
+     * 支持 {{variable}} 形式，从 page.data 中获取值
+     */
+    resolvedText() {
+      const textExpr =
+        this.newNode.directives && this.newNode.directives['text'];
+      if (!textExpr) return '';
+      //  如果是表达式（不含空格，可能是变量名），尝试从 data 中获取值
+      if (
+        typeof textExpr === 'string' &&
+        !textExpr.includes(' ') &&
+        !textExpr.includes("'") &&
+        !textExpr.includes('"')
+      ) {
+        //  尝试从 page.data 中获取值
+        if (
+          this.page &&
+          this.page.data &&
+          this.page.data[textExpr] !== undefined
+        ) {
+          return this.page.data[textExpr];
+        }
+      }
+      return textExpr;
+    },
+    /**
+     * 过滤掉 Vue 指令（v-xxx）的 props，避免它们作为普通属性传递给组件
+     * 指令统一存在 directives 字段，这里仅兼容历史数据中混入 props 的 v- 键
+     */
+    cleanProps() {
+      if (!this.newNode) return {};
+      const result = {};
+      //  合并 HTML 属性
+      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];
+        });
+      }
+      return result;
+    }
+  },
   mounted() {},
   beforeDestroy() {},
   methods: {
@@ -251,13 +321,26 @@ export default {
       if (this.isResizing) {
         return;
       }
-      this.$emit('click');
+      this.$emit('click', this.newNode);
     },
     /**
      * 处理组件删除事件
      */
     handleRemove() {
       this.$emit('remove');
+    },
+    /**
+     * 渲染模板内容
+     * @param {String} template - 模板字符串（可能包含 <template> 标签）
+     * @returns {String} 处理后的 HTML 内容
+     */
+    renderTemplate(template) {
+      if (!template) return '';
+      //  提取 <template> 标签内的内容
+      const match = template.match(/<template>([\s\S]*?)<\/template>/);
+      const content = match ? match[1] : template;
+      //  返回原始 HTML（Vue 模板表达式如 {{id}} 会原样显示）
+      return content.trim();
     }
   }
 };

package/packages/lowcode/src/source.vue

@@ -10,8 +10,8 @@
 
 <script>
 import editor from './editor.vue';
-import { generateVueSource } from './source-generator';
-import { parseVueSource } from './source-parser';
+import { generateVueSource } from './util/source-generator';
+import { parseVueSource } from './util/source-parser';
 
 export default {
   name: 'Source',
@@ -31,16 +31,23 @@ export default {
   data() {
     return {
       //  编辑器内容，随页面实时生成
-      source: generateVueSource(this.page)
+      source: ''
     };
   },
 
+  mounted() {
+    //  在 mounted 中初始化源码，确保 page prop 已正确设置
+    this.refreshSource();
+  },
+
   watch: {
     //  页面变化（画布操作、外部更新）时重新生成源码
     page: {
       deep: true,
-      handler() {
-        this.refreshSource();
+      handler(newPage) {
+        if (newPage) {
+          this.refreshSource();
+        }
       }
     }
   },

package/packages/lowcode/src/toolbar.vue

@@ -24,23 +24,25 @@
       </es-button>
     </es-button-group>
     <div class="es-lowcode__toolbar--size" v-show="activeTool === 'custom'">
-      <es-input v-model="width" size="small" placeholder="请输入宽度" @change="handleChangeSize" />
+      <es-input
+        v-model="width"
+        size="small"
+        placeholder="请输入宽度"
+        @change="handleChangeSize"
+      />
       <span class="es-lowcode__toolbar--size-split">x</span>
-      <es-input v-model="height" size="small" placeholder="请输入高度" @change="handleChangeSize" />
+      <es-input
+        v-model="height"
+        size="small"
+        placeholder="请输入高度"
+        @change="handleChangeSize"
+      />
     </div>
     <es-button-group>
-      <es-button
-        size="small"
-        :disabled="isUndoDisabled"
-        @click="handleClick('repeal')"
-      >
+      <es-button size="small" :disabled="isUndoDisabled" @click="handleUndo">
         <i class="es-icon-chehui"></i>
       </es-button>
-      <es-button
-        size="small"
-        :disabled="isRedoDisabled"
-        @click="handleClick('advance')"
-      >
+      <es-button size="small" :disabled="isRedoDisabled" @click="handleRedo">
         <i class="es-icon-qianjin"></i>
       </es-button>
     </es-button-group>
@@ -85,7 +87,7 @@
 </template>
 
 <script>
-import bus from 'eoss/src/utils/bus.js'
+import bus from 'eoss/src/utils/bus.js';
 import Button from 'eoss/packages/button';
 import ButtonGroup from 'eoss/packages/button-group';
 import Dropdown from 'eoss/packages/dropdown';
@@ -104,6 +106,8 @@ export default {
     Icon
   },
 
+  inject: ['lowcode'],
+
   props: {},
 
   data() {
@@ -111,13 +115,18 @@ export default {
       activeTool: 'web',
       activeTab: 'design',
       width: 300,
-      height: 200,
-      isUndoDisabled: true,
-      isRedoDisabled: true
+      height: 200
     };
   },
 
-  computed: {},
+  computed: {
+    isUndoDisabled() {
+      return !this.lowcode.canUndo;
+    },
+    isRedoDisabled() {
+      return !this.lowcode.canRedo;
+    }
+  },
 
   watch: {},
 
@@ -128,10 +137,24 @@ export default {
   methods: {
     handleClick(tool) {
       this.activeTool = tool;
-      bus.$emit('changeSize', tool, {width: `${this.width}px`, height: `${this.height}px` });
+      bus.$emit('changeSize', tool, {
+        width: `${this.width}px`,
+        height: `${this.height}px`
+      });
+    },
+    /** 撤销 */
+    handleUndo() {
+      this.lowcode.undo();
+    },
+    /** 重做 */
+    handleRedo() {
+      this.lowcode.redo();
     },
     handleChangeSize() {
-      bus.$emit('changeSize', this.activeTool, {width: `${this.width}px`, height: `${this.height}px` });
+      bus.$emit('changeSize', this.activeTool, {
+        width: `${this.width}px`,
+        height: `${this.height}px`
+      });
     },
     handleOpen(type) {
       bus.$emit('open', type);
@@ -141,7 +164,7 @@ export default {
     },
     handlePreview() {
       bus.$emit('preview');
-    },
+    }
   }
 };
 </script>