@hsu-react/ui 0.0.1 → 0.0.3

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

@@ -28,11 +28,11 @@
     .antdAutoComplete {
       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;
       }
     }
@@ -75,7 +75,7 @@
     margin-inline-start: 4px;
   }
 
-  &:has(.ant-select-status-error) {
+  &:has(:global(.ant-select-status-error)) {
     border: 1px solid #ff4d4f;
 
     .prefix,
@@ -108,24 +108,24 @@
     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 {
+    &:global(.ant-select) {
       width: 100%;
       height: 100%;
 
-      .ant-select-selector {
+      :global(.ant-select-selector) {
         width: 100%;
         height: 100%;
         padding: 0;
@@ -143,7 +143,7 @@
           content: none;
         }
 
-        .ant-select-selection-wrap {
+        :global(.ant-select-selection-wrap) {
           height: 100%;
 
           font-family: inherit;
@@ -152,7 +152,7 @@
           color: inherit;
         }
 
-        .ant-select-selection-search {
+        :global(.ant-select-selection-search) {
           inset-inline-start: 0px;
           inset-inline-end: 0px;
 
@@ -171,7 +171,7 @@
           }
         }
 
-        .ant-select-selection-placeholder {
+        :global(.ant-select-selection-placeholder) {
           display: inline-flex;
           align-items: center;
 
@@ -183,7 +183,7 @@
           font-weight: inherit;
         }
 
-        .ant-select-selection-item {
+        :global(.ant-select-selection-item) {
           padding-inline-end: 0px;
 
           font-family: inherit;
@@ -192,8 +192,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;
@@ -201,50 +201,50 @@
         }
       }
 
-      &.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-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;
           }
         }
       }
 
-      .ant-select-arrow {
+      :global(.ant-select-arrow) {
         width: 14px;
         height: 14px;
         margin-top: 0px;
@@ -258,7 +258,7 @@
         pointer-events: all;
       }
 
-      .ant-select-clear {
+      :global(.ant-select-clear) {
         width: 14px;
         height: 14px;
         margin-top: 0px;
@@ -273,14 +273,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;
@@ -288,16 +288,16 @@
     font-weight: inherit;
     color: inherit;
 
-    .ant-select-item {
+    :global(.ant-select-item) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       color: 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/src/components/Select/IconSelect/index.module.less

@@ -10,7 +10,7 @@
     cursor: pointer;
   }
 
-  .ant-input-group-addon {
+  :global(.ant-input-group-addon) {
     padding: 0;
   }
 }
@@ -26,11 +26,11 @@
 .tabs {
   max-width: min-content;
 
-  .ant-tabs-nav {
+  :global(.ant-tabs-nav) {
     margin-bottom: 10px;
   }
 
-  .ant-tabs-tab {
+  :global(.ant-tabs-tab) {
     padding: 4px 0px 6px;
   }
 

package/src/components/Select/TreeSelect/index.module.less

@@ -11,7 +11,7 @@
   border: 1px solid var(--cf-border);
   border-radius: 6px;
 
-  .ant-select-selector {
+  :global(.ant-select-selector) {
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;
@@ -21,14 +21,14 @@
     border: none !important;
     border-radius: inherit !important;
 
-    .ant-select-selection-wrap {
+    :global(.ant-select-selection-wrap) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       color: inherit;
     }
 
-    .ant-select-selection-search {
+    :global(.ant-select-selection-search) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
@@ -42,13 +42,13 @@
       }
     }
 
-    .ant-select-selection-placeholder {
+    :global(.ant-select-selection-placeholder) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
     }
 
-    .ant-select-selection-item {
+    :global(.ant-select-selection-item) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
@@ -56,21 +56,21 @@
     }
   }
 
-  .ant-select-arrow {
+  :global(.ant-select-arrow) {
     width: 14px;
     height: 14px;
 
     font-size: 14px;
   }
 
-  .ant-select-clear {
+  :global(.ant-select-clear) {
     width: 14px;
     height: 14px;
 
     font-size: 14px;
   }
 
-  .ant-tree-select-dropdown {
+  :global(.ant-tree-select-dropdown) {
     position: fixed;
 
     font-family: inherit;
@@ -78,17 +78,17 @@
     font-weight: inherit;
     color: inherit;
 
-    .ant-select-tree,
-    .ant-select-tree-treenode,
-    .ant-select-tree-node-content-wrapper,
-    .ant-select-tree-title {
+    :global(.ant-select-tree),
+    :global(.ant-select-tree-treenode),
+    :global(.ant-select-tree-node-content-wrapper),
+    :global(.ant-select-tree-title) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       color: inherit;
     }
 
-    .ant-select-tree-switcher {
+    :global(.ant-select-tree-switcher) {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -103,19 +103,19 @@
       }
     }
 
-    .ant-select-tree-indent-unit {
+    :global(.ant-select-tree-indent-unit) {
       width: var(--tree-indent-unit-width);
     }
 
-    .ant-empty,
-    .ant-empty-description {
+    :global(.ant-empty),
+    :global(.ant-empty-description) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
       color: inherit;
     }
 
-    .ant-select-tree-list-scrollbar {
+    :global(.ant-select-tree-list-scrollbar) {
       width: 5px !important;
 
       > div {

package/src/components/Select/_utils/getElementPosition.ts

@@ -1,16 +1,18 @@
 /**
- * 获取元素相对于文档的顶部位置
+ * 获取元素相对于视口的顶部位置。
+ * 下拉框为 position: fixed（相对视口定位），故此处必须返回视口坐标，
+ * 不能叠加 document.scrollTop——否则当文档本身可滚动时（如文档站长页面），
+ * 下拉框会被定位到 scrollTop 像素之外而“消失”。
+ * 在固定布局（document 不滚动，scrollTop=0）下与原行为一致。
  */
 export function getElementTop(element: HTMLDivElement): number {
-  const rect = element.getBoundingClientRect();
-  return rect.top + document.documentElement.scrollTop;
+  return element.getBoundingClientRect().top;
 }
 
 /**
- * 获取元素相对于文档的左侧位置
+ * 获取元素相对于视口的左侧位置（同上，配合 position: fixed）。
  */
 export function getElementLeft(element: HTMLDivElement): number {
-  const rect = element.getBoundingClientRect();
-  return rect.left + document.documentElement.scrollLeft;
+  return element.getBoundingClientRect().left;
 }
 

package/src/components/Select/index.md

@@ -8,10 +8,56 @@ title: Select 选择器
 
 # Select 选择器
 
-> `Select` 组件。完整 API 见源码类型定义，下方为基础用法。
+基于 antd `Select` 封装的选择器，默认开启搜索与清除，支持前后缀、箭头动画、下拉宽度自适应内容、`label` 与 `value` 组合展示，并对中文输入法搜索做了优化。
 
 ## 引入
 
 ```ts
 import { Select } from "@hsu-react/ui";
 ```
+
+## 选择器
+
+```tsx
+import React from "react";
+import { Select } from "@hsu-react/ui";
+
+const options = [
+  { label: "苹果", value: "apple" },
+  { label: "香蕉", value: "banana" },
+  { label: "橙子", value: "orange" },
+];
+
+export default () => {
+  const [value, setValue] = React.useState("apple");
+
+  return (
+    <Select
+      style={{ width: 200 }}
+      options={options}
+      value={value}
+      onChange={setValue}
+      placeholder="请选择"
+    />
+  );
+};
+```
+
+## API
+
+在 [antd SelectProps](https://ant.design/components/select-cn) 基础上扩展（移除了 `placement`、`filterOption` 并重新定义）：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| options | 选项数据 | `SelectOption[]` | `[]` |
+| prefix | 选择框前缀内容 | `ReactNode` | - |
+| suffix | 选择框后缀内容 | `ReactNode` | - |
+| selectClassName | 内层 antd Select 的类名 | `string` | - |
+| arrowAnimation | 是否启用箭头展开动画 | `boolean` | `true` |
+| popupMatchContentWidth | 下拉面板宽度是否自适应内容 | `boolean` | - |
+| placement | 下拉弹出位置 | `'bottomLeft' \| 'topLeft'` | `'bottomLeft'` |
+| filterOption | 自定义搜索过滤 | `(searchValue: string, option?: DefaultOptionType) => boolean` | - |
+| optionFontSize | 选项字体大小，用于计算自适应宽度 | `number` | `14` |
+| valueInlabel | 在标签/选项中同时展示 value 的位置 | `'before' \| 'after'` | - |
+
+> `SelectOption` 形如 `{ label: string; value: number \| string; disabled?: boolean }`，并可携带额外字段。

package/src/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/src/components/Slider/index.md

@@ -8,10 +8,37 @@ title: Slider 滑动输入
 
 # Slider 滑动输入
 
-> `Slider` 组件。完整 API 见源码类型定义，下方为基础用法。
+基于 antd 单值 `Slider` 封装的滑动输入条，内部维护受控值、默认关闭 Tooltip，并支持通过 `topValue` 从外部强制更新当前值。
 
 ## 引入
 
 ```ts
 import { Slider } from "@hsu-react/ui";
 ```
+
+## 滑动输入
+
+```tsx
+import React from "react";
+import { Slider } from "@hsu-react/ui";
+
+export default () => {
+  const [value, setValue] = React.useState(30);
+
+  return (
+    <div style={{ width: 240 }}>
+      <Slider value={value} onChange={setValue} />
+    </div>
+  );
+};
+```
+
+## API
+
+在 [antd SliderSingleProps](https://ant.design/components/slider-cn) 基础上扩展：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| topValue | 外部强制同步的当前值，优先级高于 `value` | `number` | - |
+| value | 当前值 | `number` | `0` |
+| onChange | 值变化回调 | `(value: number) => void` | - |