@hsu-react/ui 2.2.12 → 2.2.14

package/es/components/Select/AutoCompleteSelect/index.module.scss

@@ -134,14 +134,18 @@
       // `.ant-select-content > input.ant-select-input`.
       :global(.ant-select-content),
       :global(.ant-select-input) {
-        height: 100%;
-
         font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
         color: inherit;
       }
 
+      // 高度只给 input。`.ant-select-content` 由 antd 用 `align-self: center` 在行里居中，
+      // 拉成 height: 100% 会让它自己撑满、居中失效，文字贴顶偏上。
+      :global(.ant-select-input) {
+        height: 100%;
+      }
+
       :global(.ant-select-placeholder) {
         display: inline-flex;
         align-items: center;
@@ -196,13 +200,13 @@
         }
       }
 
-      // Both icons are laid out by v6's flexbox root, so the absolute-position compensation
-      // (`inset-inline-end` / `translateY(-50%)`) that v5 needed is gone.
+      // 箭头由 v6 的 flex 根布局，居中不用补偿；**清除按钮不是** —— antd 仍然把它绝对定位，
+      // 用 `top: 50%` 加 `margin-top: -半个图标高` 拉回中线。把 margin-top 一并归零就只剩
+      // top: 50%，图标整个掉到中线以下（实测偏下 7px，正好半个 14px 图标）。
       :global(.ant-select-suffix),
       :global(.ant-select-clear) {
         width: 14px;
         height: 14px;
-        margin-top: 0px;
 
         font-size: 14px;
 
@@ -210,6 +214,17 @@
 
         pointer-events: all;
       }
+
+      :global(.ant-select-suffix) {
+        margin-top: 0px;
+      }
+
+      // 与箭头对齐。antd 的 `inset-inline-end: 11px` 是按「控件自带 11px 横向内边距」算的，
+      // 而这份内边距被挪到了外层，`.ant-select` 的 padding 是 0——箭头（flex 末位子项）没有
+      // 这 11px，绝对定位的清除按钮却还有，于是悬浮时图标会往左跳一格。
+      :global(.ant-select-clear) {
+        inset-inline-end: 0px;
+      }
     }
   }
 

package/es/components/Select/index.module.scss

@@ -148,14 +148,21 @@
     // `.ant-select-content > input.ant-select-input`.
     :global(.ant-select-content),
     :global(.ant-select-input) {
-      height: 100%;
-
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       color: inherit;
     }
 
+    // 高度只给 input：它是铺在控件上的那层输入框，要满高才好点。
+    //
+    // `.ant-select-content` **不能**给。antd 让它保持一行高（line-height 22px），再用
+    // `align-self: center` 在 32px 的行里居中；一旦拉成 height: 100%，它自己就撑满了，
+    // align-self 无事可做，22px 的行盒贴着顶边排，文字整体偏上（实测 5.5px）。
+    :global(.ant-select-input) {
+      height: 100%;
+    }
+
     :global(.ant-select-placeholder) {
       display: inline-flex;
       align-items: center;
@@ -205,7 +212,6 @@
     :global(.ant-select-clear) {
       width: 14px;
       height: 14px;
-      margin-top: 0px;
 
       font-size: 14px;
 
@@ -214,6 +220,25 @@
       pointer-events: all;
     }
 
+    // 箭头是 `.ant-select` 的 flex 子项，靠 align-items: center 居中，margin 归零无副作用。
+    // 清除按钮不一样：它是绝对定位的，antd 靠 `top: 50%` 再配一个 `margin-top: -半个图标高`
+    // 把它拉回中线。上面那条规则从前把 margin-top 一并重置成 0，等于只做了 top: 50%
+    // 而没有回拉，图标就整个掉到中线以下（实测偏下 7px，正好是半个 14px 图标）。
+    // 所以这里只重置箭头的，清除按钮的 margin-top 交给 antd。
+    :global(.ant-select-suffix) {
+      margin-top: 0px;
+    }
+
+    // 清除按钮要和箭头落在同一个位置——悬浮时它顶替箭头出现，位置一变就是「跳一下」。
+    //
+    // antd 给它 `inset-inline-end: 11px`，那是按「控件自己带 11px 横向内边距」算的；
+    // 本组件把这份内边距挪到了外层 `.select`、把 `.ant-select` 的 padding 清成了 0，
+    // 于是这 11px 对箭头（flex 末位子项，右缘就是 `.ant-select` 的右缘）不再存在，
+    // 对绝对定位的清除按钮却还在，两者正好差一个 11px。归零即对齐。
+    :global(.ant-select-clear) {
+      inset-inline-end: 0px;
+    }
+
     &:global(.ant-select-multiple) {
       // Keep the search input from claiming a slot of its own between the tags.
       :global(.ant-select-input) {

package/lib/components/Select/AutoCompleteSelect/index.module.scss

@@ -134,14 +134,18 @@
       // `.ant-select-content > input.ant-select-input`.
       :global(.ant-select-content),
       :global(.ant-select-input) {
-        height: 100%;
-
         font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
         color: inherit;
       }
 
+      // 高度只给 input。`.ant-select-content` 由 antd 用 `align-self: center` 在行里居中，
+      // 拉成 height: 100% 会让它自己撑满、居中失效，文字贴顶偏上。
+      :global(.ant-select-input) {
+        height: 100%;
+      }
+
       :global(.ant-select-placeholder) {
         display: inline-flex;
         align-items: center;
@@ -196,13 +200,13 @@
         }
       }
 
-      // Both icons are laid out by v6's flexbox root, so the absolute-position compensation
-      // (`inset-inline-end` / `translateY(-50%)`) that v5 needed is gone.
+      // 箭头由 v6 的 flex 根布局，居中不用补偿；**清除按钮不是** —— antd 仍然把它绝对定位，
+      // 用 `top: 50%` 加 `margin-top: -半个图标高` 拉回中线。把 margin-top 一并归零就只剩
+      // top: 50%，图标整个掉到中线以下（实测偏下 7px，正好半个 14px 图标）。
       :global(.ant-select-suffix),
       :global(.ant-select-clear) {
         width: 14px;
         height: 14px;
-        margin-top: 0px;
 
         font-size: 14px;
 
@@ -210,6 +214,17 @@
 
         pointer-events: all;
       }
+
+      :global(.ant-select-suffix) {
+        margin-top: 0px;
+      }
+
+      // 与箭头对齐。antd 的 `inset-inline-end: 11px` 是按「控件自带 11px 横向内边距」算的，
+      // 而这份内边距被挪到了外层，`.ant-select` 的 padding 是 0——箭头（flex 末位子项）没有
+      // 这 11px，绝对定位的清除按钮却还有，于是悬浮时图标会往左跳一格。
+      :global(.ant-select-clear) {
+        inset-inline-end: 0px;
+      }
     }
   }
 

package/lib/components/Select/index.module.scss

@@ -148,14 +148,21 @@
     // `.ant-select-content > input.ant-select-input`.
     :global(.ant-select-content),
     :global(.ant-select-input) {
-      height: 100%;
-
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       color: inherit;
     }
 
+    // 高度只给 input：它是铺在控件上的那层输入框，要满高才好点。
+    //
+    // `.ant-select-content` **不能**给。antd 让它保持一行高（line-height 22px），再用
+    // `align-self: center` 在 32px 的行里居中；一旦拉成 height: 100%，它自己就撑满了，
+    // align-self 无事可做，22px 的行盒贴着顶边排，文字整体偏上（实测 5.5px）。
+    :global(.ant-select-input) {
+      height: 100%;
+    }
+
     :global(.ant-select-placeholder) {
       display: inline-flex;
       align-items: center;
@@ -205,7 +212,6 @@
     :global(.ant-select-clear) {
       width: 14px;
       height: 14px;
-      margin-top: 0px;
 
       font-size: 14px;
 
@@ -214,6 +220,25 @@
       pointer-events: all;
     }
 
+    // 箭头是 `.ant-select` 的 flex 子项，靠 align-items: center 居中，margin 归零无副作用。
+    // 清除按钮不一样：它是绝对定位的，antd 靠 `top: 50%` 再配一个 `margin-top: -半个图标高`
+    // 把它拉回中线。上面那条规则从前把 margin-top 一并重置成 0，等于只做了 top: 50%
+    // 而没有回拉，图标就整个掉到中线以下（实测偏下 7px，正好是半个 14px 图标）。
+    // 所以这里只重置箭头的，清除按钮的 margin-top 交给 antd。
+    :global(.ant-select-suffix) {
+      margin-top: 0px;
+    }
+
+    // 清除按钮要和箭头落在同一个位置——悬浮时它顶替箭头出现，位置一变就是「跳一下」。
+    //
+    // antd 给它 `inset-inline-end: 11px`，那是按「控件自己带 11px 横向内边距」算的；
+    // 本组件把这份内边距挪到了外层 `.select`、把 `.ant-select` 的 padding 清成了 0，
+    // 于是这 11px 对箭头（flex 末位子项，右缘就是 `.ant-select` 的右缘）不再存在，
+    // 对绝对定位的清除按钮却还在，两者正好差一个 11px。归零即对齐。
+    :global(.ant-select-clear) {
+      inset-inline-end: 0px;
+    }
+
     &:global(.ant-select-multiple) {
       // Keep the search input from claiming a slot of its own between the tags.
       :global(.ant-select-input) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.2.12",
+  "version": "2.2.14",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/components/Select/AutoCompleteSelect/index.module.scss

@@ -134,14 +134,18 @@
       // `.ant-select-content > input.ant-select-input`.
       :global(.ant-select-content),
       :global(.ant-select-input) {
-        height: 100%;
-
         font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
         color: inherit;
       }
 
+      // 高度只给 input。`.ant-select-content` 由 antd 用 `align-self: center` 在行里居中，
+      // 拉成 height: 100% 会让它自己撑满、居中失效，文字贴顶偏上。
+      :global(.ant-select-input) {
+        height: 100%;
+      }
+
       :global(.ant-select-placeholder) {
         display: inline-flex;
         align-items: center;
@@ -196,13 +200,13 @@
         }
       }
 
-      // Both icons are laid out by v6's flexbox root, so the absolute-position compensation
-      // (`inset-inline-end` / `translateY(-50%)`) that v5 needed is gone.
+      // 箭头由 v6 的 flex 根布局，居中不用补偿；**清除按钮不是** —— antd 仍然把它绝对定位，
+      // 用 `top: 50%` 加 `margin-top: -半个图标高` 拉回中线。把 margin-top 一并归零就只剩
+      // top: 50%，图标整个掉到中线以下（实测偏下 7px，正好半个 14px 图标）。
       :global(.ant-select-suffix),
       :global(.ant-select-clear) {
         width: 14px;
         height: 14px;
-        margin-top: 0px;
 
         font-size: 14px;
 
@@ -210,6 +214,17 @@
 
         pointer-events: all;
       }
+
+      :global(.ant-select-suffix) {
+        margin-top: 0px;
+      }
+
+      // 与箭头对齐。antd 的 `inset-inline-end: 11px` 是按「控件自带 11px 横向内边距」算的，
+      // 而这份内边距被挪到了外层，`.ant-select` 的 padding 是 0——箭头（flex 末位子项）没有
+      // 这 11px，绝对定位的清除按钮却还有，于是悬浮时图标会往左跳一格。
+      :global(.ant-select-clear) {
+        inset-inline-end: 0px;
+      }
     }
   }
 

package/src/components/Select/index.module.scss

@@ -148,14 +148,21 @@
     // `.ant-select-content > input.ant-select-input`.
     :global(.ant-select-content),
     :global(.ant-select-input) {
-      height: 100%;
-
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       color: inherit;
     }
 
+    // 高度只给 input：它是铺在控件上的那层输入框，要满高才好点。
+    //
+    // `.ant-select-content` **不能**给。antd 让它保持一行高（line-height 22px），再用
+    // `align-self: center` 在 32px 的行里居中；一旦拉成 height: 100%，它自己就撑满了，
+    // align-self 无事可做，22px 的行盒贴着顶边排，文字整体偏上（实测 5.5px）。
+    :global(.ant-select-input) {
+      height: 100%;
+    }
+
     :global(.ant-select-placeholder) {
       display: inline-flex;
       align-items: center;
@@ -205,7 +212,6 @@
     :global(.ant-select-clear) {
       width: 14px;
       height: 14px;
-      margin-top: 0px;
 
       font-size: 14px;
 
@@ -214,6 +220,25 @@
       pointer-events: all;
     }
 
+    // 箭头是 `.ant-select` 的 flex 子项，靠 align-items: center 居中，margin 归零无副作用。
+    // 清除按钮不一样：它是绝对定位的，antd 靠 `top: 50%` 再配一个 `margin-top: -半个图标高`
+    // 把它拉回中线。上面那条规则从前把 margin-top 一并重置成 0，等于只做了 top: 50%
+    // 而没有回拉，图标就整个掉到中线以下（实测偏下 7px，正好是半个 14px 图标）。
+    // 所以这里只重置箭头的，清除按钮的 margin-top 交给 antd。
+    :global(.ant-select-suffix) {
+      margin-top: 0px;
+    }
+
+    // 清除按钮要和箭头落在同一个位置——悬浮时它顶替箭头出现，位置一变就是「跳一下」。
+    //
+    // antd 给它 `inset-inline-end: 11px`，那是按「控件自己带 11px 横向内边距」算的；
+    // 本组件把这份内边距挪到了外层 `.select`、把 `.ant-select` 的 padding 清成了 0，
+    // 于是这 11px 对箭头（flex 末位子项，右缘就是 `.ant-select` 的右缘）不再存在，
+    // 对绝对定位的清除按钮却还在，两者正好差一个 11px。归零即对齐。
+    :global(.ant-select-clear) {
+      inset-inline-end: 0px;
+    }
+
     &:global(.ant-select-multiple) {
       // Keep the search input from claiming a slot of its own between the tags.
       :global(.ant-select-input) {