@hsu-react/ui 0.0.2 → 0.0.3

package/README.md

@@ -2,6 +2,8 @@
 
 一套基于 **React + Ant Design** 的中后台业务组件库，把「列表 + 搜索 + 表单弹窗 + CRUD」这类重复劳动沉淀为页面级组件，并内置 Markdown / CodeMirror / Spreadsheet / Chart / Editor 等内容组件。
 
+📖 **文档与在线示例：https://vitatsui.github.io/hsu-ui**
+
 ## 安装
 
 ```bash

package/es/components/ChainGraph/_components/SearchSelect/index.js

@@ -4,15 +4,18 @@ import styles from "./index.module.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var SearchSelect = function SearchSelect(_ref) {
   var onChange = _ref.onChange;
-  return /*#__PURE__*/_jsx(Select, {
-    className: styles.select,
-    showSearch: true,
-    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u8FDB\u884C\u641C\u7D22",
-    optionFilterProp: "children",
-    filterOption: function filterOption(input, option) {
-      var _option$label;
-      return !!(option !== null && option !== void 0 && option.label && option !== null && option !== void 0 && (_option$label = option.label) !== null && _option$label !== void 0 && _option$label.toString().toLowerCase().includes(input.toLowerCase()));
-    },
-    onChange: onChange
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.wrapper,
+    children: /*#__PURE__*/_jsx(Select, {
+      className: styles.select,
+      showSearch: true,
+      placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u8FDB\u884C\u641C\u7D22",
+      optionFilterProp: "children",
+      filterOption: function filterOption(input, option) {
+        var _option$label;
+        return !!(option !== null && option !== void 0 && option.label && option !== null && option !== void 0 && (_option$label = option.label) !== null && _option$label !== void 0 && _option$label.toString().toLowerCase().includes(input.toLowerCase()));
+      },
+      onChange: onChange
+    })
   });
 };

package/es/components/ChainGraph/_components/SearchSelect/index.module.less

@@ -1,11 +1,17 @@
-.select {
+// 定位容器给定 32px 固定高度，Select 通过 height:100% 填满它，
+// 避免 Select 根的 height:100% 直接相对图谱（绝对定位祖先）解析成整图高度而被拉伸。
+.wrapper {
   position: absolute;
   top: 20px;
   left: 20px;
 
   width: 240px;
   height: 32px;
+}
+
+.select {
+  width: 100%;
+  height: 100%;
 
   border-radius: 2px;
 }
-

package/es/components/DatePicker/index.module.less

@@ -5,6 +5,7 @@
 
   width: 100%;
   height: 100%;
+  min-height: 32px;
   max-height: max-content;
 
   border-radius: 6px;

package/es/components/FormItem/FormInput/FormPasswordStrength/index.js

@@ -20,7 +20,6 @@ import React, { useState } from "react";
 import styles from "./index.module.less";
 import zxcvbn from "zxcvbn";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var PasswordStrength = function PasswordStrength(props) {
   var placeholder = props.placeholder,
@@ -30,7 +29,8 @@ var PasswordStrength = function PasswordStrength(props) {
     _useState2 = _slicedToArray(_useState, 2),
     fraction = _useState2[0],
     setFraction = _useState2[1];
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.passwordStrength,
     children: [/*#__PURE__*/_jsx(Input.Password, _objectSpread(_objectSpread({}, inputConfig), {}, {
       placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "请输入",
       onChange: function onChange(value) {

package/es/components/FormItem/FormInput/FormPasswordStrength/index.module.less

@@ -1,3 +1,15 @@
+.passwordStrength {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  width: 100%;
+
+  .passwordInput {
+    width: 100%;
+  }
+}
+
 .strengthBar {
   position: relative;
 

package/es/components/Input/Range/index.module.less

@@ -31,14 +31,14 @@
     .RangeInput {
       display: flex;
       align-items: center;
+      column-gap: 5px;
 
       width: 100%;
       height: 100%;
 
-      border-radius: 6px;
-      border: 1px solid var(--cf-border);
-
-      transition: border-color 0.3s, box-shadow 0.3s;
+      transition:
+        border-color 0.3s,
+        box-shadow 0.3s;
 
       [class*="antdInput-"] {
         border: none !important;

package/es/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/es/components/Select/_utils/getElementPosition.d.ts

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

package/es/components/Select/_utils/getElementPosition.js

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

package/es/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/es/components/Slider/index.module.less

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

package/es/components/Switch/index.js

@@ -9,6 +9,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Switch as AntSwitch } from "antd";
 import React from "react";
+import styles from "./index.module.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Switch = function Switch(props) {
   var _options$find, _options$find2;
@@ -18,13 +19,16 @@ var Switch = function Switch(props) {
     checkedChildren = props.checkedChildren,
     unCheckedChildren = props.unCheckedChildren,
     rest = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/_jsx(AntSwitch, _objectSpread(_objectSpread({}, rest), {}, {
-    checkedChildren: checkedChildren || (options === null || options === void 0 || (_options$find = options.find(function (item) {
-      return item.value === trueValue;
-    })) === null || _options$find === void 0 ? void 0 : _options$find.label),
-    unCheckedChildren: unCheckedChildren || (options === null || options === void 0 || (_options$find2 = options.find(function (item) {
-      return item.value === falseValue;
-    })) === null || _options$find2 === void 0 ? void 0 : _options$find2.label)
-  }));
+  return /*#__PURE__*/_jsx("span", {
+    className: styles.SwitchWrapper,
+    children: /*#__PURE__*/_jsx(AntSwitch, _objectSpread(_objectSpread({}, rest), {}, {
+      checkedChildren: checkedChildren || (options === null || options === void 0 || (_options$find = options.find(function (item) {
+        return item.value === trueValue;
+      })) === null || _options$find === void 0 ? void 0 : _options$find.label),
+      unCheckedChildren: unCheckedChildren || (options === null || options === void 0 || (_options$find2 = options.find(function (item) {
+        return item.value === falseValue;
+      })) === null || _options$find2 === void 0 ? void 0 : _options$find2.label)
+    }))
+  });
 };
 export default Switch;

package/es/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/ChainGraph/_components/SearchSelect/index.js

@@ -12,13 +12,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const SearchSelect = ({
   onChange
 }) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
-    className: _indexModule.default.select,
-    showSearch: true,
-    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u8FDB\u884C\u641C\u7D22",
-    optionFilterProp: "children",
-    filterOption: (input, option) => !!(option?.label && option?.label?.toString().toLowerCase().includes(input.toLowerCase())),
-    onChange: onChange
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: _indexModule.default.wrapper,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+      className: _indexModule.default.select,
+      showSearch: true,
+      placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u8FDB\u884C\u641C\u7D22",
+      optionFilterProp: "children",
+      filterOption: (input, option) => !!(option?.label && option?.label?.toString().toLowerCase().includes(input.toLowerCase())),
+      onChange: onChange
+    })
   });
 };
 exports.SearchSelect = SearchSelect;

package/lib/components/ChainGraph/_components/SearchSelect/index.module.less

@@ -1,11 +1,17 @@
-.select {
+// 定位容器给定 32px 固定高度，Select 通过 height:100% 填满它，
+// 避免 Select 根的 height:100% 直接相对图谱（绝对定位祖先）解析成整图高度而被拉伸。
+.wrapper {
   position: absolute;
   top: 20px;
   left: 20px;
 
   width: 240px;
   height: 32px;
+}
+
+.select {
+  width: 100%;
+  height: 100%;
 
   border-radius: 2px;
 }
-

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

@@ -5,6 +5,7 @@
 
   width: 100%;
   height: 100%;
+  min-height: 32px;
   max-height: max-content;
 
   border-radius: 6px;

package/lib/components/FormItem/FormInput/FormPasswordStrength/index.js

@@ -20,7 +20,8 @@ const PasswordStrength = props => {
     ...inputConfig
   } = props;
   const [fraction, setFraction] = (0, _react.useState)(0);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: _indexModule.default.passwordStrength,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default.Password, {
       ...inputConfig,
       placeholder: placeholder ?? "请输入",

package/lib/components/FormItem/FormInput/FormPasswordStrength/index.module.less

@@ -1,3 +1,15 @@
+.passwordStrength {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  width: 100%;
+
+  .passwordInput {
+    width: 100%;
+  }
+}
+
 .strengthBar {
   position: relative;
 

package/lib/components/Input/Range/index.module.less

@@ -31,14 +31,14 @@
     .RangeInput {
       display: flex;
       align-items: center;
+      column-gap: 5px;
 
       width: 100%;
       height: 100%;
 
-      border-radius: 6px;
-      border: 1px solid var(--cf-border);
-
-      transition: border-color 0.3s, box-shadow 0.3s;
+      transition:
+        border-color 0.3s,
+        box-shadow 0.3s;
 
       [class*="antdInput-"] {
         border: none !important;

package/lib/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/lib/components/Select/_utils/getElementPosition.d.ts

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

package/lib/components/Select/_utils/getElementPosition.js

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

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

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

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

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/package.json

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

package/src/components/Button/index.md

@@ -16,7 +16,7 @@ title: Button 按钮
 import { Button } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 按钮
 
 ```tsx
 import React from "react";
@@ -35,6 +35,23 @@ export default () => (
 );
 ```
 
+## Chakra 按钮
+
+基于 Chakra UI 的按钮，支持 `hasPermi`、`hidden`、`iconPosition`、`icon` 等扩展属性（Chakra system 由文档站全局提供）。
+
+```tsx
+import React from "react";
+import { Button } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+    <Button.Chakra colorPalette="blue">主要按钮</Button.Chakra>
+    <Button.Chakra variant="outline">描边按钮</Button.Chakra>
+    <Button.Chakra disabled>禁用</Button.Chakra>
+  </div>
+);
+```
+
 ## API
 
 在 [antd ButtonProps](https://ant.design/components/button-cn) 基础上扩展：

package/src/components/ChainGraph/_components/SearchSelect/index.module.less

@@ -1,11 +1,17 @@
-.select {
+// 定位容器给定 32px 固定高度，Select 通过 height:100% 填满它，
+// 避免 Select 根的 height:100% 直接相对图谱（绝对定位祖先）解析成整图高度而被拉伸。
+.wrapper {
   position: absolute;
   top: 20px;
   left: 20px;
 
   width: 240px;
   height: 32px;
+}
+
+.select {
+  width: 100%;
+  height: 100%;
 
   border-radius: 2px;
 }
-

package/src/components/ChainGraph/_components/SearchSelect/index.tsx

@@ -8,22 +8,24 @@ interface SearchSelectProps {
 
 export const SearchSelect: React.FC<SearchSelectProps> = ({ onChange }) => {
   return (
-    <Select
-      className={styles.select}
-      showSearch
-      placeholder="请输入关键词进行搜索"
-      optionFilterProp="children"
-      filterOption={(input, option) =>
-        !!(
-          option?.label &&
-          option?.label
-            ?.toString()
-            .toLowerCase()
-            .includes(input.toLowerCase())
-        )
-      }
-      onChange={onChange}
-    />
+    <div className={styles.wrapper}>
+      <Select
+        className={styles.select}
+        showSearch
+        placeholder="请输入关键词进行搜索"
+        optionFilterProp="children"
+        filterOption={(input, option) =>
+          !!(
+            option?.label &&
+            option?.label
+              ?.toString()
+              .toLowerCase()
+              .includes(input.toLowerCase())
+          )
+        }
+        onChange={onChange}
+      />
+    </div>
   );
 };
 

package/src/components/ChainGraph/index.md

@@ -16,7 +16,7 @@ title: ChainGraph 关系图
 import { ChainGraph } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 关系图
 
 ```tsx
 import React from "react";
@@ -44,6 +44,7 @@ export default () => (
       data={data}
       showSearch
       showMiniMap
+      miniMapSize={[120, 80]}
       showExpandBtn
       onClick={(node) => console.log(node)}
     />