n20-common-lib 3.0.67 → 3.0.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.0.67",
+  "version": "3.0.68",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/css/table.scss

@@ -1,29 +1,31 @@
-/* v2 版本 TablePro 样式 - 使用独特前缀实现样式隔离 */
-.v2-table-pro-wrapper {
+/* v2 版本 TablePro 样式 - 兼容有wrapper和无wrapper的情况 */
+.v2-table-pro-wrapper,
+/* 兼容旧版本：直接在TablePro组件内的样式 */
+:where(.v2-table-pro-wrapper) * {
   /* Element UI 表格基础样式 */
-  .el-table--small {
+  & .el-table--small {
     font-size: 14px;
   }
 
-  .el-table--mini {
+  & .el-table--mini {
     font-size: 12px;
   }
 
-  .el-table th {
+  & .el-table th {
     font-weight: $--font-weight-primary;
   }
 
-  .el-table--small .el-table__cell {
+  & .el-table--small .el-table__cell {
     padding: 8px 0;
   }
 
-  .el-table .cell {
+  & .el-table .cell {
     padding-left: 8px;
     padding-right: 8px;
   }
 
-  .el-table--small,
-  .el-table--mini {
+  & .el-table--small,
+  & .el-table--mini {
     .el-table__cell {
       .el-button--text {
         padding-top: 2px;
@@ -36,7 +38,7 @@
     }
   }
 
-  .el-table--mini {
+  & .el-table--mini {
     .el-table__cell {
       padding: 2px 0;
 
@@ -53,7 +55,7 @@
   }
 
   /* Element UI 表格排序图标 */
-  .el-table {
+  & .el-table {
     .caret-wrapper {
       display: inline-flex;
       flex-direction: row-reverse;
@@ -101,11 +103,11 @@
   }
 
   /* 过滤器样式 */
-  .el-table-filter__bottom {
+  & .el-table-filter__bottom {
     text-align: center;
   }
 
-  .el-table__column-filter-trigger {
+  & .el-table__column-filter-trigger {
     height: 16px;
     line-height: 16px;
     vertical-align: middle;
@@ -118,19 +120,19 @@
     }
   }
 
-  .table-header-popover.el-popover {
+  & .table-header-popover.el-popover {
     padding: 16px;
   }
 
   /* 附件上传hover颜色 */
-  .base-table_default {
+  & .base-table_default {
     .el-table__body .hover-active:hover > td {
       background-color: #ff3c2f10 !important;
     }
   }
 
   /* vxe-table 样式 */
-  .vxe-table .vxe-cell--sort {
+  & .vxe-table .vxe-cell--sort {
     display: inline-flex !important;
     flex-direction: row-reverse !important;
     align-items: center !important;
@@ -150,84 +152,310 @@
       position: static;
     }
   }
-  .vxe-cell--wrapper {
+
+  & .vxe-cell--wrapper {
     justify-content: center !important;
   }
-  .vxe-header--row {
+
+  & .vxe-header--row {
     color: #333;
     background-color: #f5f5f5;
   }
 
-  .vxe-cell--filter .vxe-filter--btn {
+  & .vxe-cell--filter .vxe-filter--btn {
     color: #666;
     font-weight: $--font-weight-primary;
     cursor: pointer;
     font-size: 16px;
   }
 
-  .is--filter-active .vxe-cell--filter .vxe-filter--btn {
+  & .is--filter-active .vxe-cell--filter .vxe-filter--btn {
     color: $--color-primary;
   }
 
-  .is--filter-active .vxe-cell--title {
+  & .is--filter-active .vxe-cell--title {
     color: $--color-primary;
   }
 
-  .vxe-table--render-default.size--small {
+  & .vxe-table--render-default.size--small {
     font-size: 14px !important;
   }
 
-  .vxe-table--render-default.size--mini {
+  & .vxe-table--render-default.size--mini {
     font-size: 14px !important;
   }
 
-  .vxe-header--row th,
-  th.vxe-header--column {
+  & .vxe-header--row th,
+  & th.vxe-header--column {
     position: relative;
     font-weight: $--font-weight-primary;
   }
 
-  .vxe-table--tooltip-wrapper {
+  & .vxe-table--tooltip-wrapper {
     z-index: 9999 !important;
   }
 
-  .cell-default-set--
-    .vxe-table--body-wrapper
-    .vxe-body--row
-    .vxe-body--column
-    .vxe-cell
-    .vxe-cell--label:empty::before {
+  & .cell-default-set-- .vxe-table--body-wrapper .vxe-body--row .vxe-body--column .vxe-cell .vxe-cell--label:empty::before {
     content: '--';
   }
 
-  .n20-table-pro.vxe-table--render-default {
+  & .n20-table-pro.vxe-table--render-default {
     font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif !important;
     color: #333;
   }
 
-  .vxe-table-custom-wrap.vxe-body--column.col--ellipsis:not(.col--actived) > .vxe-cell,
-  .vxe-table--render-default .vxe-table-custom-wrap.vxe-footer--column.col--ellipsis:not(.col--actived) > .vxe-cell,
-  .vxe-table--render-default .vxe-table-custom-wrap.vxe-header--column.col--ellipsis:not(.col--actived) > .vxe-cell {
+  & .vxe-table-custom-wrap.vxe-body--column.col--ellipsis:not(.col--actived) > .vxe-cell,
+  & .vxe-table--render-default .vxe-table-custom-wrap.vxe-footer--column.col--ellipsis:not(.col--actived) > .vxe-cell,
+  & .vxe-table--render-default .vxe-table-custom-wrap.vxe-header--column.col--ellipsis:not(.col--actived) > .vxe-cell {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: wrap !important;
   }
 
-  .vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-body--column.col--ellipsis > .vxe-cell,
-  .vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-footer--column.col--ellipsis > .vxe-cell,
-  .vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-header--column.col--ellipsis > .vxe-cell {
+  & .vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-body--column.col--ellipsis > .vxe-cell,
+  & .vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-footer--column.col--ellipsis > .vxe-cell,
+  & .vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-header--column.col--ellipsis > .vxe-cell {
     max-height: 100%;
   }
 
-  .vxe-header--column {
+  & .vxe-header--column {
     .vxe-cell {
       justify-content: center !important;
     }
   }
 
-  .el-table th.el-table__cell > .cell {
+  & .el-table th.el-table__cell > .cell {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 }
+
+/* 为没有wrapper的旧版本组件添加兼容样式 - 全局作用域 */
+/* 这些样式会应用于所有TablePro组件，无论是否有wrapper */
+.el-table--small {
+  font-size: 14px;
+}
+
+.el-table--mini {
+  font-size: 12px;
+}
+
+.el-table th {
+  font-weight: $--font-weight-primary;
+}
+
+.el-table--small .el-table__cell {
+  padding: 8px 0;
+}
+
+.el-table .cell {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.el-table--small,
+.el-table--mini {
+  .el-table__cell {
+    .el-button--text {
+      padding-top: 2px;
+      padding-bottom: 2px;
+    }
+
+    .el-link {
+      line-height: initial;
+    }
+  }
+}
+
+.el-table--mini {
+  .el-table__cell {
+    padding: 2px 0;
+
+    .cell {
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+
+    .el-button--mini,
+    .el-link {
+      font-size: 12px;
+    }
+  }
+}
+
+/* Element UI 表格排序图标 */
+.el-table {
+  .caret-wrapper {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    vertical-align: middle;
+  }
+
+  .sort-caret.ascending,
+  .sort-caret.descending {
+    width: 8px;
+    height: 16px;
+    border: none;
+    font-style: normal;
+    position: static;
+
+    &:hover {
+      color: $--color-primary-light-6;
+    }
+
+    &:before {
+      content: '\e61c';
+      font-family: 'core-lib-iconfont';
+      font-size: 12px;
+      line-height: 12px;
+      position: relative;
+      right: 3px;
+      bottom: 1px;
+    }
+  }
+
+  .sort-caret.descending:before {
+    content: '\e61d';
+    position: relative;
+    right: 1px;
+    bottom: 1px;
+  }
+
+  .ascending .sort-caret.ascending,
+  .descending .sort-caret.descending {
+    color: $--color-primary;
+  }
+}
+
+/* 过滤器样式 */
+.el-table-filter__bottom {
+  text-align: center;
+}
+
+.el-table__column-filter-trigger {
+  height: 16px;
+  line-height: 16px;
+  vertical-align: middle;
+  position: relative;
+  bottom: 1px;
+
+  i {
+    font-size: 16px;
+    transform: scale(1);
+  }
+}
+
+.table-header-popover.el-popover {
+  padding: 16px;
+}
+
+/* 附件上传hover颜色 */
+.base-table_default {
+  .el-table__body .hover-active:hover > td {
+    background-color: #ff3c2f10 !important;
+  }
+}
+
+/* vxe-table 样式 */
+.vxe-table .vxe-cell--sort {
+  display: inline-flex !important;
+  flex-direction: row-reverse !important;
+  align-items: center !important;
+  width: 16px !important;
+  height: 16px !important;
+  line-height: 16px !important;
+  vertical-align: middle !important;
+  cursor: pointer;
+
+  .vxe-sort--asc-btn,
+  .vxe-sort--desc-btn {
+    width: 6px;
+    height: 10px;
+    color: #333;
+    border: none;
+    font-style: normal;
+    position: static;
+  }
+}
+
+.vxe-cell--wrapper {
+  justify-content: center !important;
+}
+
+.vxe-header--row {
+  color: #333;
+  background-color: #f5f5f5;
+}
+
+.vxe-cell--filter .vxe-filter--btn {
+  color: #666;
+  font-weight: $--font-weight-primary;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.is--filter-active .vxe-cell--filter .vxe-filter--btn {
+  color: $--color-primary;
+}
+
+.is--filter-active .vxe-cell--title {
+  color: $--color-primary;
+}
+
+.vxe-table--render-default.size--small {
+  font-size: 14px !important;
+}
+
+.vxe-table--render-default.size--mini {
+  font-size: 14px !important;
+}
+
+.vxe-header--row th,
+th.vxe-header--column {
+  position: relative;
+  font-weight: $--font-weight-primary;
+}
+
+.vxe-table--tooltip-wrapper {
+  z-index: 9999 !important;
+}
+
+.cell-default-set-- .vxe-table--body-wrapper .vxe-body--row .vxe-body--column .vxe-cell .vxe-cell--label:empty::before {
+  content: '--';
+}
+
+.n20-table-pro.vxe-table--render-default {
+  font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif !important;
+  color: #333;
+}
+
+.vxe-table-custom-wrap.vxe-body--column.col--ellipsis:not(.col--actived) > .vxe-cell,
+.vxe-table--render-default .vxe-table-custom-wrap.vxe-footer--column.col--ellipsis:not(.col--actived) > .vxe-cell,
+.vxe-table--render-default .vxe-table-custom-wrap.vxe-header--column.col--ellipsis:not(.col--actived) > .vxe-cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: wrap !important;
+}
+
+.vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-body--column.col--ellipsis > .vxe-cell,
+.vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-footer--column.col--ellipsis > .vxe-cell,
+.vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-header--column.col--ellipsis > .vxe-cell {
+  max-height: 100%;
+}
+
+.vxe-header--column {
+  .vxe-cell {
+    justify-content: center !important;
+  }
+}
+
+.el-table th.el-table__cell > .cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}