@hsu-react/ui 0.0.1

package/README.md

@@ -0,0 +1,54 @@
+# @hsu-react/ui
+
+一套基于 **React + Ant Design** 的中后台业务组件库，把「列表 + 搜索 + 表单弹窗 + CRUD」这类重复劳动沉淀为页面级组件，并内置 Markdown / CodeMirror / Spreadsheet / Chart / Editor 等内容组件。
+
+## 安装
+
+```bash
+yarn add @hsu-react/ui
+# peerDependencies
+yarn add react react-dom antd @ant-design/icons mobx mobx-react-lite
+```
+
+## 使用
+
+```tsx
+import { ConfigProvider, Button } from "@hsu-react/ui";
+import { get, post, del, put } from "@/services/Axios";
+
+export default function App() {
+  return (
+    <ConfigProvider permissions={userPermissions} request={{ get, post, del, put }}>
+      <Button type="primary">Hello Hsu UI</Button>
+    </ConfigProvider>
+  );
+}
+```
+
+- `ConfigProvider.permissions` — 当前用户权限码，驱动所有 `hasPermi` 的显隐校验。
+- `ConfigProvider.request` — 注入 HTTP 请求实现（库本身不绑定 HTTP 客户端）。
+
+可选引入全局 antd 观感覆盖：
+
+```ts
+import "@hsu-react/ui/es/styles/antd-overload.less";
+```
+
+## 开发
+
+```bash
+yarn          # 安装依赖
+yarn dev      # 启动 dumi 文档站
+yarn build    # father 构建 es/ + lib/ + 类型
+yarn docs:build  # 构建文档站静态产物
+```
+
+## 组件一览
+
+通用 `Button` `Icon` `Copy` `Operate` ·
+布局 `Panel` `FlexFill` `TabBar` ·
+数据录入 `Input` `Select` `Checkbox` `Switch` `Slider` `DatePicker` `Form` `FormItem` `Upload` `CodeMirror` `Editor` `SecondConf` `Search` ·
+数据展示 `Table` `Tags` `Descriptions` `Tree` `TextEllipsis` `FileCol` `FilePreview` `Chart` `Markdown` `Spreadsheet` `ChainGraph` ·
+反馈 `Modal` · AI `Chat`
+
+详见文档站。

package/es/components/Button/ChakraButton/index.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+import { ButtonProps } from "@chakra-ui/react";
+export interface ChakraButtonProps extends ButtonProps {
+    hasPermi?: string[];
+    hidden?: boolean;
+    iconPosition?: "start" | "end";
+    icon?: ReactNode;
+    reRender?: (btn: React.ReactElement) => ReactNode;
+}
+declare const ChakraButton: React.FC<ChakraButtonProps>;
+export default ChakraButton;

package/es/components/Button/ChakraButton/index.js

@@ -0,0 +1,61 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["hasPermi", "hidden", "iconPosition", "className", "children", "title", "icon", "reRender"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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 React from "react";
+import { Button } from "@chakra-ui/react";
+import usePermissions from "../../../hooks/usePermissions";
+import styles from "./index.module.less";
+import classNames from "classnames";
+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 ChakraButton = function ChakraButton(props) {
+  var hasPermi = props.hasPermi,
+    hidden = props.hidden,
+    _props$iconPosition = props.iconPosition,
+    iconPosition = _props$iconPosition === void 0 ? "start" : _props$iconPosition,
+    className = props.className,
+    children = props.children,
+    title = props.title,
+    icon = props.icon,
+    reRender = props.reRender,
+    buttonConfig = _objectWithoutProperties(props, _excluded);
+  var _usePermissions = usePermissions(hasPermi),
+    permitted = _usePermissions.permitted;
+  if (!permitted || hidden) {
+    return null;
+  }
+  if (reRender) {
+    return reRender( /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
+      className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
+      children: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [iconPosition === "start" && icon && /*#__PURE__*/_jsx("span", {
+          className: styles.icon,
+          children: icon
+        }), children !== null && children !== void 0 ? children : title, iconPosition === "end" && icon && /*#__PURE__*/_jsx("span", {
+          className: styles.icon,
+          children: icon
+        })]
+      })
+    })));
+  }
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
+    className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [iconPosition === "start" && icon && /*#__PURE__*/_jsx("span", {
+        className: styles.icon,
+        children: icon
+      }), children !== null && children !== void 0 ? children : title, iconPosition === "end" && icon && /*#__PURE__*/_jsx("span", {
+        className: styles.icon,
+        children: icon
+      })]
+    })
+  }));
+};
+export default ChakraButton;

package/es/components/Button/ChakraButton/index.module.less

@@ -0,0 +1,20 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 4px;
+
+  height: 32px;
+  padding: 0px 12px;
+
+  font-size: 14px;
+  font-weight: normal;
+
+  .icon {
+    font-size: 16px;
+
+    svg {
+      width: max-content;
+      height: max-content;
+    }
+  }
+}

package/es/components/Button/index.d.ts

@@ -0,0 +1,14 @@
+import { ButtonProps as AntdButtonProps } from "antd";
+import React from "react";
+import { ChakraButtonProps } from "./ChakraButton";
+export type { ChakraButtonProps };
+export interface ButtonProps extends AntdButtonProps {
+    hasPermi?: string[];
+    hidden?: boolean;
+    iconPosition?: "start" | "end";
+}
+interface ButtonFC extends React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> {
+    Chakra: React.FC<ChakraButtonProps>;
+}
+declare const Button: ButtonFC;
+export default Button;

package/es/components/Button/index.js

@@ -0,0 +1,41 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["hasPermi", "hidden", "iconPosition", "className", "children", "title"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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 { Button as AntdButton } from "antd";
+import React from "react";
+import usePermissions from "../../hooks/usePermissions";
+import classNames from "classnames";
+import styles from "./index.module.less";
+import ChakraButton from "./ChakraButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+// forwardRef：被 Tooltip / Popconfirm 等浮层组件包裹时可直接拿到按钮 DOM，
+// 避免 rc 库退回 findDOMNode 触发 React 弃用警告
+var InternalButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var hasPermi = props.hasPermi,
+    hidden = props.hidden,
+    _props$iconPosition = props.iconPosition,
+    iconPosition = _props$iconPosition === void 0 ? "start" : _props$iconPosition,
+    className = props.className,
+    children = props.children,
+    title = props.title,
+    buttonConfig = _objectWithoutProperties(props, _excluded);
+  var _usePermissions = usePermissions(hasPermi),
+    permitted = _usePermissions.permitted;
+  if (!permitted || hidden) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(AntdButton, _objectSpread(_objectSpread({}, buttonConfig), {}, {
+    ref: ref,
+    className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
+    children: children !== null && children !== void 0 ? children : title
+  }));
+});
+var Button = InternalButton;
+Button.Chakra = ChakraButton;
+export default Button;

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

@@ -0,0 +1,11 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 4px;
+
+  padding: 0px 12px;
+
+  &.end {
+    flex-direction: row-reverse;
+  }
+}

package/es/components/ChainGraph/ChainGraphServices/Edges/ArrowEdge.d.ts

@@ -0,0 +1,6 @@
+import { ShapeOptions, ShapeStyle } from "@antv/g6";
+interface ArrowEdgeProps {
+    styles?: ShapeStyle;
+}
+export default function ArrowEdge(arrowEdgeProps: ArrowEdgeProps): ShapeOptions;
+export {};

package/es/components/ChainGraph/ChainGraphServices/Edges/ArrowEdge.js

@@ -0,0 +1,51 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+export default function ArrowEdge(arrowEdgeProps) {
+  var _ref = arrowEdgeProps || {},
+    styles = _ref.styles;
+  var _styles = _objectSpread({
+    stroke: "#A5A5A5",
+    lineWidth: 1.5
+  }, styles);
+  var draw = function draw(cfg, group) {
+    var startPoint = cfg.startPoint,
+      endPoint = cfg.endPoint;
+    if (!startPoint || !endPoint) {
+      return group.addShape("path", {
+        attrs: {
+          path: [],
+          stroke: "#000",
+          lineWidth: 1
+        },
+        name: "empty-path"
+      });
+    }
+    var line = group.addShape("path", {
+      attrs: _objectSpread({
+        path: [
+        // 起始点
+        ["M", startPoint.x, startPoint.y],
+        // 水平向右到中间X位置
+        ["L", (startPoint.x + endPoint.x) / 2, startPoint.y],
+        // 垂直向下/上到终点Y位置
+        ["L", (startPoint.x + endPoint.x) / 2, endPoint.y],
+        // 水平向右到终点
+        ["L", endPoint.x, endPoint.y]],
+        endArrow: {
+          path: "M 0,0 L 6,3 L 6,-3 Z",
+          fill: "#A5A5A5",
+          d: 0
+        }
+      }, _styles),
+      name: "path-shape"
+    });
+    return line;
+  };
+  return {
+    draw: draw
+  };
+}

package/es/components/ChainGraph/ChainGraphServices/NodeEvents.d.ts

@@ -0,0 +1,14 @@
+import { Item, TreeGraph } from "@antv/g6";
+import { TreeGraphData } from "..";
+export default class NodeEvents {
+    protected _graph: TreeGraph | null;
+    protected _onClick?: (node?: TreeGraphData) => void;
+    constructor({ graph, onClick, }: {
+        graph: TreeGraph;
+        onClick?: (node?: TreeGraphData) => void;
+    });
+    private onNodeHover;
+    private onCollapseExpand;
+    private onNodeClick;
+    setNodeState: (node: Item) => void;
+}

package/es/components/ChainGraph/ChainGraphServices/NodeEvents.js

@@ -0,0 +1,78 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var NodeEvents = /*#__PURE__*/_createClass(function NodeEvents(_ref) {
+  var _this = this;
+  var graph = _ref.graph,
+    onClick = _ref.onClick;
+  _classCallCheck(this, NodeEvents);
+  _defineProperty(this, "_graph", null);
+  _defineProperty(this, "_onClick", void 0);
+  // ==================== 节点 hover ====================
+  _defineProperty(this, "onNodeHover", function () {
+    var _this$_graph, _this$_graph3;
+    (_this$_graph = _this._graph) === null || _this$_graph === void 0 || _this$_graph.on("node:mouseenter", function (e) {
+      var node = e.item;
+      if (node) {
+        var _this$_graph2;
+        (_this$_graph2 = _this._graph) === null || _this$_graph2 === void 0 || _this$_graph2.setItemState(node, "hover", true);
+      }
+    });
+    (_this$_graph3 = _this._graph) === null || _this$_graph3 === void 0 || _this$_graph3.on("node:mouseleave", function (e) {
+      var node = e.item;
+      if (node) {
+        var _this$_graph4;
+        (_this$_graph4 = _this._graph) === null || _this$_graph4 === void 0 || _this$_graph4.setItemState(node, "hover", false);
+      }
+    });
+  });
+  // ==================== 折叠展开 ====================
+  _defineProperty(this, "onCollapseExpand", function () {
+    var _this$_graph5, _this$_graph7;
+    (_this$_graph5 = _this._graph) === null || _this$_graph5 === void 0 || _this$_graph5.on("collapse-icon:mouseenter", function () {
+      var _this$_graph6;
+      (_this$_graph6 = _this._graph) === null || _this$_graph6 === void 0 || _this$_graph6.setMode("collapseExpand");
+    });
+    (_this$_graph7 = _this._graph) === null || _this$_graph7 === void 0 || _this$_graph7.on("collapse-icon:mouseleave", function () {
+      var _this$_graph8;
+      (_this$_graph8 = _this._graph) === null || _this$_graph8 === void 0 || _this$_graph8.setMode("default");
+    });
+  });
+  // ==================== 节点点击 ====================
+  _defineProperty(this, "onNodeClick", function (shapeName) {
+    var _this$_graph9;
+    (_this$_graph9 = _this._graph) === null || _this$_graph9 === void 0 || _this$_graph9.on("".concat(shapeName, ":click"), function (e) {
+      var node = e.item;
+      if (node) {
+        _this.setNodeState(node);
+      }
+    });
+  });
+  _defineProperty(this, "setNodeState", function (node) {
+    if (!node.hasState("click")) {
+      var _this$_graph10, _this$_graph12, _this$_onClick;
+      var clickNodes = (_this$_graph10 = _this._graph) === null || _this$_graph10 === void 0 ? void 0 : _this$_graph10.findAllByState("node", "click");
+      clickNodes === null || clickNodes === void 0 || clickNodes.forEach(function (cn) {
+        var _this$_graph11;
+        (_this$_graph11 = _this._graph) === null || _this$_graph11 === void 0 || _this$_graph11.setItemState(cn, "click", false);
+      });
+      (_this$_graph12 = _this._graph) === null || _this$_graph12 === void 0 || _this$_graph12.setItemState(node, "click", true);
+      (_this$_onClick = _this._onClick) === null || _this$_onClick === void 0 || _this$_onClick.call(_this, node.getModel());
+    } else {
+      var _this$_graph13, _this$_onClick2;
+      (_this$_graph13 = _this._graph) === null || _this$_graph13 === void 0 || _this$_graph13.setItemState(node, "click", false);
+      (_this$_onClick2 = _this._onClick) === null || _this$_onClick2 === void 0 || _this$_onClick2.call(_this);
+    }
+  });
+  this._graph = graph;
+  this._onClick = onClick;
+  this.onNodeHover();
+  this.onCollapseExpand();
+  this.onNodeClick("rect-shape");
+  this.onNodeClick("text-shape");
+});
+export { NodeEvents as default };

package/es/components/ChainGraph/ChainGraphServices/RootNode.d.ts

@@ -0,0 +1,17 @@
+import { IGroup, ModelConfig, ShapeOptions } from "@antv/g6";
+import { NodeColor, NodeStyle } from ".";
+interface RootNodeProps {
+    showPort?: boolean;
+    styles?: NodeStyle;
+    colors?: NodeColor[];
+    hoverColors?: NodeColor[];
+    selectedColors?: NodeColor[];
+    rootLevel?: number;
+    hasHover?: boolean;
+    hasSelected?: boolean;
+    addShape?: (group: IGroup, cfg: ModelConfig & {
+        origin?: Record<string, unknown>;
+    }) => void;
+}
+export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions;
+export {};