advance-semi-theme 1.0.0

package/dist/antd/styles/components/space.css

@@ -0,0 +1,59 @@
+/**
+ * Space 间距 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space {
+  display: inline-flex;
+}
+
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space-item {
+  display: flex;
+}
+
+/* 分割线 */
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space-split {
+  color: var(--semi-color-border);
+}
+
+/* 紧凑模式 */
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space-compact .ant-btn {
+  border-radius: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space-compact .ant-btn:first-child {
+  border-start-start-radius: var(--semi-border-radius-medium);
+  border-end-start-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space-compact .ant-btn:last-child {
+  border-start-end-radius: var(--semi-border-radius-medium);
+  border-end-end-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space-compact .ant-input {
+  border-radius: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space-compact .ant-input:first-child {
+  border-start-start-radius: var(--semi-border-radius-medium);
+  border-end-start-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space-compact .ant-input:last-child {
+  border-start-end-radius: var(--semi-border-radius-medium);
+  border-end-end-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space-compact .ant-select .ant-select-selector {
+  border-radius: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space-compact .ant-select:first-child .ant-select-selector {
+  border-start-start-radius: var(--semi-border-radius-medium);
+  border-end-start-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-space]) .ant-space-compact .ant-select:last-child .ant-select-selector {
+  border-start-end-radius: var(--semi-border-radius-medium);
+  border-end-end-radius: var(--semi-border-radius-medium);
+}

package/dist/antd/styles/components/spin.css

@@ -0,0 +1,91 @@
+/**
+ * Spin 加载中 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-spin]) .ant-spin {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-spin]) .ant-spin-dot-item {
+  background: var(--semi-color-primary);
+}
+
+/* 提示文字 */
+.semi:where([data-semi="all"], [data-semi-spin]) .ant-spin-text {
+  color: var(--semi-color-primary);
+  font-size: var(--semi-font-size-regular);
+  margin-top: 8px;
+}
+
+/* 容器 */
+.semi:where([data-semi="all"], [data-semi-spin]) .ant-spin-container {
+  transition: opacity var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-spin]) .ant-spin-blur {
+  opacity: 0.5;
+  user-select: none;
+  pointer-events: none;
+}
+
+/* 嵌套容器 */
+.semi:where([data-semi="all"], [data-semi-spin]) .ant-spin-nested-loading {
+  position: relative;
+}
+
+.semi:where([data-semi="all"], [data-semi-spin]) .ant-spin-nested-loading > div > .ant-spin {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  z-index: 4;
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: 400px;
+}
+
+.semi:where([data-semi="all"], [data-semi-spin]) .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 50%;
+  margin: -10px;
+}
+
+/* 尺寸 */
+.semi:where([data-semi="all"], [data-semi-spin]) .ant-spin-sm .ant-spin-dot {
+  font-size: 14px;
+}
+
+.semi:where([data-semi="all"], [data-semi-spin]) .ant-spin-lg .ant-spin-dot {
+  font-size: 32px;
+}
+
+/* ==========================================================================
+   全屏加载 (Portal 组件 - 渲染在 body 下)
+   ========================================================================== */
+
+body.semi .ant-spin-fullscreen,
+.semi .ant-spin-fullscreen {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+body.semi.semi-dark .ant-spin-fullscreen,
+body.semi-dark .ant-spin-fullscreen,
+.semi.dark .ant-spin-fullscreen {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+body.semi .ant-spin-fullscreen .ant-spin,
+.semi .ant-spin-fullscreen .ant-spin {
+  color: var(--semi-color-primary);
+}
+
+body.semi .ant-spin-fullscreen .ant-spin-dot-item,
+.semi .ant-spin-fullscreen .ant-spin-dot-item {
+  background: var(--semi-color-primary);
+}
+
+body.semi .ant-spin-fullscreen .ant-spin-text,
+.semi .ant-spin-fullscreen .ant-spin-text {
+  color: var(--semi-color-primary);
+}

package/dist/antd/styles/components/statistic.css

@@ -0,0 +1,48 @@
+/**
+ * Statistic 统计数值 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-statistic]) .ant-statistic {
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 标题 */
+.semi:where([data-semi="all"], [data-semi-statistic]) .ant-statistic-title {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+  margin-bottom: 4px;
+}
+
+/* 内容 */
+.semi:where([data-semi="all"], [data-semi-statistic]) .ant-statistic-content {
+  color: var(--semi-color-text-0);
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.semi:where([data-semi="all"], [data-semi-statistic]) .ant-statistic-content-value-int {
+  font-size: 24px;
+}
+
+.semi:where([data-semi="all"], [data-semi-statistic]) .ant-statistic-content-value-decimal {
+  font-size: 16px;
+}
+
+/* 前缀和后缀 */
+.semi:where([data-semi="all"], [data-semi-statistic]) .ant-statistic-content-prefix,
+.semi:where([data-semi="all"], [data-semi-statistic]) .ant-statistic-content-suffix {
+  font-size: 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-statistic]) .ant-statistic-content-prefix {
+  margin-inline-end: 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-statistic]) .ant-statistic-content-suffix {
+  margin-inline-start: 4px;
+}
+
+/* 倒计时 */
+.semi:where([data-semi="all"], [data-semi-statistic]) .ant-statistic-countdown .ant-statistic-content {
+  font-variant-numeric: tabular-nums;
+}

package/dist/antd/styles/components/steps.css

@@ -0,0 +1,176 @@
+/**
+ * Steps 步骤条 - Semi Design 风格
+ * 参考 semi-foundation/steps/variables.scss
+ */
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps {
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 步骤图标 - 等待状态 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-wait .ant-steps-item-icon {
+  align-items: center;
+  background: var(--semi-color-fill-0);
+  border: none;
+  border-radius: var(--semi-border-radius-circle, 50%);
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-wait .ant-steps-item-icon .ant-steps-icon {
+  color: var(--semi-color-text-2);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-wait:hover .ant-steps-item-icon {
+  background: var(--semi-color-secondary-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-wait:hover .ant-steps-item-icon .ant-steps-icon {
+  color: var(--semi-color-focus-border);
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-wait:hover .ant-steps-item-title,
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-wait:hover .ant-steps-item-description {
+  color: var(--semi-color-focus-border);
+}
+
+/* 进行中 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-process .ant-steps-item-icon {
+  align-items: center;
+  background: var(--semi-color-primary);
+  border: none;
+  border-radius: var(--semi-border-radius-circle, 50%);
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-process .ant-steps-item-icon .ant-steps-icon {
+  color: var(--semi-color-white);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* 已完成 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-finish .ant-steps-item-icon {
+  align-items: center;
+  background: var(--semi-color-primary);
+  border: none;
+  border-radius: var(--semi-border-radius-circle, 50%);
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon {
+  color: var(--semi-color-white);
+}
+
+/* 错误 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-error .ant-steps-item-icon {
+  background: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-error .ant-steps-item-icon .ant-steps-icon {
+  color: var(--semi-color-danger);
+}
+
+/* 标题 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-title {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+  font-weight: 600;
+  line-height: 24px;
+  padding-bottom: 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-process .ant-steps-item-title {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-finish .ant-steps-item-title {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-error .ant-steps-item-title {
+  color: var(--semi-color-danger);
+}
+
+/* 描述 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-description {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+  max-width: 268px;
+}
+
+/* 连接线 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-tail::after {
+  background: var(--semi-color-fill-2);
+  height: 1px;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-finish .ant-steps-item-tail::after {
+  background: var(--semi-color-primary);
+}
+
+/* 图标左侧间距 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-container {
+  padding-left: 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-item-icon {
+  margin-right: 8px;
+}
+
+/* 小尺寸 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-small .ant-steps-item-icon {
+  height: 24px;
+  width: 24px;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-small .ant-steps-item-icon .ant-steps-icon {
+  font-size: var(--semi-font-size-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-small .ant-steps-item-title {
+  font-size: var(--semi-font-size-regular);
+  line-height: 24px;
+}
+
+/* 点状步骤 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-dot .ant-steps-item-icon {
+  height: 8px;
+  width: 8px;
+  border: none;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-dot .ant-steps-item-process .ant-steps-item-icon {
+  background: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-dot .ant-steps-item-finish .ant-steps-item-icon {
+  background: var(--semi-color-primary);
+}
+
+/* 垂直步骤 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-vertical .ant-steps-item-tail::after {
+  width: 2px;
+  height: 100%;
+}
+
+/* 导航类型 */
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-navigation .ant-steps-item::before {
+  background: var(--semi-color-primary);
+  bottom: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-steps]) .ant-steps-navigation .ant-steps-item::after {
+  border-color: var(--semi-color-border);
+}

package/dist/antd/styles/components/switch.css

@@ -0,0 +1,128 @@
+/**
+ * Switch 开关 - Semi Design 风格
+ */
+
+/* ========== 基础样式 ========== */
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch {
+  background: var(--semi-color-fill-0);
+  height: 24px;
+  min-width: 40px;
+  border-radius: 12px;
+  transition: all 200ms var(--semi-transition-timing);
+}
+
+/* ========== 滑块 ========== */
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-handle {
+  width: 18px;
+  height: 18px;
+  top: 2px;
+  inset-inline-start: 2px;
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-handle::before {
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 1);
+  border: 1px solid var(--semi-color-border);
+  box-shadow: none;
+}
+
+/* ========== Hover 状态 ========== */
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch:hover:not(.ant-switch-disabled) {
+  background: var(--semi-color-fill-1);
+}
+
+/* ========== 选中状态 ========== */
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-checked {
+  background: var(--semi-color-success);
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-checked:hover:not(.ant-switch-disabled) {
+  background: var(--semi-color-success-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-checked:active:not(.ant-switch-disabled) {
+  background: var(--semi-color-success-active);
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-checked .ant-switch-handle {
+  inset-inline-start: calc(100% - 20px);
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-checked .ant-switch-handle::before {
+  border-color: transparent;
+}
+
+/* ========== Focus 状态 ========== */
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch:focus-visible {
+  outline: 3px solid var(--semi-color-primary-light-default);
+  outline-offset: 0;
+}
+
+/* ========== 禁用状态 ========== */
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-disabled {
+  background: transparent;
+  border: 1px solid var(--semi-color-border);
+  cursor: not-allowed;
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-disabled:hover {
+  background: transparent;
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-disabled .ant-switch-handle::before {
+  border: 1px solid var(--semi-color-border);
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-disabled.ant-switch-checked {
+  background: var(--semi-color-success-disabled);
+  border-color: transparent;
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-disabled.ant-switch-checked .ant-switch-handle::before {
+  border-color: transparent;
+}
+
+/* ========== 带文字 ========== */
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-inner-checked,
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-inner-unchecked {
+  font-size: 12px;
+  color: #fff;
+}
+
+/* ========== 尺寸 - Small ========== */
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-small {
+  height: 16px;
+  min-width: 26px;
+  border-radius: 8px;
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-small .ant-switch-handle {
+  width: 12px;
+  height: 12px;
+  top: 2px;
+  inset-inline-start: 1px;
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-small.ant-switch-checked .ant-switch-handle {
+  inset-inline-start: calc(100% - 13px);
+}
+
+/* ========== Loading 状态 ========== */
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-loading {
+  opacity: 0.8;
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-loading-icon {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-switch]) .ant-switch-checked .ant-switch-loading-icon {
+  color: #fff;
+}

package/dist/antd/styles/components/table.css

@@ -0,0 +1,197 @@
+/**
+ * Table 表格 - Semi Design 风格
+ */
+
+/* ========== 表格容器 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table {
+  background: var(--semi-color-bg-0);
+  border-radius: var(--semi-border-radius-medium);
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+}
+
+/* ========== 表头 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-thead > tr > th {
+  background: var(--semi-color-bg-1);
+  border-bottom: 2px solid var(--semi-color-border);
+  color: var(--semi-color-text-2);
+  font-weight: 600;
+  padding: 8px 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-thead > tr > th:first-child {
+  border-top-left-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-thead > tr > th:last-child {
+  border-top-right-radius: var(--semi-border-radius-medium);
+}
+
+/* ========== 表格单元格 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-tbody > tr > td {
+  border-bottom: 1px solid var(--semi-color-border);
+  padding: 12px 16px;
+  transition: background var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+/* ========== 悬停状态 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-tbody > tr:hover > td {
+  background: var(--semi-color-fill-0);
+}
+
+/* ========== 选中状态 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-tbody > tr.ant-table-row-selected > td {
+  background: var(--semi-color-primary-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-tbody > tr.ant-table-row-selected:hover > td {
+  background: var(--semi-color-primary-light-hover);
+}
+
+/* ========== 排序 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-column-sorter {
+  color: var(--semi-color-text-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-column-sorter-up.active,
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-column-sorter-down.active {
+  color: var(--semi-color-primary);
+}
+
+/* ========== 筛选触发器 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-filter-trigger {
+  color: var(--semi-color-text-2);
+  border-radius: var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-filter-trigger:hover {
+  background: var(--semi-color-fill-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-filter-trigger.active {
+  color: var(--semi-color-primary);
+}
+
+/* ========== 展开行 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-expanded-row > td {
+  background: var(--semi-color-fill-0);
+}
+
+/* ========== 空状态 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* ========== 固定列阴影 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-cell-fix-left-last::after,
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-cell-fix-right-first::after {
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);
+}
+
+/* ========== 分页 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-pagination {
+  margin: 16px 0 0;
+}
+
+/* ========== 边框模式 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-bordered .ant-table-container {
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-bordered .ant-table-thead > tr > th,
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-bordered .ant-table-tbody > tr > td {
+  border-right: 1px solid var(--semi-color-border);
+}
+
+/* ========== 小尺寸 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-small .ant-table-thead > tr > th,
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-small .ant-table-tbody > tr > td {
+  padding: 8px 12px;
+}
+
+/* ========== 中等尺寸 ========== */
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-middle .ant-table-thead > tr > th,
+.semi:where([data-semi="all"], [data-semi-table]) .ant-table-middle .ant-table-tbody > tr > td {
+  padding: 10px 14px;
+}
+
+/* ==========================================================================
+   筛选下拉菜单 (Portal 组件 - 渲染在 body 下)
+   ========================================================================== */
+
+body.semi .ant-table-filter-dropdown,
+.semi .ant-table-filter-dropdown {
+  background: var(--semi-color-bg-0);
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 8px;
+}
+
+body.semi .ant-table-filter-dropdown-tree,
+.semi .ant-table-filter-dropdown-tree {
+  padding: 8px;
+}
+
+body.semi .ant-table-filter-dropdown-search,
+.semi .ant-table-filter-dropdown-search {
+  border-bottom: 1px solid var(--semi-color-border);
+  padding: 8px;
+}
+
+body.semi .ant-table-filter-dropdown-search-input,
+.semi .ant-table-filter-dropdown-search-input {
+  background: var(--semi-color-fill-0);
+  border-color: transparent;
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .ant-table-filter-dropdown-search-input:focus,
+body.semi .ant-table-filter-dropdown-search-input:hover,
+.semi .ant-table-filter-dropdown-search-input:focus,
+.semi .ant-table-filter-dropdown-search-input:hover {
+  border-color: var(--semi-color-focus-border);
+}
+
+body.semi .ant-table-filter-dropdown-checkall,
+.semi .ant-table-filter-dropdown-checkall {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--semi-color-border);
+}
+
+body.semi .ant-table-filter-dropdown .ant-dropdown-menu,
+.semi .ant-table-filter-dropdown .ant-dropdown-menu {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  max-height: 264px;
+  overflow-y: auto;
+}
+
+body.semi .ant-table-filter-dropdown .ant-dropdown-menu-item,
+.semi .ant-table-filter-dropdown .ant-dropdown-menu-item {
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-0);
+  padding: 8px 12px;
+}
+
+body.semi .ant-table-filter-dropdown .ant-dropdown-menu-item:hover,
+.semi .ant-table-filter-dropdown .ant-dropdown-menu-item:hover {
+  background: var(--semi-color-fill-0);
+}
+
+body.semi .ant-table-filter-dropdown-btns,
+.semi .ant-table-filter-dropdown-btns {
+  border-top: 1px solid var(--semi-color-border);
+  padding: 8px;
+}
+
+body.semi .ant-table-filter-dropdown-link,
+.semi .ant-table-filter-dropdown-link {
+  color: var(--semi-color-primary);
+}
+
+body.semi .ant-table-filter-dropdown-link:hover,
+.semi .ant-table-filter-dropdown-link:hover {
+  color: var(--semi-color-primary-hover);
+}