@hsu-react/ui 0.0.1 → 0.0.2

package/src/components/Icon/index.md

@@ -18,18 +18,36 @@ import { Icon } from "@hsu-react/ui";
 
 ## 基础用法
 
+antd 图标名（驼峰）：
+
 ```tsx
 import React from "react";
 import { Icon } from "@hsu-react/ui";
-import { Space } from "antd";
 
 export default () => (
-  <Space size="large" style={{ fontSize: 22 }}>
+  <div style={{ display: "flex", gap: 20, alignItems: "center", fontSize: 22 }}>
     <Icon icon="UserOutlined" />
     <Icon icon="SettingOutlined" />
     <Icon icon="HomeOutlined" />
     <Icon icon="HeartFilled" style={{ color: "#eb2f96" }} />
-  </Space>
+  </div>
+);
+```
+
+iconify 图标名（`集合:名称`，需先注册对应图标集）：
+
+```tsx
+import React from "react";
+import { Icon } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ display: "flex", gap: 20, alignItems: "center", fontSize: 22 }}>
+    <Icon icon="ph:user-bold" />
+    <Icon icon="mdi:home" />
+    <Icon icon="tabler:settings" />
+    <Icon icon="solar:heart-bold" style={{ color: "#eb2f96" }} />
+    <Icon icon="carbon:document" />
+  </div>
 );
 ```
 

package/src/components/Icon/index.tsx

@@ -4,7 +4,7 @@ import {
   IconProps as IconifyProps,
 } from "@iconify/react";
 
-import AntdIcon, * as AntdIcons from "@ant-design/icons";
+import * as AntdIcons from "@ant-design/icons";
 import React, { useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./index.module.less";
@@ -74,46 +74,18 @@ const Icon: React.FC<IconProps> = (props) => {
     );
   }
 
+  // iconify 图标：直接用 span 承载 Iconify 自带的 svg，避免把它嵌套进 antd Icon
+  // 的 svg（其 viewBox 会把内层 svg 缩放成极小值导致图标不可见）。
   return (
-    <AntdIcon
+    <span
       {...iconConfig}
-      // 与 antd 缺省值一致；显式传入以消除开发态 viewBox 告警（子节点是 Iconify 自带 viewBox 的 svg）
-      viewBox="0 0 1024 1024"
-      className={classNames([styles.icon, className])}
+      role="img"
+      ref={ref as unknown as React.Ref<HTMLSpanElement>}
+      className={classNames(["anticon", styles.icon, className])}
       style={mergedStyle}
-      ref={ref}
     >
-      <Iconify
-        {...iconProps}
-        icon={icon}
-        width="1em"
-        height="1em"
-        onLoad={() => {
-          setTimeout(() => {
-            if (ref.current) {
-              const svg = ref.current.childNodes[0] as SVGSVGElement;
-              const svg_i = svg.childNodes[0] as SVGSVGElement;
-
-              const { height } = svg.getBoundingClientRect();
-              const { height: height_i } = svg_i.getBoundingClientRect();
-
-              const viewBox_i = svg_i.getAttribute("viewBox");
-              const viewBox_i_height = viewBox_i?.split(" ")[3];
-
-              if (Number(viewBox_i_height) <= 24) return;
-
-              const y_i =
-                Number(viewBox_i_height) - (Number(height) - Number(height_i));
-
-              svg_i.setAttribute(
-                "viewBox",
-                `0 0 ${viewBox_i?.split(" ")[2]} ${y_i.toFixed(0)}`
-              );
-            }
-          }, 1);
-        }}
-      />
-    </AntdIcon>
+      <Iconify {...iconProps} icon={icon} width="1em" height="1em" />
+    </span>
   );
 };
 

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

@@ -10,22 +10,22 @@
     width: 100%;
     height: 100%;
 
-    .ant-input-number-wrapper {
+    :global(.ant-input-number-wrapper) {
       height: 100%;
       min-height: inherit;
 
-      > .ant-input-number,
-      > .ant-input-number-affix-wrapper {
+      > :global(.ant-input-number),
+      > :global(.ant-input-number-affix-wrapper) {
         height: 100%;
         min-height: inherit;
       }
 
-      > .ant-input-number {
-        > .ant-input-number-input-wrap {
+      > :global(.ant-input-number) {
+        > :global(.ant-input-number-input-wrap) {
           height: 100%;
           min-height: inherit;
 
-          > .ant-input-number-input {
+          > :global(.ant-input-number-input) {
             height: 100%;
             min-height: inherit;
           }
@@ -33,11 +33,11 @@
       }
     }
 
-    > .ant-input-number-input-wrap {
+    > :global(.ant-input-number-input-wrap) {
       height: 100%;
       min-height: inherit;
 
-      > .ant-input-number-input {
+      > :global(.ant-input-number-input) {
         height: 100%;
       }
     }
@@ -66,7 +66,7 @@
   }
 
   // 当存在 addonAfter 时，调整清除图标位置
-  // Ant Design 的 addonAfter 会生成 .ant-input-number-group-addon
+  // Ant Design 的 addonAfter 会生成 :global(.ant-input-number-group-addon)
   // 清除图标需要向左偏移，避免与 addon 重叠
   // 使用 CSS 变量来动态设置 addon 宽度，默认值 60px 是合理的估算
   // 通过 JS 动态计算实际宽度并设置 CSS 变量来覆盖

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

@@ -2,12 +2,12 @@
   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;
     }

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,44 @@ 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>当前值：{value}</div>
+    </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

@@ -2,16 +2,16 @@
   width: 100%;
   height: 100%;
 
-  .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,80 @@ title: Markdown 渲染
 
 # Markdown 渲染
 
-> `Markdown` 组件。完整 API 见源码类型定义，下方为基础用法。
+Markdown 渲染与编辑组件，`Markdown.Views` 用于渲染展示（支持 GFM、KaTeX 公式、代码高亮、Mermaid 图与 HTML/SVG Artifacts 预览），`Markdown.Editor` 提供所见即所得编辑器。
 
 ## 引入
 
 ```ts
 import { Markdown } from "@hsu-react/ui";
 ```
+
+## 基础用法
+
+`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.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;