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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eoss",
-  "version": "0.1.0-alpha.39",
+  "version": "0.1.0-alpha.40",
   "description": "eoss内部业务组件",
   "main": "lib/eoss.common.js",
   "files": [

package/packages/flow-group/src/main.vue

@@ -160,7 +160,7 @@
                         full
                         :key="index"
                         :autoId="true"
-                        :show-button="false"
+                        :show-default-buttons="false"
                         :closeDialog="false"
                         :display="activeName === String(indexs)"
                         :model="item.model"
@@ -308,7 +308,7 @@
                   ></component>
                   <es-form
                     v-if="contents.type === 'form'"
-                    :show-button="false"
+                    :show-default-buttons="false"
                     ref="esFlowForm"
                     :showMsg="showMsg"
                     v-bind="

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

@@ -332,6 +332,7 @@ export default {
         inline,
         plain,
         span,
+        default: _default, // 排除定义对象的 default 字段(避免与组件 prop 冲突)
         ...config
       } = fieldItem;
       return {

package/packages/form/src/form-item.vue

@@ -4,7 +4,7 @@
     :style="itemStyle"
     :class="[
       {
-    'es-form-item--feedback': esForm && esForm.statusIcon,
+        'es-form-item--feedback': esForm && esForm.statusIcon,
         'es-form--label-top': labelPosition === 'top',
         'is-error': validateState === 'error',
         'is-validating': validateState === 'validating',
@@ -110,7 +110,7 @@ export default {
      * 标签宽度
      */
     labelWidth: String,
-    
+
     /**
      * 字段名，用于表单验证和数据绑定
      */
@@ -250,10 +250,10 @@ export default {
           width: `${(this.span / 12) * 100}%`
         };
       }
-      const col = this.esForm.col;
-      if (col > 1) {
+      const columns = this.esForm.columns;
+      if (columns > 1) {
         return {
-          width: `${100 / col}%`
+          width: `${100 / columns}%`
         };
       }
       return {};
@@ -264,7 +264,13 @@ export default {
       const labelWidth = this.labelWidth || form.labelWidth;
       const label = this.label || this.$slots.label;
       // 快速路径：无需计算样式
-      if (!label || this.labelPosition === 'top' || form.labelPosition === 'top' || form.inline) return {};
+      if (
+        !label ||
+        this.labelPosition === 'top' ||
+        form.labelPosition === 'top' ||
+        form.inline
+      )
+        return {};
       if (!this.labelWidth && this.isNested) return {};
 
       // 构建样式对象

package/packages/form/src/form.vue

@@ -236,7 +236,7 @@ export default {
       default: '120px'
     },
     // 列数
-    col: {
+    columns: {
       type: Number,
       default: 1
     },
@@ -246,8 +246,8 @@ export default {
     contents: Array,
     //按钮组配置
     buttons: [Object, Array],
-    // 显示提交按钮组
-    showButton: {
+    // 显示配置生成的默认按钮组（buttons prop / contents 中 buttons 条目）
+    showDefaultButtons: {
       type: Boolean,
       default: true
     },
@@ -301,7 +301,7 @@ export default {
       type: Boolean,
       default: true
     },
-    // 是否显示提交按钮组
+    // 是否显示按钮区容器（含 buttons 插槽）
     showButtons: {
       type: Boolean,
       default: true
@@ -329,7 +329,7 @@ export default {
     // 表单按钮
     formButtons() {
       // 优化按钮生成逻辑，减少重复条件判断
-      if (!this.showButton) {
+      if (!this.showDefaultButtons) {
         return null;
       }
       let buttons = this.buttons;

package/packages/login/src/login.vue

@@ -639,6 +639,7 @@ export default {
       operationCheckCode: '',
       // 用户名
       userName: '',
+      loginModel: '0',
       // 二次效验接口地址
       doAssistanceQrLogin: doAssistanceQrLogin,
       // 二次效验弹窗是否显示

package/packages/lowcode/src/attribute/function.vue

@@ -419,6 +419,10 @@ export default {
       const name = node.name || 'div';
       const attrs = node.attrs || {};
       const props = node.props || {};
+      //  定义数组形态：仅输出值被改动过的条目
+      const propsList = Array.isArray(props)
+        ? props.filter((p) => p && p.name && p.value !== undefined)
+        : null;
       const directives = node.directives || {};
       const events = node.events || {};
 
@@ -429,17 +433,32 @@ export default {
           attrStr += ' ' + key + '="' + val + '"';
         }
       });
-      Object.keys(props).forEach((key) => {
-        const val = props[key];
-        if (val !== undefined && val !== null && val !== '') {
-          //  指令已迁移到 directives，这里仅兼容历史数据中混入 props 的 v- 键
-          if (key.startsWith('v-')) {
-            attrStr += ' ' + key + '="' + val + '"';
+      if (propsList) {
+        propsList.forEach((item) => {
+          const val = item.value;
+          if (typeof val === 'string') {
+            //  {{var}} 整体匹配输出绑定表达式，字面量加引号绑定
+            const full = /^\{\{([\s\S]+)\}\}$/.exec(val);
+            attrStr += full
+              ? ' :' + item.name + '="' + full[1].trim() + '"'
+              : ' :' + item.name + "='" + val + "'";
           } else {
-            attrStr += ' :' + key + '="' + val + '"';
+            attrStr += ' :' + item.name + '="' + val + '"';
           }
-        }
-      });
+        });
+      } else {
+        Object.keys(props).forEach((key) => {
+          const val = props[key];
+          if (val !== undefined && val !== null && val !== '') {
+            //  指令已迁移到 directives，这里仅兼容历史数据中混入 props 的 v- 键
+            if (key.startsWith('v-')) {
+              attrStr += ' ' + key + '="' + val + '"';
+            } else {
+              attrStr += ' :' + key + '="' + val + '"';
+            }
+          }
+        });
+      }
       Object.keys(directives).forEach((key) => {
         const val = directives[key];
         if (val !== undefined && val !== null && val !== '') {

package/packages/lowcode/src/attribute/props.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="es-lowcode__props">
+    <div class="es-lowcode__props--tip">
+      字符串取值可用 <code v-text="codeExample"></code> 引用页面 data
+      中定义的变量，其余按字面量传入
+    </div>
+    <es-form
+      label-width="auto"
+      size="small"
+      :model="models"
+      :contents="formContents"
+      :show-buttons="false"
+      @change="handleChange"
+    ></es-form>
+  </div>
+</template>
+
+<script>
+import EsForm from 'eoss/packages/form';
+import { genNode } from '../util/source-generator';
+
+/**
+ * 组件 props 面板：props 定义数据存在节点自身 props 字段
+ * （定义数组，拖入画布时从组件库清单拷贝），格式
+ * [{ name, type, default?, options?, value? }]，value 仅改动后写入；
+ * type 支持 text / number / switch / select；面板按选中节点的定义
+ * 渲染取值字段，字符串取值支持 {{变量名}} 引用页面 data 变量
+ */
+export default {
+  name: 'PropsPanel',
+  inject: ['lowcode'],
+
+  components: { EsForm },
+
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+    contents: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  data() {
+    return {
+      models: {},
+      // 面板说明文案中的示例，避免 Vue 把 {{}} 当成插值
+      codeExample: '{{变量名}}'
+    };
+  },
+
+  watch: {
+    // 切换选中组件时回显取值（仅引用变化同步，编辑由 @change 驱动）；
+    // 按注册表定义遍历，从 model.props 读取当前值（兼容数组/对象两种形态）
+    model: {
+      handler() {
+        const models = {};
+        this.formContents.forEach((def) => {
+          models[def.name] = this.getPropValue(def.name, def);
+        });
+        this.models = models;
+      },
+      immediate: true
+    }
+  },
+
+  computed: {
+    /**
+     * 选中节点自带的 props 定义数组
+     */
+    schema() {
+      const props = this.model && this.model.props;
+      return Array.isArray(props) ? props : [];
+    },
+    /**
+     * 取值表单字段：按定义项渲染
+     */
+    formContents() {
+      // 从组件库中找到当前选中组件的定义(优先 components,其次 library)
+      const components = this.lowcode.components || [];
+      const library = this.lowcode.library || [];
+      let componentDef = null;
+
+      // 先在 components 中查找
+      componentDef = components.find((c) => c.name === this.model.name);
+
+      // 没找到则在 library 分组中查找(tab → group/component)
+      if (!componentDef) {
+        for (const tab of library) {
+          for (const item of tab.children || []) {
+            // item 可能是分组(有 children)或直接是组件(无 children)
+            if (item.children && Array.isArray(item.children)) {
+              // 分组：在 children 中找组件
+              const found = item.children.find(
+                (c) => c.name === this.model.name
+              );
+              if (found) {
+                componentDef = found;
+                break;
+              }
+            } else if (item.name === this.model.name) {
+              // 直接是组件
+              componentDef = item;
+              break;
+            }
+          }
+          if (componentDef) break;
+        }
+      }
+
+      if (!componentDef) return [];
+      const props = (componentDef.props || []).map((item) => {
+        if (item.type === 'text') {
+          return {
+            ...item,
+            append: {
+              icon: 'es-icon-xiugai',
+              event: (e) => this.handleEdit(item)
+            }
+          };
+        }
+        return item;
+      });
+      // 返回该组件的 props 定义数组
+      return props;
+    }
+  },
+
+  methods: {
+    handleChange() {
+      // 定义数组原样回写，取值与默认值不同的条目才写入 value（进 JSON）
+      const props = this.schema.map((item) => {
+        const next = { ...item };
+        const val = this.models[item.name];
+        if (val !== undefined && val !== item.default) {
+          next.value = val;
+        } else {
+          delete next.value;
+        }
+        return next;
+      });
+      this.$emit('change', { props });
+    },
+    /**
+     * 打开源码编辑器，光标定位到对应 prop
+     * 参考 bind.vue：构建完整 Vue 源码，保存时由 parseVueSource 解析回写
+     */
+    handleEdit(item) {
+      if (!item) return;
+      const source = this.buildFullVueSource();
+      this.$emit(
+        'edit',
+        {
+          name: 'props',
+          label: '编辑 ' + item.name,
+          cursorField: item.name
+        },
+        source
+      );
+    },
+    /**
+     * 构建完整的 Vue 组件源码（参考 bind.vue）
+     * 模板中保留根元素的 props/attrs/指令/事件，保存时解析回写
+     */
+    buildFullVueSource() {
+      const m = this.model;
+      const tagName = m.type === 'page' ? 'div' : m.name || 'div';
+      const rootNode = Object.assign({}, m, { name: tagName });
+      rootNode.children = Array.isArray(m.children) ? m.children : [];
+      const templateContent = genNode(rootNode, 1);
+      const template = '<template>\n' + templateContent + '\n</template>';
+
+      const scriptParts = [];
+      if (m.data && Object.keys(m.data).length > 0) {
+        scriptParts.push(
+          '  data() {\n    return ' + JSON.stringify(m.data, null, 2) + ';\n  }'
+        );
+      } else {
+        scriptParts.push('  data() {\n    return {};\n  }');
+      }
+      if (m.computed && Object.keys(m.computed).length > 0) {
+        scriptParts.push('  computed: ' + JSON.stringify(m.computed, null, 2));
+      } else {
+        scriptParts.push('  computed: {}');
+      }
+      if (m.methods && Object.keys(m.methods).length > 0) {
+        scriptParts.push('  methods: ' + JSON.stringify(m.methods, null, 2));
+      } else {
+        scriptParts.push('  methods: {}');
+      }
+      const script =
+        '<script>\nexport default {\n' +
+        scriptParts.join(',\n\n') +
+        '\n}\n<\/script>';
+      const style = '<style lang="scss" scoped>\n\n</style>';
+      return template + '\n\n' + script + '\n\n' + style;
+    }
+  }
+};
+</script>

package/packages/lowcode/src/attribute/styles.vue

@@ -5,9 +5,10 @@
       label-width="auto"
       size="small"
       :model="models"
-      :contents="contents"
+      :contents="formContents"
       :hides="formHides"
       :show-buttons="false"
+      @input="handleInput"
       @change="handleChange"
     >
     </es-form>
@@ -16,6 +17,7 @@
 
 <script>
 import EsForm from 'eoss/packages/form';
+import { getPropRaw } from '../util/props-util.js';
 export default {
   name: 'Styles',
   inject: ['lowcode'],
@@ -29,6 +31,39 @@ export default {
     }
   },
 
+  computed: {
+    /**
+     * 当前选中节点是否为 es-form：列数字段绑组件 props.columns 而非 style
+     */
+    isFormModel() {
+      const name = (this.model && this.model.name) || '';
+      // 节点名是 PascalCase (EsForm),转小写后是 esform
+      return name.toLowerCase() === 'esform';
+    },
+    /**
+     * 瀑布流仅页面根节点支持：非页面节点过滤掉 masonry 选项
+     */
+    formContents() {
+      let list = this.contents;
+      if (!this.model || this.model.type !== 'page') {
+        list = list.map((item) => {
+          if (item.name !== 'display') return item;
+          return {
+            ...item,
+            data: item.data.filter((opt) => opt.value !== 'masonry')
+          };
+        });
+      }
+      if (this.isFormModel) {
+        // 表单列数复用 columns 字段（写 props.columns），标签改为“列数”
+        list = list.map((item) =>
+          item.name === 'columns' ? { ...item, label: '列数' } : item
+        );
+      }
+      return list;
+    }
+  },
+
   data() {
     return {
       contents: [
@@ -62,7 +97,6 @@ export default {
           label: '总列数',
           min: 1,
           max: 12,
-          default: false,
           type: 'number'
         },
         {
@@ -293,8 +327,6 @@ export default {
     };
   },
 
-  computed: {},
-
   watch: {
     /**
      * 监听 model prop 变化（仅用于切换组件时的初始化同步）
@@ -318,7 +350,13 @@ export default {
             this.$set(target, 'style', style);
           }
         }
-        this.models = style;
+        // 表单列数回显 props.columns（定义数组取条目 value/default），缺省 1 列
+        const columnsRaw = this.isFormModel
+          ? getPropRaw(val.props, 'columns')
+          : undefined;
+        this.models = this.isFormModel
+          ? { ...style, columns: columnsRaw || 1 }
+          : style;
         // 根据 display 类型更新 formHides
         this.updateFormHides(style.display);
         // flex 模式下移除 style 中的 span
@@ -379,6 +417,14 @@ export default {
         );
       }
 
+      if (this.isFormModel) {
+        // 表单节点：columns 绑 props.columns（表单列数）始终可见；
+        // span 是页面 grid 占列属性，对表单隐藏避免与“列数”混淆
+        const colIdx = hides.indexOf('columns');
+        if (colIdx !== -1) hides.splice(colIdx, 1);
+        if (!hides.includes('span')) hides.push('span');
+      }
+
       this.formHides = hides;
     },
     /**
@@ -416,7 +462,35 @@ export default {
       this.updateFormHides(val);
       this.removeSpanIfFlex(val);
     },
+    /**
+     * 监听字段值变化，同步更新 models（v-model 的 input 事件）
+     */
+    handleInput(val) {
+      this.models = val;
+    },
     handleChange() {
+      if (this.isFormModel) {
+        // 列数写组件 props 的 columns 条目（定义数组写 value），不污染 style.columns 布局键
+        const { columns, ...style } = this.models;
+        let props;
+        if (Array.isArray(this.model.props)) {
+          props = this.model.props.map((item) => ({ ...item }));
+          const target = props.find((item) => item.name === 'columns');
+          if (target) {
+            target.value = columns || 1;
+          } else {
+            props.push({
+              name: 'columns',
+              type: 'number',
+              value: columns || 1
+            });
+          }
+        } else {
+          props = { ...(this.model.props || {}), columns: columns || 1 };
+        }
+        this.$emit('change', { style, props });
+        return;
+      }
       this.$emit('change', { style: this.models });
     }
   }

package/packages/lowcode/src/attribute.vue

@@ -4,7 +4,14 @@
       <es-tab-pane label="样式" name="1" lazy>
         <styles :model="current" @change="handleModelUpdate"></styles>
       </es-tab-pane>
-      <es-tab-pane label="定义" name="2" lazy>
+      <es-tab-pane v-if="showPropsTab" label="props" name="6" lazy>
+        <props-panel
+          :model="current"
+          @change="handleModelUpdate"
+          @edit="handleEdit"
+        ></props-panel>
+      </es-tab-pane>
+      <es-tab-pane v-if="isPageNode" label="定义" name="2" lazy>
         <property
           :model="current"
           @change="handleModelUpdate"
@@ -18,14 +25,14 @@
           @edit="handleEdit"
         ></bind>
       </es-tab-pane>
-      <es-tab-pane label="函数" name="4" lazy>
+      <es-tab-pane v-if="isPageNode" label="函数" name="4" lazy>
         <functions
           :model="current"
           @change="handleModelUpdate"
           @edit="handleEdit"
         ></functions>
       </es-tab-pane>
-      <es-tab-pane label="依赖" name="5" lazy>
+      <es-tab-pane v-if="isPageNode" label="依赖" name="5" lazy>
         <dependency
           :model="current"
           @pageChange="handlePageUpdate"
@@ -58,6 +65,7 @@ import bus from 'eoss/src/utils/bus.js';
 import busListener from './mixins/bus-listener.js';
 import Property from './attribute/property.vue';
 import Styles from './attribute/styles.vue';
+import PropsPanel from './attribute/props.vue';
 import Bind from './attribute/bind.vue';
 import Functions from './attribute/function.vue';
 import Dependency from './attribute/dependency.vue';
@@ -191,6 +199,7 @@ export default {
   components: {
     Property,
     Styles,
+    PropsPanel,
     Bind,
     Functions,
     LowJs,
@@ -229,10 +238,38 @@ export default {
       editingField: null
     };
   },
-  computed: {},
+  computed: {
+    /**
+     * 选中节点是否为页面：定义/函数/依赖仅页面可编辑
+     */
+    isPageNode() {
+      return !!this.current && this.current.type === 'page';
+    },
+    /**
+     * 选中节点是否为原生 HTML 元素：仅样式 + 绑定（属性/指令/事件）
+     */
+    isHtmlNode() {
+      return !!this.current && this.isNativeHtmlTag(this.current.name);
+    },
+    /**
+     * 组件节点显示 props 面板：按组件定义的 props 传入数据
+     */
+    showPropsTab() {
+      return !!this.current && !this.isPageNode && !this.isHtmlNode;
+    }
+  },
   watch: {
     show(val) {
       this.styles.width = val ? '350px' : '0px';
+    },
+    // 切换选中节点时，若当前 tab 对新节点类型不可见则回落到样式页
+    current() {
+      const pageOnly = ['2', '4', '5'];
+      if (!this.isPageNode && pageOnly.includes(this.active)) {
+        this.active = '1';
+      } else if (!this.showPropsTab && this.active === '6') {
+        this.active = '1';
+      }
     }
   },
   mounted() {
@@ -885,3 +922,23 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.es-lowcode__attribute {
+  height: 100%;
+}
+// 面板内容区滚动：tab 头固定，内容超出时纵向滚动
+.es-lowcode__attribute--tabs {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  ::v-deep .es-tabs__header {
+    flex-shrink: 0;
+  }
+  ::v-deep .es-tabs__content {
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+</style>