eoss 0.1.0-alpha.41 → 0.1.0-alpha.43

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

@@ -57,6 +57,14 @@
     }
   }
 
+  @include e(palette-empty) {
+    padding: 16px 4px;
+    font-size: 12px;
+    color: #909399;
+    text-align: center;
+    user-select: none;
+  }
+
   @include e(main) {
     flex: 1;
     display: flex;
@@ -110,6 +118,7 @@
   @include e(field) {
     position: relative;
     cursor: move;
+    border-radius: $--border-radius-base;
     &::before {
       display: block;
       position: absolute;
@@ -151,11 +160,11 @@
 
   @include e(field-remove) {
     position: absolute !important;
-    top: 2px;
+    top: 0;
     right: 4px;
     display: none;
     z-index: 2;
-    color: #f56c6c;
+    color: #f56c6c !important;
   }
 
   /* 列宽拖拽手柄：贴字段左右缘，向对应方向拖动按列取整改 span */
@@ -167,7 +176,6 @@
     display: none;
     z-index: 2;
     cursor: col-resize;
-    color: $--color-primary;
     text-align: center;
 
     &::before {
@@ -179,7 +187,7 @@
     }
 
     &.is-right {
-      right: -5px;
+      right: 0;
     }
   }
 
@@ -209,6 +217,7 @@
   @include e(panel-title) {
     padding: 12px;
     font-size: 13px;
+    line-height: 20px;
     color: #303133;
     border-bottom: 1px solid #e4e7ed;
   }
@@ -228,7 +237,7 @@
   }
   /* JSON 编辑弹窗内的 monaco 编辑器：EsCodeEditor 根容器需外层撑高 */
   @include e(json-editor) {
-    height: calc(100vh - 220px);
+    height: 100%;
     display: flex;
     flex-direction: column;
 

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

@@ -10,7 +10,7 @@
     }
   }
   @include m(label-top) {
-    & .es-form-item__label {
+    & .es-form-item__label:not(.is-left) {
       float: none;
       display: inline-block;
       text-align: left;
@@ -51,6 +51,7 @@
   @include b(form-scroll) {
     width: 100%;
     height: 100%;
+    overflow-x: hidden;
   }
 
   @include b(form-content) {
@@ -90,6 +91,28 @@
       opacity: 1;
     }
   }
+  .es-collapse-item__header {
+    color: $--color-primary;
+    position: relative;
+    padding-left: 10px;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -9px;
+      width: 2px;
+      height: 16px;
+      background-color: $--color-primary;
+    }
+  }
+  .es-collapse-item__content {
+    padding-bottom: 0;
+    padding-right: 20px;
+  }
+  .es-collapse-item__wrap {
+    border: 0;
+  }
 }
 @include b(form-item) {
   margin-bottom: 22px;
@@ -214,6 +237,7 @@
 
   @include when(error) {
     & .es-input__inner,
+    & .es-selector,
     & .es-textarea__inner {
       &,
       &:focus {
@@ -239,7 +263,7 @@
 }
 @include b(form-buttons) {
   display: flex;
-  align-items: center;
+  align-items: right;
   padding: 0 10px 16px 10px;
   @include m(inline) {
     height: auto;

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

@@ -1,41 +1,39 @@
 @import 'mixins/mixins.scss';
 @import 'common/var.scss';
 @include b(icons) {
-  display: inline-block;
-  position: relative;
-  @include e(font) {
-    color: #606266;
-    font-size: 20px;
-    position: absolute;
-    top: 50%;
-    left: 8px;
-    transform: translateY(-50%);
+  .es-input__inner {
+    color: transparent;
+  }
+  @include when(readonly) {
+    .es-input__inner {
+      z-index: -1;
+    }
   }
-  @include e(input) {
-    z-index: -1;
+  @include when(focused) {
     .es-input__inner {
-      color: transparent;
+      color: #333333;
     }
   }
-  @include e(button) {
-    position: absolute !important;
+  @include e(font) {
+    color: #606266;
+    font-size: 18px;
+    position: absolute;
     top: 50%;
-    right: 6px;
+    left: 8px;
     transform: translateY(-50%);
+    font-style: normal;
   }
   @include e(scrollbar) {
-    height: calc(100% - 50px);
+    height: calc(100% - 50px) !important;
     margin-top: 10px;
   }
   @include e(list) {
-    clear: both;
-    overflow: hidden;
-    list-style: none;
-    padding: 0 !important;
+    display: flex;
+    flex-wrap: wrap;
     border: 1px solid #eaeefb;
     border-radius: 4px;
-    li {
-      float: left;
+    min-height: 378px;
+    .es-icons__item {
       width: 20%;
       text-align: center;
       height: 120px;
@@ -44,9 +42,10 @@
       font-size: 13px;
       border-right: 1px solid #eee;
       border-bottom: 1px solid #eee;
-      margin-right: -1px;
-      margin-bottom: -1px;
       box-sizing: border-box;
+      &:nth-child(5n) {
+        border-right: 0;
+      }
       span {
         display: inline-block;
         line-height: normal;
@@ -75,5 +74,12 @@
         }
       }
     }
+    .no-result {
+      width: 100%;
+      text-align: center;
+      color: #99a9bf;
+      font-size: 14px;
+      margin-top: 20px;
+    }
   }
 }

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

@@ -43,6 +43,7 @@
 @import "./flow.scss";
 @import "./flows.scss";
 @import "./flow-group.scss";
+@import "./flow-list.scss";
 @import "./form.scss";
 @import "./form-editor.scss";
 @import "./form-item.scss";

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

@@ -159,6 +159,9 @@
     transition: all 0.3s;
     pointer-events: none;
     z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   @include e(suffix-inner) {
@@ -179,6 +182,9 @@
     color: $--input-icon-color;
     transition: all 0.3s;
     z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   @include e(icon) {

package/packages/theme-chalk/src/radio-group.scss

@@ -3,10 +3,11 @@
 
 @include b(radio-group) {
   text-align: left;
-  display: inline-block;
+  display: block;
   line-height: 1;
   vertical-align: middle;
-  font-size: 0;
+  font-size: unset;
+  width: 100%;
   @include when(separate) {
     @include b(radio-button) {
       & + .es-radio-button {

package/packages/theme-chalk/src/retrial-auth.scss

@@ -1,10 +1,10 @@
 @import './common/var.scss';
 .es-retrial-auth-msg {
-  .el-message-box__header {
+  .es-message-box__header {
     background-color: #eee;
     font-size: 14px !important;
     border-bottom: $--border-base;
-    .el-message-box__title {
+    .es-message-box__title {
       font-size: 14px;
       line-height: 18px;
     }
@@ -14,7 +14,7 @@
   .es-retrial-auth-form {
     padding: 24px 12px 12px 12px;
   }
-  .el-input__suffix {
+  .es-input__suffix {
     right: 0;
   }
   .es-button-submit {

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

@@ -9,6 +9,9 @@
   border-radius: $--border-radius-base;
   @include when(button) {
     border: 0;
+    .es-button {
+      padding: 6px 18px;
+    }
   }
   @include e(input) {
     position: absolute !important;
@@ -53,7 +56,7 @@
   @include e(tags) {
     max-width: 100%;
     position: relative;
-    &::before {
+    &:not(.is-readonly)::before {
       content: '';
       display: block;
       height: 1px;
@@ -78,6 +81,16 @@
     .es-tag {
       margin-right: 4px;
       margin-bottom: 4px;
+      line-height: 26px;
+    }
+    @include when(readonly) {
+      @include m(wrapper) {
+        padding: 8px 12px;
+        line-height: 22px;
+      }
     }
   }
+  .es-field-readonly {
+    border: 0;
+  }
 }

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

@@ -2,7 +2,7 @@
 @import 'common/var.scss';
 
 @include b(switch) {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   position: relative;
   font-size: $--switch-font-size;

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

@@ -100,7 +100,7 @@
     position: absolute;
     cursor: pointer;
     line-height: 42px;
-    font-size: 12px;
+    font-size: 14px;
     padding: 0 4px;
     color: $--color-text-secondary;
   }
@@ -187,7 +187,7 @@
   @include e(content) {
     overflow: hidden;
     position: relative;
-    height: calc(100% - 48px);
+    height: calc(100% - 50px);
   }
   @include m(card) {
     > .es-tabs__header {
@@ -254,9 +254,6 @@
     border: 1px solid $--border-color-base;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
 
-    > .es-tabs__content {
-      padding: 12px;
-    }
     > .es-tabs__header {
       background-color: $--background-color-base;
       border-bottom: 1px solid #fff;

package/packages/toolbar/src/toolbar.vue

@@ -63,7 +63,7 @@
         :item-class="itemClass"
         :inline="true"
         v-bind="searchs"
-        v-model="model"
+        :model="model"
         @submit="handleSearch"
         @reset="handleReset"
       />
@@ -110,7 +110,7 @@
           :size="'medium'"
           :close-dialog="false"
           v-bind="filters"
-          v-model="model"
+          :model="model"
           @submit="handleSubmit"
           @reset="handleCancel"
         ></es-form>
@@ -124,6 +124,19 @@ import Clickoutside from 'eoss/src/utils/clickoutside';
 import EsButton from 'eoss/packages/button';
 import EsButtonGroup from 'eoss/packages/button-group';
 import EsForm from 'eoss/packages/form';
+
+/**
+ * 浅比较两份取值：键数相同且逐键 === 视为一致
+ * （判断本地副本是否已回写到父级，避免 input 与 value 同步成环）
+ */
+function isSameValues(a, b) {
+  const source = a || {};
+  const target = b || {};
+  const sourceKeys = Object.keys(source);
+  if (sourceKeys.length !== Object.keys(target).length) return false;
+  return sourceKeys.every((key) => target[key] === source[key]);
+}
+
 /**
  * Toolbar 工具栏组件
  * 用于构建包含按钮组、搜索表单、高级过滤和信息显示的工具栏
@@ -200,17 +213,6 @@ export default {
       }
       return '0';
     },
-    /**
-     * 绑定值的双向绑定
-     */
-    model: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        return val;
-      }
-    },
     /**
      * 标签页菜单内容
      * @returns {Object} 标签页配置
@@ -274,7 +276,28 @@ export default {
       };
     }
   },
-  watch: {},
+  watch: {
+    // 父级下发（含 v-model 回传）的取值变化时同步本地副本
+    value: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        const next = val || {};
+        // 自己回写引发的回流不同步：消费端（如 data-table）会把取值就地写进
+        // param/value，逐键同步会重建 model 并覆盖重置快照
+        if (isSameValues(next, this.model)) return;
+        this.initialValue = { ...next };
+        this.model = { ...next };
+      }
+    },
+    // 本地副本改动回写 v-model；已与父级取值一致时不发，避免两边同步成环
+    model: {
+      deep: true,
+      handler(val) {
+        if (!isSameValues(val, this.value)) this.$emit('input', { ...val });
+      }
+    }
+  },
   data() {
     return {
       /**
@@ -284,7 +307,17 @@ export default {
       /**
        * 工具栏高度，用于定位高级搜索面板
        */
-      height: ''
+      height: '',
+      /**
+       * 搜索/高级搜索取值本地副本（响应式）：es-form 只写这份，不直改父级传入的 value。
+       * 父级常用 computed 现建对象下发 param，Vue 不会 observe prop 对象（initProps 期间
+       * toggleObserving(false)），直接写入既不触发更新，父级重渲染还会把输入框打回原值
+       */
+      model: {},
+      /**
+       * value 最近一次同步的快照，重置时回落到这份
+       */
+      initialValue: {}
     };
   },
   /**
@@ -355,7 +388,7 @@ export default {
      */
     handleReset() {
       this.reset();
-      this.$emit('reset', this.searchData);
+      this.$emit('reset', this.model);
     },
 
     /**
@@ -378,10 +411,10 @@ export default {
       this.show = !this.show;
     },
     /**
-     * 重置表单
+     * 重置表单：回落到父级最近一次下发的取值快照
      */
     reset() {
-      // 重置表单逻辑
+      this.model = { ...this.initialValue };
     }
   }
 };

package/packages/transfer/src/transfer.vue

@@ -1,47 +1,58 @@
 <template>
   <div class="es-transfer">
-    <transfer-panel
-      v-bind="$props"
-      ref="leftPanel"
-      :data="sourceData"
-      :title="titles[0]"
-      :default-checked="leftDefaultChecked"
-      :placeholder="filterPlaceholder || '请输入搜索内容'"
-      @checked-change="onSourceCheckedChange"
-    >
-      <slot name="left-footer"></slot>
-    </transfer-panel>
-    <div class="es-transfer__buttons">
-      <es-button
-        type="primary"
-        :class="['es-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
-        @click.native="addToLeft"
-        :disabled="rightChecked.length === 0"
+    <div class="es-field-readonly" v-if="formReadonly">
+      {{ readonlyText }}
+    </div>
+    <template v-if="!formReadonly">
+      <transfer-panel
+        v-bind="$props"
+        ref="leftPanel"
+        :data="sourceData"
+        :title="titles[0]"
+        :default-checked="leftDefaultChecked"
+        :placeholder="filterPlaceholder || '请输入搜索内容'"
+        @checked-change="onSourceCheckedChange"
       >
-        <i class="es-icon-zuo"></i>
-        <span v-if="buttonTexts[0] !== undefined">{{ buttonTexts[0] }}</span>
-      </es-button>
-      <es-button
-        type="primary"
-        :class="['es-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
-        @click.native="addToRight"
-        :disabled="leftChecked.length === 0"
+        <slot name="left-footer"></slot>
+      </transfer-panel>
+      <div class="es-transfer__buttons">
+        <es-button
+          type="primary"
+          :class="[
+            'es-transfer__button',
+            hasButtonTexts ? 'is-with-texts' : ''
+          ]"
+          @click.native="addToLeft"
+          :disabled="rightChecked.length === 0"
+        >
+          <i class="es-icon-zuo"></i>
+          <span v-if="buttonTexts[0] !== undefined">{{ buttonTexts[0] }}</span>
+        </es-button>
+        <es-button
+          type="primary"
+          :class="[
+            'es-transfer__button',
+            hasButtonTexts ? 'is-with-texts' : ''
+          ]"
+          @click.native="addToRight"
+          :disabled="leftChecked.length === 0"
+        >
+          <span v-if="buttonTexts[1] !== undefined">{{ buttonTexts[1] }}</span>
+          <i class="es-icon-you"></i>
+        </es-button>
+      </div>
+      <transfer-panel
+        v-bind="$props"
+        ref="rightPanel"
+        :data="targetData"
+        :title="titles[1]"
+        :default-checked="rightDefaultChecked"
+        :placeholder="filterPlaceholder || '请输入搜索内容'"
+        @checked-change="onTargetCheckedChange"
       >
-        <span v-if="buttonTexts[1] !== undefined">{{ buttonTexts[1] }}</span>
-        <i class="es-icon-you"></i>
-      </es-button>
-    </div>
-    <transfer-panel
-      v-bind="$props"
-      ref="rightPanel"
-      :data="targetData"
-      :title="titles[1]"
-      :default-checked="rightDefaultChecked"
-      :placeholder="filterPlaceholder || '请输入搜索内容'"
-      @checked-change="onTargetCheckedChange"
-    >
-      <slot name="right-footer"></slot>
-    </transfer-panel>
+        <slot name="right-footer"></slot>
+      </transfer-panel>
+    </template>
   </div>
 </template>
 
@@ -60,12 +71,25 @@ export default {
 
   mixins: [Emitter, Migrating],
 
+  inject: {
+    esForm: {
+      default: ''
+    }
+  },
+
   components: {
     TransferPanel,
     EsButton
   },
 
   props: {
+    /**
+     * 是否只读（渲染为只读文本，区别于 disabled 的禁用控件）
+     */
+    readonly: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Transfer 的数据源
      */
@@ -184,6 +208,19 @@ export default {
   },
 
   computed: {
+    // 只读态：控件自身 readonly prop（field-render 原样下传）或 es-form readonly
+    formReadonly() {
+      return this.readonly || !!(this.esForm || {}).readonly;
+    },
+    /**
+     * 只读态展示文本：显示右侧（已选中）列表项的 label
+     * @returns {string} 以逗号拼接的选项文本
+     */
+    readonlyText() {
+      const label = this.props.label;
+      return this.targetData.map((item) => item[label]).join(', ');
+    },
+
     /**
      * 将数据源转换为对象，方便通过key查找
      * @returns {Object} 转换后的对象
@@ -280,6 +317,7 @@ export default {
      * 将右侧面板的项移到左侧
      */
     addToLeft() {
+      if (this.formReadonly) return;
       let currentValue = this.value.slice();
       this.rightChecked.forEach((item) => {
         const index = currentValue.indexOf(item);
@@ -295,6 +333,7 @@ export default {
      * 将左侧面板的项移到右侧
      */
     addToRight() {
+      if (this.formReadonly) return;
       let currentValue = this.value.slice();
       const itemsToBeMoved = [];
       const key = this.props.key;