@hsu-react/ui 0.0.1

package/lib/components/Markdown/Views/blocks.module.less

@@ -0,0 +1,86 @@
+.mermaid {
+  display: flex;
+  justify-content: center;
+  padding: 12px;
+  margin: 8px 0;
+  background: #fff;
+  border: 1px solid #ececee;
+  border-radius: 8px;
+  overflow-x: auto;
+
+  svg {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.mermaidFallback {
+  margin: 8px 0;
+  padding: 12px;
+  background: #f7f7f8;
+  border-radius: 8px;
+  overflow-x: auto;
+
+  code {
+    font-size: 13px;
+  }
+}
+
+.artifact {
+  margin: 8px 0;
+  border: 1px solid #ececee;
+  border-radius: 10px;
+  overflow: hidden;
+
+  .artifactBar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background: #f7f7f8;
+    border-bottom: 1px solid #ececee;
+  }
+
+  .artifactLang {
+    font-size: 12px;
+    font-weight: 600;
+    color: #6b6e76;
+  }
+
+  .artifactTabs {
+    display: flex;
+    gap: 4px;
+  }
+
+  .artifactTab {
+    padding: 2px 12px;
+    font-size: 12px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: #6b6e76;
+    cursor: pointer;
+
+    &:hover {
+      background: #ececee;
+    }
+  }
+
+  .artifactTabActive {
+    background: #fff;
+    color: #4f46e5;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      background: #fff;
+    }
+  }
+
+  .artifactFrame {
+    display: block;
+    width: 100%;
+    height: 360px;
+    border: none;
+    background: #fff;
+  }
+}

package/lib/components/Markdown/Views/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Options as ReactMarkdownProps } from "react-markdown";
+import "highlight.js/styles/atom-one-dark.min.css";
+import "katex/dist/katex.min.css";
+import { CopyProps } from "../../Copy";
+export interface MarkdownViewsProps extends ReactMarkdownProps {
+    copyProps?: Omit<CopyProps, "id">;
+}
+declare const MarkdownViews: React.FC<MarkdownViewsProps>;
+export default MarkdownViews;

package/lib/components/Markdown/Views/index.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
+var _rehypeHighlight = _interopRequireDefault(require("rehype-highlight"));
+var _rehypeKatex = _interopRequireDefault(require("rehype-katex"));
+var _remarkGfm = _interopRequireDefault(require("remark-gfm"));
+var _remarkMath = _interopRequireDefault(require("remark-math"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+require("highlight.js/styles/atom-one-dark.min.css");
+require("katex/dist/katex.min.css");
+var _hsuUtils = require("hsu-utils");
+var _Copy = _interopRequireDefault(require("../../Copy"));
+var _MermaidBlock = _interopRequireDefault(require("./MermaidBlock"));
+var _ArtifactBlock = _interopRequireDefault(require("./ArtifactBlock"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/** 支持 Artifacts 预览的代码块语言（对标 Claude Artifacts） */const ARTIFACT_LANGS = new Set(["html", "svg"]);
+
+/**
+ * 从代码块 children 还原纯文本源码：rehype-highlight 会把代码切成嵌套的
+ * <span> 高亮元素，直接 join 会得到 [object Object]，需递归抽取文本。
+ */
+const extractText = node => {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(extractText).join("");
+  if ( /*#__PURE__*/_react.default.isValidElement(node)) {
+    return extractText(node.props.children);
+  }
+  return "";
+};
+const MarkdownViews = props => {
+  const {
+    className,
+    copyProps,
+    components: extraComponents
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdown.default, {
+    ...props,
+    rehypePlugins: [_rehypeHighlight.default, _rehypeKatex.default],
+    remarkPlugins: [_remarkGfm.default, _remarkMath.default],
+    className: (0, _classnames.default)(_indexModule.default.MarkdownViews, className, "markdown-body"),
+    components: {
+      code: ({
+        className,
+        children,
+        ...props
+      }) => {
+        const match = /language-(\w+)/.exec(className || "");
+        if (match?.length) {
+          const lang = match[1].toLowerCase();
+          const codeText = extractText(children);
+
+          // Mermaid 图：直接渲染为 SVG（流式不完整时回退代码展示）
+          if (lang === "mermaid") {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MermaidBlock.default, {
+              code: codeText
+            });
+          }
+          const id = (0, _hsuUtils.generateRandomStr)(10);
+          const codeView = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _classnames.default)(_indexModule.default.code),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames.default)(_indexModule.default.nav),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copy.default, {
+                id: id,
+                md: false,
+                ...copyProps
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames.default)(_indexModule.default.content),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+                id: id,
+                ...props,
+                className: (0, _classnames.default)(_indexModule.default.code_content, className),
+                children: children
+              })
+            })]
+          });
+
+          // HTML/SVG：Artifacts 预览（sandbox iframe）+ 代码两个页签
+          if (ARTIFACT_LANGS.has(lang)) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArtifactBlock.default, {
+              code: codeText,
+              lang: lang,
+              codeView: codeView
+            });
+          }
+          return codeView;
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+          ...props,
+          children: children
+        });
+      },
+      td: ({
+        children,
+        ...props
+      }) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+          ...props,
+          children: Array.isArray(children) ? children?.map(item => {
+            if (item === "<br>") {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {});
+            }
+            return item;
+          }) : children
+        });
+      },
+      ...(extraComponents || {})
+    }
+  });
+};
+var _default = exports.default = MarkdownViews;

package/lib/components/Markdown/Views/index.module.less

@@ -0,0 +1,73 @@
+.MarkdownViews {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+
+  width: 100%;
+
+  ul,
+  ol {
+    list-style: revert;
+
+    padding-left: 1.3em;
+
+    li {
+      margin-bottom: 5px;
+
+      line-height: 1.5em;
+
+      &:last-child {
+        margin-bottom: 0px;
+      }
+    }
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    th,
+    td {
+      padding: 4px 8px;
+
+      border: 1px solid #868686;
+    }
+  }
+
+  p {
+    white-space: pre-wrap;
+    word-break: break-word;
+
+    line-height: 1.5em;
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  .code {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    overflow: hidden;
+
+    border: 1px solid rgba(240, 237, 234, 0.2);
+    border-radius: 6px;
+
+    .nav {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      width: 100%;
+      padding: 10px 15px;
+
+      font-size: 14px;
+      color: #efefef;
+
+      background: #212121;
+    }
+  }
+}

package/lib/components/Markdown/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { MarkdownViewsProps } from "./Views";
+import { MarkdownEditorProps } from "./Editor";
+interface Markdown {
+    Views: React.FC<MarkdownViewsProps>;
+    Editor: React.FC<MarkdownEditorProps>;
+}
+declare const Markdown: Markdown;
+export default Markdown;

package/lib/components/Markdown/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Views = _interopRequireDefault(require("./Views"));
+var _Editor = _interopRequireDefault(require("./Editor"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Markdown = {
+  Views: _Views.default,
+  Editor: _Editor.default
+};
+var _default = exports.default = Markdown;

package/lib/components/Modal/_hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useModalElements } from "./useModalElements";
+export { useModalDrag } from "./useModalDrag";

package/lib/components/Modal/_hooks/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useModalDrag", {
+  enumerable: true,
+  get: function () {
+    return _useModalDrag.useModalDrag;
+  }
+});
+Object.defineProperty(exports, "useModalElements", {
+  enumerable: true,
+  get: function () {
+    return _useModalElements.useModalElements;
+  }
+});
+var _useModalElements = require("./useModalElements");
+var _useModalDrag = require("./useModalDrag");

package/lib/components/Modal/_hooks/useModalDrag.d.ts

@@ -0,0 +1,12 @@
+interface UseModalDragProps {
+    moveable?: boolean;
+    modal: HTMLElement | null;
+    modalHeader: HTMLElement | null;
+    open?: boolean;
+    edgeDetection?: boolean;
+}
+/**
+ * 处理 Modal 拖拽功能
+ */
+export declare function useModalDrag({ moveable, modal, modalHeader, open, edgeDetection, }: UseModalDragProps): void;
+export {};

package/lib/components/Modal/_hooks/useModalDrag.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModalDrag = useModalDrag;
+var _react = require("react");
+var _utils = require("../_utils");
+/**
+ * 处理 Modal 拖拽功能
+ */
+function useModalDrag({
+  moveable,
+  modal,
+  modalHeader,
+  open,
+  edgeDetection = true
+}) {
+  (0, _react.useEffect)(() => {
+    if (!moveable || !modal || !modalHeader) {
+      return;
+    }
+    const moveFunc = e => {
+      const modalWidth = modal.offsetWidth;
+      const modalHeight = modal.offsetHeight;
+      const modalLeft = modal.offsetLeft;
+      const modalTop = modal.offsetTop;
+      const mouseX = e.clientX;
+      const mouseY = e.clientY;
+      const move = e => {
+        const x = e.clientX - mouseX;
+        const y = e.clientY - mouseY;
+        const targetLeft = modalLeft + x;
+        const targetTop = modalTop + y;
+        const {
+          left,
+          top
+        } = (0, _utils.calculatePosition)(targetLeft, targetTop, modalWidth, modalHeight, edgeDetection);
+        modal?.setAttribute("style", `left: ${left}px; top: ${top}px; width: ${modalWidth}px; position: fixed;`);
+      };
+      const up = () => {
+        document.removeEventListener("mousemove", move);
+        document.removeEventListener("mouseup", up);
+      };
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
+    };
+    if (open) {
+      modalHeader?.addEventListener("mousedown", moveFunc);
+    } else {
+      modalHeader?.removeEventListener("mousedown", moveFunc);
+    }
+    return () => {
+      modalHeader?.removeEventListener("mousedown", moveFunc);
+    };
+  }, [moveable, modal, modalHeader, open, edgeDetection]);
+}

package/lib/components/Modal/_hooks/useModalElements.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+interface UseModalElementsProps {
+    open?: boolean;
+}
+/**
+ * 查找并管理 Modal DOM 元素
+ */
+export declare function useModalElements({ open }: UseModalElementsProps): {
+    cls: string;
+    modal: HTMLElement | null;
+    modalHeader: HTMLElement | null;
+    originalStyle: string | null;
+    setModal: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+    setModalHeader: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+    setOriginalStyle: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+};
+export {};

package/lib/components/Modal/_hooks/useModalElements.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModalElements = useModalElements;
+var _react = require("react");
+var _hsuUtils = require("hsu-utils");
+/**
+ * 查找并管理 Modal DOM 元素
+ */
+function useModalElements({
+  open
+}) {
+  const cls = (0, _react.useMemo)(() => (0, _hsuUtils.generateRandomStr)(10), []);
+  const [modal, setModal] = (0, _react.useState)(null);
+  const [modalHeader, setModalHeader] = (0, _react.useState)(null);
+  const [originalStyle, setOriginalStyle] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    let timer = null;
+    if (open && !modalHeader && !modal) {
+      timer = setInterval(() => {
+        const modalHeader = document.querySelector(`.${cls}`);
+        if (modalHeader) {
+          clearInterval(timer);
+        }
+        setModalHeader(modalHeader);
+        let _modal = null;
+        if (modalHeader) {
+          _modal = modalHeader.closest(".ant-modal");
+          setModal(_modal);
+          const originalStyle = _modal?.getAttribute("style");
+          setOriginalStyle(originalStyle);
+        }
+      }, 1);
+    }
+    if (timer && !open) {
+      clearInterval(timer);
+    }
+    return () => {
+      if (timer) {
+        clearInterval(timer);
+      }
+    };
+  }, [cls, modal, modalHeader, open]);
+  return {
+    cls,
+    modal,
+    modalHeader,
+    originalStyle,
+    setModal,
+    setModalHeader,
+    setOriginalStyle
+  };
+}

package/lib/components/Modal/_utils/calculatePosition.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 计算模态框位置，考虑边界检测
+ * @param left 目标左边距
+ * @param top 目标上边距
+ * @param modalWidth 模态框宽度
+ * @param modalHeight 模态框高度
+ * @param edgeDetection 是否启用边界检测
+ * @returns 计算后的位置
+ */
+export declare function calculatePosition(left: number, top: number, modalWidth: number, modalHeight: number, edgeDetection: boolean): {
+    left: number;
+    top: number;
+};

package/lib/components/Modal/_utils/calculatePosition.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculatePosition = calculatePosition;
+/**
+ * 计算模态框位置，考虑边界检测
+ * @param left 目标左边距
+ * @param top 目标上边距
+ * @param modalWidth 模态框宽度
+ * @param modalHeight 模态框高度
+ * @param edgeDetection 是否启用边界检测
+ * @returns 计算后的位置
+ */
+function calculatePosition(left, top, modalWidth, modalHeight, edgeDetection) {
+  if (!edgeDetection) {
+    return {
+      left,
+      top
+    };
+  }
+  let newLeft = left < 0 ? 0 : left;
+  let newTop = top < 0 ? 0 : top;
+  if (newLeft + modalWidth > window.innerWidth) {
+    newLeft = window.innerWidth - modalWidth;
+  }
+  if (newTop + modalHeight > window.innerHeight) {
+    newTop = window.innerHeight - modalHeight;
+  }
+  return {
+    left: newLeft,
+    top: newTop
+  };
+}

package/lib/components/Modal/_utils/index.d.ts

@@ -0,0 +1 @@
+export { calculatePosition } from "./calculatePosition";

package/lib/components/Modal/_utils/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "calculatePosition", {
+  enumerable: true,
+  get: function () {
+    return _calculatePosition.calculatePosition;
+  }
+});
+var _calculatePosition = require("./calculatePosition");

package/lib/components/Modal/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ModalProps as AntdModalProps } from "antd";
+import { ButtonProps } from "../Button";
+export interface ModalProps extends AntdModalProps {
+    moveable?: boolean;
+    edgeDetection?: boolean;
+    full?: boolean;
+    titleButtonGroup?: ButtonProps[];
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/lib/components/Modal/index.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _hooks = require("./_hooks");
+var _Button = _interopRequireDefault(require("../Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Modal = props => {
+  const {
+    moveable = true,
+    className,
+    classNames,
+    open,
+    onCancel,
+    onOk,
+    afterClose,
+    edgeDetection = true,
+    full = false,
+    destroyOnClose = true,
+    footer,
+    title,
+    titleButtonGroup,
+    ...moadlConfig
+  } = props;
+  const {
+    cls,
+    modal,
+    modalHeader,
+    originalStyle,
+    setModal,
+    setModalHeader,
+    setOriginalStyle
+  } = (0, _hooks.useModalElements)({
+    open
+  });
+  (0, _hooks.useModalDrag)({
+    moveable,
+    modal,
+    modalHeader,
+    open,
+    edgeDetection
+  });
+  const resetModal = () => {
+    if (modal && originalStyle) {
+      modal.setAttribute("style", originalStyle);
+    }
+  };
+  const handleCancel = e => {
+    onCancel?.(e);
+  };
+  const handleOk = e => {
+    onOk?.(e);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Modal, {
+    centered: true,
+    ...moadlConfig,
+    title: titleButtonGroup ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _indexModule.default.titleButtonGroup,
+        children: titleButtonGroup?.map((button, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          ...button
+        }, index))
+      })]
+    }) : title,
+    destroyOnClose: destroyOnClose,
+    open: open,
+    onCancel: handleCancel,
+    onOk: handleOk,
+    className: `${_indexModule.default.Modal} ${className} ${full ? _indexModule.default.full : ""}`,
+    classNames: {
+      ...classNames,
+      header: `${cls} ${_indexModule.default.header} ${classNames?.header ?? ""} ${moveable ? _indexModule.default.moveable : ""}`,
+      content: `${_indexModule.default.content} ${classNames?.content ?? ""}`,
+      body: `${_indexModule.default.body} ${classNames?.body ?? ""}`,
+      footer: `${_indexModule.default.footer} ${classNames?.footer ?? ""} ${footer === false ? _indexModule.default.noFooter : ""}`
+    },
+    footer: footer,
+    afterClose: () => {
+      afterClose?.();
+      resetModal();
+      if (destroyOnClose) {
+        setModal(null);
+        setModalHeader(null);
+        setOriginalStyle(null);
+      }
+    }
+  });
+};
+var _default = exports.default = Modal;