yc-pro-components 0.0.77 → 0.0.79

package/theme-chalk/src/table.scss

@@ -1,301 +1,315 @@
-@use 'mixins/config' as *;
-@use 'mixins/mixins' as *;
-@use 'mixins/function' as *;
-
-/* 宽松模式下表格行高固定为 50px（包含 padding） */
-.el-table--large {
-  .el-table__row {
-    td.el-table__cell {
-      height: 50px;
-      padding: 2px 0;
-    }
-  }
-}
-
-@include b(table) {
-  /* 自定义列栏 */
-  @include b(table-column) {
-    @include e(header) {
-      @include e(header__icon) {
-        margin-top: -2px;
-        margin-left: 2px;
-        vertical-align: middle;
-      }
-    }
-  }
-}
-
-/* 表头省略显示样式 - 独立定义确保选择器正确 */
-.plus-table-column__header--ellipsis {
-  display: block;
-  width: 100%;
-  overflow: hidden;
-
-  .plus-table-column__header-text {
-    display: block;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-/* 表头省略显示样式 - 独立定义确保选择器正确 */
-.plus-table-column__header--ellipsis {
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  gap: 2px;
-
-  .plus-table-column__header-text {
-    flex: 1 1 0;
-    min-width: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  /* tooltip 图标保持固定，不压缩 */
-  .plus-table-column__header__icon {
-    flex-shrink: 0;
-  }
-}
-
-@include b(table) {
-  /* 操作栏 */
-  @include b(table-action-bar) {
-    &.is-center {
-      .cell {
-        justify-content: center;
-      }
-    }
-    &.is-right {
-      .cell {
-        justify-content: flex-end;
-      }
-    }
-
-    &.#{$el-namespace + -table-fixed-column--right} {
-      background-color: getCssVar('bg-color');
-    }
-
-    .cell {
-      display: flex;
-      align-items: center;
-    }
-
-    @include e(dropdown__link) {
-      display: inline-flex;
-      cursor: pointer;
-      user-select: none;
-      color: getCssVar('color-primary');
-    }
-    @include e(more-text) {
-      margin-right: 2px;
-    }
-    @include e(column__link) {
-      margin-right: 10px;
-    }
-    @include e(dropdown) {
-      vertical-align: baseline;
-      cursor: pointer;
-      margin-left: 12px;
-    }
-    @include elb(link) {
-      & + .#{$el-namespace + -link} {
-        margin-left: 12px;
-      }
-    }
-    @include elb(icon) {
-      cursor: pointer;
-
-      & + .#{$el-namespace + -icon} {
-        margin-left: 12px;
-      }
-    }
-  }
-
-  /* 排序 */
-  @include b(table-column-drag-sort) {
-    @include b(table-column-drag-icon) {
-      cursor: move;
-      padding: 4px;
-      box-sizing: border-box;
-      font-size: 18px;
-    }
-  }
-
-  /* 序号栏 */
-  @include b(table-column-index) {
-    @include b(table-index-column) {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      word-break: keep-all;
-      white-space: nowrap;
-      width: 20px;
-      height: 20px;
-    }
-
-    .cell {
-      @include b(table-column-index__content) {
-        align-items: center;
-        display: flex;
-        justify-content: center;
-        overflow: hidden;
-      }
-    }
-  }
-
-  /*工具栏*/
-  @include b(table-title-bar) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-
-  @include e(toolbar) {
-    display: flex;
-    align-items: center;
-  }
-
-  @include elb(popper) {
-    max-width: 200px;
-  }
-}
-
-/* 密度设置 */
-@include b(table-title-bar__toolbar__density) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  @include elb(button) {
-    margin-top: 10px;
-    width: 80px;
-
-    & + .#{$el-namespace + -button} {
-      margin-left: 0;
-    }
-  }
-}
-
-@include b(table-title-bar__toolbar__icon) {
-  margin-left: 10px;
-  vertical-align: middle;
-  cursor: pointer;
-  color: getCssVar('text-color-regular');
-}
-/* 列设置 */
-@include b(table-title-bar__toolbar__checkbox__item) {
-  margin-left: 6px;
-}
-/* 列设置列表区域 - 限制最大高度，超出滚动 */
-@include b(table-checkbox-sortable-list) {
-  max-height: 300px;
-  overflow-y: auto;
-}
-/* 列设置 拖拽 item */
-@include b(table-checkbox-item) {
-  display: flex;
-  align-items: center;
-  margin-left: 20px;
-}
-/* 列设置 拖拽handle  */
-@include b(table-checkbox-handle) {
-  font-size: 18px;
-  cursor: move;
-}
-
-@include b(table-ghost-class) {
-  padding: 0 5px;
-  border: 1px dashed getCssVar('color-primary');
-  background-color: #fff;
-}
-
-@include b(table-column__edit) {
-  cursor: pointer;
-}
-
-@include b(table-checkbox-checkAll) {
-  display: flex;
-  justify-content: space-between;
-}
-
-/* 树形表格展开/收起图标 */
-.el-table__expand-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  margin-right: 4px;
-  cursor: pointer;
-  transition: transform 0.2s ease-in-out;
-
-  // 隐藏默认的 Element Plus 箭头图标
-  .el-icon {
-    display: none;
-  }
-
-  // 使用 CDN 自定义图标
-  &::before {
-    content: '';
-    display: block;
-    width: 16px;
-    height: 16px;
-    background: url('https://staticcdn.jinbizhihui.com/images/saas-basic-platform/expand_collapse_v2.svg') center center no-repeat;
-    background-size: contain;
-    transition: transform 0.2s ease-in-out;
-  }
-
-  // 展开状态：旋转 -90 度（向下）
-  // &--expanded::before {
-  //   transform: rotate(-90deg);
-  // }
-}
-
-/* ==================== el-table 排序图标替换为 CDN 图标 ==================== */
-.el-table .caret-wrapper {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  vertical-align: middle;
-  cursor: pointer;
-
-  // 隐藏原有的升序/降序箭头图标，使用 mask 保留方向独立高亮。
-  .sort-caret {
-    position: static;
-    display: block;
-    width: 14px;
-    height: 7px;
-    border: none;
-    background-color: var(--el-text-color-placeholder);
-    -webkit-mask: url('https://staticcdn.jinbizhihui.com/images/saas-basic-platform/table_sort_icon.svg') center center no-repeat;
-    mask: url('https://staticcdn.jinbizhihui.com/images/saas-basic-platform/table_sort_icon.svg') center center no-repeat;
-    -webkit-mask-size: 14px 14px;
-    mask-size: 14px 14px;
-    transition: background-color 0.2s;
-  }
-
-  .ascending {
-    -webkit-mask-position: top center;
-    mask-position: top center;
-  }
-
-  .descending {
-    -webkit-mask-position: bottom center;
-    mask-position: bottom center;
-  }
-}
-
-// 升序/降序激活状态只高亮对应方向。
-.el-table .ascending .sort-caret.ascending,
-.el-table .descending .sort-caret.descending {
-  background-color: var(--el-color-primary);
-}
+@use 'mixins/config' as *;
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+/* 宽松模式下表格行高固定为 50px（包含 padding） */
+.el-table--large {
+  .el-table__row {
+    td.el-table__cell {
+      height: 50px;
+      padding: 2px 0;
+    }
+  }
+}
+
+@include b(table) {
+  /* 横向滚动条 Tooltip 热区扩大，便于 hover 触发 */
+  .#{$el-namespace + -scrollbar__bar}.is-horizontal.plus-table__scrollbar-tooltip-target {
+    cursor: pointer;
+
+    &::before {
+      position: absolute;
+      top: -6px;
+      right: 0;
+      bottom: -6px;
+      left: 0;
+      content: '';
+    }
+  }
+
+  /* 自定义列栏 */
+  @include b(table-column) {
+    @include e(header) {
+      @include e(header__icon) {
+        margin-top: -2px;
+        margin-left: 2px;
+        vertical-align: middle;
+      }
+    }
+  }
+}
+
+/* 表头省略显示样式 - 独立定义确保选择器正确 */
+.plus-table-column__header--ellipsis {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+
+  .plus-table-column__header-text {
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+/* 表头省略显示样式 - 独立定义确保选择器正确 */
+.plus-table-column__header--ellipsis {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  gap: 2px;
+
+  .plus-table-column__header-text {
+    flex: 1 1 0;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* tooltip 图标保持固定，不压缩 */
+  .plus-table-column__header__icon {
+    flex-shrink: 0;
+  }
+}
+
+@include b(table) {
+  /* 操作栏 */
+  @include b(table-action-bar) {
+    &.is-center {
+      .cell {
+        justify-content: center;
+      }
+    }
+    &.is-right {
+      .cell {
+        justify-content: flex-end;
+      }
+    }
+
+    &.#{$el-namespace + -table-fixed-column--right} {
+      background-color: getCssVar('bg-color');
+    }
+
+    .cell {
+      display: flex;
+      align-items: center;
+    }
+
+    @include e(dropdown__link) {
+      display: inline-flex;
+      cursor: pointer;
+      user-select: none;
+      color: getCssVar('color-primary');
+    }
+    @include e(more-text) {
+      margin-right: 2px;
+    }
+    @include e(column__link) {
+      margin-right: 10px;
+    }
+    @include e(dropdown) {
+      vertical-align: baseline;
+      cursor: pointer;
+      margin-left: 12px;
+    }
+    @include elb(link) {
+      & + .#{$el-namespace + -link} {
+        margin-left: 12px;
+      }
+    }
+    @include elb(icon) {
+      cursor: pointer;
+
+      & + .#{$el-namespace + -icon} {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  /* 排序 */
+  @include b(table-column-drag-sort) {
+    @include b(table-column-drag-icon) {
+      cursor: move;
+      padding: 4px;
+      box-sizing: border-box;
+      font-size: 18px;
+    }
+  }
+
+  /* 序号栏 */
+  @include b(table-column-index) {
+    @include b(table-index-column) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      word-break: keep-all;
+      white-space: nowrap;
+      width: 20px;
+      height: 20px;
+    }
+
+    .cell {
+      @include b(table-column-index__content) {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        overflow: hidden;
+      }
+    }
+  }
+
+  /*工具栏*/
+  @include b(table-title-bar) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  @include e(toolbar) {
+    display: flex;
+    align-items: center;
+  }
+
+  @include elb(popper) {
+    max-width: 200px;
+  }
+}
+
+/* 密度设置 */
+@include b(table-title-bar__toolbar__density) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include elb(button) {
+    margin-top: 10px;
+    width: 80px;
+
+    & + .#{$el-namespace + -button} {
+      margin-left: 0;
+    }
+  }
+}
+
+@include b(table-title-bar__toolbar__icon) {
+  margin-left: 10px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: getCssVar('text-color-regular');
+}
+/* 列设置 */
+@include b(table-title-bar__toolbar__checkbox__item) {
+  margin-left: 6px;
+}
+/* 列设置列表区域 - 限制最大高度，超出滚动 */
+@include b(table-checkbox-sortable-list) {
+  max-height: 300px;
+  overflow-y: auto;
+}
+/* 列设置 拖拽 item */
+@include b(table-checkbox-item) {
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+}
+/* 列设置 拖拽handle  */
+@include b(table-checkbox-handle) {
+  font-size: 18px;
+  cursor: move;
+}
+
+@include b(table-ghost-class) {
+  padding: 0 5px;
+  border: 1px dashed getCssVar('color-primary');
+  background-color: #fff;
+}
+
+@include b(table-column__edit) {
+  cursor: pointer;
+}
+
+@include b(table-checkbox-checkAll) {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* 树形表格展开/收起图标 */
+.el-table__expand-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  cursor: pointer;
+  transition: transform 0.2s ease-in-out;
+
+  // 隐藏默认的 Element Plus 箭头图标
+  .el-icon {
+    display: none;
+  }
+
+  // 使用 CDN 自定义图标
+  &::before {
+    content: '';
+    display: block;
+    width: 16px;
+    height: 16px;
+    background: url('https://staticcdn.jinbizhihui.com/images/saas-basic-platform/expand_collapse_v2.svg') center center no-repeat;
+    background-size: contain;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  // 展开状态：旋转 -90 度（向下）
+  // &--expanded::before {
+  //   transform: rotate(-90deg);
+  // }
+}
+
+/* ==================== el-table 排序图标替换为 CDN 图标 ==================== */
+.el-table .caret-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  vertical-align: middle;
+  cursor: pointer;
+
+  // 隐藏原有的升序/降序箭头图标，使用 mask 保留方向独立高亮。
+  .sort-caret {
+    position: static;
+    display: block;
+    width: 14px;
+    height: 7px;
+    border: none;
+    background-color: var(--el-text-color-placeholder);
+    -webkit-mask: url('https://staticcdn.jinbizhihui.com/images/saas-basic-platform/table_sort_icon.svg') center center no-repeat;
+    mask: url('https://staticcdn.jinbizhihui.com/images/saas-basic-platform/table_sort_icon.svg') center center no-repeat;
+    -webkit-mask-size: 14px 14px;
+    mask-size: 14px 14px;
+    transition: background-color 0.2s;
+  }
+
+  .ascending {
+    -webkit-mask-position: top center;
+    mask-position: top center;
+  }
+
+  .descending {
+    -webkit-mask-position: bottom center;
+    mask-position: bottom center;
+  }
+}
+
+// 升序/降序激活状态只高亮对应方向。
+.el-table .ascending .sort-caret.ascending,
+.el-table .descending .sort-caret.descending {
+  background-color: var(--el-color-primary);
+}