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

package/packages/lowcode/src/util/props-util.js

@@ -0,0 +1,67 @@
+/**
+ * 节点 props 定义数组与取值转换工具
+ *
+ * 节点 props 存定义数组：[{ name, type, default?, options?, value? }]，
+ * value 仅在用户改动后写入条目；字符串取值支持 {{变量名}} 语法
+ * 引用页面 data 中定义的变量（整体匹配按变量绑定，局部匹配按插值）
+ */
+
+/** 整体匹配 {{expr}} */
+const FULL_VAR = /^\{\{([\s\S]+)\}\}$/;
+/** 局部匹配 {{expr}} */
+const PART_VAR = /\{\{([\s\S]+?)\}\}/g;
+
+/** 按点路径从 data 中取变量值 */
+function lookup(data, expr) {
+  if (!data || typeof data !== 'object') return undefined;
+  return expr.split('.').reduce((cur, key) => {
+    if (cur === undefined || cur === null) return undefined;
+    return cur[key];
+  }, data);
+}
+
+/** 解析字符串取值中的 {{变量}} 引用；非字符串原样返回 */
+export function resolvePropValue(raw, data) {
+  if (typeof raw !== 'string' || raw.indexOf('{{') === -1) return raw;
+  const full = FULL_VAR.exec(raw);
+  if (full) return lookup(data, full[1].trim());
+  return raw.replace(PART_VAR, (all, expr) => {
+    const val = lookup(data, expr.trim());
+    return val === undefined || val === null ? '' : val;
+  });
+}
+
+/** 按名读取条目原始取值（value 优先、其次 default）；兼容历史对象形态 */
+export function getPropRaw(props, name) {
+  if (!props) return undefined;
+  if (!Array.isArray(props)) return props[name];
+  const item = props.find((p) => p && p.name === name);
+  if (!item) return undefined;
+  return item.value !== undefined ? item.value : item.default;
+}
+
+/**
+ * 定义数组 → 组件 v-bind 用的取值对象；
+ * 兼容历史对象形态 props（原样透传，跳过 v- 键）
+ */
+export function propsToObject(props, data) {
+  if (!props) return {};
+  if (!Array.isArray(props)) {
+    const result = {};
+    Object.keys(props).forEach((key) => {
+      if (key.startsWith('v-')) return;
+      result[key] = props[key];
+    });
+    return result;
+  }
+  const result = {};
+  props.forEach((item) => {
+    if (!item || !item.name) return;
+    const raw = item.value !== undefined ? item.value : item.default;
+    if (raw === undefined) return;
+    const val = resolvePropValue(raw, data);
+    if (val === undefined) return;
+    result[item.name] = val;
+  });
+  return result;
+}

package/packages/lowcode/src/util/source-generator.js

@@ -80,12 +80,37 @@ function escapeAttr(val) {
     .replace(/"/g, '"');
 }
 
+/** 单个 prop 属性串：{{var}} 整体匹配输出绑定表达式，其余按类型输出 */
+function genPropAttr(key, val) {
+  if (typeof val === 'string') {
+    const full = /^\{\{([\s\S]+)\}\}$/.exec(val);
+    if (full) {
+      return ' :' + key + '="' + full[1].trim() + '"';
+    }
+    return ' ' + key + '="' + val + '"';
+  }
+  if (typeof val === 'boolean' || typeof val === 'number') {
+    return ' :' + key + '="' + val + '"';
+  }
+  //  复杂值用绑定语法输出：单引号属性 + 紧凑 JSON
+  return ' :' + key + "='" + JSON.stringify(val).replace(/'/g, ''') + "'";
+}
+
 /** 生成节点的 props 属性串 */
 function genProps(node) {
   const props = node.props;
   if (!props) {
     return '';
   }
+  //  定义数组形态：仅输出值被改动过的条目（value 字段）
+  if (Array.isArray(props)) {
+    return props.reduce((attrs, item) => {
+      if (!item || !item.name || item.value === undefined) {
+        return attrs;
+      }
+      return attrs + genPropAttr(item.name, item.value);
+    }, '');
+  }
   return Object.keys(props).reduce((attrs, key) => {
     const val = props[key];
     if (val === undefined) {
@@ -186,6 +211,14 @@ function componentName(name) {
   });
 }
 
+/** EsButton → es-button 形式的模板标签名（html 小写标签保持不变） */
+function tagName(name) {
+  return String(name)
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .replace(/^-/, '');
+}
+
 /** 递归收集节点树中的所有脚本依赖 */
 function collectScripts(node, scripts) {
   if (!node) return;
@@ -227,7 +260,7 @@ export function genNode(node, indent) {
     return '';
   }
   const pad = new Array(indent + 1).join(INDENT);
-  const name = node.name || 'div';
+  const tag = tagName(node.name || 'div');
 
   //  节点 id 以 data-id 输出，源码编辑后能原样解析回来
   const idAttr = node.id ? ' data-id="' + node.id + '"' : '';
@@ -245,23 +278,50 @@ export function genNode(node, indent) {
   const vText = node.directives && node.directives['text'];
 
   if (!children.length && !vText) {
-    lines.push(pad + '<' + name + attrStr + '></' + name + '>');
+    lines.push(pad + '<' + tag + attrStr + '></' + tag + '>');
     return lines.join('\n');
   }
-  lines.push(pad + '<' + name + attrStr + '>');
+  lines.push(pad + '<' + tag + attrStr + '>');
   if (vText) {
     //  v-text 属性转换为 {{xxx}} 形式
     lines.push(pad + INDENT + '{{' + vText + '}}');
-  } else if (children.length) {
-    //  子节点继续递归下钻
-    children.forEach((child) => {
-      lines.push(genNode(child, indent + 1));
-    });
   }
-  lines.push(pad + '</' + name + '>');
+  //  子节点继续递归下钻；带 formItem 标记的表单控件子节点输出时
+  //  包 es-form-item（JSON 不存包裹节点，源码与真实应用结构一一对应）
+  children.forEach((child) => {
+    lines.push(genChildNode(child, indent + 1));
+  });
+  lines.push(pad + '</' + tag + '>');
   return lines.join('\n');
 }
 
+/** 生成子节点：表单控件（带 formItem）包 es-form-item 包裹层，其余直接生成 */
+function genChildNode(child, indent) {
+  if (!child) {
+    return '';
+  }
+  if (!child.formItem) {
+    return genNode(child, indent);
+  }
+  const pad = new Array(indent + 1).join(INDENT);
+  const label = child.formItem.label || '';
+  const prop = child.formItem.prop || '';
+  //  宽度输出在包裹层：form-item 是列布局单元，拖宽占多列才能在真实应用生效；
+  //  内层控件不重复携带 width（画布上宽度同样作用于 es-form-item 根）
+  const width = child.style && child.style.width;
+  const styleAttr = width ? genStyle({ style: { width } }) : '';
+  let inner = child;
+  if (width) {
+    inner = { ...child, style: { ...child.style } };
+    delete inner.style.width;
+  }
+  return (
+    pad + '<es-form-item label="' + escapeAttr(label) + '" prop="' + escapeAttr(prop) + '"' + styleAttr + '>\n' +
+    genNode(inner, indent + 1) + '\n' +
+    pad + '</es-form-item>'
+  );
+}
+
 /**
  * 生成 methods/computed/watch 等选项块
  * @param {string} name 选项名，如 computed 会生成计算属性 getter

package/packages/lowcode/src/util/source-parser.js

@@ -76,6 +76,20 @@ function parseAttrs(str) {
   return attrs;
 }
 
+/** 写入 props 定义条目（props 为定义数组，同名覆盖） */
+function pushProp(node, name, type, value) {
+  if (!Array.isArray(node.props)) {
+    node.props = [];
+  }
+  const found = node.props.find((p) => p && p.name === name);
+  if (found) {
+    found.type = type;
+    found.value = value;
+    return;
+  }
+  node.props.push({ name, type, value });
+}
+
 /** 属性列表 → 节点字段（attrs / props / directives / events / style） */
 function applyAttrs(node, attrs) {
   attrs.forEach((attr) => {
@@ -108,26 +122,24 @@ function applyAttrs(node, attrs) {
       return;
     }
     if (name.charAt(0) === ':') {
-      node.props = node.props || {};
       const key = name.slice(1);
       const trimmed = String(value).trim();
-      //  单引号且以 [ / { 开头：生成器的复杂值载体（紧凑 JSON），还原为真实数组/对象；
-      //  双引号仍按表达式字符串处理，保持历史语义
+      //  单引号且以 [ / { 开头：生成器的复杂值载体（紧凑 JSON），还原为真实数组/对象
       if (attr.quote === "'" && /^[[{]/.test(trimmed)) {
         try {
-          node.props[key] = new Function('return (' + trimmed + ');')();
+          pushProp(node, key, 'text', new Function('return (' + trimmed + ');')());
         } catch (e) {
-          node.props[key] = String(value);
+          pushProp(node, key, 'text', String(value));
         }
         return;
       }
-      //  数字/布尔直接还原类型，其它保留表达式字符串
+      //  数字/布尔直接还原类型；其它绑定表达式记为 {{var}} 变量引用
       if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
-        node.props[key] = Number(trimmed);
+        pushProp(node, key, 'number', Number(trimmed));
       } else if (trimmed === 'true' || trimmed === 'false') {
-        node.props[key] = trimmed === 'true';
+        pushProp(node, key, 'switch', trimmed === 'true');
       } else {
-        node.props[key] = String(value);
+        pushProp(node, key, 'text', '{{' + trimmed + '}}');
       }
       return;
     }
@@ -153,7 +165,7 @@ export function migrateDirectives(node) {
   if (!node || typeof node !== 'object') {
     return node;
   }
-  if (node.props) {
+  if (node.props && !Array.isArray(node.props)) {
     Object.keys(node.props).forEach((key) => {
       if (key.startsWith('v-')) {
         const dirKey = key.slice(2);
@@ -234,9 +246,51 @@ export function parseTemplateNodes(inner) {
   if (stack.length) {
     throw new Error('标签未正确闭合：<' + stack[stack.length - 1].name + '>');
   }
+  normalizeFormItems(roots);
   return roots;
 }
 
+/**
+ * es-form-item 包裹结构 → 控件节点 + formItem 标记（genChildNode 的逆操作）：
+ * JSON 不存包裹节点，label/prop 记在内层控件节点的 formItem 上，
+ * 画布由 form-render 渲染时重新生成包裹层；原地递归处理整棵节点树
+ * @param {Array} nodes 节点数组
+ * @returns {Array} 同一个节点数组
+ */
+export function normalizeFormItems(nodes) {
+  nodes.forEach((node) => {
+    if (!node.children || !node.children.length) {
+      return;
+    }
+    node.children = node.children.map((child) => {
+      if (
+        child.name === 'es-form-item' &&
+        child.children &&
+        child.children.length === 1
+      ) {
+        const inner = child.children[0];
+        const meta = { ...(child.attrs || {}), ...(child.props || {}) };
+        inner.formItem = {
+          label: meta.label !== undefined ? String(meta.label) : '',
+          prop: meta.prop !== undefined ? String(meta.prop) : ''
+        };
+        //  包裹层宽度还原到控件节点 style.width（画布上作用于 es-form-item 根，
+        //  与 genChildNode 输出位置互逆）
+        if (child.style && child.style.width) {
+          inner.style = { ...(inner.style || {}), width: child.style.width };
+        }
+        if (!inner.description) {
+          inner.description = inner.formItem.label;
+        }
+        return inner;
+      }
+      return child;
+    });
+    normalizeFormItems(node.children);
+  });
+  return nodes;
+}
+
 /** 给节点树回填 id（有 id 的保留，没有的按路径生成稳定 id） */
 let idSeed = 0;
 function assignIds(nodes) {

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

@@ -20,16 +20,19 @@
           : true
       "
     >
-      <template v-if="newNode.children && newNode.children.length > 0">
-        <Render
-          v-for="(child, index) in newNode.children"
-          :key="child.id"
-          :node="child"
-          :page="page"
-          :drag="false"
-        />
-      </template>
-      <template v-else>{{ resolvedText || newNode.description }}</template>
+      <!-- 不用 v-if/v-else 包裹：children 为空时假分支的空注释/文本节点
+        会被 EsForm 等组件误判默认插槽有内容，导致 slot fallback 不渲染 -->
+      <!-- 子节点统一递归渲染；表单控件子节点（带 formItem 标记）复用
+        编辑器同一个 form-render（es-form-item 包裹层渲染时生成，无选中手柄） -->
+      <component
+        :is="childRender(child)"
+        v-for="child in newNode.children"
+        :key="child.id"
+        :node="child"
+        :page="page"
+        :drag="false"
+      />
+      <template v-for="t in slotTexts">{{ t }}</template>
     </component>
     <template v-if="drag">
       <div class="es-lowcode__handles">
@@ -82,10 +85,13 @@
 
 <script>
 import Frame from './Iframe.vue';
+import { propsToObject } from 'eoss/packages/lowcode/src/util/props-util.js';
+import FormRender from 'eoss/packages/lowcode/src/form-render.vue';
 import EsButton from 'eoss/packages/button';
+
 export default {
   name: 'Render',
-  components: { Frame, EsButton },
+  components: { Frame, FormRender, EsButton },
   props: {
     node: {
       type: Object,
@@ -206,6 +212,12 @@ export default {
       }
       return textExpr;
     },
+    /**
+     * 页面 data 变量：供 props 中 {{var}} 引用解析
+     */
+    pageData() {
+      return (this.page && this.page.data) || {};
+    },
     /**
      * 过滤掉 Vue 指令（v-xxx）的 props，避免它们作为普通属性传递给组件
      * 指令统一存在 directives 字段，这里仅兼容历史数据中混入 props 的 v- 键
@@ -217,19 +229,37 @@ export default {
       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];
-        });
-      }
+      //  合并组件 props：定义数组经 propsToObject 转取值对象（含 {{var}} 解析）
+      Object.assign(result, propsToObject(this.newNode.props, this.pageData));
       return result;
+    },
+    /**
+     * 插槽文本：仅当无 children 时产出，
+     * 保证 EsForm 等组件在无字段时默认插槽为空、fallback 生效
+     */
+    slotTexts() {
+      const node = this.newNode;
+      if (!node) {
+        return [];
+      }
+      const hasChildren =
+        Array.isArray(node.children) && node.children.length > 0;
+      if (hasChildren) {
+        return [];
+      }
+      return [this.resolvedText || node.description || ''];
     }
   },
   mounted() {},
   beforeDestroy() {},
   methods: {
+    /**
+     * 子节点渲染器：表单控件子节点（带 formItem 标记）由 form-render 渲染，
+     * 其余走通用 Render（与编辑器 render.vue 同一判定）
+     */
+    childRender(child) {
+      return child && child.formItem ? 'FormRender' : 'Render';
+    },
     /**
      * 处理组件大小调整开始事件
      * @param event 指针事件对象

package/packages/main/src/components/userinfo.vue

@@ -175,7 +175,6 @@ export default {
                 message: '请输入新密码'
               }
             : {},
-          ,
           {
             pattern: this.checkPassword,
             message: this.checkPasswordMsg

package/packages/menu/src/menu-item-group.vue

@@ -18,7 +18,7 @@
           :open-icon="openIcon"
           :close-icon="closeIcon"
           :isFourthTabs="isFourthTabs"
-          :iconColor="getColor(index)"
+          :iconColor="getColor(index, item)"
           :iconColors="iconColors"
         ></component>
       </slot>

package/packages/menu/src/mixins.js

@@ -58,15 +58,19 @@ export default {
       if (!this._colorCache) {
         this._colorCache = {};
       }
-      const isParentMenuIcon = item.children && item.children.length || (this.isFourthTabs && item.fourthTabs && item.fourthTabs.length);
-      const key = Array.isArray(this.iconColors) ? `index_${index % this.iconColors.length}` : 'single_color';
+      // 缓存键为颜色槽位；缓存值仅依赖 iconColors 与槽位（iconColors 变化由 watcher 清缓存）
+      const key = Array.isArray(this.iconColors)
+        ? `index_${index % this.iconColors.length}`
+        : 'single_color';
 
       if (!this._colorCache[key]) {
-        const bgColor = Array.isArray(this.iconColors) ? this.iconColors[index % this.iconColors.length] : this.iconColors;
+        const bgColor = Array.isArray(this.iconColors)
+          ? this.iconColors[index % this.iconColors.length]
+          : this.iconColors;
         this._colorCache[key] = {
           '--icon-bg-color': bgColor,
           '--icon-color': '#fff',
-          '--icon-font-size': isParentMenuIcon ? '16px' : '12px'
+          '--icon-font-size': '12px'
         };
       }
 

package/packages/menu/src/submenu.vue

@@ -151,7 +151,7 @@
               :close-icon="closeIcon"
               :isFourthTabs="isFourthTabs"
               :iconColors="iconColors"
-              :iconColor="getColor(index)"
+              :iconColor="getColor(index, item)"
             >
             </component>
           </slot>
@@ -310,10 +310,10 @@ export default {
       return this.collapse ? 'es-zoom-in-left' : 'es-zoom-in-top';
     },
     opened() {
-      const open =
-        (this.open && !this.collapse) ||
-        (this.index && this.rootMenu.openedMenus.indexOf(this.index) > -1);
-      return open;
+      //  展开状态统一由 rootMenu.openedMenus 驱动，
+      //  open 属性仅作为默认展开的初始值（见 syncOpenProp），不参与计算，
+      //  否则 open 为 true 时会短路导致点击无法折叠
+      return !!this.index && this.rootMenu.openedMenus.indexOf(this.index) > -1;
     },
     active() {
       let isActive = false;
@@ -417,6 +417,15 @@ export default {
         });
       }
     },
+    open() {
+      this.syncOpenProp();
+    },
+    collapse(val) {
+      //  整菜单收起会清空 openedMenus，取消收起后按 open 属性恢复默认展开
+      if (!val) {
+        this.syncOpenProp();
+      }
+    },
     iconColors() {
       // 当iconColors变化时，清除缓存
       this._colorCache = null;
@@ -456,6 +465,26 @@ export default {
     };
   },
   methods: {
+    /**
+     * 同步 open 属性到 rootMenu.openedMenus：
+     * open 语义为“默认展开”，写入 openedMenus 后仍可被点击正常折叠/展开
+     */
+    syncOpenProp() {
+      if (!this.index || this.collapse) {
+        return;
+      }
+      const rootMenu = this.rootMenu;
+      const isOpened = rootMenu.openedMenus.indexOf(this.index) > -1;
+      if (this.open && !isOpened) {
+        //  默认展开直接写入 openedMenus，不走 openMenu 的 uniqueOpened 过滤：
+        //  嵌套子菜单内层先于外层 mounted，若走 openMenu，
+        //  外层展开时会把不在其 indexPath 上的内层默认展开过滤收起
+        rootMenu.openedMenus.push(this.index);
+        rootMenu.$nextTick(() => rootMenu.updated());
+      } else if (!this.open && isOpened) {
+        rootMenu.closeMenu(this.index);
+      }
+    },
     handleCollapseToggle(value) {
       if (value) {
         this.initPopper();
@@ -567,6 +596,7 @@ export default {
     this.parentMenu.addSubmenu(this);
     this.rootMenu.addSubmenu(this);
     this.initPopper();
+    this.syncOpenProp();
   },
   updated() {
     this.$nextTick(() => {

package/packages/phone-login/src/phone-login.vue

@@ -65,7 +65,7 @@
 <script>
 import { getLoginCode } from 'eoss/src/config/api';
 import { ajax } from 'eoss/src/utils/ajax';
-
+import { loading, error } from 'eoss/src/utils/util';
 import EsButton from 'eoss/packages/button';
 import EsForm from 'eoss/packages/form';
 import EsFormItem from 'eoss/packages/form-item';
@@ -274,6 +274,7 @@ export default {
      * 处理提交
      */
     handleSubmit() {
+      console.log('18086814030', this.$refs.loginForm);
       this.$refs.loginForm &&
         this.$refs.loginForm
           .validate()
@@ -305,7 +306,9 @@ export default {
             }
             this.$emit('submit', this.formData);
           })
-          .catch(() => {});
+          .catch((e) => {
+            console.log('e', e);
+          });
     },
     /**
      * 处理键盘事件

package/packages/theme-chalk/src/lowcode.scss

@@ -188,6 +188,20 @@
       justify-content: flex-end;
     }
   }
+  @include e(props) {
+    color: #909399;
+    font-size: 12px;
+    line-height: 1.6;
+    @include m(tip) {
+      padding: 8px;
+    }
+
+    code {
+      padding: 0 2px;
+      color: #606266;
+      background: #f5f7fa;
+    }
+  }
   @include e(styles) {
     height: 100%;
   }
@@ -269,6 +283,7 @@
       }
       &::after {
         content: '';
+        display: block;
         position: absolute;
         top: 0;
         left: 0;
@@ -295,16 +310,20 @@
   }
   @include e(modules) {
     height: calc(100% - 32px);
-    padding-right: 8px;
-    padding-left: 8px;
     .es-collapse {
       border-top: none;
     }
+    .es-tabs__header {
+      padding: 0 12px;
+    }
     .es-tabs__nav-wrap {
       &::after {
         height: 1px;
       }
     }
+    .es-scrollbar__view {
+      padding: 8px;
+    }
     @include m(item) {
       display: flex;
       flex-direction: column;