eoss 0.1.0-alpha.40 → 0.1.0-alpha.41

package/packages/lowcode/src/util/form-controls.js

@@ -0,0 +1,87 @@
+/**
+ * 表单控件包裹契约共享常量：表单控件（EsInput/EsSelect 等）无论挂在哪个父节点下，
+ * 都以 label（字段标签）+ name（字段键）承载字段元信息，渲染时由 form-render
+ * 包一层 es-form-item（JSON 不存包裹节点）；canvas 拖入与 source-parser
+ * 历史迁移共用本文件，保证字段键前缀与判定口径一致
+ */
+
+/** 需被 es-form-item 包裹的表单控件（Pascal 名） */
+export const FORM_CONTROLS = [
+  'EsIcons',
+  'EsRadio',
+  'EsRadioGroup',
+  'EsCheckbox',
+  'EsCheckboxGroup',
+  'EsInput',
+  'EsInputNumber',
+  'EsSelect',
+  'EsSelector',
+  'EsCascader',
+  'EsSwitch',
+  'EsSlider',
+  'EsTimePicker',
+  'EsDatePicker',
+  'EsDateTimePicker',
+  'EsUpload',
+  'EsRate',
+  'EsColorPicker',
+  'EsTransfer',
+  'EsCron',
+  'EsAutocomplete'
+];
+
+// 组件名 → 字段键前缀（对齐 field-render 的 COMPONENT_MAP）
+export const COMP_TO_TYPE = {
+  EsInput: 'input',
+  EsInputNumber: 'number',
+  EsSelect: 'select',
+  EsSelector: 'selector',
+  EsCascader: 'cascader',
+  EsSwitch: 'switch',
+  EsDatePicker: 'date',
+  EsDateTimePicker: 'datetime',
+  EsTimePicker: 'time',
+  EsUpload: 'upload',
+  EsRate: 'rate',
+  EsSlider: 'slider',
+  EsColorPicker: 'color',
+  EsTransfer: 'transfer',
+  EsRadio: 'radio',
+  EsRadioGroup: 'radio',
+  EsCheckbox: 'checkbox',
+  EsCheckboxGroup: 'checkbox',
+  EsTree: 'tree'
+};
+
+/** es-input / esInput → EsInput */
+export function toPascal(name) {
+  return String(name).replace(/(^|-)(\w)/g, (m, sep, c) => c.toUpperCase());
+}
+
+/** 节点/条目是否为需包 es-form-item 的表单控件 */
+export function isFormControlNode(item) {
+  return !!item && FORM_CONTROLS.includes(toPascal(item.nodeName || item.name));
+}
+
+/** 字段键前缀：组件名未收录时兜底 input（与 canvas 拖入口径一致） */
+export function fieldPrefix(pascalName) {
+  return COMP_TO_TYPE[pascalName] || 'input';
+}
+
+/**
+ * 在同级节点中生成不冲突的字段键：前缀 + 序号（与 canvas buildFieldProp 同规则）
+ * @param {Array} siblings 同级节点数组
+ * @param {string} pascalName 控件 Pascal 名
+ * @returns {string} 如 input1 / select2
+ */
+export function buildFieldKey(siblings, pascalName) {
+  const type = fieldPrefix(pascalName);
+  //  从 1 递增查重：首个控件产出 input1（length+1 起算会使首控件变 input2）
+  let idx = 1;
+  let fieldName = type + idx;
+  while ((siblings || []).some((c) => c && c.name === fieldName)) {
+    idx += 1;
+    fieldName = type + idx;
+  }
+  return fieldName;
+}

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

@@ -1,9 +1,10 @@
 /**
- * 节点 props 定义数组与取值转换工具
+ * 节点 props 取值转换工具
  *
- * 节点 props 存定义数组：[{ name, type, default?, options?, value? }]，
- * value 仅在用户改动后写入条目；字符串取值支持 {{变量名}} 语法
- * 引用页面 data 中定义的变量（整体匹配按变量绑定，局部匹配按插值）
+ * 节点 props 存取值对象 { propName: value }，仅改动过的 prop 写入；
+ * 字符串取值支持 {{变量名}} 语法引用页面 data 中定义的变量
+ * （整体匹配按变量绑定，局部匹配按插值）；
+ * 历史定义数组形态 [{ name, value? }] 仍兼容读取
  */
 
 /** 整体匹配 {{expr}} */
@@ -31,7 +32,7 @@ export function resolvePropValue(raw, data) {
   });
 }
 
-/** 按名读取条目原始取值（value 优先、其次 default）；兼容历史对象形态 */
+/** 按名读取原始取值：对象形态直读；数组形态 value 优先、其次 default */
 export function getPropRaw(props, name) {
   if (!props) return undefined;
   if (!Array.isArray(props)) return props[name];
@@ -41,8 +42,8 @@ export function getPropRaw(props, name) {
 }
 
 /**
- * 定义数组 → 组件 v-bind 用的取值对象；
- * 兼容历史对象形态 props（原样透传，跳过 v- 键）
+ * 取值对象 → 组件 v-bind 用的取值对象（解析 {{var}}，跳过 v- 键）；
+ * 兼容历史定义数组形态（value 优先其次 default）
  */
 export function propsToObject(props, data) {
   if (!props) return {};
@@ -50,7 +51,7 @@ export function propsToObject(props, data) {
     const result = {};
     Object.keys(props).forEach((key) => {
       if (key.startsWith('v-')) return;
-      result[key] = props[key];
+      result[key] = resolvePropValue(props[key], data);
     });
     return result;
   }

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

@@ -9,7 +9,7 @@
     <component
       v-else
       style="width: 100%; height: 100%"
-      :is="newNode.name"
+      :is="newNode.nodeName || newNode.name"
       :height="newHeight"
       v-bind="cleanProps"
       v-on="newNode.events"
@@ -22,8 +22,8 @@
     >
       <!-- 不用 v-if/v-else 包裹：children 为空时假分支的空注释/文本节点
         会被 EsForm 等组件误判默认插槽有内容，导致 slot fallback 不渲染 -->
-      <!-- 子节点统一递归渲染；表单控件子节点（带 formItem 标记）复用
-        编辑器同一个 form-render（es-form-item 包裹层渲染时生成，无选中手柄） -->
+      <!-- 子节点统一递归渲染；表单控件子节点（form-controls 清单命中，
+        与是否在 es-form 内无关）复用编辑器同一个 form-render（es-form-item 包裹层渲染时生成，无选中手柄） -->
       <component
         :is="childRender(child)"
         v-for="child in newNode.children"
@@ -87,6 +87,10 @@
 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 {
+  isFormControlNode,
+  toPascal
+} from 'eoss/packages/lowcode/src/util/form-controls.js';
 import EsButton from 'eoss/packages/button';
 
 export default {
@@ -254,11 +258,14 @@ export default {
   beforeDestroy() {},
   methods: {
     /**
-     * 子节点渲染器：表单控件子节点（带 formItem 标记）由 form-render 渲染，
-     * 其余走通用 Render（与编辑器 render.vue 同一判定）
+     * 子节点渲染器：表单控件子节点仅在 es-form 内由 form-render 渲染，
+     * es-form 外拖入的控件裸渲染走通用 Render（与编辑器 render.vue 同一判定）
      */
     childRender(child) {
-      return child && child.formItem ? 'FormRender' : 'Render';
+      if (!isFormControlNode(child)) return 'Render';
+      return toPascal(this.newNode.nodeName) === 'EsForm'
+        ? 'FormRender'
+        : 'Render';
     },
     /**
      * 处理组件大小调整开始事件

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

@@ -114,6 +114,7 @@ import EsIcon from 'eoss/packages/icon';
 import EsScrollbar from 'eoss/packages/scrollbar';
 import { getStorage } from 'eoss/src/utils/storage';
 import Message from 'eoss/packages/message';
+import { migrateDirectives } from 'eoss/src/utils/source-parser.js';
 // 编辑态下布局末尾预留的投放区域高度：masonry 计入容器高度，流式布局用 padding-bottom
 const DROP_SPACE = 200;
 export default {
@@ -347,7 +348,9 @@ export default {
           } else {
             this.pageData = { ...page, ...parsed };
           }
-          // 合并：page 保留元信息，parsed 提供 children/style 等渲染所需结构
+          // 合并：page 保留元信息，parsed 提供 children/style 等渲染所需结构；
+          // 历史形态（name/formItem/props 定义数组/doc）递归迁移后再渲染
+          migrateDirectives(this.pageData);
           this.setPageData(this.pageData);
           // mounted 时 pages 尚为空，异步拿到数据后需重新触发布局
           this.$nextTick(() => {

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

@@ -66,6 +66,8 @@
         v-if="visible"
         :contents="contents"
         :value="userInfos"
+        :checkPassword="checkPassword"
+        :checkPasswordMsg="checkPasswordMsg"
         @success="handleSuccess"
       >
       </user-info>

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

@@ -17,7 +17,7 @@
 </template>
 <script>
 import { updateUserInfo } from 'eoss/src/config/api.js';
-import { startWith, identical, getWinTop } from 'eoss/src/utils/util';
+import { startWith, getWinTop } from 'eoss/src/utils/util';
 import { getStorage } from 'eoss/src/utils/storage';
 import { ajax } from 'eoss/src/utils/ajax';
 import { doEncrypt } from 'eoss/src/utils/sm';
@@ -45,11 +45,13 @@ export default {
         return {};
       }
     },
-    rules: {
-      type: Object,
-      default() {
-        return {};
-      }
+    checkPassword: {
+      type: [RegExp, Function, String],
+      default: null
+    },
+    checkPasswordMsg: {
+      type: String,
+      default: null
     }
   },
   data() {
@@ -175,13 +177,15 @@ export default {
                 message: '请输入新密码'
               }
             : {},
-          {
-            pattern: this.checkPassword,
-            message: this.checkPasswordMsg
-              ? this.checkPasswordMsg
-              : '密码格式不合法',
-            trigger: 'blur'
-          }
+          this.checkPassword
+            ? {
+                pattern: this.checkPassword,
+                message: this.checkPasswordMsg
+                  ? this.checkPasswordMsg
+                  : '密码格式不合法',
+                trigger: 'blur'
+              }
+            : {}
         ],
         repassword: [
           this.model.password || this.model.oldpassword
@@ -383,7 +387,11 @@ export default {
     },
     repassword(rule, value, callback) {
       if (this.model.oldpassword && this.model.password && value) {
-        identical({ value: [value, this.model.password], callback });
+        if (value !== this.model.password) {
+          callback(new Error('两次输入的密码不一致'));
+        } else {
+          callback();
+        }
       } else {
         callback();
         return true;

package/packages/selector-panel/src/mixin.js

@@ -5,6 +5,7 @@ export default {
   computed: {
 
     newTabs() {
+      console.log('newTabs');
       const orgId = getStorage('orgId');
       const tabs = {
         enterprise: {

package/packages/theme-chalk/src/code-editor.scss

@@ -0,0 +1,59 @@
+@import './common/var.scss';
+@import './mixins/mixins.scss';
+
+/* 代码编辑器（monaco 封装）：根容器撑满父级，底部 28px 状态栏 */
+@include b(code-editor) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+
+  @include e(instance) {
+    width: 100%;
+    height: calc(100% - 28px);
+  }
+
+  @include e(bar) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 28px;
+    padding: 0 12px;
+    background: #252526;
+    border-top: 1px solid #3c3c3c;
+    font-size: 12px;
+    color: #9d9d9d;
+  }
+
+  @include e(status) {
+    color: #89d185;
+
+    @include when(dirty) {
+      color: #e2c08d;
+    }
+
+    @include when(error) {
+      color: #f48771;
+    }
+  }
+
+  @include e(tip) {
+    kbd {
+      padding: 1px 6px;
+      margin: 0 2px;
+      background: #3c3c3c;
+      border: 1px solid #555;
+      border-radius: 3px;
+      font-family: inherit;
+      color: #cccccc;
+    }
+  }
+}
+
+/* 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;
+}

package/packages/theme-chalk/src/form-editor.scss

@@ -0,0 +1,240 @@
+@import './common/var.scss';
+@import './mixins/mixins.scss';
+
+/* 表单编辑器：三栏布局（控件面板 / 表单画布 / 属性面板）+ JSON 编辑弹窗 */
+@include b(form-editor) {
+  display: flex;
+  height: 100%;
+  min-height: 480px;
+  border: 1px solid #e4e7ed;
+  background: #fff;
+  overflow: hidden;
+
+  @include e(aside) {
+    width: 220px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid #e4e7ed;
+    background: #fafafa;
+  }
+
+  @include e(search) {
+    padding: 8px;
+    border-bottom: 1px solid #e4e7ed;
+  }
+
+  @include e(palette-wrap) {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  @include e(palette) {
+    padding: 8px;
+  }
+
+  @include e(palette-group) {
+    padding: 6px 4px;
+    font-size: 12px;
+    color: #909399;
+    user-select: none;
+  }
+
+  @include e(palette-item) {
+    padding: 7px 10px;
+    margin-bottom: 6px;
+    font-size: 12px;
+    color: #606266;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    border-radius: 3px;
+    cursor: move;
+    user-select: none;
+
+    &:hover {
+      color: #409eff;
+      border-color: #409eff;
+    }
+  }
+
+  @include e(main) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    background: #f5f7fa;
+  }
+
+  @include e(toolbar) {
+    text-align: right;
+    padding: 10px 12px;
+    background: #fff;
+    border-bottom: 1px solid #e4e7ed;
+  }
+
+  @include e(title) {
+    font-size: 13px;
+    color: #303133;
+  }
+
+  @include e(canvas-wrap) {
+    flex: 1;
+    overflow: hidden;
+    .es-scrollbar__view {
+      min-height: calc(100% - 15px);
+    }
+  }
+
+  @include e(canvas) {
+    min-height: 100%;
+    padding: 16px;
+    cursor: pointer;
+  }
+
+  @include e(form) {
+    background: #fff;
+    border: 1px dashed #dcdfe6;
+    border-radius: 4px;
+    padding: 16px 16px 0;
+    &.is-active {
+      border-color: $--color-primary;
+    }
+  }
+
+  @include e(fields) {
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 120px;
+  }
+
+  @include e(field) {
+    position: relative;
+    cursor: move;
+    &::before {
+      display: block;
+      position: absolute;
+      border-radius: $--border-radius-base;
+      border: 1px dashed #c0c4cc;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+    }
+
+    &:hover {
+      background: #f5f7fa;
+      &::before {
+        border-color: $--color-primary;
+      }
+    }
+
+    &.is-active {
+      background: #ecf5ff;
+      &::before {
+        border-color: $--color-primary;
+      }
+    }
+
+    &.is-ghost {
+      opacity: 0.5;
+      &::before {
+        border-color: $--color-primary;
+      }
+    }
+  }
+
+  /* handle 插槽挂在 form-item 根级：字段需提供定位锚 */
+  @include e(field) {
+    position: relative;
+  }
+
+  @include e(field-remove) {
+    position: absolute !important;
+    top: 2px;
+    right: 4px;
+    display: none;
+    z-index: 2;
+    color: #f56c6c;
+  }
+
+  /* 列宽拖拽手柄：贴字段左右缘，向对应方向拖动按列取整改 span */
+  @include e(resize-handle) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 10px;
+    display: none;
+    z-index: 2;
+    cursor: col-resize;
+    color: $--color-primary;
+    text-align: center;
+
+    &::before {
+      line-height: 40px;
+    }
+
+    &.is-left {
+      left: -5px;
+    }
+
+    &.is-right {
+      right: -5px;
+    }
+  }
+
+  /* 选中字段时显示手柄按钮（跨元素组合选择器，平铺书写） */
+  .es-form-editor__field.is-active .es-form-editor__field-remove,
+  .es-form-editor__field.is-active .es-form-editor__resize-handle {
+    display: block;
+  }
+
+  @include e(empty) {
+    width: 100%;
+    padding: 48px 0;
+    text-align: center;
+    font-size: 13px;
+    color: #909399;
+    user-select: none;
+  }
+
+  @include e(attribute) {
+    width: 320px;
+    flex-shrink: 0;
+    border-left: 1px solid #e4e7ed;
+    background: #fff;
+    overflow: auto;
+  }
+
+  @include e(panel-title) {
+    padding: 12px;
+    font-size: 13px;
+    color: #303133;
+    border-bottom: 1px solid #e4e7ed;
+  }
+
+  /* 字段属性标题右侧的切回入口：点击回到表单属性面板 */
+  @include e(panel-switch) {
+    float: right;
+    font-size: 12px;
+    color: #409eff;
+    cursor: pointer;
+  }
+  @include e(props) {
+    height: calc(100% - 45px);
+    .es-form-content {
+      padding: 12px 20px 12px 12px;
+    }
+  }
+  /* JSON 编辑弹窗内的 monaco 编辑器：EsCodeEditor 根容器需外层撑高 */
+  @include e(json-editor) {
+    height: calc(100vh - 220px);
+    display: flex;
+    flex-direction: column;
+
+    .es-code-editor__instance {
+      flex: 1;
+      min-height: 0;
+    }
+  }
+}

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

@@ -55,7 +55,15 @@
 
   @include b(form-content) {
     display: flex;
-    flex-direction: column;
+    // 行向换行：插槽直挂的 es-form-item（lowcode es-form 内字段/业务插槽）
+    // 按 itemStyle 宽度换行成多列；contents 路径经 form-item-render 的
+    // .es-form-items 包裹层独占整行，内部布局不变
+    flex-wrap: wrap;
+    flex-direction: row;
+    > .es-form-items,
+    > *:not(.es-form-item) {
+      width: 100%;
+    }
     @include when(scroll) {
       padding-right: 8px;
     }
@@ -63,6 +71,7 @@
       padding-right: 20px;
     }
     @include m(inline) {
+      flex-wrap: nowrap;
       flex-direction: row;
       padding: 0;
     }

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

@@ -20,6 +20,7 @@
 @import "./checkbox.scss";
 @import "./checkbox-button.scss";
 @import "./checkbox-group.scss";
+@import "./code-editor.scss";
 @import "./col.scss";
 @import "./collapse.scss";
 @import "./collapse-item.scss";
@@ -43,6 +44,7 @@
 @import "./flows.scss";
 @import "./flow-group.scss";
 @import "./form.scss";
+@import "./form-editor.scss";
 @import "./form-item.scss";
 @import "./footer.scss";
 @import "./guide.scss";

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

@@ -537,46 +537,5 @@
       text-align: right;
     }
   }
-  @include e(editor) {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: 200px;
-    @include m(instance) {
-      width: 100%;
-      height: calc(100% - 28px);
-    }
-    @include m(bar) {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 28px;
-      padding: 0 12px;
-      background: #252526;
-      border-top: 1px solid #3c3c3c;
-      font-size: 12px;
-      color: #9d9d9d;
-    }
-    @include m(status) {
-      color: #89d185;
-      @include when(dirty) {
-        color: #e2c08d;
-      }
-
-      @include when(error) {
-        color: #f48771;
-      }
-    }
-    @include m(tip) {
-      kbd {
-        padding: 1px 6px;
-        margin: 0 2px;
-        background: #3c3c3c;
-        border: 1px solid #555;
-        border-radius: 3px;
-        font-family: inherit;
-        color: #cccccc;
-      }
-    }
-  }
+  /* 代码编辑器样式已随 editor.vue 独立成 EsCodeEditor 组件，迁至 code-editor.scss */
 }

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

@@ -30,6 +30,8 @@
   }
   .es-input__inner {
     border: 0;
+    height: $--input-height - 2px;
+    line-height: $--input-height - 2px;
     padding-right: 32px;
     &:focus {
       outline: none;