@hsu-react/ui 0.0.2 → 0.0.4

package/src/components/Input/index.md

@@ -16,7 +16,7 @@ title: Input 输入框
 import { Input } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 输入框
 
 ```tsx
 import React from "react";
@@ -29,7 +29,120 @@ export default () => {
     <div style={{ display: "flex", flexDirection: "column", gap: 12, width: 240 }}>
       <Input placeholder="请输入" value={value} onChange={setValue} />
       <Input placeholder="禁用状态" disabled />
-      <div>当前值：{value}</div>
+    </div>
+  );
+};
+```
+
+## 数字输入框
+
+数字输入框，`onChange` 返回字符串，内置 `allowClear`、`controls={false}` 与 `stringMode`。
+
+```tsx
+import React from "react";
+import { Input } from "@hsu-react/ui";
+
+export default () => {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <Input.Number placeholder="请输入数字" value={value} onChange={setValue} />
+      <Input.Number placeholder="带单位" addonAfter="元" />
+    </div>
+  );
+};
+```
+
+## 密码框
+
+密码输入框，支持显示/隐藏切换，`onChange` 返回纯字符串。
+
+```tsx
+import React from "react";
+import { Input } from "@hsu-react/ui";
+
+export default () => {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <Input.Password placeholder="请输入密码" value={value} onChange={setValue} />
+      <Input.Password placeholder="禁用状态" disabled />
+    </div>
+  );
+};
+```
+
+## 范围输入
+
+范围输入框，`type` 支持 `"NUMBER"` 或 `"INPUT"`，`onChange` 返回 `[起, 止]` 元组。
+
+```tsx
+import React from "react";
+import { Input } from "@hsu-react/ui";
+
+export default () => {
+  const [value, setValue] = React.useState();
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <Input.Range
+        type="NUMBER"
+        value={value}
+        onChange={setValue}
+        placeholder={["最小值", "最大值"]}
+        allowClear
+      />
+    </div>
+  );
+};
+```
+
+## 搜索框
+
+搜索输入框，支持 `onSearch` 回调与搜索按钮，`onChange` 返回纯字符串。
+
+```tsx
+import React from "react";
+import { Input } from "@hsu-react/ui";
+
+export default () => {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <Input.Search
+        placeholder="请输入关键字"
+        value={value}
+        onChange={setValue}
+        enterButton
+        onSearch={(v) => console.log("search:", v)}
+      />
+    </div>
+  );
+};
+```
+
+## 多行文本框
+
+多行文本输入框，`onChange` 返回纯字符串，支持 `autoSize`、`prefix` / `suffix`。
+
+```tsx
+import React from "react";
+import { Input } from "@hsu-react/ui";
+
+export default () => {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <Input.TextArea
+        placeholder="请输入内容"
+        value={value}
+        onChange={setValue}
+        autoSize={{ minRows: 2, maxRows: 4 }}
+      />
     </div>
   );
 };

package/src/components/Input/index.module.less

@@ -1,6 +1,9 @@
 .antdInput {
   width: 100%;
   height: 100%;
+  // 父级未给定高度时（height:100% 解析为 auto），保证最小高度，避免输入框被压扁；
+  // 内部 .ant-input-wrapper / .ant-input 通过 min-height: inherit 继承该值。
+  min-height: 32px;
 
   :global(.ant-input-clear-icon) {
     font-size: 14px;

package/src/components/Markdown/index.md

@@ -16,7 +16,7 @@ Markdown 渲染与编辑组件，`Markdown.Views` 用于渲染展示（支持 GF
 import { Markdown } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## Markdown 展示
 
 `Markdown.Views` 渲染（依赖 KaTeX / highlight.js / Mermaid 等样式，建议在应用环境内使用）：
 
@@ -41,6 +41,8 @@ const b = a + 1;
 export default () => <Markdown.Views>{content}</Markdown.Views>;
 ```
 
+## Markdown 编辑器
+
 `Markdown.Editor` 编辑：
 
 ```tsx

package/src/components/Modal/index.md

@@ -16,7 +16,7 @@ title: Modal 对话框
 import { Modal } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 对话框
 
 通过 `open` 受控显隐，配合 `Button` 切换状态。默认弹窗可按住标题栏拖动。
 

package/src/components/Operate/index.md

@@ -16,7 +16,7 @@ title: Operate 操作
 import { Operate } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 操作
 
 ```tsx
 import React from "react";

package/src/components/Panel/ListPanel/index.tsx

@@ -36,6 +36,8 @@ interface TableTools {
 }
 
 export interface ListPanelTabelProps extends Omit<TableProps, "title"> {
+  /** 透传给内部 Table 的 key，用于在异构列集切换时强制重挂载表格 */
+  key?: React.Key;
   title?: string;
   buttonGroup?: ButtonProps[];
   tabBarProps?: TabBarProps;
@@ -127,6 +129,9 @@ const ListPanel: ListPanelFC = (props) => {
     tableContainerClassName,
     tips,
     otherTool,
+    // 异构列集切换时用于强制重挂载表格的 key；显式提取，避免随 ...tableConfig
+    // 展开进 JSX 触发 React "key prop being spread" 警告
+    key: tableInstanceKey,
     ...tableConfig
   } = tableProps;
   const { className: treeClassName, ...treeConfig } = treeProps;
@@ -435,6 +440,7 @@ const ListPanel: ListPanelFC = (props) => {
               otherTool={otherTool}
             />
             <Table
+              key={tableInstanceKey}
               className={`${styles.table} ${tableClassName ?? ""}`}
               {...{
                 scroll: true,

package/src/components/Panel/index.md

@@ -16,7 +16,7 @@ title: Panel 页面容器
 import { Panel } from "@hsu-react/ui";
 ```
 
-## 子组件
+## 子组件一览
 
 | 组件 | 说明 |
 | --- | --- |
@@ -25,24 +25,14 @@ import { Panel } from "@hsu-react/ui";
 | `Panel.Iframe` | iframe 内容容器，带加载态与全屏按钮 |
 | `Panel.Default` | 通用内容容器，可选左侧树与面包屑 |
 
-## 基础用法
-
-### Panel.List 列表页
+## 列表页
 
 `Panel.List` 通过 `searchProps`（搜索区）、`tableProps`（表格区）组合出标准增删改查列表页。下方为可交互示例：输入姓名搜索会实时过滤行，点击「新增」「编辑」有反馈。
 
-> 注意：`Panel.List` / `Search` 内部用到 `Button.Chakra`，需要在外层包一层 `ChakraProvider`（真实项目通常在入口统一提供）。
-
 ```tsx
 import React, { useState } from "react";
 import { Panel, Button } from "@hsu-react/ui";
 import { message } from "antd";
-import { ChakraProvider, createSystem, defaultConfig } from "@chakra-ui/react";
-
-const system = createSystem(defaultConfig, {
-  disableLayers: true,
-  preflight: false,
-});
 
 const ALL = [
   { id: 1, name: "张三", role: "管理员", status: "启用" },
@@ -69,9 +59,13 @@ export default () => {
   ];
 
   return (
-    <ChakraProvider value={system}>
-      <div style={{ height: 380 }}>
+    // Panel.List 为页面级宽组件；窄屏时外层横向滚动，避免溢出预览框。
+    // overflowY:hidden 去掉垂直滚动条；wrapperClassName 放开组件内层
+    // ListPanelWrapper 的 overflow:hidden（否则搜索区右侧约 24px 会被裁）。
+    <div style={{ overflowX: "auto", overflowY: "hidden" }}>
+      <div style={{ minWidth: 1000, height: 300 }}>
         <Panel.List
+          wrapperClassName="hsu-demo-panel-wrapper"
           searchProps={{
             searchItems: [{ type: "INPUT", name: "name", label: "姓名" }],
             onSearch: (v) =>
@@ -90,30 +84,35 @@ export default () => {
             dataSource: data,
             rowKey: "id",
             pagination: false,
+            scrollAutoHeight: false,
           }}
         />
       </div>
-    </ChakraProvider>
+    </div>
   );
 };
 ```
 
-### Panel.Default 内容页
+## 内容页
 
 ```tsx
 import React from "react";
 import { Panel } from "@hsu-react/ui";
 
 export default () => (
-  <div style={{ height: 200 }}>
-    <Panel.Default>
-      <div style={{ padding: 16 }}>这里是通用内容区域</div>
-    </Panel.Default>
+  // 与列表页一致：外层 overflowX 横向滚动 + overflowY:hidden 去垂直滚动条；
+  // wrapperClassName 放开 DefaultPanel 内层的 overflow:hidden。
+  <div style={{ overflowX: "auto", overflowY: "hidden" }}>
+    <div style={{ minWidth: 1000, height: 200 }}>
+      <Panel.Default wrapperClassName="hsu-demo-panel-wrapper">
+        <div style={{ padding: 16 }}>这里是通用内容区域（窄屏时可横向滚动查看）</div>
+      </Panel.Default>
+    </div>
   </div>
 );
 ```
 
-### Panel.Iframe 内嵌页
+## 内嵌页
 
 `Panel.Iframe` 用于内嵌外部页面，带加载态与全屏按钮（外部站点受 X-Frame-Options 限制，此处仅示意用法）：
 
@@ -124,6 +123,54 @@ import { Panel } from "@hsu-react/ui";
 export default () => <Panel.Iframe src="https://example.com" fullBtn />;
 ```
 
+## 弹窗内列表
+
+`Panel.List.Modal` 在 `Modal` 内复用列表布局，本身继承 `ModalProps`（`open` / `onClose` 等），并通过 `searchProps`、`tableProps` 配置搜索区与表格区。常用于从某条记录弹出其关联子列表。
+
+```tsx
+import React, { useState } from "react";
+import { Panel, Button } from "@hsu-react/ui";
+
+const ALL = [
+  { id: 1, name: "明细一", status: "启用" },
+  { id: 2, name: "明细二", status: "禁用" },
+];
+
+export default () => {
+  const [open, setOpen] = useState(false);
+  const [data, setData] = useState(ALL);
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        打开子列表
+      </Button>
+      <Panel.List.Modal
+        open={open}
+        onCancel={() => setOpen(false)}
+        title="关联明细"
+        footer={null}
+        searchProps={{
+          searchItems: [{ type: "INPUT", name: "name", label: "名称" }],
+          onSearch: (v) =>
+            setData(ALL.filter((x) => !v.name || x.name.includes(v.name))),
+          onReset: () => setData(ALL),
+        }}
+        tableProps={{
+          columns: [
+            { title: "名称", dataIndex: "name" },
+            { title: "状态", dataIndex: "status" },
+          ],
+          dataSource: data,
+          rowKey: "id",
+          pagination: false,
+        }}
+      />
+    </>
+  );
+};
+```
+
 ## API
 
 ### Panel.List（ListPanelProps）

package/src/components/Search/index.md

@@ -16,23 +16,17 @@ title: Search 搜索
 import { Search } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 搜索
 
 `Search` 通过 `searchItems`（复用 `FormItem` 的配置）定义搜索项，`onSearch` / `onReset` 接收回调：
 
 ```tsx
 import React from "react";
 import { Search } from "@hsu-react/ui";
-import { ChakraProvider, createSystem, defaultConfig } from "@chakra-ui/react";
-
-const system = createSystem(defaultConfig, {
-  disableLayers: true,
-  preflight: false,
-});
 
 export default () => {
   return (
-    <ChakraProvider value={system}>
+    <>
       <Search
         columnNum={3}
         searchItems={[
@@ -53,11 +47,192 @@ export default () => {
         onSearch={(data) => console.log("search", data)}
         onReset={() => console.log("reset")}
       />
-    </ChakraProvider>
+    </>
   );
 };
 ```
 
+`Search` 在基础形态外，额外提供多种搜索形态。除 `Search.Card` 使用 `options` 配置外，其余均复用 `searchItems`（`FormItemProps[]`）+ `onSearch` / `onReset`。
+
+## 高级筛选
+
+不显示标签，通过抽屉承载更多筛选项；配合 `setFilter` 可显示筛选项下拉。
+
+```tsx
+import React from "react";
+import { Search } from "@hsu-react/ui";
+
+export default () => (
+  <>
+    <Search.Advanced
+      columnNum={3}
+      setFilter
+      searchItems={[
+        { type: "INPUT", name: "name", label: "姓名" },
+        {
+          type: "SELECT",
+          name: "status",
+          label: "状态",
+          componentProps: {
+            options: [
+              { label: "启用", value: 1 },
+              { label: "禁用", value: 0 },
+            ],
+          },
+        },
+      ]}
+      moreSearchItems={[{ type: "INPUT", name: "remark", label: "备注" }]}
+      onSearch={(data) => console.log("search", data)}
+      onReset={() => console.log("reset")}
+    />
+  </>
+);
+```
+
+## 可折叠搜索
+
+整块搜索区可折叠 / 展开，通过 `defaultExpanded` 控制初始状态，`onCollapseToggle` 监听折叠变化。
+
+```tsx
+import React from "react";
+import { Search } from "@hsu-react/ui";
+
+export default () => (
+  <>
+    <Search.Collapsible
+      columnNum={3}
+      defaultExpanded
+      searchItems={[
+        { type: "INPUT", name: "name", label: "姓名" },
+        {
+          type: "SELECT",
+          name: "status",
+          label: "状态",
+          componentProps: {
+            options: [
+              { label: "启用", value: 1 },
+              { label: "禁用", value: 0 },
+            ],
+          },
+        },
+      ]}
+      onCollapseToggle={(c) => console.log("collapse", c)}
+      onSearch={(data) => console.log("search", data)}
+      onReset={() => console.log("reset")}
+    />
+  </>
+);
+```
+
+## 带筛选器搜索
+
+在按钮组旁内置筛选下拉，允许用户动态勾选要显示的搜索项，`onFilterChange` 接收勾选变化。
+
+```tsx
+import React from "react";
+import { Search } from "@hsu-react/ui";
+
+export default () => (
+  <>
+    <Search.WithFilter
+      columnNum={3}
+      searchItems={[
+        { type: "INPUT", name: "name", label: "姓名" },
+        {
+          type: "SELECT",
+          name: "status",
+          label: "状态",
+          componentProps: {
+            options: [
+              { label: "启用", value: 1 },
+              { label: "禁用", value: 0 },
+            ],
+          },
+        },
+        { type: "INPUT", name: "phone", label: "电话" },
+      ]}
+      onFilterChange={(items) => console.log("filter", items)}
+      onSearch={(data) => console.log("search", data)}
+      onReset={() => console.log("reset")}
+    />
+  </>
+);
+```
+
+## 带更多项搜索
+
+把搜索项分为基础项（`searchItems`）与更多项（`moreSearchItems`，必填），始终展示全部并提供展开收起。
+
+```tsx
+import React from "react";
+import { Search } from "@hsu-react/ui";
+
+export default () => (
+  <>
+    <Search.WithMore
+      columnNum={3}
+      searchItems={[
+        { type: "INPUT", name: "name", label: "姓名" },
+        {
+          type: "SELECT",
+          name: "status",
+          label: "状态",
+          componentProps: {
+            options: [
+              { label: "启用", value: 1 },
+              { label: "禁用", value: 0 },
+            ],
+          },
+        },
+      ]}
+      moreSearchItems={[
+        { type: "INPUT", name: "phone", label: "电话" },
+        { type: "INPUT", name: "remark", label: "备注" },
+      ]}
+      onSearch={(data) => console.log("search", data)}
+      onReset={() => console.log("reset")}
+    />
+  </>
+);
+```
+
+## 卡片式搜索
+
+标签式快捷筛选，使用 `options`（`SearchCardOption[]`）而非 `searchItems`，`onChange` 返回当前选中值；支持 `multiple` 多选与 `showSearchBox` 搜索框。
+
+```tsx
+import React from "react";
+import { Search } from "@hsu-react/ui";
+
+export default () => (
+  <>
+    <Search.Card
+      options={[
+        {
+          label: "状态",
+          name: "status",
+          items: [
+            { label: "启用", value: 1 },
+            { label: "禁用", value: 0 },
+          ],
+        },
+        {
+          label: "类型",
+          name: "type",
+          multiple: true,
+          items: [
+            { label: "普通", value: "normal" },
+            { label: "重要", value: "important" },
+            { label: "紧急", value: "urgent" },
+          ],
+        },
+      ]}
+      onChange={(data) => console.log("change", data)}
+    />
+  </>
+);
+```
+
 ## API
 
 `SearchProps` 继承自 `BaseSearchProps`：

package/src/components/SecondConf/index.md

@@ -16,7 +16,7 @@ title: SecondConf 二次确认
 import { SecondConf } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 二次确认
 
 ```tsx
 import React, { useState } from "react";

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

@@ -16,7 +16,7 @@ title: Select 选择器
 import { Select } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 选择器
 
 ```tsx
 import React from "react";

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 风格：随外观切换的描边输入控件

package/src/components/Slider/index.md

@@ -16,7 +16,7 @@ title: Slider 滑动输入
 import { Slider } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 滑动输入
 
 ```tsx
 import React from "react";
@@ -28,7 +28,6 @@ export default () => {
   return (
     <div style={{ width: 240 }}>
       <Slider value={value} onChange={setValue} />
-      <div style={{ marginTop: 12 }}>当前值：{value}</div>
     </div>
   );
 };

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

@@ -1,4 +1,5 @@
 .slider {
+  width: 100%;
   height: 32px;
   margin: 0px;
   padding-block: 0px;

package/src/components/Spreadsheet/index.md

@@ -16,7 +16,7 @@ title: Spreadsheet 电子表格
 import { Spreadsheet } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 电子表格
 
 ```tsx
 import React from "react";

package/src/components/Switch/index.md

@@ -16,7 +16,7 @@ title: Switch 开关
 import { Switch } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 开关
 
 ```tsx
 import React from "react";

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

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