eoss 0.1.0-alpha.47 → 0.1.0-alpha.49

package/packages/table/src/table.vue

@@ -114,7 +114,7 @@
       </table-footer>
     </div>
     <div
-      v-if="fixedColumns.length > 0 && !dragSort"
+      v-if="fixedColumns.length > 0 && !dragEnabled"
       v-mousewheel="handleFixedMousewheel"
       class="es-table__fixed"
       ref="fixedWrapper"
@@ -212,7 +212,7 @@
       </div>
     </div>
     <div
-      v-if="rightFixedColumns.length > 0 && !dragSort"
+      v-if="rightFixedColumns.length > 0 && !dragEnabled"
       v-mousewheel="handleFixedMousewheel"
       class="es-table__fixed-right"
       ref="rightFixedWrapper"
@@ -666,17 +666,6 @@ export default {
      * @default 'auto'
      */
     tooltipWidth: { type: String, default: 'auto' },
-    /**
-     * 是否开启拖拽排序
-     * @type {Boolean}
-     * @default false
-     */
-    dragSort: Boolean,
-    /**
-     * 拖拽排序的类名
-     * @type {String}
-     */
-    dragSortClass: String,
     /**
      * 无限滚动的回调方法
      * @type {Function}
@@ -785,13 +774,7 @@ export default {
       return this.footerHeight || this.layout.footerHeight;
     },
     scrollStyle() {
-      const {
-        gutterWidth,
-        headerHeight = 0,
-        footerHeight = 0,
-        scrollX,
-        scrollY
-      } = this.layout;
+      const { headerHeight = 0, footerHeight = 0 } = this.layout;
       let height = 0;
       let maxHeight = 0;
       if (this.height) {
@@ -805,15 +788,14 @@ export default {
           footerHeight -
           (this.showHeader ? headerHeight : 0);
       }
+      // 美化滚动条时原生条已由 CSS 隐藏（见 table.scss），不占位也就无需
+      // 按条宽加宽/加高容器；此前的 calc(100% + gutterWidth) 在浏览器缩放时
+      // 和实际条宽对不上，容器右、下两侧会露出一条灰边
       return {
-        width:
-          gutterWidth && scrollY ? `calc(100% + ${gutterWidth}px)` : '100%',
-        height:
-          height && gutterWidth
-            ? height + (scrollX ? gutterWidth : 0) + 'px'
-            : '100%',
+        width: '100%',
+        height: height ? height + 'px' : '100%',
         maxHeight: maxHeight ? maxHeight + 'px' : '',
-        'overflow-x': height && gutterWidth ? '' : 'hidden'
+        'overflow-x': height ? '' : 'hidden'
       };
     },
     fixedBodyHeight() {
@@ -884,6 +866,27 @@ export default {
       rightFixedColumns: 'rightFixedColumns'
     }),
 
+    /**
+     * 是否开启行拖拽排序：有 type 为 drag 的列即开启，
+     * 该列自己渲染拖拽手柄图标（见 config.js 的 cellForced.drag）
+     * @returns {Boolean}
+     */
+    dragEnabled() {
+      return this.columns.some((column) => column.type === 'drag');
+    },
+
+    /**
+     * 是否同时配了拖拽排序和固定列：两者互斥（开启拖拽后固定层不渲染），
+     * 用于给一次显式告警，避免 fixed 静默失效
+     * @returns {Boolean}
+     */
+    dragFixedConflict() {
+      return (
+        this.dragEnabled &&
+        (this.fixedColumns.length > 0 || this.rightFixedColumns.length > 0)
+      );
+    },
+
     // 优化类名绑定，提高模板可读性
     getTableClasses() {
       const { isComplex, data } = this.store.states;
@@ -907,6 +910,24 @@ export default {
   },
 
   watch: {
+    dragFixedConflict: {
+      immediate: true,
+      handler(val) {
+        // 固定列靠另一张浮层表渲染，Sortable 只挪主表的行，两者没法共存；
+        // 冲突时告警一次，避免消费方配了 fixed 却发现不生效又查不到原因
+        if (
+          val &&
+          process.env.NODE_ENV !== 'production' &&
+          !this._dragFixedWarned
+        ) {
+          this._dragFixedWarned = true;
+          console.warn(
+            '[Warn][Table]存在 type 为 drag 的列时开启行拖拽排序，左右固定列不会渲染，fixed 不生效'
+          );
+        }
+      }
+    },
+
     // 优化高度变化监听，使用防抖减少频繁更新
     height: {
       immediate: true,

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

@@ -5,4 +5,8 @@
   @include m(main) {
     height: auto !important;
   }
+  @include e(sizer-btn) {
+    padding-top: 12px;
+    text-align: right;
+  }
 }

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

@@ -55,6 +55,9 @@
     width: 100%;
     height: 100%;
     overflow-x: hidden;
+    // 这个容器在非 inline/accordion 时自身滚动，原生条用 CSS 隐藏（不占位），
+    // 取代原先按条宽加宽容器的做法，缩放时才不会露出灰边
+    @include utils-hide-scrollbar;
   }
 
   @include b(form-content) {

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

@@ -159,7 +159,7 @@
     transition: all 0.3s;
     pointer-events: none;
     z-index: 2;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
   }
@@ -196,7 +196,7 @@
       margin-left: 4px;
     }
 
-    &:after {
+    &::after {
       content: '';
       height: 100%;
       width: 0;

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

@@ -58,8 +58,11 @@
     }
   }
 }
+// 菜单容器自己滚动，原生条用 CSS 隐藏（不占位），取代原先 styles 里
+// calc(100% + 条宽) 的推出补偿，缩放时才不会露出灰边
 @include b(menu-container) {
   overflow: hidden;
+  @include utils-hide-scrollbar;
 }
 @include b(menu-scrollbar) {
   min-width: 200px;
@@ -437,8 +440,13 @@
   overflow: hidden;
   box-shadow: $--box-shadow-light;
   border-radius: $--border-radius-base;
+  // popup 菜单限高后靠这个 ul 自己滚动，原生条用 CSS 隐藏（不占位），
+  // 取代原先 marginRight: -条宽 的抵消做法（缩放时实际条宽小于抵消量，
+  // popup 右/下侧会露出灰边）
   & > .es-menu--popup {
     overflow-y: auto;
+
+    @include utils-hide-scrollbar;
   }
 }
 .horizontal-collapse-transition .es-submenu__title .es-submenu__icon-arrow {

package/packages/theme-chalk/src/mixins/function.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
 @use 'sass:string';
+@use 'sass:math';
 
 @import 'config.scss';
 
@@ -85,25 +86,73 @@
 
 /* Custom mix function for CSS variables
  -------------------------- */
+$_hex-digits: '0123456789abcdef';
+
+/* 解析 hex 串中第 $i、$i+1 位（1 起）组成的字节值 */
+@function hex-pair($hex, $i) {
+  $d1: string.index($_hex-digits, string.slice($hex, $i, $i)) - 1;
+  $d2: string.index($_hex-digits, string.slice($hex, $i + 1, $i + 1)) - 1;
+  @return $d1 * 16 + $d2;
+}
+
+/* 编译期按权重混合两个 hex 串（$weight 为 $hex1 占比），返回 hex 串；
+   供主题变量场景产出回退色，sass 原生 mix 吃不了字符串 */
+@function mix-hex($hex1, $hex2, $weight) {
+  $hex1: string.to-lower-case('#{$hex1}');
+  $hex2: string.to-lower-case('#{$hex2}');
+  @if string.slice($hex1, 1, 1) == '#' {
+    $hex1: string.slice($hex1, 2);
+  }
+  @if string.slice($hex2, 1, 1) == '#' {
+    $hex2: string.slice($hex2, 2);
+  }
+  $w: math.div($weight, 1%);
+  $out: '#';
+  @for $i from 0 to 3 {
+    $p: 1 + $i * 2;
+    $v1: hex-pair($hex1, $p);
+    $v2: hex-pair($hex2, $p);
+    $v: math.round(math.div($v1 * $w + $v2 * (100 - $w), 100));
+    $hi: math.floor(math.div($v, 16));
+    $lo: $v % 16;
+    $out: '#{$out}#{string.slice($_hex-digits, $hi + 1, $hi + 1)}#{string.slice($_hex-digits, $lo + 1, $lo + 1)}';
+  }
+  @return $out;
+}
+
 @function custom-mix($color1, $color2, $weight: 50%) {
   // 提取默认颜色
   $color1-extracted: extract-default-color($color1);
   $color2-extracted: extract-default-color($color2);
 
-  // 如果提取后仍然是字符串（非CSS颜色值），直接返回
-  @if type-of($color1-extracted) ==
-    'string' or
-    type-of($color2-extracted) ==
+  // 两边都是实色时走原生 mix
+  @if type-of($color1-extracted) !=
+    'string' and
+    type-of($color2-extracted) !=
     'string'
   {
-    // 如果第二个颜色是CSS变量，返回第二个颜色
-    @if type-of($color2) == 'string' and string.index($color2, 'var(') != null {
-      @return $color2;
-    }
-    // 否则返回第一个颜色
-    @return $color1;
+    @return color.mix($color1-extracted, $color2-extracted, $weight);
   }
 
-  // 使用原生mix函数混合颜色
-  @return color.mix($color1-extracted, $color2-extracted, $weight);
+  // 主题变量场景：编译期用默认色混出回退值，
+  // 不能直接返回原色（plain 背景会塌成主色自身，与文字同色）
+  $fallback: mix-hex($color1-extracted, $color2-extracted, $weight);
+
+  // 白 × 主题主色 的淡色：接 updateTheme 运行时设置的色板变量。
+  // 色板编号是 ant 式：1-5 浅色阶、6 基色、7-10 深色阶，
+  // 白混比例到浅色阶位置对应为 90%→1 … 50%→5，超出范围只落回退值
+  @if type-of($color2) ==
+    'string' and
+    string.index($color2, 'var(') !=
+    null and
+    string.index('#{$color1-extracted}', 'ffffff') !=
+    null
+  {
+    $level: 10 - math.div($weight, 10%);
+    @if $level >= 1 and $level <= 5 and math.round($level) == $level {
+      $varname: string.slice($color2, 5, string.index($color2, ',') - 1);
+      @return string.unquote('var(#{$varname}-light-#{$level}, #{$fallback})');
+    }
+  }
+  @return string.unquote($fallback);
 }

package/packages/theme-chalk/src/mixins/utils.scss

@@ -37,3 +37,15 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+// 隐藏原生滚动条，三端各一条：关键是让它不占位。
+// 只有不占位，才不需要用 calc(100% + 滚动条宽) 把原生条推出容器；
+// 那种补偿按固定 15px 算，浏览器缩放时实际条宽会变小，容器右/下边就露出灰边。
+@mixin utils-hide-scrollbar {
+  -ms-overflow-style: none; // IE10/11、Edge Legacy
+  scrollbar-width: none; // Firefox
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}

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

@@ -1,4 +1,5 @@
 @import 'mixins/mixins.scss';
+@import 'mixins/utils.scss';
 @import 'common/var.scss';
 
 @include b(scrollbar) {
@@ -15,14 +16,12 @@
   }
 
   @include e(wrap) {
+    height: 100%;
     overflow: scroll;
 
     @include m(hidden-default) {
-      scrollbar-width: none;
-      &::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-      }
+      // 原生条不占位，也就不需要 JS 做 gutter 补偿（缩放时那条灰边的根源）
+      @include utils-hide-scrollbar;
     }
     @include e(view) {
       &.is-infinite-scroll {

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

@@ -1,5 +1,6 @@
 @import 'common/var.scss';
 @import './mixins/mixins.scss';
+@import './mixins/utils.scss';
 
 @include b(selector) {
   width: 100%;
@@ -29,7 +30,8 @@
   .es-input__clear {
     position: absolute;
     left: -24px;
-    margin-top: 1px;
+    top: 50%;
+    margin-top: -17px;
   }
   .es-input__inner {
     border: 0;
@@ -73,6 +75,9 @@
     }
     @include m(wrapper) {
       padding: 12px 12px 8px 12px;
+      // 限高时这个内层容器自身滚动，原生条靠 CSS 隐藏（不占位），
+      // 取代原先 tagsStyle 里 calc(100% + 条宽) 的推出补偿
+      @include utils-hide-scrollbar;
       & > span {
         padding-top: 4px;
       }

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

@@ -1,4 +1,5 @@
 @import 'mixins/mixins.scss';
+@import 'mixins/utils.scss';
 @import 'checkbox.scss';
 @import 'tag.scss';
 @import 'tooltip.scss';
@@ -67,6 +68,27 @@
     }
   }
 
+  // 拖拽排序列（type: 'drag'）
+  @include e(drag-column) {
+    .cell {
+      padding: 0;
+      text-align: center;
+    }
+  }
+
+  // 拖拽手柄图标，也是 Sortable 的 handle
+  @include e(drag-handle) {
+    cursor: move;
+    color: $--color-text-secondary;
+    font-size: 14px;
+
+    // rules 判定为不可拖、或行数据 fixed 为 true
+    @include when(disabled) {
+      color: $--color-text-placeholder;
+      cursor: not-allowed;
+    }
+  }
+
   @include e(expanded-cell) {
     background-color: $--color-white;
 
@@ -130,10 +152,21 @@
     }
     @include when(center) {
       text-align: center;
+
+      // 可编辑列的控件包在 es-form-item__content（display: flex）里，
+      // flex 子项不吃祖先的 text-align，align 会看着失效（控件贴左），
+      // 这里让对齐方式穿过这层容器
+      .es-form-item__content {
+        justify-content: center;
+      }
     }
 
     @include when(right) {
       text-align: right;
+
+      .es-form-item__content {
+        justify-content: flex-end;
+      }
     }
 
     &.gutter {
@@ -457,6 +490,13 @@
     overflow: auto;
     position: relative;
 
+    // 美化滚动条时（根节点带 .es-scrollbar）原生条由自定义 Bar 取代，
+    // 用 CSS 让它不占位；此前靠 scrollStyle 里的 calc(100% + 条宽) 把它推出
+    // 容器，缩放时实际条宽小于补偿量，右、下两侧会露出灰边
+    .es-table.es-scrollbar & {
+      @include utils-hide-scrollbar;
+    }
+
     // @include when(scrolling-none) {
     //   ~ .es-table__fixed,
     //   ~ .es-table__fixed-right {

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

@@ -1,4 +1,5 @@
 @import 'mixins/mixins.scss';
+@import 'mixins/utils.scss';
 @import 'common/var.scss';
 @import 'common/transition.scss';
 @import 'checkbox.scss';
@@ -24,10 +25,13 @@
     border-bottom: $--border-base;
   }
   @include e(view) {
-    $--scrollbar-width: var(--scrollbar-width);
     overflow: scroll;
-    width: calc(100% + #{$--scrollbar-width});
-    height: calc(100% + #{$--scrollbar-width});
+    width: 100%;
+    height: 100%;
+    // 树体自带限高时这个容器滚动，原生条用 CSS 隐藏（不占位），
+    // 取代原先按 --scrollbar-width 加宽/加高把它推出容器的做法，
+    // 缩放时实际条宽小于推出量，右、下两侧会露出灰边
+    @include utils-hide-scrollbar;
   }
   @include e(container) {
     display: inline-block;
@@ -137,9 +141,6 @@
     }
     & > label.es-radio {
       margin-right: 0;
-      .es-radio__input {
-        margin-top: 3px;
-      }
     }
     &:hover {
       background-color: $--tree-node-hover-background-color;

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

@@ -126,6 +126,11 @@
       }
     }
   }
+  // 限高时 body 里这个内层容器自身滚动，原生条靠 CSS 隐藏（不占位），
+  // 取代原先 barStyles 里 calc(100% + 条宽) 的推出补偿，缩放时不会露出灰边
+  .es-upload-lists__scroll {
+    @include utils-hide-scrollbar;
+  }
   @include e(drag-icon) {
     width: 36px;
     text-align: center;

package/packages/tree/src/tree.vue

@@ -76,11 +76,7 @@ import EsTreeNode from './tree-node.vue';
 import emitter from 'eoss/src/mixins/emitter';
 import { addClass, removeClass } from 'eoss/src/utils/dom';
 import Bar from 'eoss/src/components/bar';
-import {
-  getScrollbarWidth,
-  getScrollSize,
-  scrollMove
-} from 'eoss/src/utils/scrollbar';
+import { getScrollSize, scrollMove } from 'eoss/src/utils/scrollbar';
 import { throttle } from 'throttle-debounce';
 import { renderIcon } from 'eoss/src/utils/util';
 import Message from 'eoss/packages/message';
@@ -398,8 +394,7 @@ export default {
     },
     styles() {
       return {
-        height: this.height,
-        '--scrollbar-width': `${this.scrollbarWidth}px`
+        height: this.height
       };
     },
 
@@ -490,10 +485,6 @@ export default {
        * 当前选中节点的键值
        */
       currentKey: '',
-      /**
-       * 滚动条宽度
-       */
-      scrollbarWidth: 0,
       /**
        * 搜索配置
        */
@@ -586,8 +577,6 @@ export default {
   },
   created() {
     !this.lazy && this.getData();
-    // 计算并存储滚动条宽度，避免重复计算
-    this.scrollbarWidth = getScrollbarWidth();
     this.isTree = true;
 
     this.store = new TreeStore({

package/packages/upload/src/upload-list.vue

@@ -27,6 +27,7 @@
     </div>
     <div class="es-upload-lists__body" :style="styles">
       <div
+        class="es-upload-lists__scroll"
         :style="barStyles"
         ref="container"
         @scroll="handleScroll"
@@ -151,11 +152,7 @@
 import list from './list';
 import Sortable from 'sortablejs';
 import Bar from 'eoss/src/components/bar';
-import {
-  getScrollbarWidth,
-  getScrollSize,
-  scrollMove
-} from 'eoss/src/utils/scrollbar';
+import { getScrollSize, scrollMove } from 'eoss/src/utils/scrollbar';
 import { throttle } from 'throttle-debounce';
 
 import EsButtonGroup from 'eoss/packages/button-group';
@@ -223,12 +220,12 @@ export default {
     }
   },
   computed: {
+    // 列表容器自身滚动，原生条由 CSS 隐藏（见 upload.scss 的
+    // .es-upload-lists__scroll），不占位也就无需按条宽加宽容器把它推出去——
+    // 那样在浏览器缩放时量到的 15px 和实际渲染宽度对不上，右侧会露出一条灰边
     barStyles() {
-      // 优化：使用预计算的滚动条宽度，避免重复计算
       if (this.height && this.height !== 'auto') {
-        const barWidth = this.scrollbarWidth;
         return {
-          width: `calc(100% + ${barWidth}px)`,
           height: '100%',
           'overflow-y': 'scroll'
         };
@@ -251,7 +248,6 @@ export default {
   },
   data() {
     return {
-      scrollbarWidth: 0,
       moveTo: 0,
       barSize: 0
     };
@@ -260,7 +256,6 @@ export default {
     this.updated = throttle(300, () => this.getSize());
   },
   mounted() {
-    this.scrollbarWidth = getScrollbarWidth();
     if (this.dragSort && !this.disabled) {
       this.sortable = new Sortable(this.$refs.listContainer.$el, {
         animation: 150,

package/src/index.js

@@ -270,7 +270,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.1.0-alpha.47',
+  version: '0.1.0-alpha.49',
   install,
   CollapseTransition,
   Loading,

package/src/utils/popup/popup-manager.js

@@ -3,12 +3,27 @@ import { addClass, removeClass } from 'eoss/src/utils/dom';
 
 let hasModal = false;
 let hasInitZIndex = false;
-// 跨模块副本共享的 z-index 计数器宿主。
+// 跨模块副本、跨微前端沙箱共享的 z-index 计数器宿主。
 // 低代码等场景会用 eoss / eoss/src / eoss/packages 多种身份加载本文件，
-// 导致出现多份 PopupManager、各自从 2000 起算，出现“后弹出的层级反而比先弹出的小”。
-// 把计数器挂到全局，所有副本共用同一条单调递增序列。
-const globalScope =
-  typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : {};
+// 导致出现多份 PopupManager、各自从 2000 起算，出现“后弹出的层级反而比先弹出的小”；
+// wujie 下各沙箱 window 也各自持有计数器时，与主应用（及 eoss-element 的 _$zIndex）不互通，
+// 子应用弹窗层级会回落到小值被主应用遮罩盖住而“弹不出来”。
+// 把计数器以与 eoss-element 相同的键（_$zIndex）挂到顶层窗口，所有副本、沙箱共用同一条单调递增序列。
+const getGlobalScope = function() {
+  if (typeof window === 'undefined') {
+    return typeof global !== 'undefined' ? global : {};
+  }
+  let wind = window.__WUJIE_RAW_WINDOW__ || window;
+  try {
+    while (wind !== wind.parent && wind.parent.document) {
+      wind = wind.parent;
+    }
+  } catch (error) {
+    // 跨源父窗口时停在当前窗口（iframe 独立视口下计数器本就应各自独立）
+  }
+  return wind;
+};
+const globalScope = getGlobalScope();
 
 const getModal = function() {
   if (Vue.prototype.$isServer) return;
@@ -165,15 +180,15 @@ Object.defineProperty(PopupManager, 'zIndex', {
   configurable: true,
   get() {
     if (!hasInitZIndex) {
-      if (globalScope.__EOSS_ZINDEX__ === undefined) {
-        globalScope.__EOSS_ZINDEX__ = (Vue.prototype.$EOSS || {}).zIndex || 2000;
+      if (globalScope._$zIndex === undefined) {
+        globalScope._$zIndex = (Vue.prototype.$EOSS || {}).zIndex || 2000;
       }
       hasInitZIndex = true;
     }
-    return globalScope.__EOSS_ZINDEX__;
+    return globalScope._$zIndex;
   },
   set(value) {
-    globalScope.__EOSS_ZINDEX__ = value;
+    globalScope._$zIndex = value;
   }
 });