stk-table-vue 1.2.4 → 1.2.6

package/src/StkTable/style.less

@@ -1,791 +1,791 @@
-/**高亮渐暗 */
-@keyframes stk-table-dim {
-    from {
-        background-color: var(--highlight-color);
-    }
-}
-
-.stk-table {
-    --row-height: 28px;
-    --header-row-height: var(--row-height);
-    --footer-row-height: var(--row-height);
-    --cell-padding-y: 0;
-    --cell-padding-x: 8px;
-    --resize-handle-width: 4px;
-    --border-color: #e8e8f4;
-    --border-width: 1px;
-    --td-bgc: #fff;
-    --td-hover-color: hsl(207, 90%, 70%);
-    --td-active-color: hsl(207, 90%, 54%);
-    --th-bgc: #f1f1f9;
-    --tf-bgc: #f1f1f9;
-    --th-color: #272841;
-    --tr-active-bgc: rgb(230, 247, 255);
-    --tr-hover-bgc: #e6f7ff;
-    --bg-border-top: linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
-    --bg-border-right: linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
-    --bg-border-bottom: linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
-    --bg-border-left: linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
-    --highlight-color: #71a2fd;
-    --highlight-duration: 2s;
-    --highlight-timing-function: linear;
-    /* 斑马纹颜色*/
-    --stripe-bgc: #fafafc;
-
-    --sort-arrow-color: #757699;
-    --sort-arrow-hover-color: #8f90b5;
-    --sort-arrow-active-color: #1b63d9;
-    --sort-arrow-active-sub-color: #cbcbe1;
-
-    --fold-icon-color: #757699;
-    --fold-icon-hover-color: #8f90b5;
-    /** 列宽拖动指示器颜色 */
-    --col-resize-indicator-color: #87879c;
-
-    /** 固定列阴影颜色 */
-    --fixed-col-shadow-color-from: rgba(0, 0, 0, 0.1);
-    --fixed-col-shadow-color-to: rgba(0, 0, 0, 0);
-
-    /** 拖动行hover背景 */
-    --drag-handle-hover-color: #d0d1e0;
-
-    /** 自定义滚动条颜色 */
-    --sb-thumb-color: #c1c1d7;
-    --sb-thumb-hover-color: #a8a8c1;
-
-    /** 单元格选区 */
-    --cs-bgc: #d3eafd;
-    --cs-bc: #2196f3;
-    /** 行拖拽选区 */
-    --rs-bgc: #e8f3ff;
-    --rs-bc: #2a7ee4;
-
-
-    // contain: layout paint size;
-    position: relative;
-    overflow: auto;
-    will-change: scroll-position;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    outline: none;
-
-    &:hover .stk-sb-thumb {
-        opacity: 0.7;
-    }
-
-    /**深色模式 */
-    &.dark {
-        --th-bgc: #202029;
-        --tf-bgc: #202029;
-        --th-color: #c0c0d1;
-        --td-bgc: #1b1b24;
-        --td-hover-color: hsl(219, 59%, 60%);
-        --td-active-color: hsl(219, 59%, 51%);
-        --border-color: #292933;
-        --tr-active-bgc: #283f63;
-        --tr-hover-bgc: #1a2b46;
-        --table-bgc: #1b1b24;
-        /* 不能用rgba，因为固定列时，会变成半透明*/
-        --highlight-color: #1e4c99;
-
-        --stripe-bgc: #202029;
-
-        --sort-arrow-color: #5d6064;
-        --sort-arrow-hover-color: #727782;
-        --sort-arrow-active-color: #d0d1d2;
-        --sort-arrow-active-sub-color: #5d6064;
-
-        --fold-icon-color: #5d6064;
-        --fold-icon-hover-color: #727782;
-
-        --col-resize-indicator-color: #5d6064;
-
-        --fixed-col-shadow-color-from: rgba(135, 135, 156, 0.1);
-        --fixed-col-shadow-color-to: rgba(135, 135, 156, 0);
-
-        --drag-handle-hover-color: #5d6064;
-
-        --sb-thumb-color: rgba(93, 96, 100, 0.9);
-        --sb-thumb-hover-color: rgb(114, 119, 130);
-
-        --cs-bgc: #2a3f6b;
-        --cs-bc: #386ccc;
-        --rs-bgc: #223555;
-        --rs-bc: #4b8ef0;
-
-        /* background-color: var(--table-bgc); */
-        /* ⭐这里加background-color会导致表格出滚动白屏*/
-        color: #d1d1e0;
-
-        td[data-cs-s] {
-            background-blend-mode: normal;
-        }
-    }
-
-    &.scrollbar-on {
-        overflow: hidden;
-        // scrollbar-width: none;
-        // &::-webkit-scrollbar{
-        //     display: none;
-        // }
-    }
-
-    /** 移动端禁用自定义滚动条，恢复原生触摸滚动 */
-    @media (hover: none) and (pointer: coarse) {
-        &.scrollbar-on {
-            overflow: auto;
-        }
-
-        .stk-sb-thumb {
-            display: none !important;
-        }
-    }
-
-    &.headless {
-        &.bordered {
-            border-top: 1px solid var(--border-color);
-            background-image: var(--bg-border-right), var(--bg-border-bottom);
-        }
-    }
-
-    /* 调整列宽的话，表格宽度应当自适应 */
-    &.col-resizable {
-        .stk-table-main {
-            width: fit-content;
-            min-width: min-content;
-            flex: none;
-        }
-    }
-
-    /** 调整列宽的时候不要触发th事件。否则会导致触发表头点击排序 */
-    &.is-col-resizing {
-        th {
-            pointer-events: none;
-        }
-    }
-
-    &.bordered {
-        /** 
-        * border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left
-        * - box-shadow inset 方案不生效，且占用属性。
-        * - outline 方案绘制在图形外
-        * - 绝对定位元素。需要根据滚动条位置动态计算。不合适。
-        * - sticky 定位方案需要占用位置。高度为0。
-        */
-        border-left: var(--border-width) solid var(--border-color);
-        /* 下面border用于表格内容不满高度时，绘制表格边界线 */
-        background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-
-        th,
-        td {
-            background-image: var(--bg-border-right), var(--bg-border-bottom);
-        }
-
-        thead tr:first-child th {
-            background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-        }
-
-        /**
-        * 单元格的左边框由左侧相邻单元格的 border-right 提供。
-        * 右固定列吸附遮挡内容后，与左侧单元格不再相邻，因此需要自行绘制 border-left。
-        */
-        th.fixed-cell--border-left,
-        td.fixed-cell--border-left {
-            background-image: var(--bg-border-left), var(--bg-border-right), var(--bg-border-bottom);
-        }
-
-        thead tr:first-child th.fixed-cell--border-left {
-            background-image: var(--bg-border-left), var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-        }
-    }
-
-    &.bordered-h {
-        border-left: none;
-        --bg-border-right: linear-gradient(transparent, transparent);
-        --bg-border-left: linear-gradient(transparent, transparent);
-    }
-
-    &.bordered-v {
-        --bg-border-bottom: linear-gradient(transparent, transparent);
-        --bg-border-top: linear-gradient(transparent, transparent);
-    }
-
-    &.bordered-body-v {
-        tbody {
-            --bg-border-bottom: linear-gradient(transparent, transparent);
-        }
-    }
-
-    &.bordered-body-h {
-        tbody {
-            --bg-border-right: linear-gradient(transparent, transparent);
-            --bg-border-left: linear-gradient(transparent, transparent);
-        }
-    }
-
-    &.stripe {
-        &:not(.vt-on) .stk-tbody-main tr:nth-child(even) {
-            background-color: var(--stripe-bgc);
-    }
-
-        &.vt-on .stk-tbody-main tr:nth-child(odd) {
-            background-color: var(--stripe-bgc);
-        }
-
-        &.area-selection .stk-tbody-main tr[data-rs-s] {
-            background-color: var(--rs-bgc);
-        }
-        
-        &.row-hover .stk-tbody-main tr:hover {
-            background-color: var(--tr-hover-bgc);
-        }
-
-        &.row-active .stk-tbody-main tr.active {
-            background-color: var(--tr-active-bgc);
-        }
-    }
-
-    /** more weight for custom row background*/
-    &.row-hover .stk-tbody-main tr:hover {
-        background-color: var(--tr-hover-bgc);
-    }
-
-    &.row-active .stk-tbody-main tr.active {
-        background-color: var(--tr-active-bgc);
-    }
-
-    .stk-tbody-main tr[data-rs-s] {
-        background-color: var(--rs-bgc);
-    }
-
-    .stk-tbody-main tr.row-range-start td {
-        box-shadow: inset 0 2px 0 0 var(--rs-bc);
-    }
-
-    .stk-tbody-main tr.row-range-end td {
-        box-shadow: inset 0 -2px 0 0 var(--rs-bc);
-    }
-
-    /* 单元格悬浮 */
-    &.cell-hover tbody td:hover {
-        box-shadow: inset 0 0 0 2px var(--td-hover-color);
-    }
-
-    /* 单元格高亮 */
-    &.cell-active tbody td.active {
-        box-shadow: inset 0 0 0 2px var(--td-active-color);
-    }
-
-    /* 单元格拖选中禁止选中文字 */
-    &.is-area-selecting {
-        user-select: none;
-    }
-
-    &.is-row-drag-selecting {
-        user-select: none;
-    }
-
-    /* td 溢出*/
-    &.text-overflow {
-        .table-cell-wrapper {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            outline: none;
-        }
-    }
-
-    /* th 溢出*/
-    &.header-text-overflow {
-        .table-header-cell-wrapper {
-            white-space: nowrap;
-            overflow: hidden;
-        }
-
-        .table-header-title {
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-    }
-
-    /**虚拟滚动模式 */
-    &.virtual {
-
-        /* 为不影响布局，表头行高要定死*/
-        .table-header-cell-wrapper {
-            overflow: hidden;
-            max-height: calc(var(--header-row-height) * var(--row-span, 1));
-
-            .table-header-title {
-                max-height: inherit;
-            }
-        }
-
-        tbody td {
-            height: var(--row-height);
-
-            .table-cell-wrapper {
-                max-height: var(--row-height);
-                overflow: hidden;
-            }
-        }
-
-        .padding-top-tr td {
-            height: 0;
-        }
-
-        .expand-cell .table-cell-wrapper {
-            white-space: nowrap;
-        }
-
-        // .expanded-row .table-cell-wrapper{
-        //     overflow: auto;
-        // }
-    }
-
-    &.auto-row-height {
-        tbody td {
-            height: unset;
-
-            .table-cell-wrapper {
-                max-height: unset;
-                overflow: initial;
-            }
-        }
-    }
-
-    &.fixed-relative-mode {
-        th {
-            position: relative;
-        }
-
-        .fixed-cell--active {
-            position: relative;
-        }
-    }
-
-    &.scroll-row-by-row {
-        .stk-table-scroll-container {
-            position: sticky;
-            top: 0;
-        }
-    }
-
-    &.exp-scroll-y {
-        .stk-tbody-main {
-            will-change: transform;
-        }
-    }
-
-    .row-by-row-table-height {
-        width: 1px;
-        flex-shrink: 0;
-        position: absolute;
-        left: 0;
-        top: 0;
-    }
-
-    th,
-    td {
-        font-size: 14px;
-        box-sizing: border-box;
-        padding: var(--cell-padding-y) var(--cell-padding-x);
-        width: var(--cw);
-        min-width: var(--cw);
-        max-width: var(--cw);
-    }
-
-    th {
-        color: var(--th-color);
-        background-color: inherit;
-        /** 
-         * 保证向上滚动时，表头不被遮挡。
-         * z-index：2 为防止固定列阴影重叠。
-         */
-        z-index: 2;
-        position: sticky;
-        top: 0;
-
-        &.sortable {
-            cursor: pointer;
-        }
-
-        &:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter {
-            .arrow-up {
-                fill: var(--sort-arrow-hover-color);
-            }
-
-            .arrow-down {
-                fill: var(--sort-arrow-hover-color);
-            }
-        }
-
-        &.sorter-desc .table-header-sorter {
-            display: inline;
-
-            .arrow-up {
-                fill: var(--sort-arrow-active-sub-color);
-            }
-
-            .arrow-down {
-                fill: var(--sort-arrow-active-color);
-            }
-        }
-
-        &.sorter-asc .table-header-sorter {
-            display: inline;
-
-            .arrow-up {
-                fill: var(--sort-arrow-active-color);
-            }
-
-            .arrow-down {
-                fill: var(--sort-arrow-active-sub-color);
-            }
-        }
-    }
-
-    thead tr {
-        background-color: var(--th-bgc);
-        height: var(--header-row-height);
-    }
-
-    .stk-footer {
-        position: sticky;
-        bottom: 0;
-        z-index: 2;
-        tr {
-            background-color: var(--tf-bgc);
-            height: var(--footer-row-height);
-            td {
-                background-color: inherit;
-            }
-        }
-    }
-
-    tbody tr {
-        background-color: var(--td-bgc);
-        height: var(--row-height);
-    }
-
-    .text-l {
-        text-align: left;
-    }
-
-    .text-c {
-        text-align: center;
-    }
-
-    .text-r {
-        text-align: right;
-    }
-
-    .vt-x-left,
-    .vt-x-right,
-    .vt-x-spacer {
-        background-image:none !important;
-        padding: 0 !important;
-    }
-
-    /** 列宽调整指示器 */
-    .column-resize-indicator {
-        width: 0;
-        height: 100%;
-        border-left: 2px solid var(--col-resize-indicator-color);
-        position: absolute;
-        z-index: 10;
-        display: none;
-        pointer-events: none;
-    }
-
-    .stk-table-main {
-        border-spacing: 0;
-        border-collapse: separate;
-        flex: 1;
-
-        &.fixed-mode {
-            table-layout: fixed;
-            flex: none;
-        }
-    }
-
-    .table-cell-wrapper {
-        outline: none;
-    }
-
-    .fixed-cell {
-        background-color: inherit;
-    }
-
-    /* 单元格选区 - 使用 inset box-shadow 实现边框，不占用内部空间 */
-    /* 通过 data-* 属性（而非 class）应用，避免 Vue 对合并单元格 className 的重新 patch 抹掉选区样式 */
-    td[data-cs-s] {
-        background-blend-mode: multiply;
-        background-color: var(--cs-bgc);
-        box-shadow:
-            inset 0 var(--cs-t, 0) 0 0 var(--cs-bc),
-            inset 0 var(--cs-b, 0) 0 0 var(--cs-bc),
-            inset var(--cs-l, 0) 0 0 0 var(--cs-bc),
-            inset var(--cs-r, 0) 0 0 0 var(--cs-bc);
-    }
-
-    td[data-cs-t] {
-        --cs-t: 2px;
-    }
-
-    /* 选中的合并单元格在 hover/active 时，选区背景优先于 hover/active 背景 */
-    /* 合并单元格的 td 会被动态添加 cell-hover/cell-active class，与 td[data-cs-s] 同详细度， */
-    /* 会因源码顺序覆盖选区背景；此处提高详细度确保选区背景不被覆盖 */
-    td[data-cs-s].cell-hover,
-    td[data-cs-s].cell-active {
-        background-color: var(--cs-bgc);
-    }
-
-    td[data-cs-b] {
-        --cs-b: -2px;
-    }
-
-    td[data-cs-l] {
-        --cs-l: 2px;
-    }
-
-    td[data-cs-r] {
-        --cs-r: -2px;
-    }
-
-    .highlight-cell {
-        animation-name: stk-table-dim;
-        animation-duration: var(--highlight-duration);
-        animation-timing-function: var(--highlight-timing-function);
-        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
-    }
-
-    .stk-table-scroll-container {
-        display: flex;
-    }
-
-    .seq-column {
-        text-align: center;
-    }
-
-    .drag-row-cell {
-        .table-cell-wrapper {
-            display: inline-flex;
-            align-items: center;
-            vertical-align: middle;
-        }
-    }
-
-    .drag-row-handle {
-        cursor: grab;
-        border-radius: 4px;
-
-        &:hover {
-            background-color: var(--drag-handle-hover-color);
-        }
-
-        &:active {
-            cursor: grabbing;
-        }
-
-        >svg {
-            vertical-align: -2px;
-        }
-    }
-
-    .tr-dragging {
-        opacity: 0.5;
-    }
-
-    .tr-dragging-over {
-        background-color: var(--tr-hover-bgc);
-    }
-
-    /*固定列阴影-左*/
-    .fixed-cell--left {
-        --shadow-rotate: 90deg;
-
-        &.fixed-cell--shadow::after {
-            right: -10px;
-        }
-    }
-
-    /*固定列阴影-右*/
-    .fixed-cell--right {
-        --shadow-rotate: -90deg;
-
-        &.fixed-cell--shadow::after {
-            left: -10px;
-        }
-    }
-
-    /*固定列阴影*/
-    .fixed-cell--shadow::after {
-        content: '';
-        width: 10px;
-        height: 100%;
-        top: 0px;
-        position: absolute;
-        pointer-events: none;
-        background-image: linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
-    }
-
-    .fixed-cell--active {
-        position: sticky;
-    }
-
-    th.fixed-cell--active {
-        z-index: 3;
-    }
-
-    td.fixed-cell--active {
-        z-index: 1;
-    }
-
-    tfoot td.fixed-cell--active,
-    .stk-footer td.fixed-cell--active {
-        z-index: 2;
-    }
-
-    .table-header-cell-wrapper {
-        max-width: 100%;
-        display: inline-flex;
-        align-items: center;
-    }
-
-    .table-header-title {
-        overflow: hidden;
-    }
-
-    .table-header-sorter {
-        flex-shrink: 0;
-        margin-left: 4px;
-        width: 16px;
-        height: 16px;
-        display: none;
-
-        .arrow-up,
-        .arrow-down {
-            fill: var(--sort-arrow-color);
-        }
-    }
-
-    .table-header-resizer {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        cursor: col-resize;
-        width: var(--resize-handle-width);
-
-        &.left {
-            left: 0;
-        }
-
-        &.right {
-            right: 0;
-        }
-    }
-
-    /* td inherit tr bgc*/
-    .highlight-row {
-        animation-name: stk-table-dim;
-        animation-duration: var(--highlight-duration);
-        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
-        animation-timing-function: var(--highlight-timing-function);
-    }
-
-    .stk-table-no-data {
-        background-color: var(--table-bgc);
-        line-height: var(--row-height);
-        text-align: center;
-        font-size: 14px;
-        position: sticky;
-        left: 0px;
-        border-right: var(--border-width) solid var(--border-color);
-        border-bottom: var(--border-width) solid var(--border-color);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-
-        &.no-data-full {
-            flex: 1;
-        }
-    }
-
-    .expanded,
-    .tree-expanded {
-        .stk-fold-icon::before {
-            transform: rotate(90deg);
-        }
-    }
-
-    .stk-fold-icon {
-        display: inline-flex;
-        width: 16px;
-        height: 16px;
-        cursor: pointer;
-        align-items: center;
-
-        &::before {
-            content: '';
-            display: block;
-            margin: 0 2px;
-            width: 0;
-            height: 0;
-            border-left: 5px solid var(--fold-icon-color);
-            border-top: 4px solid transparent;
-            border-bottom: 4px solid transparent;
-            transition: transform 0.2s ease;
-        }
-
-        &:hover::before {
-            border-left: 5px solid var(--fold-icon-hover-color);
-        }
-    }
-
-    td.cell-hover {
-        background-color: var(--tr-hover-bgc);
-    }
-
-    td.cell-active {
-        background-color: var(--tr-active-bgc);
-    }
-
-    .stk-sb-thumb {
-        z-index: 100;
-        position: sticky;
-        background-color: var(--sb-thumb-color);
-        transition: opacity 0.5s ease;
-        user-select: none;
-        opacity: 0;
-        flex-shrink: 0;
-        will-change: transform;
-
-        &:hover {
-            background-color: var(--sb-thumb-hover-color);
-        }
-
-        &:active {
-            opacity: 1;
-            background-color: var(--sb-thumb-hover-color);
-        }
-
-        &.vertical {
-            margin-left: auto;
-            top: 0;
-            right: 0;
-            border-radius: calc(var(--sb-width) / 2);
-            width: var(--sb-width);
-        }
-
-        &.horizontal {
-            margin-top: auto;
-            bottom: 0;
-            left: 0;
-            border-radius: calc(var(--sb-height) / 2);
-            height: var(--sb-height);
-        }
-    }
-}
+/**高亮渐暗 */
+@keyframes stk-table-dim {
+    from {
+        background-color: var(--highlight-color);
+    }
+}
+
+.stk-table {
+    --row-height: 28px;
+    --header-row-height: var(--row-height);
+    --footer-row-height: var(--row-height);
+    --cell-padding-y: 0;
+    --cell-padding-x: 8px;
+    --resize-handle-width: 4px;
+    --border-color: #e8e8f4;
+    --border-width: 1px;
+    --td-bgc: #fff;
+    --td-hover-color: hsl(207, 90%, 70%);
+    --td-active-color: hsl(207, 90%, 54%);
+    --th-bgc: #f1f1f9;
+    --tf-bgc: #f1f1f9;
+    --th-color: #272841;
+    --tr-active-bgc: rgb(230, 247, 255);
+    --tr-hover-bgc: #e6f7ff;
+    --bg-border-top: linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
+    --bg-border-right: linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
+    --bg-border-bottom: linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
+    --bg-border-left: linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
+    --highlight-color: #71a2fd;
+    --highlight-duration: 2s;
+    --highlight-timing-function: linear;
+    /* 斑马纹颜色*/
+    --stripe-bgc: #fafafc;
+
+    --sort-arrow-color: #757699;
+    --sort-arrow-hover-color: #8f90b5;
+    --sort-arrow-active-color: #1b63d9;
+    --sort-arrow-active-sub-color: #cbcbe1;
+
+    --fold-icon-color: #757699;
+    --fold-icon-hover-color: #8f90b5;
+    /** 列宽拖动指示器颜色 */
+    --col-resize-indicator-color: #87879c;
+
+    /** 固定列阴影颜色 */
+    --fixed-col-shadow-color-from: rgba(0, 0, 0, 0.1);
+    --fixed-col-shadow-color-to: rgba(0, 0, 0, 0);
+
+    /** 拖动行hover背景 */
+    --drag-handle-hover-color: #d0d1e0;
+
+    /** 自定义滚动条颜色 */
+    --sb-thumb-color: #c1c1d7;
+    --sb-thumb-hover-color: #a8a8c1;
+
+    /** 单元格选区 */
+    --cs-bgc: #d3eafd;
+    --cs-bc: #2196f3;
+    /** 行拖拽选区 */
+    --rs-bgc: #e8f3ff;
+    --rs-bc: #2a7ee4;
+
+
+    // contain: layout paint size;
+    position: relative;
+    overflow: auto;
+    will-change: scroll-position;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    outline: none;
+
+    &:hover .stk-sb-thumb {
+        opacity: 0.7;
+    }
+
+    /**深色模式 */
+    &.dark {
+        --th-bgc: #202029;
+        --tf-bgc: #202029;
+        --th-color: #c0c0d1;
+        --td-bgc: #1b1b24;
+        --td-hover-color: hsl(219, 59%, 60%);
+        --td-active-color: hsl(219, 59%, 51%);
+        --border-color: #292933;
+        --tr-active-bgc: #283f63;
+        --tr-hover-bgc: #1a2b46;
+        --table-bgc: #1b1b24;
+        /* 不能用rgba，因为固定列时，会变成半透明*/
+        --highlight-color: #1e4c99;
+
+        --stripe-bgc: #202029;
+
+        --sort-arrow-color: #5d6064;
+        --sort-arrow-hover-color: #727782;
+        --sort-arrow-active-color: #d0d1d2;
+        --sort-arrow-active-sub-color: #5d6064;
+
+        --fold-icon-color: #5d6064;
+        --fold-icon-hover-color: #727782;
+
+        --col-resize-indicator-color: #5d6064;
+
+        --fixed-col-shadow-color-from: rgba(135, 135, 156, 0.1);
+        --fixed-col-shadow-color-to: rgba(135, 135, 156, 0);
+
+        --drag-handle-hover-color: #5d6064;
+
+        --sb-thumb-color: rgba(93, 96, 100, 0.9);
+        --sb-thumb-hover-color: rgb(114, 119, 130);
+
+        --cs-bgc: #2a3f6b;
+        --cs-bc: #386ccc;
+        --rs-bgc: #223555;
+        --rs-bc: #4b8ef0;
+
+        /* background-color: var(--table-bgc); */
+        /* ⭐这里加background-color会导致表格出滚动白屏*/
+        color: #d1d1e0;
+
+        td[data-cs-s] {
+            background-blend-mode: normal;
+        }
+    }
+
+    &.scrollbar-on {
+        overflow: hidden;
+        // scrollbar-width: none;
+        // &::-webkit-scrollbar{
+        //     display: none;
+        // }
+    }
+
+    /** 移动端禁用自定义滚动条，恢复原生触摸滚动 */
+    @media (hover: none) and (pointer: coarse) {
+        &.scrollbar-on {
+            overflow: auto;
+        }
+
+        .stk-sb-thumb {
+            display: none !important;
+        }
+    }
+
+    &.headless {
+        &.bordered {
+            border-top: 1px solid var(--border-color);
+            background-image: var(--bg-border-right), var(--bg-border-bottom);
+        }
+    }
+
+    /* 调整列宽的话，表格宽度应当自适应 */
+    &.col-resizable {
+        .stk-table-main {
+            width: fit-content;
+            min-width: min-content;
+            flex: none;
+        }
+    }
+
+    /** 调整列宽的时候不要触发th事件。否则会导致触发表头点击排序 */
+    &.is-col-resizing {
+        th {
+            pointer-events: none;
+        }
+    }
+
+    &.bordered {
+        /** 
+        * border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left
+        * - box-shadow inset 方案不生效，且占用属性。
+        * - outline 方案绘制在图形外
+        * - 绝对定位元素。需要根据滚动条位置动态计算。不合适。
+        * - sticky 定位方案需要占用位置。高度为0。
+        */
+        border-left: var(--border-width) solid var(--border-color);
+        /* 下面border用于表格内容不满高度时，绘制表格边界线 */
+        background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+
+        th,
+        td {
+            background-image: var(--bg-border-right), var(--bg-border-bottom);
+        }
+
+        thead tr:first-child th {
+            background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+        }
+
+        /**
+        * 单元格的左边框由左侧相邻单元格的 border-right 提供。
+        * 右固定列吸附遮挡内容后，与左侧单元格不再相邻，因此需要自行绘制 border-left。
+        */
+        th.fixed-cell--border-left,
+        td.fixed-cell--border-left {
+            background-image: var(--bg-border-left), var(--bg-border-right), var(--bg-border-bottom);
+        }
+
+        thead tr:first-child th.fixed-cell--border-left {
+            background-image: var(--bg-border-left), var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+        }
+    }
+
+    &.bordered-h {
+        border-left: none;
+        --bg-border-right: linear-gradient(transparent, transparent);
+        --bg-border-left: linear-gradient(transparent, transparent);
+    }
+
+    &.bordered-v {
+        --bg-border-bottom: linear-gradient(transparent, transparent);
+        --bg-border-top: linear-gradient(transparent, transparent);
+    }
+
+    &.bordered-body-v {
+        tbody {
+            --bg-border-bottom: linear-gradient(transparent, transparent);
+        }
+    }
+
+    &.bordered-body-h {
+        tbody {
+            --bg-border-right: linear-gradient(transparent, transparent);
+            --bg-border-left: linear-gradient(transparent, transparent);
+        }
+    }
+
+    &.stripe {
+        &:not(.vt-on) .stk-tbody-main tr:nth-child(even) {
+            background-color: var(--stripe-bgc);
+    }
+
+        &.vt-on .stk-tbody-main tr:nth-child(odd) {
+            background-color: var(--stripe-bgc);
+        }
+
+        &.area-selection .stk-tbody-main tr[data-rs-s] {
+            background-color: var(--rs-bgc);
+        }
+        
+        &.row-hover .stk-tbody-main tr:hover {
+            background-color: var(--tr-hover-bgc);
+        }
+
+        &.row-active .stk-tbody-main tr.active {
+            background-color: var(--tr-active-bgc);
+        }
+    }
+
+    /** more weight for custom row background*/
+    &.row-hover .stk-tbody-main tr:hover {
+        background-color: var(--tr-hover-bgc);
+    }
+
+    &.row-active .stk-tbody-main tr.active {
+        background-color: var(--tr-active-bgc);
+    }
+
+    .stk-tbody-main tr[data-rs-s] {
+        background-color: var(--rs-bgc);
+    }
+
+    .stk-tbody-main tr.row-range-start td {
+        box-shadow: inset 0 2px 0 0 var(--rs-bc);
+    }
+
+    .stk-tbody-main tr.row-range-end td {
+        box-shadow: inset 0 -2px 0 0 var(--rs-bc);
+    }
+
+    /* 单元格悬浮 */
+    &.cell-hover tbody td:hover {
+        box-shadow: inset 0 0 0 2px var(--td-hover-color);
+    }
+
+    /* 单元格高亮 */
+    &.cell-active tbody td.active {
+        box-shadow: inset 0 0 0 2px var(--td-active-color);
+    }
+
+    /* 单元格拖选中禁止选中文字 */
+    &.is-area-selecting {
+        user-select: none;
+    }
+
+    &.is-row-drag-selecting {
+        user-select: none;
+    }
+
+    /* td 溢出*/
+    &.text-overflow {
+        .table-cell-wrapper {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            outline: none;
+        }
+    }
+
+    /* th 溢出*/
+    &.header-text-overflow {
+        .table-header-cell-wrapper {
+            white-space: nowrap;
+            overflow: hidden;
+        }
+
+        .table-header-title {
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+
+    /**虚拟滚动模式 */
+    &.virtual {
+
+        /* 为不影响布局，表头行高要定死*/
+        .table-header-cell-wrapper {
+            overflow: hidden;
+            max-height: calc(var(--header-row-height) * var(--row-span, 1));
+
+            .table-header-title {
+                max-height: inherit;
+            }
+        }
+
+        tbody td {
+            height: var(--row-height);
+
+            .table-cell-wrapper {
+                max-height: var(--row-height);
+                overflow: hidden;
+            }
+        }
+
+        .padding-top-tr td {
+            height: 0;
+        }
+
+        .expand-cell .table-cell-wrapper {
+            white-space: nowrap;
+        }
+
+        // .expanded-row .table-cell-wrapper{
+        //     overflow: auto;
+        // }
+    }
+
+    &.auto-row-height {
+        tbody td {
+            height: unset;
+
+            .table-cell-wrapper {
+                max-height: unset;
+                overflow: initial;
+            }
+        }
+    }
+
+    &.fixed-relative-mode {
+        th {
+            position: relative;
+        }
+
+        .fixed-cell--active {
+            position: relative;
+        }
+    }
+
+    &.scroll-row-by-row {
+        .stk-table-scroll-container {
+            position: sticky;
+            top: 0;
+        }
+    }
+
+    &.exp-scroll-y {
+        .stk-tbody-main {
+            will-change: transform;
+        }
+    }
+
+    .row-by-row-table-height {
+        width: 1px;
+        flex-shrink: 0;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+
+    th,
+    td {
+        font-size: 14px;
+        box-sizing: border-box;
+        padding: var(--cell-padding-y) var(--cell-padding-x);
+        width: var(--cw);
+        min-width: var(--cw);
+        max-width: var(--cw);
+    }
+
+    th {
+        color: var(--th-color);
+        background-color: inherit;
+        /** 
+         * 保证向上滚动时，表头不被遮挡。
+         * z-index：2 为防止固定列阴影重叠。
+         */
+        z-index: 2;
+        position: sticky;
+        top: 0;
+
+        &.sortable {
+            cursor: pointer;
+        }
+
+        &:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter {
+            .arrow-up {
+                fill: var(--sort-arrow-hover-color);
+            }
+
+            .arrow-down {
+                fill: var(--sort-arrow-hover-color);
+            }
+        }
+
+        &.sorter-desc .table-header-sorter {
+            display: inline;
+
+            .arrow-up {
+                fill: var(--sort-arrow-active-sub-color);
+            }
+
+            .arrow-down {
+                fill: var(--sort-arrow-active-color);
+            }
+        }
+
+        &.sorter-asc .table-header-sorter {
+            display: inline;
+
+            .arrow-up {
+                fill: var(--sort-arrow-active-color);
+            }
+
+            .arrow-down {
+                fill: var(--sort-arrow-active-sub-color);
+            }
+        }
+    }
+
+    thead tr {
+        background-color: var(--th-bgc);
+        height: var(--header-row-height);
+    }
+
+    .stk-footer {
+        position: sticky;
+        bottom: 0;
+        z-index: 2;
+        tr {
+            background-color: var(--tf-bgc);
+            height: var(--footer-row-height);
+            td {
+                background-color: inherit;
+            }
+        }
+    }
+
+    tbody tr {
+        background-color: var(--td-bgc);
+        height: var(--row-height);
+    }
+
+    .text-l {
+        text-align: left;
+    }
+
+    .text-c {
+        text-align: center;
+    }
+
+    .text-r {
+        text-align: right;
+    }
+
+    .vt-x-left,
+    .vt-x-right,
+    .vt-x-spacer {
+        background-image:none !important;
+        padding: 0 !important;
+    }
+
+    /** 列宽调整指示器 */
+    .column-resize-indicator {
+        width: 0;
+        height: 100%;
+        border-left: 2px solid var(--col-resize-indicator-color);
+        position: absolute;
+        z-index: 10;
+        display: none;
+        pointer-events: none;
+    }
+
+    .stk-table-main {
+        border-spacing: 0;
+        border-collapse: separate;
+        flex: 1;
+
+        &.fixed-mode {
+            table-layout: fixed;
+            flex: none;
+        }
+    }
+
+    .table-cell-wrapper {
+        outline: none;
+    }
+
+    .fixed-cell {
+        background-color: inherit;
+    }
+
+    /* 单元格选区 - 使用 inset box-shadow 实现边框，不占用内部空间 */
+    /* 通过 data-* 属性（而非 class）应用，避免 Vue 对合并单元格 className 的重新 patch 抹掉选区样式 */
+    td[data-cs-s] {
+        background-blend-mode: multiply;
+        background-color: var(--cs-bgc);
+        box-shadow:
+            inset 0 var(--cs-t, 0) 0 0 var(--cs-bc),
+            inset 0 var(--cs-b, 0) 0 0 var(--cs-bc),
+            inset var(--cs-l, 0) 0 0 0 var(--cs-bc),
+            inset var(--cs-r, 0) 0 0 0 var(--cs-bc);
+    }
+
+    td[data-cs-t] {
+        --cs-t: 2px;
+    }
+
+    /* 选中的合并单元格在 hover/active 时，选区背景优先于 hover/active 背景 */
+    /* 合并单元格的 td 会被动态添加 cell-hover/cell-active class，与 td[data-cs-s] 同详细度， */
+    /* 会因源码顺序覆盖选区背景；此处提高详细度确保选区背景不被覆盖 */
+    td[data-cs-s].cell-hover,
+    td[data-cs-s].cell-active {
+        background-color: var(--cs-bgc);
+    }
+
+    td[data-cs-b] {
+        --cs-b: -2px;
+    }
+
+    td[data-cs-l] {
+        --cs-l: 2px;
+    }
+
+    td[data-cs-r] {
+        --cs-r: -2px;
+    }
+
+    .highlight-cell {
+        animation-name: stk-table-dim;
+        animation-duration: var(--highlight-duration);
+        animation-timing-function: var(--highlight-timing-function);
+        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
+    }
+
+    .stk-table-scroll-container {
+        display: flex;
+    }
+
+    .seq-column {
+        text-align: center;
+    }
+
+    .drag-row-cell {
+        .table-cell-wrapper {
+            display: inline-flex;
+            align-items: center;
+            vertical-align: middle;
+        }
+    }
+
+    .drag-row-handle {
+        cursor: grab;
+        border-radius: 4px;
+
+        &:hover {
+            background-color: var(--drag-handle-hover-color);
+        }
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        >svg {
+            vertical-align: -2px;
+        }
+    }
+
+    .tr-dragging {
+        opacity: 0.5;
+    }
+
+    .tr-dragging-over {
+        background-color: var(--tr-hover-bgc);
+    }
+
+    /*固定列阴影-左*/
+    .fixed-cell--left {
+        --shadow-rotate: 90deg;
+
+        &.fixed-cell--shadow::after {
+            right: -10px;
+        }
+    }
+
+    /*固定列阴影-右*/
+    .fixed-cell--right {
+        --shadow-rotate: -90deg;
+
+        &.fixed-cell--shadow::after {
+            left: -10px;
+        }
+    }
+
+    /*固定列阴影*/
+    .fixed-cell--shadow::after {
+        content: '';
+        width: 10px;
+        height: 100%;
+        top: 0px;
+        position: absolute;
+        pointer-events: none;
+        background-image: linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
+    }
+
+    .fixed-cell--active {
+        position: sticky;
+    }
+
+    th.fixed-cell--active {
+        z-index: 3;
+    }
+
+    td.fixed-cell--active {
+        z-index: 1;
+    }
+
+    tfoot td.fixed-cell--active,
+    .stk-footer td.fixed-cell--active {
+        z-index: 2;
+    }
+
+    .table-header-cell-wrapper {
+        max-width: 100%;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .table-header-title {
+        overflow: hidden;
+    }
+
+    .table-header-sorter {
+        flex-shrink: 0;
+        margin-left: 4px;
+        width: 16px;
+        height: 16px;
+        display: none;
+
+        .arrow-up,
+        .arrow-down {
+            fill: var(--sort-arrow-color);
+        }
+    }
+
+    .table-header-resizer {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        cursor: col-resize;
+        width: var(--resize-handle-width);
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: 0;
+        }
+    }
+
+    /* td inherit tr bgc*/
+    .highlight-row {
+        animation-name: stk-table-dim;
+        animation-duration: var(--highlight-duration);
+        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
+        animation-timing-function: var(--highlight-timing-function);
+    }
+
+    .stk-table-no-data {
+        background-color: var(--table-bgc);
+        line-height: var(--row-height);
+        text-align: center;
+        font-size: 14px;
+        position: sticky;
+        left: 0px;
+        border-right: var(--border-width) solid var(--border-color);
+        border-bottom: var(--border-width) solid var(--border-color);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &.no-data-full {
+            flex: 1;
+        }
+    }
+
+    .expanded,
+    .tree-expanded {
+        .stk-fold-icon::before {
+            transform: rotate(90deg);
+        }
+    }
+
+    .stk-fold-icon {
+        display: inline-flex;
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        align-items: center;
+
+        &::before {
+            content: '';
+            display: block;
+            margin: 0 2px;
+            width: 0;
+            height: 0;
+            border-left: 5px solid var(--fold-icon-color);
+            border-top: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+            transition: transform 0.2s ease;
+        }
+
+        &:hover::before {
+            border-left: 5px solid var(--fold-icon-hover-color);
+        }
+    }
+
+    td.cell-hover {
+        background-color: var(--tr-hover-bgc);
+    }
+
+    td.cell-active {
+        background-color: var(--tr-active-bgc);
+    }
+
+    .stk-sb-thumb {
+        z-index: 100;
+        position: sticky;
+        background-color: var(--sb-thumb-color);
+        transition: opacity 0.5s ease;
+        user-select: none;
+        opacity: 0;
+        flex-shrink: 0;
+        will-change: transform;
+
+        &:hover {
+            background-color: var(--sb-thumb-hover-color);
+        }
+
+        &:active {
+            opacity: 1;
+            background-color: var(--sb-thumb-hover-color);
+        }
+
+        &.vertical {
+            margin-left: auto;
+            top: 0;
+            right: 0;
+            border-radius: calc(var(--sb-width) / 2);
+            width: var(--sb-width);
+        }
+
+        &.horizontal {
+            margin-top: auto;
+            bottom: 0;
+            left: 0;
+            border-radius: calc(var(--sb-height) / 2);
+            height: var(--sb-height);
+        }
+    }
+}