@hsu-react/ui 0.0.1 → 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/ChainGraph/index.module.less

@@ -2,7 +2,7 @@
   width: 100%;
   height: 100%;
 
-  .ant-spin-container {
+  :global(.ant-spin-container) {
     width: 100%;
     height: 100%;
   }

package/es/components/Chat/ChatInput/_components/SendButton/index.module.less

@@ -10,7 +10,7 @@
   border: none;
   border-radius: 4px;
 
-  .ant-btn-icon {
+  :global(.ant-btn-icon) {
     display: flex;
     align-items: center;
     justify-content: center;

package/es/components/Chat/ChatInput/_components/UploadButton/index.module.less

@@ -4,7 +4,7 @@
 
   border-radius: 4px;
 
-  .ant-btn-icon {
+  :global(.ant-btn-icon) {
     display: flex;
     align-items: center;
     justify-content: center;

package/es/components/Chat/ChatInput/index.module.less

@@ -57,7 +57,7 @@
           opacity: 0.8;
           width: 140px;
           height: 100%;
-          .ant-select-selector {
+          :global(.ant-select-selector) {
             border: none;
             margin: 1px 0 0;
           }
@@ -92,7 +92,7 @@
 
   border-radius: 4px;
 
-  .ant-btn-icon {
+  :global(.ant-btn-icon) {
     display: flex;
     align-items: center;
     justify-content: center;

package/es/components/Chat/ChatList/_components/Assistant/AssistantItem/index.module.less

@@ -20,7 +20,7 @@
   }
 
   .answerBubble {
-    .ant-bubble-dot {
+    :global(.ant-bubble-dot) {
       column-gap: var(--ant-margin-xxs);
     }
 

package/es/components/Checkbox/CheckboxGroup/index.module.less

@@ -10,7 +10,7 @@
     height: 100%;
 
     // 当 hasAll 为 true 时，Group 作为子元素
-    > .ant-checkbox-group {
+    > :global(.ant-checkbox-group) {
       display: flex;
       flex-direction: column;
       row-gap: 8px;
@@ -28,9 +28,9 @@
   }
 
   &.outline {
-    .ant-checkbox-wrapper {
-      .ant-checkbox {
-        .ant-checkbox-inner {
+    :global(.ant-checkbox-wrapper) {
+      :global(.ant-checkbox) {
+        :global(.ant-checkbox-inner) {
           border-color: rgba(204, 204, 204, 1) !important;
 
           background: transparent !important;
@@ -41,16 +41,16 @@
           }
         }
 
-        &.ant-checkbox-checked {
-          .ant-checkbox-inner {
+        &:global(.ant-checkbox-checked) {
+          :global(.ant-checkbox-inner) {
             background: rgba(255, 255, 255, 1) !important;
           }
         }
       }
 
-      &.ant-checkbox-wrapper-disabled {
-        .ant-checkbox {
-          .ant-checkbox-inner {
+      &:global(.ant-checkbox-wrapper-disabled) {
+        :global(.ant-checkbox) {
+          :global(.ant-checkbox-inner) {
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
@@ -58,8 +58,8 @@
             }
           }
 
-          &.ant-checkbox-checked {
-            .ant-checkbox-inner {
+          &:global(.ant-checkbox-checked) {
+            :global(.ant-checkbox-inner) {
               background: rgba(0, 0, 0, 0.04) !important;
             }
           }
@@ -68,7 +68,7 @@
     }
   }
 
-  .ant-checkbox-wrapper {
+  :global(.ant-checkbox-wrapper) {
     align-items: center;
 
     font-family: inherit;
@@ -76,7 +76,7 @@
     font-weight: inherit;
     color: inherit;
 
-    .ant-checkbox {
+    :global(.ant-checkbox) {
       width: 16px;
       min-width: 16px;
       height: 16px;
@@ -84,12 +84,12 @@
 
       border-radius: 2px;
 
-      input[type="checkbox"].ant-checkbox-input {
+      input[type="checkbox"]:global(.ant-checkbox-input) {
         width: 100%;
         height: 100%;
       }
 
-      .ant-checkbox-inner {
+      :global(.ant-checkbox-inner) {
         width: 100%;
         height: 100%;
 
@@ -106,7 +106,7 @@
       }
 
       &-indeterminate {
-        .ant-checkbox-inner {
+        :global(.ant-checkbox-inner) {
           &::after {
             left: 50%;
             top: 50%;

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

@@ -2,8 +2,8 @@
   align-items: center;
 
   &.outline {
-    .ant-checkbox {
-      .ant-checkbox-inner {
+    :global(.ant-checkbox) {
+      :global(.ant-checkbox-inner) {
         border-color: rgba(204, 204, 204, 1) !important;
 
         background: transparent !important;
@@ -14,16 +14,16 @@
         }
       }
 
-      &.ant-checkbox-checked {
-        .ant-checkbox-inner {
+      &:global(.ant-checkbox-checked) {
+        :global(.ant-checkbox-inner) {
           background: rgba(255, 255, 255, 1) !important;
         }
       }
     }
 
-    &.ant-checkbox-wrapper-disabled {
-      .ant-checkbox {
-        .ant-checkbox-inner {
+    &:global(.ant-checkbox-wrapper-disabled) {
+      :global(.ant-checkbox) {
+        :global(.ant-checkbox-inner) {
           background: rgba(0, 0, 0, 0.04) !important;
 
           &::after {
@@ -31,8 +31,8 @@
           }
         }
 
-        &.ant-checkbox-checked {
-          .ant-checkbox-inner {
+        &:global(.ant-checkbox-checked) {
+          :global(.ant-checkbox-inner) {
             background: rgba(0, 0, 0, 0.04) !important;
           }
         }
@@ -40,7 +40,7 @@
     }
   }
 
-  .ant-checkbox {
+  :global(.ant-checkbox) {
     width: 16px;
     min-width: 16px;
     height: 16px;
@@ -48,12 +48,12 @@
 
     border-radius: 2px;
 
-    input[type="checkbox"].ant-checkbox-input {
+    input[type="checkbox"]:global(.ant-checkbox-input) {
       width: 100%;
       height: 100%;
     }
 
-    .ant-checkbox-inner {
+    :global(.ant-checkbox-inner) {
       width: 100%;
       height: 100%;
 
@@ -70,7 +70,7 @@
     }
 
     &-indeterminate {
-      .ant-checkbox-inner {
+      :global(.ant-checkbox-inner) {
         &::after {
           left: 50%;
           top: 50%;

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

@@ -7,17 +7,17 @@
 
   overflow: hidden;
 
-  .cm-line {
+  :global(.cm-line) {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   }
 
-  .cm-focused {
+  :global(.cm-focused) {
     outline: none;
   }
 
-  .cm-lintRange-error {
+  :global(.cm-lintRange-error) {
     background-size: auto auto;
   }
 
@@ -28,7 +28,7 @@
       border-color: #ff4d4f;
     }
 
-    .cm-focused {
+    :global(.cm-focused) {
       border-color: #ff4d4f;
       box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
     }

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

@@ -25,7 +25,7 @@
   color: inherit;
   text-align: inherit;
 
-  .ant-picker-input {
+  :global(.ant-picker-input) {
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;

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

@@ -5,7 +5,7 @@
   column-gap: 5px;
 
   .icon {
-    &.ant-btn-icon-only {
+    &:global(.ant-btn-icon-only) {
       width: 32px;
       height: 32px;
     }

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;
@@ -20,7 +21,7 @@
     min-width: 80px;
   }
 
-  .ant-picker {
+  :global(.ant-picker) {
     height: 100%;
     width: 100%;
 

package/es/components/Form/DrawerForm/index.module.less

@@ -1,5 +1,5 @@
 .DrawerForm {
-  .ant-drawer-title {
+  :global(.ant-drawer-title) {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -43,7 +43,7 @@
       align-items: center;
       column-gap: 10px;
 
-      .ant-btn-icon {
+      :global(.ant-btn-icon) {
         font-size: 16px;
       }
     }

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/FormItem/FormRadio/index.module.less

@@ -18,7 +18,7 @@
 
   &.rect {
     > label {
-      > span.ant-radio {
+      > span:global(.ant-radio) {
         width: 24px;
         min-width: 24px;
         height: 24px;
@@ -26,12 +26,12 @@
 
         border-radius: 2px;
 
-        input[type="radio"].ant-radio-input {
+        input[type="radio"]:global(.ant-radio-input) {
           width: 100%;
           height: 100%;
         }
 
-        .ant-radio-inner {
+        :global(.ant-radio-inner) {
           width: 100%;
           height: 100%;
 
@@ -65,8 +65,8 @@
           }
         }
 
-        &.ant-radio-checked {
-          .ant-radio-inner {
+        &:global(.ant-radio-checked) {
+          :global(.ant-radio-inner) {
             background: rgba(255, 255, 255, 1) !important;
 
             &::after {
@@ -77,8 +77,8 @@
           }
         }
 
-        &.ant-radio-disabled {
-          .ant-radio-inner {
+        &:global(.ant-radio-disabled) {
+          :global(.ant-radio-inner) {
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
@@ -86,8 +86,8 @@
             }
           }
 
-          &.ant-radio-checked {
-            .ant-radio-inner {
+          &:global(.ant-radio-checked) {
+            :global(.ant-radio-inner) {
               background: rgba(0, 0, 0, 0.04) !important;
             }
           }

package/es/components/FormItem/FormSegmented/index.module.less

@@ -3,7 +3,7 @@
 
   color: var(--cf-text);
 
-  .ant-segmented-group {
+  :global(.ant-segmented-group) {
     height: 100%;
 
     font-family: inherit;
@@ -17,7 +17,7 @@
       font-weight: inherit;
       color: inherit;
 
-      .ant-segmented-item-label {
+      :global(.ant-segmented-item-label) {
         display: flex;
         align-items: center;
         justify-content: center;

package/es/components/FormItem/FormUpload/index.module.less

@@ -1,7 +1,7 @@
 .upload {
   height: 100%;
 
-  .ant-upload {
+  :global(.ant-upload) {
     height: max-content;
 
     .upBtn {
@@ -15,7 +15,7 @@
     column-gap: 10px;
   }
 
-  .ant-upload-disabled {
+  :global(.ant-upload-disabled) {
     .singleFile {
       cursor: not-allowed;
 
@@ -97,7 +97,7 @@
     }
   }
 
-  &.ant-upload-drag {
+  &:global(.ant-upload-drag) {
     height: 180px;
 
     border-radius: 8px;
@@ -134,7 +134,7 @@
 }
 
 .FormUpload {
-  .ant-form-item-control-input-content {
+  :global(.ant-form-item-control-input-content) {
     > span {
       width: 100%;
     }

package/es/components/FormItem/ItemContainer/index.module.less

@@ -19,15 +19,15 @@
     cursor: pointer;
   }
 
-  .ant-picker {
+  :global(.ant-picker) {
     width: 100%;
   }
 
-  .ant-form-item-row {
+  :global(.ant-form-item-row) {
     width: 100%;
     height: 100%;
 
-    .ant-form-item-control {
+    :global(.ant-form-item-control) {
       display: flex;
       flex-direction: column;
       row-gap: 5px;
@@ -35,11 +35,11 @@
       width: var(--input-width) !important;
       max-width: 100%;
 
-      .ant-form-item-control-input {
+      :global(.ant-form-item-control-input) {
         height: var(--input-height);
         min-height: var(--input-min-height);
 
-        .ant-form-item-control-input-content {
+        :global(.ant-form-item-control-input-content) {
           display: flex;
           align-items: center;
 
@@ -54,7 +54,7 @@
     }
   }
 
-  .ant-form-item-label {
+  :global(.ant-form-item-label) {
     flex: 0 1 auto !important;
     display: inline-flex;
     align-items: center;
@@ -156,7 +156,7 @@
         cursor: pointer;
       }
 
-      &.ant-form-item-no-colon {
+      &:global(.ant-form-item-no-colon) {
         .label {
           &::after {
             content: none;
@@ -175,7 +175,7 @@
         content: none !important;
       }
 
-      &.ant-form-item-required {
+      &:global(.ant-form-item-required) {
         .label {
           &::before {
             content: "*";
@@ -212,7 +212,7 @@
   }
 
   &.after {
-    label.ant-form-item-required {
+    label:global(.ant-form-item-required) {
       .label {
         &::before {
           content: none !important;
@@ -241,7 +241,7 @@
     }
 
     &.hasLabelContent {
-      label.ant-form-item-required {
+      label:global(.ant-form-item-required) {
         &::after {
           content: none;
         }
@@ -266,7 +266,7 @@
   }
 
   &.hideRequired {
-    label.ant-form-item-required {
+    label:global(.ant-form-item-required) {
       .label {
         &::before {
           content: none !important;
@@ -281,7 +281,7 @@
     }
 
     &.after {
-      label.ant-form-item-required {
+      label:global(.ant-form-item-required) {
         .label {
           &::after {
             content: none !important;
@@ -292,11 +292,11 @@
   }
 
   &.horizontal {
-    .ant-form-item-row {
+    :global(.ant-form-item-row) {
       flex-wrap: nowrap;
       column-gap: 5px;
 
-      .ant-form-item-control {
+      :global(.ant-form-item-control) {
         flex: 1 !important;
         flex-grow: var(--input-horizontal-flex-grow) !important;
 
@@ -305,13 +305,13 @@
     }
 
     &.start {
-      .ant-form-item-control-input-content {
+      :global(.ant-form-item-control-input-content) {
         text-align: left;
       }
     }
 
     &.between {
-      .ant-form-item-control-input-content {
+      :global(.ant-form-item-control-input-content) {
         text-align: right;
       }
     }
@@ -320,13 +320,13 @@
   &.vertical {
     --label-height: max-content;
 
-    .ant-form-item-row {
+    :global(.ant-form-item-row) {
       flex-direction: column;
       row-gap: 5px;
 
       height: max-content;
 
-      .ant-form-item-label {
+      :global(.ant-form-item-label) {
         text-align: start;
 
         width: 100%;
@@ -353,7 +353,7 @@
         }
       }
 
-      .ant-form-item-control {
+      :global(.ant-form-item-control) {
         flex: 0 1 auto !important;
         display: flex;
         flex-direction: column;
@@ -364,8 +364,8 @@
   }
 
   &.legacyHasLabelExtra {
-    .ant-form-item-row {
-      .ant-form-item-label {
+    :global(.ant-form-item-row) {
+      :global(.ant-form-item-label) {
         label {
           flex-direction: column;
           flex-wrap: nowrap;
@@ -380,7 +380,7 @@
   }
 
   &.hideAdditiona {
-    .ant-form-item-additional {
+    :global(.ant-form-item-additional) {
       display: none;
     }
   }