@hsu-react/ui 0.0.1 → 0.0.3

package/src/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/src/components/Input/Search/index.module.less

@@ -2,18 +2,18 @@
   width: 100%;
   height: 100%;
 
-  .ant-input-wrapper {
+  :global(.ant-input-wrapper) {
     height: 100%;
     min-height: inherit;
 
-    > .ant-input,
-    > .ant-input-affix-wrapper {
+    > :global(.ant-input),
+    > :global(.ant-input-affix-wrapper) {
       height: 100%;
       min-height: inherit;
     }
 
-    > .ant-input-group-addon {
-      > .ant-btn {
+    > :global(.ant-input-group-addon) {
+      > :global(.ant-btn) {
         height: 100%;
         min-height: inherit;
       }

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

@@ -61,7 +61,7 @@
 
     background-color: transparent !important;
 
-    &.ant-input-textarea-affix-wrapper {
+    &:global(.ant-input-textarea-affix-wrapper) {
       position: relative;
 
       padding: 0px;
@@ -76,13 +76,13 @@
         font-family: inherit;
       }
 
-      .ant-input-suffix {
+      :global(.ant-input-suffix) {
         position: absolute;
         top: 50%;
         right: 10px;
         transform: translateY(-50%);
 
-        .ant-input-data-count {
+        :global(.ant-input-data-count) {
           position: relative;
           bottom: auto;
 
@@ -90,7 +90,7 @@
           font-size: 14px;
         }
 
-        .ant-input-clear-icon {
+        :global(.ant-input-clear-icon) {
           position: relative;
 
           inset-inline-end: 0;
@@ -121,7 +121,7 @@
 
     box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
 
-    .ant-input-status-error {
+    :global(.ant-input-status-error) {
       border: none !important;
 
       box-shadow: none !important;

package/src/components/Input/index.md

@@ -8,10 +8,157 @@ title: Input 输入框
 
 # Input 输入框
 
-> `Input` 组件。完整 API 见源码类型定义，下方为基础用法。
+基于 antd `Input` 封装的受控输入框，内置中文输入法合成处理、防抖 `onChange`（返回纯字符串）、自动 `allowClear`、可选 `Tooltip` 及字符转义能力。
 
 ## 引入
 
 ```ts
 import { Input } from "@hsu-react/ui";
 ```
+
+## 输入框
+
+```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, width: 240 }}>
+      <Input placeholder="请输入" value={value} onChange={setValue} />
+      <Input placeholder="禁用状态" disabled />
+    </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>
+  );
+};
+```
+
+## API
+
+在 [antd InputProps](https://ant.design/components/input-cn) 基础上扩展（并移除了 `onCompositionStart`、`onCompositionEnd`、`ref`，重写了 `onChange`）：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| onChange | 值变化回调，经过合成与防抖处理后返回纯字符串 | `(value: string) => void` | - |
+| getRef | 获取内部 antd `InputRef` 的回调 | `(ref: InputRef \| null) => void` | - |
+| en | 是否英文模式，开启后不受 `maxLength` 限制 | `boolean` | `false` |
+| word | 是否为字数/单词相关模式 | `boolean` | - |
+| tooltip | 透传给外层 `Tooltip` 的配置 | `TooltipProps` | - |
+| escapeCharacters | 需要自动转义/去转义的字符列表 | `string[]` | - |
+
+> 另提供子组件：`Input.Search`、`Input.TextArea`、`Input.Password`、`Input.Number`（数字输入，`onChange` 返回字符串）、`Input.Range`（范围输入）。

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

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

package/src/components/Markdown/index.md

@@ -8,10 +8,82 @@ title: Markdown 渲染
 
 # Markdown 渲染
 
-> `Markdown` 组件。完整 API 见源码类型定义，下方为基础用法。
+Markdown 渲染与编辑组件，`Markdown.Views` 用于渲染展示（支持 GFM、KaTeX 公式、代码高亮、Mermaid 图与 HTML/SVG Artifacts 预览），`Markdown.Editor` 提供所见即所得编辑器。
 
 ## 引入
 
 ```ts
 import { Markdown } from "@hsu-react/ui";
 ```
+
+## Markdown 展示
+
+`Markdown.Views` 渲染（依赖 KaTeX / highlight.js / Mermaid 等样式，建议在应用环境内使用）：
+
+```tsx
+import React from "react";
+import { Markdown } from "@hsu-react/ui";
+
+const content = `# 标题
+
+这是一段包含 **加粗** 文本的说明。
+
+- 列表项一
+- 列表项二
+- 列表项三
+
+\`\`\`ts
+const a = 1;
+const b = a + 1;
+\`\`\`
+`;
+
+export default () => <Markdown.Views>{content}</Markdown.Views>;
+```
+
+## Markdown 编辑器
+
+`Markdown.Editor` 编辑：
+
+```tsx
+import React from "react";
+import { Markdown } from "@hsu-react/ui";
+
+export default () => {
+  const [value, setValue] = React.useState("# Hello\n\n开始编辑 **Markdown** 内容吧。");
+
+  return (
+    <div style={{ height: 240 }}>
+      <Markdown.Editor
+        value={value}
+        onChange={setValue}
+        view={{ menu: true, md: true, html: true }}
+      />
+    </div>
+  );
+};
+```
+
+## API
+
+### Markdown.Views
+
+继承 [react-markdown Options](https://github.com/remarkjs/react-markdown)（markdown 文本通过 `children` 传入），新增属性：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| children | 待渲染的 markdown 文本 | `string` | - |
+| copyProps | 代码块复制按钮配置 | `Omit<CopyProps, 'id'>` | - |
+| className | 自定义类名 | `string` | - |
+
+### Markdown.Editor
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 编辑器内容 | `string` | `''` |
+| onChange | 内容变化回调 | `(value: string) => void` | - |
+| buttonGroup | 顶部自定义按钮组 | `ButtonProps[]` | - |
+| className | 自定义类名 | `string` | - |
+| disabled | 是否禁用 | `boolean` | - |
+| readOnly | 是否只读 | `boolean` | - |
+| view | 视图区域配置 | `{ menu?: boolean; md?: boolean; html?: boolean }` | `{ menu: true, md: true, html: true }` |

package/src/components/Modal/index.md

@@ -8,10 +8,52 @@ title: Modal 对话框
 
 # Modal 对话框
 
-> `Modal` 组件。完整 API 见源码类型定义，下方为基础用法。
+在 antd `Modal` 之上增强：默认垂直居中、可拖拽移动、边缘检测、一键全屏，并支持在标题区放置按钮组。
 
 ## 引入
 
 ```ts
 import { Modal } from "@hsu-react/ui";
 ```
+
+## 对话框
+
+通过 `open` 受控显隐，配合 `Button` 切换状态。默认弹窗可按住标题栏拖动。
+
+```tsx
+import React, { useState } from "react";
+import { Modal, Button } from "@hsu-react/ui";
+
+export default () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        打开对话框
+      </Button>
+      <Modal
+        title="标题"
+        open={open}
+        onOk={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+      >
+        <p>这是一段对话框内容，可按住标题栏拖动弹窗。</p>
+      </Modal>
+    </>
+  );
+};
+```
+
+## API
+
+在 [antd ModalProps](https://ant.design/components/modal-cn) 基础上扩展：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| moveable | 是否可拖拽标题栏移动弹窗 | `boolean` | `true` |
+| edgeDetection | 拖拽时是否进行边缘检测，防止拖出视口 | `boolean` | `true` |
+| full | 是否以全屏方式展示 | `boolean` | `false` |
+| titleButtonGroup | 标题区右侧的按钮组配置 | `ButtonProps[]` | - |
+
+> 其余属性（`open`、`onOk`、`onCancel`、`footer`、`width` 等）与 antd `Modal` 一致；`destroyOnClose` 默认为 `true`。

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

@@ -24,7 +24,7 @@
     padding: 0px 0px 15px;
   }
 
-  .ant-modal-close {
+  :global(.ant-modal-close) {
     top: 15px;
     inset-inline-end: 10px;
   }
@@ -47,7 +47,7 @@
       }
     }
 
-    .ant-modal-title {
+    :global(.ant-modal-title) {
       display: flex;
       align-items: center;
       justify-content: space-between;

package/src/components/Operate/index.md

@@ -8,10 +8,52 @@ title: Operate 操作
 
 # Operate 操作
 
-> `Operate` 组件。完整 API 见源码类型定义，下方为基础用法。
+表格操作列组件，支持单个操作按钮或一组操作按钮，内置二次确认、权限过滤，并在数量超出时自动收纳到「更多」下拉中。
 
 ## 引入
 
 ```ts
 import { Operate } from "@hsu-react/ui";
 ```
+
+## 操作
+
+```tsx
+import React from "react";
+import { Operate } from "@hsu-react/ui";
+import { message } from "antd";
+
+export default () => (
+  <Operate
+    title="更多"
+    menu={[
+      { title: "查看", onClick: () => message.info("查看") },
+      { title: "编辑", onClick: () => message.info("编辑") },
+      {
+        title: "删除",
+        delete: true,
+        onConfirm: () => message.success("已删除"),
+      },
+    ]}
+  />
+);
+```
+
+## API
+
+在 antd `ButtonProps`（已排除 `children`、`title`、`onClick`、`hasPermi`）基础上扩展：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 按钮文本 | `ReactNode` | - |
+| menu | 操作项列表（递归同 `OperateProps`），存在时渲染为按钮组 | `OperateProps[]` | `[]` |
+| onClick | 点击回调 | `() => void` | - |
+| onConfirm | 二次确认回调，存在时点击弹出 Popconfirm | `() => void` | - |
+| icon | 自定义图标，`false` 时不显示 | `ReactNode \| false` | - |
+| delete | 是否为删除操作（红色样式，默认删除图标） | `boolean` | - |
+| popconfirm | Popconfirm 配置 | `Omit<PopconfirmProps, 'title'> & { title?: ReactNode }` | - |
+| hidden | 是否隐藏（不渲染） | `boolean` | - |
+| hasPermi | 权限码；无权限时不渲染 | `string[]` | - |
+| maxVisible | 收纳前最多展示的操作数量 | `number` | `3` |
+| enableEllipsis | 操作超出时是否启用「更多」收纳 | `boolean` | `true` |
+| moreIcon | 「更多」按钮自定义图标，`false` 时不显示 | `ReactNode \| false` | - |

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

@@ -42,13 +42,13 @@
 }
 
 .moreButton {
-  &.ant-btn-icon-only {
+  &:global(.ant-btn-icon-only) {
     width: max-content;
 
     padding-inline: 4px;
   }
 
-  .ant-btn-icon {
+  :global(.ant-btn-icon) {
     display: inline-flex;
     align-items: center;
 

package/src/components/Panel/IframePanel/index.module.less

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

package/src/components/Panel/ListPanel/_components/ColumnMgt/index.module.less

@@ -25,7 +25,7 @@
   }
 
   .checkbox {
-    .ant-checkbox {
+    :global(.ant-checkbox) {
       width: 14px;
       min-width: 14px;
       height: 14px;