eoss 0.1.0-alpha.44 → 0.1.0-alpha.45

package/packages/input/src/input.vue

@@ -26,46 +26,52 @@
           <es-button v-if="prepend" v-bind="prepend"></es-button>
         </slot>
       </div>
-      <!-- 隐藏的输入框，用于阻止浏览器默认填充密码 -->
-      <input
-        v-if="type === 'password' || (showPassword && !passwordVisible)"
-        type="password"
-        class="es-input__hidden"
-        style="
-          position: absolute;
-          top: -9999px;
-          left: -9999px;
-          width: 0;
-          height: 0;
-          opacity: 0;
-        "
-        autocomplete="off"
-      />
-      <input
-        :tabindex="tabindex"
-        v-if="type !== 'textarea'"
-        class="es-input__inner"
-        :class="{ 'is-round': round }"
-        :style="innerStyle"
-        v-bind="$attrs"
-        :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
-        :disabled="inputDisabled"
-        :readonly="inputReadonly"
-        :autocomplete="
-          type === 'password' || (showPassword && !passwordVisible)
-            ? 'new-password'
-            : autoComplete || autocomplete
-        "
-        ref="input"
-        @compositionstart="handleCompositionStart"
-        @compositionupdate="handleCompositionUpdate"
-        @compositionend="handleCompositionEnd"
-        @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @change="handleChange"
-        :aria-label="label"
-      />
+      <!-- 只读态：纯文本展示，div 无光标不可聚焦；密码型未点眼预览时打码 -->
+      <div class="es-field-readonly" v-if="inputReadonly">
+        {{ passwordVisible ? nativeInputValue : maskedInputValue }}
+      </div>
+      <template v-else>
+        <!-- 隐藏的输入框，用于阻止浏览器默认填充密码 -->
+        <input
+          v-if="type === 'password' || (showPassword && !passwordVisible)"
+          type="password"
+          class="es-input__hidden"
+          style="
+            position: absolute;
+            top: -9999px;
+            left: -9999px;
+            width: 0;
+            height: 0;
+            opacity: 0;
+          "
+          autocomplete="off"
+        />
+        <input
+          :tabindex="tabindex"
+          v-if="type !== 'textarea'"
+          class="es-input__inner"
+          :class="{ 'is-round': round }"
+          :style="innerStyle"
+          v-bind="$attrs"
+          :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
+          :disabled="inputDisabled"
+          :readonly="nativeReadonly"
+          :autocomplete="
+            type === 'password' || (showPassword && !passwordVisible)
+              ? 'new-password'
+              : autoComplete || autocomplete
+          "
+          ref="input"
+          @compositionstart="handleCompositionStart"
+          @compositionupdate="handleCompositionUpdate"
+          @compositionend="handleCompositionEnd"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @change="handleChange"
+          :aria-label="label"
+        />
+      </template>
       <!-- 前置内容 -->
       <span
         class="es-input__prefix"
@@ -129,26 +135,35 @@
         </slot>
       </div>
     </template>
-    <textarea
-      v-else
-      :tabindex="tabindex"
-      class="es-textarea__inner"
-      @compositionstart="handleCompositionStart"
-      @compositionupdate="handleCompositionUpdate"
-      @compositionend="handleCompositionEnd"
-      @input="handleInput"
-      ref="textarea"
-      v-bind="$attrs"
-      :disabled="inputDisabled"
-      :readonly="inputReadonly"
-      :autocomplete="autoComplete || autocomplete"
-      :style="textareaStyle"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @change="handleChange"
-      :aria-label="label"
-    >
-    </textarea>
+    <template v-else>
+      <div
+        class="es-field-readonly es-field-readonly--textarea"
+        v-if="inputReadonly"
+        style="white-space: pre-wrap; word-break: break-all"
+      >
+        {{ nativeInputValue }}
+      </div>
+      <textarea
+        v-else
+        :tabindex="tabindex"
+        class="es-textarea__inner"
+        @compositionstart="handleCompositionStart"
+        @compositionupdate="handleCompositionUpdate"
+        @compositionend="handleCompositionEnd"
+        @input="handleInput"
+        ref="textarea"
+        v-bind="$attrs"
+        :disabled="inputDisabled"
+        :readonly="nativeReadonly"
+        :autocomplete="autoComplete || autocomplete"
+        :style="textareaStyle"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @change="handleChange"
+        :aria-label="label"
+      >
+      </textarea>
+    </template>
     <span
       v-if="isWordLimitVisible && type === 'textarea'"
       class="es-input__count"
@@ -260,6 +275,14 @@ export default {
      * @default false
      */
     readonly: Boolean,
+    /**
+     * 仅绑定原生 input 的 readonly 属性（行为标志，供 select/cascader/picker 内部使用）
+     * @type {Boolean}
+     * @default false
+     * @description 这些复合组件给内部 es-input 传的 readonly 是"禁止打字但保留输入框结构"
+     *   的行为标志（普通态也常为 true），若走 readonly 会命中只读 div 分支导致布局破坏
+     */
+    nativeReadonly: Boolean,
     /**
      * 输入框类型
      * @type {String}
@@ -442,6 +465,17 @@ export default {
         ? ''
         : String(this.value);
     },
+    // 只读 div 用：密码型（含 showPassword 未点眼预览）按原生表现打码，
+    // div 无法应用 type="password"，直接以掩码字符回显
+    maskedInputValue() {
+      if (
+        this.type !== 'password' &&
+        !(this.showPassword && !this.passwordVisible)
+      ) {
+        return this.nativeInputValue;
+      }
+      return '*'.repeat(this.nativeInputValue.length);
+    },
     showClear() {
       return (
         this.clearable &&

package/packages/input-number/src/input-number.vue

@@ -464,7 +464,10 @@ export default {
     }
   },
   mounted() {
-    let innerInput = this.$refs.input.$refs.input;
+    // 只读态下内部 es-input 被 v-if 移除，ref 不存在，需与 updated 同样防护
+    if (!this.$refs || !this.$refs.input) return;
+    const innerInput = this.$refs.input.$refs.input;
+    if (!innerInput) return;
     innerInput.setAttribute('role', 'spinbutton');
     innerInput.setAttribute('aria-valuemax', this.max);
     innerInput.setAttribute('aria-valuemin', this.min);
@@ -474,6 +477,7 @@ export default {
   updated() {
     if (!this.$refs || !this.$refs.input) return;
     const innerInput = this.$refs.input.$refs.input;
+    if (!innerInput) return;
     innerInput.setAttribute('aria-valuenow', this.currentValue);
   }
 };

package/packages/select/src/select.vue

@@ -109,7 +109,7 @@
         :autocomplete="autocomplete"
         :size="selectSize"
         :disabled="selectDisabled"
-        :readonly="inputReadonly"
+        :native-readonly="inputReadonly"
         :validate-event="false"
         :class="{ 'is-focus': visible }"
         :tabindex="tabindex"
@@ -162,11 +162,17 @@
           v-show="visible && emptyText !== false"
         >
           <es-scrollbar
+            v-loading="isLoading"
             tag="ul"
             wrap-class="es-select-dropdown__wrap"
             view-class="es-select-dropdown__list"
             ref="scrollbar"
             :listener="true"
+            :infinite-scroll="innerInfiniteScroll"
+            :infinite-scroll-disabled="innerInfiniteScrollDisabled"
+            :infinite-scroll-distance="infiniteScrollDistance"
+            :infinite-scroll-delay="infiniteScrollDelay"
+            :infinite-scroll-immediate="infiniteScrollImmediate"
             :class="{
               'is-empty': !allowCreate && query && filteredOptionsCount === 0
             }"
@@ -233,6 +239,13 @@
                 ></es-option>
               </template>
             </slot>
+            <!-- 懒加载：续拉到底后提示没有更多数据 -->
+            <div
+              v-if="lazyEnabled && lazyFinished"
+              class="es-select-dropdown__finished"
+            >
+              没有更多数据了
+            </div>
           </es-scrollbar>
           <template
             v-if="
@@ -696,7 +709,70 @@ export default {
      * 选项值的键名
      * @type {String}
      */
-    valueKey: String
+    valueKey: String,
+    /**
+     * 无限滚动回调：下拉列表滚动到底部时触发，用于分页加载更多选项
+     * @type {Function}
+     * @description 选项数据由外部接口分页提供时，在回调中请求下一页并追加到 data；
+     *   没有更多数据时由外部置 infiniteScrollDisabled 为 true 停止触发
+     */
+    infiniteScroll: Function,
+    /**
+     * 是否禁用无限滚动
+     * @type {Boolean}
+     * @default false
+     */
+    infiniteScrollDisabled: Boolean,
+    /**
+     * 距底部多少 px 时触发无限滚动
+     * @type {Number}
+     * @default 0
+     */
+    infiniteScrollDistance: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * 无限滚动回调的节流间隔（ms），透传给内部 es-scrollbar
+     * @type {Number}
+     * @default 200
+     */
+    infiniteScrollDelay: {
+      type: Number,
+      default: 200
+    },
+    /**
+     * 是否挂载后立即触发一次回调
+     * @type {Boolean}
+     * @default false
+     * @description 与 es-scrollbar 默认值（true）不同：下拉的滚动条随 select 一起挂载，
+     *   默认 true 会导致下拉尚未打开就自动请求首页，故这里默认关闭
+     */
+    infiniteScrollImmediate: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 是否开启选项懒加载（分页加载）
+     * @type {Boolean}
+     * @default false
+     * @description 对 tree 为 false 的平铺 ul 列表生效，两种数据来源均支持：
+     *   1. url 取数：初始化请求第一页，下拉滚动到底部时自动续拉下一页并追加（内部复用无限滚动），
+     *      请求期间列表显示 loading；某页返回条数小于 pageSize 视为加载完毕停止触发
+     *   2. data 外部传入（未配置 url）：本地分页，先渲染前 pageSize 条，
+     *      滚动到底部时同步切片追加下一页；data 变化时重置回第一页
+     */
+    lazy: Boolean,
+    /**
+     * 懒加载每页条数（url 取数时作为请求参数 pageNum/pageSize 随 param 一起 POST 给 url；
+     * data 本地懒加载时作为每页切片条数）
+     * @type {Number}
+     * @default 50
+     */
+    pageSize: {
+      type: Number,
+      default: 20
+    }
   },
 
   computed: {
@@ -708,6 +784,25 @@ export default {
     actualValueKey() {
       return this.valueKey || (this.sysCode ? 'cciValue' : 'value');
     },
+    // 懒加载生效条件：开启 lazy、非树形（平铺 ul 列表）、有数据来源（url 取数或 data 传入）
+    lazyEnabled() {
+      return this.lazy && !this.tree && (!!this.url || this.data.length > 0);
+    },
+    // 本地懒加载：未配置 url、由外部 data 传入时的分页切片模式
+    localLazyEnabled() {
+      return this.lazyEnabled && !this.url;
+    },
+    // 无限滚动回调：懒加载模式走内部分页续拉，否则透传外部 infiniteScroll
+    innerInfiniteScroll() {
+      return this.lazyEnabled ? this.loadMoreOptions : this.infiniteScroll;
+    },
+    // 无限滚动禁用：外部禁用，或懒加载中/已加载完时避免重复触发
+    innerInfiniteScrollDisabled() {
+      return (
+        this.infiniteScrollDisabled ||
+        (this.lazyEnabled && (this.isLoading || this.lazyFinished))
+      );
+    },
     model: {
       get() {
         if (this.multiple) {
@@ -856,7 +951,14 @@ export default {
   watch: {
     data: {
       handler(val) {
-        this.results = val;
+        if (this.localLazyEnabled) {
+          // 本地懒加载：数据变化时重置回第一页重新切片
+          this.lazyPageNum = 1;
+          this.lazyFinished = false;
+          this.applyLocalLazySlice();
+        } else {
+          this.results = val;
+        }
       },
       deep: true
     },
@@ -1047,7 +1149,12 @@ export default {
       isDestroy: false,
       innerStyle: {},
       results: this.data,
-      _propsCache: new Map()
+      // 懒加载分页状态：已加载到的页码 / 是否已加载完
+      lazyPageNum: 1,
+      lazyFinished: false,
+      _propsCache: new Map(),
+      // 是否请求中（驱动 es-scrollbar 上的 v-loading）
+      isLoading: false
     };
   },
 
@@ -1075,6 +1182,10 @@ export default {
 
     this.$on('handleOptionClick', this.handleOptionSelect);
     this.$on('setSelected', this.setSelected);
+    // 本地懒加载：初始只渲染 data 的第一页切片
+    if (this.localLazyEnabled) {
+      this.applyLocalLazySlice();
+    }
     this.debouncedGetData();
   },
 
@@ -1178,21 +1289,80 @@ export default {
      * @param {Object} options - 配置选项
      * @param {String} options.url - 接口地址
      * @param {Object} options.params - 接口参数
+     * @param {Boolean} options.append - 懒加载续拉下一页并追加（仅 lazyEnabled 时生效）
      */
-    getData({ url, params = {} }) {
+    getData({ url, params = {}, append = false } = {}) {
       url = url || this.url;
       params = { ...this.param, ...params };
-      url &&
-        ajax({
-          url,
-          method: 'POST',
-          data: params
-        }).then((res) => {
+      if (!url) return;
+      if (this.lazyEnabled) {
+        if (append) {
+          // 续拉下一页
+          this.isLoading = true;
+          params = {
+            ...params,
+            pageNum: this.lazyPageNum + 1,
+            pageSize: this.pageSize
+          };
+        } else {
+          // 初始化/参数变化/远程搜索：重置分页请求第一页
+          this.lazyPageNum = 1;
+          this.lazyFinished = false;
+          params = { ...params, pageNum: 1, pageSize: this.pageSize };
+        }
+      }
+      ajax({
+        url,
+        method: 'POST',
+        data: params
+      })
+        .then((res) => {
           if (res.rCode === 0) {
-            this.results = res.results || [];
+            const rows = res.results || [];
+            if (this.lazyEnabled && append) {
+              this.results = this.results.concat(rows);
+              this.lazyPageNum += 1;
+            } else {
+              this.results = rows;
+            }
+            // 续拉时返回条数不足一页视为已加载完，停止触发并提示没有更多
+            // （首页不足一页属正常小数据量，不显示提示）
+            if (this.lazyEnabled && append && rows.length < this.pageSize) {
+              this.lazyFinished = true;
+            }
           }
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.isLoading = false;
         });
     },
+    /**
+     * 懒加载：滚动到底部时加载下一页（由内部无限滚动触发，带防重入守卫）
+     * 本地懒加载为同步切片追加，url 懒加载为异步续拉请求
+     */
+    loadMoreOptions() {
+      if (!this.lazyEnabled || this.isLoading || this.lazyFinished) return;
+      if (this.localLazyEnabled) {
+        this.lazyPageNum += 1;
+        this.applyLocalLazySlice();
+      } else {
+        this.getData({ append: true });
+      }
+    },
+    /**
+     * 本地懒加载：按当前 lazyPageNum 对 data 做切片渲染（0 ~ pageNum*pageSize），
+     * 翻过页且切到末尾时置 lazyFinished 停止触发并显示没有更多提示
+     * （首页即覆盖全量属正常小数据量，不置位不提示）
+     */
+    applyLocalLazySlice() {
+      const list = this.data || [];
+      const end = this.lazyPageNum * this.pageSize;
+      this.results = list.slice(0, end);
+      if (this.lazyPageNum > 1 && end >= list.length) {
+        this.lazyFinished = true;
+      }
+    },
     handleComposition(event) {
       const text = event.target.value;
       if (event.type === 'compositionend') {

package/packages/switch/src/switch.vue

@@ -361,7 +361,10 @@ export default {
     if (this.activeColor || this.inactiveColor) {
       this.setBackgroundColor();
     }
-    this.$refs.input.checked = this.checked;
+    // 只读态下内部 input 被 v-if 移除，需防护
+    if (this.$refs.input) {
+      this.$refs.input.checked = this.checked;
+    }
   }
 };
 </script>

package/packages/table/src/table-column.js

@@ -30,7 +30,13 @@ export default {
     labelKey: String,
     valueKey: String,
     icon: String,
-    button: [String, Object],
+    /**
+     * 表头按钮配置
+     * @type {String|Object|Array}
+     * @description String 渲染文字按钮；Object 渲染图标按钮（icon/type/class/nativeType/event）；
+     *   Array 渲染多个按钮，每项结构同 String/Object，Object 项的 event 回调签名为 ('', column, $event)
+     */
+    button: [String, Object, Array],
     className: String,
     labelClassName: String,
     property: String,

package/packages/table/src/table-header.js

@@ -723,28 +723,73 @@ export default {
      * @param {Function} h - Vue渲染函数
      * @param {Object} column - 列配置
      * @returns {VNode|null} 渲染结果
+     * @description button 支持 String（文字按钮）/ Object（图标按钮）/
+     *   Array（多个按钮，每项结构同 String/Object，Object 项可配置各自的 event 回调）
      */
     _renderColumnButton(h, column) {
       if (!column.button) return null;
 
-      if (typeof column.button === 'string') {
+      // 数组配置：渲染多个按钮
+      if (Array.isArray(column.button)) {
+        if (!column.button.length) return null;
+        return (
+          <span class="es-table__column-buttons">
+            {column.button.map((item, index) =>
+              this._renderOneHeaderButton(h, column, item, index)
+            )}
+          </span>
+        );
+      }
+
+      return this._renderOneHeaderButton(h, column, column.button, 0);
+    },
+
+    /**
+     * 渲染单个表头按钮
+     * @private
+     * @param {Function} h - Vue渲染函数
+     * @param {Object} column - 列配置
+     * @param {String|Object} button - 按钮配置
+     * @param {number} index - 数组配置时的序号（用作 key）
+     * @returns {VNode|null} 渲染结果
+     */
+    _renderOneHeaderButton(h, column, button, index) {
+      if (!button) return null;
+
+      // 数组配置的按钮优先执行各自的 event 回调，其余走原表头点击链路
+      const onClick = ($event) => {
+        if (
+          Array.isArray(column.button) &&
+          typeof button === 'object' &&
+          typeof button.event === 'function'
+        ) {
+          $event.stopPropagation();
+          button.event('', column, $event);
+          return;
+        }
+        this.handleHeaderClick($event, column);
+      };
+
+      if (typeof button === 'string') {
         return (
           <es-button
+            key={index}
             size="mini"
             native-type="button"
-            on-click={($event) => this.handleHeaderClick($event, column)}
-          >{column.button}
+            on-click={onClick}
+          >{button}
           </es-button>
         );
       }
 
       return (
         <es-button
-          class={[column.button.icon || column.icon, column.button.class]}
-          type={column.button.type}
-          native-type={column.button.nativeType || 'button'}
+          key={index}
+          class={[button.icon || column.icon, button.class]}
+          type={button.type}
+          native-type={button.nativeType || 'button'}
           size="mini"
-          on-click={($event) => this.handleHeaderClick($event, column)}
+          on-click={onClick}
         >
         </es-button>
       );

package/packages/table/src/util.js

@@ -1013,11 +1013,13 @@ export function renderDom(h, { type, data, optionData, config = {}, events = {}
         }
       });
     case 'handle':
+      console.log('handle', data);
       // const contents = events.filter((item) => item.rules && typeof item.rules === 'function' ? item.rules(data.row) : true);
       return h('es-button-group', {
         class: className,
         props: {
           data: data.row,
+          rowData: data,
           size: 'mini',
           type: 'text',
           stop: true,
@@ -1030,6 +1032,7 @@ export function renderDom(h, { type, data, optionData, config = {}, events = {}
         class: className,
         props: {
           param: data.row,
+          rowData: data,
           size: 'mini',
           stop: true,
           ...configs

package/packages/tag/src/tag.vue

@@ -16,6 +16,8 @@ export default {
     closable: Boolean,
     /**
      * 类型
+     * @description 可选值：success / info / warning / danger / purple，
+     *   不填为默认蓝色主题；配合 effect（light/dark/plain，默认 light）使用
      */
     type: String,
     /**

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

@@ -278,3 +278,10 @@ table {
   position: relative;
   text-align: left;
 }
+// 多行文本（textarea）只读态：还原空格与换行格式，样式对齐文本域
+.es-field-readonly--textarea {
+  white-space: pre-wrap;
+  word-break: break-all;
+  line-height: 1.5;
+  padding: 5px 15px;
+}

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

@@ -5,8 +5,20 @@
     color: transparent;
   }
   @include when(readonly) {
-    .es-input__inner {
+    .es-field-readonly {
+      position: relative;
       z-index: -1;
+      color: transparent;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #fff;
+        border-radius: 6px;
+      }
     }
   }
   @include when(focused) {

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

@@ -169,11 +169,10 @@
     }
   }
 
-  th.es-table__cell.is-leaf,
+  th.es-table__cell,
   td.es-table__cell {
     border-bottom: $--table-border;
   }
-
   th.es-table__cell.is-sortable {
     cursor: pointer;
   }
@@ -638,4 +637,15 @@
       margin-right: 3px;
     }
   }
+
+  // 表头 button 配置为数组时的多按钮容器：按钮间留间距、整体与标题垂直对齐
+  .es-table__column-buttons {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+
+    .es-button + .es-button {
+      margin-left: 5px;
+    }
+  }
 }