foucui 1.0.1

package/components/QiuTable/styles/table.scss

@@ -0,0 +1,1230 @@
+/* QiuTable — 对齐 vxe-table 视觉 token（方案 A 自研，无 vxe 运行时） */
+.qiu-table {
+  --qiu-table-header-bg: #f8f8f9;
+  --qiu-table-border-color: #e8eaec;
+  --qiu-table-row-height: 48px;
+  --qiu-table-cell-padding-x: 8px;
+  --qiu-table-footer-bg: #fff;
+  --qiu-table-font-color: #606266;
+  --qiu-table-header-font-color: #606266;
+
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  font-size: 14px;
+  color: var(--qiu-table-font-color);
+  background: #fff;
+
+  &--small {
+    --qiu-table-row-height: 40px;
+    font-size: 12px;
+  }
+
+  &--large {
+    --qiu-table-row-height: 52px;
+    font-size: 15px;
+  }
+
+  &--round {
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &--fullscreen {
+    position: fixed !important;
+    inset: 0;
+    z-index: 2000;
+    width: 100vw !important;
+    height: 100vh !important;
+    margin: 0 !important;
+    padding: 12px;
+    background: #fff;
+    box-sizing: border-box;
+
+    > .qiu-table__main {
+      flex: 1 1 0;
+      width: 100%;
+      height: 0;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    .qiu-table__body-wrap {
+      flex: 1 1 0;
+      width: 100%;
+      height: 0;
+      min-width: 0;
+      min-height: 0;
+      overflow: auto;
+    }
+  }
+
+  &__toolbar {
+    display: flex;
+    flex-shrink: 0;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 0;
+  }
+
+  &__toolbar-left,
+  &__toolbar-center,
+  &__toolbar-right {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  }
+
+  &__toolbar-center {
+    flex: 1;
+    justify-content: center;
+  }
+
+  &__toolbar-left,
+  &__toolbar-right {
+    flex: 1;
+  }
+
+  &__toolbar-right {
+    justify-content: flex-end;
+  }
+
+  &__toolbar-builtin {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  &__toolbar-dropdown {
+    display: inline-flex;
+  }
+
+  &__toolbar-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: #606266;
+    cursor: pointer;
+
+    &:hover {
+      background: #f5f7fa;
+      color: var(--qiu-color-primary, #0f766e);
+    }
+  }
+
+  /* height/maxHeight：强制 flex 子项吃剩余空间，否则内容撑开 → 无滚动条、虚拟滚动失效 */
+  &--fixed-height {
+    overflow: hidden;
+
+    /* main 作为固定高度的承载层：自身吃满剩余空间，内部内容（caption/toolbar/header/body）按比例分配 */
+    > .qiu-table__main {
+      flex: 1 1 0;
+      width: 100%;
+      height: 0;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    /* body-wrap 必须真正滚动，数据不足时绝不反向撑开父级高度 */
+    .qiu-table__body-wrap {
+      flex: 1 1 0;
+      width: 100%;
+      height: 0;
+      min-width: 0;
+      min-height: 0;
+      overflow: auto;
+    }
+  }
+
+  &__main {
+    position: relative;
+    display: flex;
+    flex: 0 1 auto;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    border: 1px solid transparent;
+  }
+
+  &--border &__main,
+  &--border-full &__main,
+  &--border-outer &__main {
+    border-color: var(--qiu-table-border-color);
+  }
+
+  &--border-inner &__main {
+    border-color: transparent;
+  }
+
+  &--border-none &__main {
+    border-color: transparent;
+  }
+
+  /* 使用 QiuLoading，仅抬高层级覆盖表格主区 */
+  &__loading.qiu-loading {
+    z-index: 20;
+  }
+
+  &__resizer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 25%;
+      right: 2px;
+      width: 1px;
+      height: 50%;
+      background: transparent;
+    }
+
+    &:hover::after {
+      background: var(--qiu-color-primary, #0f766e);
+    }
+  }
+
+  &__cell--header {
+    /* resizer 需要相对定位；固定列另行覆盖为 sticky */
+    position: relative;
+  }
+
+  &__edit-icon {
+    flex-shrink: 0;
+    margin-right: 2px;
+    font-size: 13px;
+    color: #909399;
+    transform: none;
+  }
+
+  &__row.is-current {
+    background: #dceeff !important;
+  }
+
+  &__row.is-current &__cell--fixed-left,
+  &__row.is-current &__cell--fixed-right {
+    background: #dceeff !important;
+  }
+
+  &--hover &__row:hover {
+    background: #f0f7ff;
+  }
+
+  &--hover &__row.is-current:hover {
+    background: #d0e7ff !important;
+  }
+
+  &__cell.is-area-cell {
+    background: rgba(15, 118, 110, 0.08) !important;
+  }
+
+  &__cell.is-active-cell {
+    outline: 2px solid var(--qiu-color-primary, #0f766e);
+    outline-offset: -2px;
+    position: relative;
+    z-index: 1;
+  }
+
+  &--border-outer &__cell {
+    border-right: none;
+    border-bottom: 1px solid var(--qiu-table-border-color);
+  }
+
+  &--border-inner &__cell {
+    border-right: 1px solid var(--qiu-table-border-color);
+    border-bottom: 1px solid var(--qiu-table-border-color);
+  }
+
+  /* 表头/表尾对齐靠 useScrollSync：paddingRight + 强制与 body table 同像素宽并同步 col */
+  &__header-wrap,
+  &__footer-wrap {
+    position: relative;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    background: var(--qiu-table-header-bg);
+  }
+
+  &__footer-wrap {
+    background: var(--qiu-table-footer-bg);
+  }
+
+  /*
+   * 有纵向滚动条时 header/footer 右侧 padding 让位，末列又去掉 border-right，
+   * 会在末列与滚动条之间缺一截竖线。在 padding 内侧补回。
+   */
+  &--scroll-y {
+    &.qiu-table--border,
+    &.qiu-table--border-full,
+    &.qiu-table--border-outer {
+      .qiu-table__header-wrap,
+      .qiu-table__footer-wrap {
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: var(--qiu-table-v-scrollbar, 0px);
+          bottom: 0;
+          width: 1px;
+          background: var(--qiu-table-border-color);
+          pointer-events: none;
+          z-index: 2;
+        }
+      }
+    }
+  }
+
+  &__body-wrap {
+    flex: 1;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+    background: #fff;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
+    scrollbar-color: #c0c4cc transparent;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #f5f7fa;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #c0c4cc;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: #a8abb2;
+    }
+
+    &::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+  }
+
+  &__inner {
+    /* 窄于容器时 width:100% 铺满；宽于容器时 inline minWidth 撑开触发横向滚动 */
+    width: 100%;
+    max-width: none;
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+    background: #fff;
+
+    /* 行高落在 tr 上，便于 td/内层用 height:100% 垂直居中 */
+    > thead > tr,
+    > tbody > tr {
+      height: var(--qiu-table-row-height);
+    }
+  }
+
+  &__header-table {
+    background: var(--qiu-table-header-bg);
+  }
+
+  &--border &__cell,
+  &--border-full &__cell {
+    border-right: 1px solid var(--qiu-table-border-color);
+    border-bottom: 1px solid var(--qiu-table-border-color);
+  }
+
+  &--border &__cell:last-child,
+  &--border-full &__cell:last-child {
+    border-right: none;
+  }
+
+  &__cell {
+    position: relative;
+    box-sizing: border-box;
+    height: var(--qiu-table-row-height);
+    max-height: var(--qiu-table-row-height);
+    padding: 0;
+    overflow: hidden;
+    vertical-align: middle;
+    text-align: left;
+    background: inherit;
+
+    &.is-align-left {
+      text-align: left;
+    }
+
+    &.is-align-center {
+      text-align: center;
+    }
+
+    &.is-align-right {
+      text-align: right;
+    }
+
+    &--header {
+      font-weight: 700;
+      color: var(--qiu-table-header-font-color);
+      white-space: nowrap;
+      user-select: none;
+      background: var(--qiu-table-header-bg);
+      max-height: none;
+      overflow: visible;
+    }
+
+    &--footer {
+      font-weight: 600;
+      background: var(--qiu-table-footer-bg);
+      max-height: none;
+    }
+
+    &--expand-content,
+    &--empty {
+      height: auto;
+      max-height: none;
+      overflow: visible;
+
+      .qiu-table__cell-inner {
+        position: relative;
+        width: 100%;
+        height: auto;
+        min-height: 0;
+        max-height: none;
+      }
+    }
+
+    &--sortable {
+      cursor: pointer;
+    }
+
+    &--selection,
+    &--index {
+      text-align: center;
+      width: 48px;
+    }
+
+    &--selection .qiu-checkbox {
+      height: auto;
+      margin-right: 0;
+    }
+
+    &--index {
+      width: 55px;
+    }
+
+    &--empty {
+      height: auto;
+      padding: 32px 12px;
+      text-align: center;
+      color: #909399;
+    }
+
+    &--fixed-left,
+    &--fixed-right {
+      /* 必须压过 .qiu-table__cell / .qiu-table__cell--header 的 position:relative */
+      position: sticky !important;
+      z-index: 2;
+      overflow: visible;
+      background-clip: padding-box;
+    }
+
+    &--fixed-left {
+      left: 0;
+    }
+
+    &--fixed-right {
+      right: 0;
+    }
+
+    &--fixed-left-last::after,
+    &--fixed-right-first::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 10px;
+      pointer-events: none;
+      content: '';
+    }
+
+    /* 仅当表格出现横向滚动条时才显示 fixed 列阴影 */
+    &--fixed-left-last::after {
+      right: -10px;
+      box-shadow: none;
+    }
+
+    &--fixed-right-first::before {
+      left: -10px;
+      box-shadow: none;
+    }
+
+    /* 编辑态不改 padding/行高 —— 避免整表抖动 */
+    &.is-editing:not(.is-input-fill) .qiu-table__cell-inner {
+      /* keep same padding */
+    }
+
+    &.is-input-fill {
+      z-index: 3;
+      overflow: hidden;
+    }
+  }
+
+  &--scroll-x {
+    .qiu-table__cell--fixed-left-last::after {
+      box-shadow: inset 10px 0 8px -8px rgb(0 0 0 / 15%);
+    }
+
+    .qiu-table__cell--fixed-right-first::before {
+      box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 15%);
+    }
+  }
+
+  &__header-table &__cell--fixed-left,
+  &__header-table &__cell--fixed-right,
+  &__footer-table &__cell--fixed-left,
+  &__footer-table &__cell--fixed-right {
+    z-index: 4;
+  }
+
+  &__header-table &__cell--fixed-left,
+  &__header-table &__cell--fixed-right {
+    background: var(--qiu-table-header-bg);
+  }
+
+  &__footer-table &__cell--fixed-left,
+  &__footer-table &__cell--fixed-right {
+    background: var(--qiu-table-footer-bg);
+  }
+
+  &__cell-inner {
+    /* inline-flex 才能被 td 的 vertical-align: middle 垂直居中；块级 flex 会顶对齐 */
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    min-height: 0;
+    max-height: none;
+    padding: 0 var(--qiu-table-cell-padding-x);
+    margin: 0;
+    overflow: hidden;
+    line-height: 1.25;
+    vertical-align: middle;
+  }
+
+  &__cell.is-align-left &__cell-inner {
+    justify-content: flex-start;
+  }
+
+  &__cell.is-align-center &__cell-inner {
+    justify-content: center;
+  }
+
+  &__cell.is-align-right &__cell-inner {
+    justify-content: flex-end;
+  }
+
+  &__cell--ellipsis &__cell-inner:not(.qiu-table__cell-inner--input-fill) {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* 仅 input：在单元格内铺满 */
+  &__cell-inner--input-fill {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+    min-height: calc(var(--qiu-table-row-height) - 2px);
+    max-height: none;
+    padding: 0 !important;
+    overflow: hidden;
+    vertical-align: middle;
+    background: #fff;
+  }
+
+  &__editor-host {
+    flex: 1;
+    min-width: 0;
+    max-width: 100%;
+    height: 100%;
+  }
+
+  &__editor-host--input-fill {
+    display: flex;
+    flex: 1;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+  }
+
+  &__th {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    min-height: var(--qiu-table-row-height);
+    max-width: 100%;
+    padding: 0 var(--qiu-table-cell-padding-x);
+    line-height: 1.25;
+  }
+
+  &__cell--header.is-align-left &__th {
+    justify-content: flex-start;
+  }
+
+  &__cell--header.is-align-center &__th {
+    justify-content: center;
+  }
+
+  &__cell--header.is-align-right &__th {
+    justify-content: flex-end;
+  }
+
+  &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.25;
+  }
+
+  &__sort-num {
+    position: absolute;
+    right: -8px;
+    bottom: -2px;
+    font-size: 10px;
+    font-style: normal;
+    color: var(--qiu-color-primary, #409eff);
+  }
+
+  &__sort {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    gap: 2px;
+    align-items: center;
+    width: 10px;
+    color: #c0c4cc;
+  }
+
+  &__radio {
+    width: 14px;
+    height: 14px;
+    accent-color: var(--qiu-color-primary, #0f766e);
+    cursor: pointer;
+  }
+
+  &__expand-row td {
+    background: #fafafa;
+  }
+
+  &__expand-content {
+    padding: 12px 16px;
+  }
+
+  &__expand-json {
+    margin: 0;
+    font-size: 12px;
+    white-space: pre-wrap;
+  }
+
+  &__row.is-dirty > .qiu-table__cell {
+    box-shadow: inset 0 -2px 0 #e6a23c;
+  }
+
+  &__row.is-radio-checked {
+    background: #e6f7ff;
+  }
+
+  &__cell--col-drag {
+    cursor: move;
+  }
+
+  &__cell--expand,
+  &__cell--radio {
+    text-align: center;
+    width: 48px;
+  }
+
+  &__caret {
+    display: block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+
+    &--up {
+      border-width: 0 4px 5px;
+      border-color: transparent transparent currentColor;
+    }
+
+    &--down {
+      border-width: 5px 4px 0;
+      border-color: currentColor transparent transparent;
+    }
+  }
+
+  &__sort.is-asc .qiu-table__caret--up,
+  &__sort.is-desc .qiu-table__caret--down {
+    color: var(--qiu-color-primary, #409eff);
+  }
+
+  &__filter-btn {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    color: #c0c4cc;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    transition: color 0.15s ease, background 0.15s ease;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+
+    &:hover {
+      color: var(--qiu-color-primary, #0f766e);
+      background: var(--qiu-color-primary-light-9, rgb(15 118 110 / 8%));
+    }
+
+    &.is-active {
+      color: var(--qiu-color-primary, #0f766e);
+      background: var(--qiu-color-primary-light-9, rgb(15 118 110 / 10%));
+    }
+  }
+
+  &__row {
+    background: #fff;
+
+    &:hover {
+      background: #f5f7fa;
+    }
+
+    &.is-selected {
+      background: #e6f7ff;
+    }
+
+    &--striped {
+      background: #fafafa;
+    }
+
+    &--striped:hover {
+      background: #f5f7fa;
+    }
+  }
+
+  &__body &__cell--fixed-left,
+  &__body &__cell--fixed-right {
+    background: #fff;
+  }
+
+  &__body &__row--striped &__cell--fixed-left,
+  &__body &__row--striped &__cell--fixed-right {
+    background: #fafafa;
+  }
+
+  &__row.is-selected &__cell--fixed-left,
+  &__row.is-selected &__cell--fixed-right {
+    background: #e6f7ff;
+  }
+
+  &__row:hover &__cell--fixed-left,
+  &__row:hover &__cell--fixed-right {
+    background: #f5f7fa;
+  }
+
+  &__text {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    line-height: 1.25;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__date-input {
+    width: 100%;
+    height: 28px;
+    padding: 0 8px;
+    font-size: inherit;
+    border: 1px solid var(--qiu-table-border-color);
+    border-radius: 2px;
+    box-sizing: border-box;
+    background: #fff;
+  }
+
+  &__drag-handle {
+    display: inline-flex;
+    color: #909399;
+    cursor: grab;
+  }
+
+  &__tree-cell {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+  }
+
+  &__tree-toggle {
+    display: inline-flex;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #909399;
+    cursor: pointer;
+  }
+
+  &__tree-placeholder {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+  }
+
+  &__pager {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    padding: 8px 0 0;
+  }
+
+  &__import-input {
+    display: none;
+  }
+
+  &__custom-panel {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 16px;
+    padding: 8px 12px;
+    margin-bottom: 8px;
+    border: 1px solid var(--qiu-table-border-color);
+    border-radius: 4px;
+    background: #fafafa;
+  }
+
+  &__custom-item {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    font-size: 12px;
+    color: #606266;
+    cursor: pointer;
+  }
+
+  &__export-dialog {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &__export-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__export-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  &__export-fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+    max-height: 220px;
+    padding: 10px 12px;
+    overflow: auto;
+    background: #fafafa;
+    border: 1px solid var(--qiu-table-border-color);
+    border-radius: 6px;
+  }
+
+  &__export-field {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    min-width: 120px;
+    font-size: 13px;
+    color: #606266;
+    cursor: pointer;
+  }
+
+  &__export-formats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  &__export-format,
+  &__export-mode {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    padding: 6px 12px;
+    font-size: 13px;
+    color: #606266;
+    cursor: pointer;
+    background: #f5f7fa;
+    border: 1px solid var(--qiu-table-border-color);
+    border-radius: 6px;
+
+    &.is-active {
+      color: var(--qiu-color-primary, #0f766e);
+      background: var(--qiu-color-primary-light-9, #e6f4f2);
+      border-color: var(--qiu-color-primary, #0f766e);
+    }
+
+    input {
+      margin: 0;
+    }
+  }
+
+  &__export-modes {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  &__export-range {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-top: 12px;
+    font-size: 13px;
+    color: var(--qiu-text-color-regular, #606266);
+  }
+
+  &__export-range-input {
+    width: 60px;
+    height: 28px;
+    padding: 0 6px;
+    text-align: center;
+    border: 1px solid var(--qiu-table-border-color);
+    border-radius: 4px;
+    outline: none;
+
+    &:focus {
+      border-color: var(--qiu-color-primary, #0f766e);
+    }
+  }
+
+  &__cell.is-valid-error {
+    box-shadow: inset 0 0 0 1px #f56c6c;
+  }
+
+  &__row {
+    height: var(--qiu-table-row-height);
+  }
+
+  &__virtual-pad {
+    height: auto;
+
+    td {
+      height: auto !important;
+      max-height: none !important;
+      padding: 0 !important;
+      border: none !important;
+      background: transparent !important;
+      vertical-align: top;
+    }
+  }
+
+  &__virtual-pad-space {
+    display: block;
+    width: 1px;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  /* input 铺满：无圆角、贴满 td（盖过 QiuInput size 固定高度） */
+  &__cell-inner--input-fill .qiu-input,
+  &__cell-inner--input-fill .qiu-table__input-fill {
+    display: flex !important;
+    box-sizing: border-box;
+    width: 100% !important;
+    height: 100% !important;
+    min-height: 100% !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: inset 0 0 0 1px transparent !important;
+  }
+
+  &__cell-inner--input-fill .qiu-input.is-focused,
+  &__cell-inner--input-fill .qiu-table__input-fill.is-focused {
+    box-shadow: inset 0 0 0 1px var(--qiu-color-primary, #0f766e) !important;
+  }
+
+  &__cell-inner--input-fill .qiu-input__inner,
+  &__cell-inner--input-fill .qiu-input--default .qiu-input__inner,
+  &__cell-inner--input-fill .qiu-input--small .qiu-input__inner,
+  &__cell-inner--input-fill .qiu-input--large .qiu-input__inner {
+    box-sizing: border-box;
+    width: 100% !important;
+    height: 100% !important;
+    min-height: 100% !important;
+    padding: 0 var(--qiu-table-cell-padding-x) !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    line-height: normal !important;
+  }
+
+  /* input 铺满时让 wrapper 也撑满整行，避免固定高度导致编辑器贴顶 */
+  &__cell-inner--input-fill .qiu-input__wrapper {
+    height: 100% !important;
+  }
+
+  /* 非 input 编辑器：锁高度、不铺满单元格（按内容/合适宽度） */
+  &__cell.is-editing:not(.is-input-fill) .qiu-select,
+  &__cell.is-editing:not(.is-input-fill) .qiu-input-number,
+  &__cell.is-editing:not(.is-input-fill) .qiu-table__date-input,
+  &__cell.is-editing:not(.is-input-fill) .qiu-time {
+    box-sizing: border-box;
+    width: auto;
+    max-width: 100%;
+    height: calc(var(--qiu-table-row-height) - 10px) !important;
+    max-height: calc(var(--qiu-table-row-height) - 10px) !important;
+  }
+
+  &__cell.is-editing:not(.is-input-fill) .qiu-select {
+    min-width: 96px;
+  }
+
+  &__cell.is-editing:not(.is-input-fill) .qiu-time {
+    min-width: 120px;
+  }
+
+  &__cell.is-editing:not(.is-input-fill) .qiu-input-number {
+    width: 110px;
+  }
+
+  &__date-input {
+    box-sizing: border-box;
+    width: auto;
+    min-width: 132px;
+    max-width: 100%;
+    height: calc(var(--qiu-table-row-height) - 10px);
+    padding: 0 8px;
+    font: inherit;
+    color: inherit;
+    background: #fff;
+    border: 1px solid var(--qiu-table-border-color, #dcdfe6);
+    border-radius: 4px;
+    outline: none;
+
+    &:focus {
+      border-color: var(--qiu-color-primary, #0f766e);
+    }
+  }
+}
+
+.qiu-table__filter-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 2999;
+}
+
+.qiu-table__filter-panel {
+  position: fixed;
+  z-index: 3000;
+  box-sizing: border-box;
+  width: 200px;
+  overflow: hidden;
+  background: var(--qiu-bg-color, #fff);
+  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
+  border-radius: 8px;
+  box-shadow: 0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%);
+}
+
+.qiu-table__filter-head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid var(--qiu-border-color-lighter, #ebeef5);
+}
+
+.qiu-table__filter-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--qiu-text-color-primary, #303133);
+}
+
+.qiu-table__filter-checkall {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  color: var(--qiu-text-color-regular, #606266);
+
+  .qiu-checkbox {
+    height: auto;
+    margin-right: 0;
+    font-size: 12px;
+  }
+}
+
+.qiu-table__filter-list {
+  max-height: 220px;
+  padding: 6px;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+.qiu-table__filter-item {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 32px;
+  padding: 2px 8px;
+  margin: 0;
+  font-size: 13px;
+  color: var(--qiu-text-color-regular, #606266);
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: var(--qiu-fill-color-light, #f5f7fa);
+  }
+
+  .qiu-checkbox {
+    width: 100%;
+    height: auto;
+    margin-right: 0;
+    font-size: 13px;
+  }
+
+  .qiu-checkbox__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.qiu-table__filter-empty {
+  padding: 20px 12px;
+  font-size: 13px;
+  color: var(--qiu-text-color-secondary, #909399);
+  text-align: center;
+}
+
+.qiu-table__filter-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px 12px 10px;
+  background: var(--qiu-fill-color-blank, #fafafa);
+  border-top: 1px solid var(--qiu-border-color-lighter, #ebeef5);
+}
+
+.qiu-table__filter-action {
+  min-width: 56px;
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+  line-height: 26px;
+  color: #fff;
+  cursor: pointer;
+  background: var(--qiu-color-primary, #0f766e);
+  border: 1px solid var(--qiu-color-primary, #0f766e);
+  border-radius: 4px;
+  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+
+  &:hover {
+    opacity: 0.92;
+  }
+
+  &.is-plain {
+    color: var(--qiu-text-color-regular, #606266);
+    background: #fff;
+    border-color: var(--qiu-border-color, #dcdfe6);
+
+    &:hover {
+      color: var(--qiu-color-primary, #0f766e);
+      border-color: var(--qiu-color-primary-light-5, #79bbff);
+      opacity: 1;
+    }
+  }
+}
+
+.qiu-table__ctx-menu {
+  position: fixed;
+  z-index: 3000;
+  min-width: 140px;
+  padding: 4px 0;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.qiu-table__ctx-item {
+  display: block;
+  width: 100%;
+  padding: 6px 14px;
+  font-size: 13px;
+  color: #606266;
+  text-align: left;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: #f5f7fa;
+    color: var(--qiu-color-primary, #0f766e);
+  }
+
+  &:disabled {
+    color: #c0c4cc;
+    cursor: not-allowed;
+  }
+}
+
+.qiu-table__ctx-divider {
+  height: 1px;
+  margin: 4px 0;
+  background: #ebeef5;
+}