@hsu-react/ui 0.0.1 → 0.0.3

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

@@ -6,6 +6,9 @@
 
   width: 100%;
   height: 100%;
+  // 父级未给定高度时（height:100% 解析为 auto），保证最小高度，
+  // 与 Input 等录入控件高度一致，避免被压扁或在搜索行中高度异常。
+  min-height: 32px;
   padding: 0px 11px;
 
   // CF 风格：随外观切换的描边输入控件
@@ -30,11 +33,11 @@
     .antdSelect {
       cursor: not-allowed;
 
-      .ant-select-selection-item {
+      :global(.ant-select-selection-item) {
         color: var(--cf-text-3);
       }
 
-      .ant-select-arrow {
+      :global(.ant-select-arrow) {
         cursor: not-allowed;
       }
     }
@@ -77,7 +80,7 @@
     margin-inline-start: 4px;
   }
 
-  &:has(> .ant-select-status-error) {
+  &:has(> :global(.ant-select-status-error)) {
     border: 1px solid #ff4d4f;
 
     .prefix,
@@ -113,20 +116,20 @@
     font-weight: inherit;
     color: inherit !important;
 
-    &:has(> .ant-select-arrow),
-    &:has(> .ant-select-clear) {
-      .ant-select-selector {
+    &:has(> :global(.ant-select-arrow)),
+    &:has(> :global(.ant-select-clear)) {
+      :global(.ant-select-selector) {
         padding-right: 20px;
       }
     }
 
     &.legacyHasArrowOrClear {
-      .ant-select-selector {
+      :global(.ant-select-selector) {
         padding-right: 20px;
       }
     }
 
-    .ant-select-selector {
+    :global(.ant-select-selector) {
       width: 100%;
       height: 100%;
       padding: 0;
@@ -145,7 +148,7 @@
         content: none;
       }
 
-      .ant-select-selection-wrap {
+      :global(.ant-select-selection-wrap) {
         height: 100%;
 
         font-family: inherit;
@@ -154,7 +157,7 @@
         color: inherit;
       }
 
-      .ant-select-selection-search {
+      :global(.ant-select-selection-search) {
         inset-inline-start: 0px;
         inset-inline-end: 0px;
 
@@ -173,7 +176,7 @@
         }
       }
 
-      .ant-select-selection-placeholder {
+      :global(.ant-select-selection-placeholder) {
         display: inline-flex;
         align-items: center;
 
@@ -185,7 +188,7 @@
         font-weight: inherit;
       }
 
-      .ant-select-selection-item {
+      :global(.ant-select-selection-item) {
         padding-inline-end: 0px;
 
         font-family: inherit;
@@ -194,8 +197,8 @@
         color: inherit;
       }
 
-      .ant-select-selection-overflow-item {
-        .ant-select-selection-item {
+      :global(.ant-select-selection-overflow-item) {
+        :global(.ant-select-selection-item) {
           line-height: normal;
 
           padding-inline-end: 4px;
@@ -203,34 +206,34 @@
       }
     }
 
-    &.ant-select-focused {
-      .ant-select-selector {
+    &:global(.ant-select-focused) {
+      :global(.ant-select-selector) {
         border: none !important;
 
         box-shadow: none !important;
       }
     }
 
-    &.ant-select-open {
-      .ant-select-arrow {
+    &:global(.ant-select-open) {
+      :global(.ant-select-arrow) {
         transform: rotate(-180deg) translateY(50%);
       }
 
       &.noArrowAnimation {
-        .ant-select-arrow {
+        :global(.ant-select-arrow) {
           transform: translateY(-50%);
           transition: none !important;
         }
       }
     }
 
-    &.ant-select-status-error {
-      .ant-select-selector {
+    &:global(.ant-select-status-error) {
+      :global(.ant-select-selector) {
         border: none !important;
       }
     }
 
-    .ant-select-arrow {
+    :global(.ant-select-arrow) {
       width: 14px;
       height: 14px;
       margin-top: 0px;
@@ -244,7 +247,7 @@
       pointer-events: all;
     }
 
-    .ant-select-clear {
+    :global(.ant-select-clear) {
       width: 14px;
       height: 14px;
       margin-top: 0px;
@@ -256,17 +259,17 @@
       inset-inline-end: 0px;
     }
 
-    &.ant-select-multiple {
-      > .ant-select-selector {
-        > .ant-select-selection-overflow {
-          .ant-select-selection-search {
+    &:global(.ant-select-multiple) {
+      > :global(.ant-select-selector) {
+        > :global(.ant-select-selection-overflow) {
+          :global(.ant-select-selection-search) {
             width: 0px !important;
 
             margin-inline-start: 0px;
           }
         }
 
-        > .ant-select-selection-placeholder {
+        > :global(.ant-select-selection-placeholder) {
           inset-inline-start: 0px;
         }
       }
@@ -274,14 +277,14 @@
   }
 
   &.popupMatchContentWidth {
-    .ant-select-dropdown {
+    :global(.ant-select-dropdown) {
       [class="rc-virtual-list-holder-inner"] {
         position: relative !important;
       }
     }
   }
 
-  .ant-select-dropdown {
+  :global(.ant-select-dropdown) {
     position: fixed;
 
     font-family: inherit;
@@ -291,7 +294,7 @@
 
     border-radius: inherit;
 
-    .ant-select-item {
+    :global(.ant-select-item) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
@@ -300,9 +303,9 @@
       border-radius: inherit;
     }
 
-    .ant-select-item-empty,
-    .ant-empty,
-    .ant-empty-description {
+    :global(.ant-select-item-empty),
+    :global(.ant-empty),
+    :global(.ant-empty-description) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;

package/lib/components/Slider/index.module.less

@@ -1,4 +1,5 @@
 .slider {
+  width: 100%;
   height: 32px;
   margin: 0px;
   padding-block: 0px;
@@ -6,14 +7,14 @@
   overflow-x: hidden;
   overflow-y: visible;
 
-  .ant-slider-step,
-  .ant-slider-track,
-  .ant-slider-rail {
+  :global(.ant-slider-step),
+  :global(.ant-slider-track),
+  :global(.ant-slider-rail) {
     top: 0px;
     height: 100% !important;
   }
 
-  .ant-slider-handle {
+  :global(.ant-slider-handle) {
     position: relative;
     top: 50%;
     transform: translate(calc(-50% - 4px), calc(-50% + 1px)) !important;

package/lib/components/Spreadsheet/index.module.less

@@ -4,8 +4,8 @@
 
   overflow: hidden;
 
-  .x-spreadsheet-toolbar,
-  .x-spreadsheet-bottombar {
+  :global(.x-spreadsheet-toolbar),
+  :global(.x-spreadsheet-bottombar) {
     width: 100% !important;
   }
 
@@ -13,14 +13,14 @@
     background-size: auto;
   }
 
-  .x-spreadsheet-menu {
+  :global(.x-spreadsheet-menu) {
     > li:first-child {
       display: none;
     }
   }
 
   &.showBottomTool {
-    .x-spreadsheet-menu {
+    :global(.x-spreadsheet-menu) {
       > li:first-child {
         display: list-item;
       }

package/lib/components/Switch/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _antd = require("antd");
 var _react = _interopRequireDefault(require("react"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Switch = props => {
@@ -17,10 +18,13 @@ const Switch = props => {
     unCheckedChildren,
     ...rest
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Switch, {
-    ...rest,
-    checkedChildren: checkedChildren || options?.find(item => item.value === trueValue)?.label,
-    unCheckedChildren: unCheckedChildren || options?.find(item => item.value === falseValue)?.label
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: _indexModule.default.SwitchWrapper,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Switch, {
+      ...rest,
+      checkedChildren: checkedChildren || options?.find(item => item.value === trueValue)?.label,
+      unCheckedChildren: unCheckedChildren || options?.find(item => item.value === falseValue)?.label
+    })
   });
 };
 var _default = exports.default = Switch;

package/lib/components/Switch/index.module.less

@@ -0,0 +1,7 @@
+// 让开关在表单/录入场景中与 Input、Select 等控件保持一致的 32px 最小高度。
+// 开关本体（pill）保持原始尺寸，由该容器居中占位，故不会被拉大。
+.SwitchWrapper {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+}

package/lib/components/Table/_components/Pagination/index.module.less

@@ -4,11 +4,11 @@
   justify-content: flex-end;
   column-gap: 8px;
 
-  &.ant-pagination-start {
+  &:global(.ant-pagination-start) {
     justify-content: flex-start;
   }
 
-  &.ant-pagination-center {
+  &:global(.ant-pagination-center) {
     justify-content: center;
   }
 
@@ -25,10 +25,10 @@
       width: 100%;
       height: 100%;
 
-      .ant-pagination-item-container {
+      :global(.ant-pagination-item-container) {
         width: 100%;
 
-        .ant-pagination-item-ellipsis {
+        :global(.ant-pagination-item-ellipsis) {
           width: 100%;
         }
       }
@@ -40,17 +40,17 @@
       justify-content: center;
     }
 
-    &.ant-pagination-options {
-      .ant-pagination-options-size-changer,
-      .ant-pagination-options-quick-jumper {
+    &:global(.ant-pagination-options) {
+      :global(.ant-pagination-options-size-changer),
+      :global(.ant-pagination-options-quick-jumper) {
         height: 100% !important;
       }
 
-      .ant-pagination-options-size-changer {
-        .ant-select-selector {
+      :global(.ant-pagination-options-size-changer) {
+        :global(.ant-select-selector) {
           height: 100% !important;
 
-          .ant-select-selection-item {
+          :global(.ant-select-selection-item) {
             display: flex;
             align-items: center;
 
@@ -58,14 +58,14 @@
           }
         }
 
-        .ant-select-arrow {
+        :global(.ant-select-arrow) {
           margin-top: 0px;
 
           transform: translateY(-50%);
         }
       }
 
-      .ant-pagination-options-quick-jumper {
+      :global(.ant-pagination-options-quick-jumper) {
         display: inline-flex;
         align-items: center;
 
@@ -78,18 +78,18 @@
 
   &.bordered {
     > li {
-      &:not(.ant-pagination-options):not(.ant-pagination-total-text) {
+      &:not(:global(.ant-pagination-options)):not(:global(.ant-pagination-total-text)) {
         border: 1px solid var(--cf-border);
         border-radius: 4px;
       }
 
-      &.ant-pagination-item {
+      &:global(.ant-pagination-item) {
         margin: 0px 4px 0px 0px;
 
-        &:not(.ant-pagination-item-active):not(
-            .ant-pagination-item-disabled
+        &:not(:global(.ant-pagination-item-active)):not(
+            :global(.ant-pagination-item-disabled)
           ):hover,
-        &.ant-pagination-item-active {
+        &:global(.ant-pagination-item-active) {
           background-color: var(--primary-color, #1890ff);
           border-color: var(--primary-color, #1890ff);
 
@@ -98,11 +98,11 @@
           }
         }
 
-        &:not(.ant-pagination-item-active):not(.ant-pagination-item-disabled) {
+        &:not(:global(.ant-pagination-item-active)):not(:global(.ant-pagination-item-disabled)) {
           border-color: var(--cf-border);
         }
 
-        &:not(.ant-pagination-item-active).ant-pagination-item-disabled {
+        &:not(:global(.ant-pagination-item-active)):global(.ant-pagination-item-disabled) {
           cursor: not-allowed;
 
           &:hover {
@@ -117,16 +117,16 @@
         }
       }
 
-      &.ant-pagination-prev {
+      &:global(.ant-pagination-prev) {
         margin-right: 4px;
       }
 
-      &.ant-pagination-options {
+      &:global(.ant-pagination-options) {
         margin-left: 4px;
       }
 
-      &.ant-pagination-jump-next,
-      &.ant-pagination-jump-prev {
+      &:global(.ant-pagination-jump-next),
+      &:global(.ant-pagination-jump-prev) {
         margin-right: 4px;
       }
     }