eoss 0.1.0-alpha.21 → 0.1.0-alpha.23

package/packages/select/src/select.vue

@@ -137,6 +137,7 @@
           v-if="suffix"
           class="es-input__suffix-button"
           v-bind="suffix"
+          @click.stop="handleSuffixClick"
         ></es-button>
       </template>
     </es-input>
@@ -1682,6 +1683,10 @@ export default {
         return processedValue.join(this.decollator);
       }
       return value;
+    },
+    handleSuffixClick() {
+      this.visible = false;
+      this.$emit('suffix-click');
     }
   },
 

package/packages/selector/src/selector.vue

@@ -58,22 +58,42 @@
       ref="tags"
       class="es-selector__tags"
       :class="{ 'es-selector-edit': !readonly }"
+      :style="styles"
     >
-      <transition-group>
-        <es-tag
-          v-for="(item, index) in selected"
-          :key="getValueKey(item)"
-          :closable="!_disabled && !readonly && selected.length > min"
-          type="info"
-          disable-transitions
-          @close="deleteTag($event, item, index)"
-        >
-          <span class="es-select__tags-text">{{ getLabel(item) }}</span>
-        </es-tag>
-      </transition-group>
+      <div
+        class="es-selector__tags--wrapper"
+        ref="tagsWrapper"
+        :style="tagsStyle"
+        @scroll="handleScroll"
+        @wheel="handleWheel"
+      >
+        <transition-group>
+          <es-tag
+            v-for="(item, index) in selected"
+            :key="getValueKey(item)"
+            :closable="!_disabled && !readonly && selected.length > min"
+            type="info"
+            disable-transitions
+            @close="deleteTag($event, item, index)"
+          >
+            <span class="es-select__tags-text">{{ getLabel(item) }}</span>
+          </es-tag>
+        </transition-group>
+      </div>
+      <bar
+        v-if="barSize"
+        vertical
+        :style="{
+          top: '2px',
+          bottom: '2px'
+        }"
+        :move="moveTo"
+        :size="barSize"
+      ></bar>
     </div>
     <es-dialog
       v-if="!readonly"
+      class="es-selector-dialog"
       :title="title"
       :visible.sync="visible"
       :width="width"
@@ -81,7 +101,6 @@
       :css="false"
       :append-to-body="true"
       :close-on-click-modal="false"
-      class="es-selector-dialog"
     >
       <es-selector-panel
         v-if="isReset"
@@ -110,8 +129,7 @@ import {
   indexOfObj,
   arrUnique,
   isExist,
-  getTypePrefix,
-  error
+  getTypePrefix
 } from 'eoss/src/utils/util.js';
 import { isObject } from 'eoss/src/utils/types.js';
 import { getSelectorOrgDetail, getSysParam } from 'eoss/src/config/api.js';
@@ -169,6 +187,16 @@ import { getStorage } from 'eoss/src/utils/storage';
  * @events {Function} tabs-change - 标签切换时触发
  * @events {Function} clear - 清空时触发
  */
+import Bar from 'eoss/src/components/bar';
+import {
+  addResizeListener,
+  removeResizeListener
+} from 'eoss/src/utils/resize-event';
+import {
+  getScrollbarWidth,
+  getScrollSize,
+  scrollMove
+} from 'eoss/src/utils/scrollbar';
 export default {
   name: 'EsSelector',
   inheritAttrs: false,
@@ -181,7 +209,16 @@ export default {
     }
   },
   directives: { Clickoutside },
+  components: {
+    Bar
+  },
   props: {
+    /**
+     * 结果展示面板最大高度
+     * @type {String}
+     * @default ''
+     */
+    maxHeight: [String, Number],
     /**
      * 是否显示三级公司（仅针对 types 包含'enterprise'）
      * @type {Boolean}
@@ -518,17 +555,39 @@ export default {
       visible: false,
       menuVisibleOnFocus: false,
       inputHovering: false,
-      styles: {},
+      //styles: {},
       words: '',
       minWidth: '',
       options: '',
       show: false,
       focus: false,
       reference: undefined,
-      timer: null
+      timer: null,
+      tagsHeight: 0,
+      moveTo: 0,
+      barSize: 0,
+      scrollbarWidth: 0
     };
   },
   computed: {
+    styles() {
+      return this.tagsHeight
+        ? { 'max-height': this.tagsHeight + 'px', overflow: 'hidden' }
+        : {};
+    },
+    tagsStyle() {
+      return this.tagsHeight
+        ? {
+            'max-height': this.tagsHeight + 'px',
+            overflowY: 'scroll',
+            width: `calc(100% + ${this.scrollbarWidth}px)`
+          }
+        : {};
+    },
+    // 滚动容器
+    bodyWrapper() {
+      return this.$refs.tagsWrapper;
+    },
     showButton() {
       return this.button !== false;
     },
@@ -632,6 +691,12 @@ export default {
       if (val) {
         this.getSysParam();
       }
+    },
+    maxHeight: {
+      immediate: true,
+      handler() {
+        this.getHeight();
+      }
     }
   },
   created() {
@@ -639,6 +704,7 @@ export default {
     this.mix && this.getSysParam();
   },
   mounted() {
+    this.scrollbarWidth = getScrollbarWidth();
     //this.resetInputHeight();
     if (this.filterable) {
       this.$nextTick(() => {
@@ -651,6 +717,15 @@ export default {
         this.openDialog();
       });
     }
+    // 监听父元素高度变化，自动重新计算展示高度
+    if (this.maxHeight === 'auto' && this.$el.parentNode) {
+      this.resizeParent = this.$el.parentNode;
+      this.handleParentResize = () => {
+        // 高度计算完成并应用到 DOM 后，再计算滚动条大小
+        this.getHeight(this.getSize);
+      };
+      addResizeListener(this.resizeParent, this.handleParentResize);
+    }
   },
   methods: {
     /**
@@ -815,6 +890,9 @@ export default {
       this.$emit('input', val);
       this.$emit('confirm', val, this.businessData);
       this.visible = false;
+      this.$nextTick(() => {
+        this.getSize();
+      });
     },
     handleClear() {
       this.$emit('input', []);
@@ -874,10 +952,62 @@ export default {
           ? res[this.labelKey]
           : res.label || res[this.valueKey])
       );
+    },
+    //  获取展示高度
+    getHeight(callback) {
+      if (!this.maxHeight) {
+        return;
+      }
+      if (this.maxHeight === 'auto') {
+        this.$nextTick(() => {
+          const inputHeight = this.$refs.reference.$el.offsetHeight || 0;
+          const height = this.$el.parentNode.offsetHeight;
+          const style = window.getComputedStyle(this.$el.parentNode);
+          const borderTop = parseFloat(style.borderTopWidth) || 0;
+          const borderBottom = parseFloat(style.borderBottomWidth) || 0;
+          const paddingTop = parseFloat(style.paddingTop) || 0;
+          const paddingBottom = parseFloat(style.paddingBottom) || 0;
+          this.tagsHeight =
+            height -
+            inputHeight -
+            borderTop -
+            borderBottom -
+            paddingTop -
+            paddingBottom;
+          // 必须等 tagsHeight 应用到 DOM 后再执行回调，不能挪到外层
+          typeof callback === 'function' && this.$nextTick(callback);
+        });
+      } else {
+        this.tagsHeight = parseInt(this.maxHeight, 10);
+      }
+    },
+    //  获取滚动条大小
+    getSize() {
+      if (this.$refs.tagsWrapper) {
+        const size = getScrollSize(this.$refs.tagsWrapper);
+        this.barSize = size.height;
+        return;
+      }
+      this.barSize = 0;
+    },
+    //  处理滚轮事件，阻止冒泡
+    handleWheel(e) {
+      this.barSize && e.stopPropagation();
+    },
+    //  处理滚动事件
+    handleScroll() {
+      const { x, y } = scrollMove(this.$refs.tagsWrapper);
+      this.moveTo = this.mode === 'horizontal' ? x : y;
     }
   },
   beforeDestroy() {
     this.$el.removeEventListener('keyup', this.doSearch);
+    // 移除父元素高度变化监听
+    if (this.resizeParent && this.handleParentResize) {
+      removeResizeListener(this.resizeParent, this.handleParentResize);
+      this.resizeParent = null;
+      this.handleParentResize = null;
+    }
     if (this.$refs.openDialog) {
       this.$refs.openDialog.$el.parentNode.removeEventListener('click', () => {
         this.openDialog();

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

@@ -11,6 +11,12 @@ body {
 }
 html,
 body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
 div,
 p,
 span,

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

@@ -2,6 +2,7 @@
 @import 'common/var.scss';
 @include b(checkbox-group) {
   text-align: left;
+  line-height: 1;
   @include when(separate) {
     @include b(checkbox-button) {
       & + .es-checkbox-button {

package/packages/theme-chalk/src/common/var.scss

@@ -245,7 +245,7 @@ $--font-color-base: #333333 !default;
 // 主要文字颜色
 $--font-color-primary: #333333 !default;
 // 次要文字颜色
-$--font-color-secondary: #666666 !default;
+$--font-color-secondary: #999999 !default;
 // 禁用文字颜色
 $--font-color-disable: rgba(209, 211, 219, 1) !default;
 // 边框颜色

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

@@ -6,8 +6,11 @@
   display: flex;
   flex-direction: column;
   padding-bottom: 12px;
-  justify-content: space-between;
+  //justify-content: space-between;
   padding: 20px;
+  .es-form-item {
+    margin-bottom: 16px !important;
+  }
   @include e(title) {
     font-size: 16px;
     line-height: 24px;
@@ -311,9 +314,9 @@
 .es-flow .form-left .es-form-item {
   margin-bottom: 22px !important;
 }
-.es-flow .es-info .es-form-item {
-  margin-bottom: 0px;
-}
+// .es-flow .es-info .es-form-item {
+//   margin-bottom: 0px;
+// }
 /* 设置滚动条的样式 */
 .es-flow .es-info::-webkit-scrollbar {
   width: 5px;

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

@@ -0,0 +1,141 @@
+@import 'mixins/mixins.scss';
+@import 'common/var.scss';
+
+// 组件样式
+@include b(flows) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 12px;
+  padding: 20px;
+  @include when(hide) {
+    padding: 0;
+  }
+  .es-form-item {
+    margin-bottom: 16px !important;
+  }
+  @include e(title) {
+    font-size: 16px;
+    line-height: 24px;
+    color: $--font-color-secondary;
+    padding-top: 4px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid $--border-color-base;
+    position: relative;
+    @include m(node-name) {
+      color: $--font-color-primary;
+    }
+    @include m(shrink) {
+      position: absolute;
+      right: 0;
+      font-size: 18px;
+      color: $--font-color-secondary;
+      padding: 0;
+      cursor: pointer;
+    }
+  }
+  @include e(sub-title) {
+    font-size: 16px;
+    line-height: 24px;
+    color: $--font-color-primary;
+  }
+  @include e(opinion) {
+    display: flex;
+    padding-top: 24px;
+    padding-bottom: 16px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  @include e(opinions) {
+    @include m(file) {
+      padding: 0;
+      border: 0;
+    }
+    @include m(group) {
+      position: relative;
+      .es-textarea {
+        .es-textarea__inner {
+          padding: 12px 16px 60px 16px;
+          &:focus {
+            box-shadow: none;
+          }
+        }
+        @include when(tips) {
+          .es-textarea__inner {
+            padding-bottom: 92px;
+          }
+        }
+      }
+      .es-form-item__label {
+        color: $--font-color-secondary;
+      }
+    }
+    @include m(group-assist) {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding: 0 16px 6px 16px;
+      .es-form-item {
+        margin-bottom: 0 !important;
+      }
+    }
+    @include m(tooltip) {
+      color: #b9bdc9;
+      padding-top: 8px;
+      padding-bottom: 9px;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    @include m(tooltip-label) {
+      float: left;
+    }
+    @include m(tooltip-content) {
+      margin-left: 84px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    @include m(tag-box) {
+      border-top: $--border-base;
+      padding-top: 6px;
+      .es-form-item__content {
+        padding-right: 40px;
+      }
+    }
+    @include m(edit) {
+      position: absolute;
+      right: 0;
+    }
+    @include m(tag) {
+      margin-right: 8px;
+      cursor: pointer;
+    }
+    @include m(dropdown) {
+      position: absolute;
+      right: 20px;
+    }
+    @include m(add-form) {
+      .es-form-content {
+        padding-top: 21px;
+      }
+    }
+    @include m(file) {
+      height: 100%;
+    }
+  }
+  @include e(message) {
+    padding-top: 24px;
+  }
+  @include e(start-flow) {
+    padding-top: 24px;
+    @include m(select) {
+      .es-form-item__label {
+        font-size: 16px;
+        padding-bottom: 16px;
+        &::before {
+          content: none !important;
+        }
+      }
+    }
+  }
+}

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

@@ -88,7 +88,7 @@
   display: inline-block;
   @include utils-clearfix;
   @include when(last) {
-    margin-bottom: 0;
+    margin-bottom: 0 !important;
   }
 
   & .es-form-item {

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

@@ -38,6 +38,7 @@
 @import "./empty.scss";
 @import "./flip.scss";
 @import "./flow.scss";
+@import "./flows.scss";
 @import "./flow-group.scss";
 @import "./form.scss";
 @import "./form-item.scss";

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

@@ -415,6 +415,7 @@
     padding: 0 20px;
     width: 1px;
     white-space: nowrap;
+    line-height: 1;
 
     &:focus {
       outline: none;

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

@@ -334,29 +334,20 @@
   }
   @include e(pages) {
     height: calc(100% - 32px);
-    .es-scrollbar.is-page {
-      height: calc(100% - 48px);
-    }
-    .es-scrollbar__view {
-      padding-right: 8px;
-      padding-left: 8px;
+    @include m(container) {
+      height: 100%;
+      &.is-page {
+        height: calc(100% - 48px);
+      }
     }
     @include m(item) {
-      height: 32px;
-      padding: 4px 8px;
+      flex: 1;
+      height: 100%;
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      cursor: pointer;
-      border-radius: 6px;
-      &:hover {
-        background-color: $--color-primary-light-1;
-      }
-      &.is-active {
-        background-color: $--color-primary-light-1;
-      }
     }
-    @include m(item-name) {
+    @include m(item-label) {
+      flex: 1;
       font-size: 14px;
       color: $--font-color-secondary;
     }
@@ -458,4 +449,16 @@
       gap: 10px;
     }
   }
+  @include e(authorize) {
+    height: 100%;
+    padding-bottom: 40px;
+    position: relative;
+    @include m(btn) {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      text-align: right;
+    }
+  }
 }

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

@@ -58,7 +58,9 @@
         }
       }
     }
-
+    & .es-input__suffix-button {
+      margin-left: 8px;
+    }
     &.is-disabled {
       & .es-input__inner {
         cursor: not-allowed;

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

@@ -11,7 +11,7 @@
     border: 0;
   }
   @include e(input) {
-    position: absolute;
+    position: absolute !important;
     top: 0;
     left: 0;
     z-index: -1;
@@ -50,7 +50,6 @@
   }
   @include e(tags) {
     max-width: 100%;
-    padding: 12px 12px 8px 12px;
     position: relative;
     &::before {
       content: '';
@@ -62,9 +61,16 @@
       right: 12px;
       top: 0;
     }
-
-    & > span {
-      padding-top: 4px;
+    &:hover {
+      .es-scrollbar__bar {
+        opacity: 1;
+      }
+    }
+    @include m(wrapper) {
+      padding: 12px 12px 8px 12px;
+      & > span {
+        padding-top: 4px;
+      }
     }
 
     .es-tag {

package/src/index.js

@@ -39,6 +39,7 @@ import EmailLogin from '../packages/email-login/index.js';
 import Empty from '../packages/empty/index.js';
 import Flip from '../packages/flip/index.js';
 import Flow from '../packages/flow/index.js';
+import Flows from '../packages/flows/index.js';
 import FlowGroup from '../packages/flow-group/index.js';
 import Form from '../packages/form/index.js';
 import FormItem from '../packages/form-item/index.js';
@@ -144,6 +145,7 @@ const components = [
   Empty,
   Flip,
   Flow,
+  Flows,
   FlowGroup,
   Form,
   FormItem,
@@ -242,7 +244,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.1.0-alpha.21',
+  version: '0.1.0-alpha.23',
   install,
   CollapseTransition,
   Loading,
@@ -285,6 +287,7 @@ export default {
   Empty,
   Flip,
   Flow,
+  Flows,
   FlowGroup,
   Form,
   FormItem,

package/src/utils/resize-event.js

@@ -9,6 +9,7 @@ const isServer = typeof window === 'undefined';
 const listenersMap = new WeakMap();
 const lastProcessedMap = new WeakMap();
 const animationFrameMap = new WeakMap();
+const pendingRetryMap = new WeakMap();
 const PROCESSING_DELAY = 100; // 增加处理延迟到100ms
 
 // 更安全的resize处理器，使用requestAnimationFrame和严格的频率控制
@@ -17,8 +18,15 @@ function safeResizeHandler(element) {
   const lastTime = lastProcessedMap.get(element) || 0;
   const listeners = listenersMap.get(element) || [];
 
-  // 如果距离上次处理不足 PROCESSING_DELAY 毫秒，则跳过
+  // 如果距离上次处理不足 PROCESSING_DELAY 毫秒，延迟重试，避免丢失最后一次变化
   if (now - lastTime < PROCESSING_DELAY) {
+    if (!pendingRetryMap.get(element)) {
+      pendingRetryMap.set(element, true);
+      setTimeout(() => {
+        pendingRetryMap.delete(element);
+        safeResizeHandler(element);
+      }, PROCESSING_DELAY);
+    }
     return;
   }
 
@@ -81,15 +89,21 @@ class CustomResizeObserver {
     const checkSize = () => {
       const rect = element.getBoundingClientRect();
       const currentSize = { width: rect.width, height: rect.height };
-      const lastSize = element.__lastSize || currentSize;
 
-      // 检查尺寸是否真的改变了
-      if (Math.abs(currentSize.width - lastSize.width) > 1 ||
-          Math.abs(currentSize.height - lastSize.height) > 1) {
+      // 首次检查时初始化基准尺寸，否则永远检测不到变化
+      if (!element.__lastSize) {
         element.__lastSize = currentSize;
+      } else {
+        const lastSize = element.__lastSize;
 
-        // 调用原始回调，但在更安全的上下文中
-        safeResizeHandler(element);
+        // 检查尺寸是否真的改变了
+        if (Math.abs(currentSize.width - lastSize.width) > 1 ||
+            Math.abs(currentSize.height - lastSize.height) > 1) {
+          element.__lastSize = currentSize;
+
+          // 调用原始回调，但在更安全的上下文中
+          safeResizeHandler(element);
+        }
       }
 
       // 继续下一次检查，但增加延迟