.table-extend {
  :global {
    // ✅ 已解决，在 table-layout 中实现
    // antd 表格默认使用 overflow:scroll 导致当数据没有溢出时，还一直存在滚动条轨迹。
    // ⚠️ 但是如果 columns 有配置到 fixed:right 列头和内容会不对齐。这块处理成本高，所以这里还是保留 antd 的风格
    // .ant-table-body {
    //   overflow: auto !important;
    // }

    // .ant-table-cell[style='text-align: left;'],
    // .ant-table-cell[style='text-align: left!important;'],
    // .ant-table-cell[style='text-align: right;'],
    // .ant-table-cell[style='text-align: right!important;'],
    // .ant-table-cell[style='text-align: center;'],
    // .ant-table-cell[style='text-align: center!important;'] {

    .ant-table-cell:not(.ant-table-selection-column) {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }

    // 取消表格为 empty 的间距，还原为 8px
    .ant-table-placeholder {
      .ant-table-cell:not(.ant-table-selection-column) {
        padding-left: 8px !important;
        padding-right: 8px !important;
      }
    }

    td {
      .ant-btn-link {
        font-size: 12px;
        padding: 0;
        // 去掉 height 避免撑开单元格高度
        height: auto;
        // margin-left: 16px;
        &:not(:last-of-type) {
          margin-right: 16px;
        }
      }
    }
    /*
    UI规范，表头都居中。
    tips：如果需要个别不居中，可以使用 table [customHeaderCell](https://next.antdv.com/components/table-cn#Column) 方式自定义
    {
      title: '操作',
      dataIndex: 'action',
      customHeaderCell(column: any) {
        return {
          class: 'text-left'
        };
      }
    }
    */
    .ant-table-thead {
      .ant-table-cell {
        // 📝 UI 2期更改
        color: #252733;
        font-size: 14px;

        // UI统一，表格表头高度 height 54px，表格特性，内容超过高度时会自动撑开，⚠️ 如果是复杂表头的话，高度就不设置，扩展 a-table 的 props，传入 thead-height-normal=true 特殊处理
        height: 54px;

        text-align: center !important;

        // 单独配置了 headerCell 样式
        &.text-left {
          text-align: left !important;
          // padding-left: 24px !important;
          // padding-right: 24px !important;
        }
        &.text-center {
          text-align: center !important;
        }
        &.text-right {
          text-align: right !important;
          // padding-left: 24px !important;
          // padding-right: 24px !important;
        }
      }
    }

    // #region 📝 UI 2期更改
    .ant-table-tbody,
    .ant-table-summary {
      .ant-table-cell {
        font-size: 12px;
        color: #252733;
      }
    }

    // 操作按钮 14px
    .ant-table-cell {
      .ant-btn.ant-btn-link {
        font-size: 14px;
      }
    }

    // 分页器字体 12px 处理
    .ant-table-pagination {
      font-size: 12px;
      .ant-pagination-options-size-changer,
      .ant-pagination-options-quick-jumper input {
        font-size: 12px;
      }
    }
    // #endregion

    // loading 展示的时候不显示空状态
    .ant-spin-blur {
      .ant-table-placeholder {
        display: none;
      }
    }

    // sorter 重写图片
    .ant-table-column-sorter {
      .ant-table-column-sorter-inner {
        .ant-table-column-sorter-up,
        .ant-table-column-sorter-down {
          svg {
            visibility: hidden;
          }
          background-repeat: no-repeat;
          background-position: center;
        }
        .ant-table-column-sorter-up {
          background-image: url('../assets/sorter_up@3x.png');
          &.active {
            background-image: url('../assets/sorter_up_selected@3x.png');
          }
        }
        .ant-table-column-sorter-down {
          background-image: url('../assets/sorter_down@3x.png');

          &.active {
            background-image: url('../assets/sorter_down_selected@3x.png');
          }
        }
      }
    }
  }
  &:global {
    &.ant-table-wrapper--thead-height-normal {
      .ant-table-thead {
        .ant-table-cell {
          height: auto;
        }
      }
    }
  }

  &:global {
    // ✨ 隐藏 .ant-table-cell.ant-table-cell-scrollbar，因为在抽屉打开时，colgroup 最后一个 col 的隐藏并不会有效果
    &.table-extend--not-scrollbar {
      .ant-table-header {
        .ant-table-cell.ant-table-cell-scrollbar {
          display: none;
        }
      }
    }
    // ✨ 处理以下 issue
    // [table 表，scroll 同时使用 x 和 y 时，表头与列错位--如 demo #1658](https://github.com/vueComponent/ant-design-vue/issues/1658)
    // [antd y 轴设置 scroll 应该和表头固定有关系，详细看评论](https://github.com/vueComponent/ant-design-vue/issues/1658)
    // [表格组件，滚动设置 y 时，下拉条出现的不合理 #1697](https://github.com/vueComponent/ant-design-vue/issues/1697)
    &.table-extend--fix-table-scrollbar {
      .ant-table-body {
        overflow-y: auto !important;
      }
    }
  }
}
