@hsu-react/ui 1.0.0 → 2.0.0

package/lib/layout/Breadcrumb/_utils/pathMatch.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkBreadcrumbPathMatch = void 0;
+var _hsuUtils = require("hsu-utils");
+/**
+ * Check whether a path matches (used by the breadcrumb)
+ * @param pathname Current path
+ * @param itemPath Route path
+ * @param parentPath Parent path
+ * @returns Whether it matches
+ */
+const checkBreadcrumbPathMatch = (pathname, itemPath, parentPath) => {
+  if (!itemPath) {
+    return pathname === "/" && itemPath === "/";
+  }
+  const pathArr = pathname.split("/").filter(Boolean);
+  const keyArr = itemPath.split("/").filter(Boolean);
+  if (keyArr.length === 0) {
+    return false;
+  }
+  if (pathArr.length !== keyArr.length) {
+    return false;
+  }
+
+  // Handle the root path
+  if (pathname === "/" && itemPath === "/") {
+    return true;
+  }
+
+  // Handle routes containing params (e.g. /user/:id)
+  if (itemPath.includes(":")) {
+    if (parentPath === "/") {
+      // If the parent path is the root path, check that there are no non-param segments
+      return !keyArr.filter(i => !i.startsWith(":")).length;
+    } else {
+      // Filter out param segments and compare only the non-param parts
+      return (0, _hsuUtils.array_is_includes)(keyArr.filter(i => !i.startsWith(":")), pathArr);
+    }
+  } else {
+    // Plain path matching
+    return (0, _hsuUtils.array_is_includes)(keyArr, pathArr);
+  }
+};
+exports.checkBreadcrumbPathMatch = checkBreadcrumbPathMatch;

package/lib/layout/Breadcrumb/index.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import { ItemType } from "antd/es/breadcrumb/Breadcrumb";
+import { RouteType } from "../types";
+export interface BreadcrumbType extends Omit<ItemType, "children"> {
+    children?: BreadcrumbType[];
+    icon?: ReactNode;
+    parent?: RouteType;
+    route?: RouteType;
+    index?: boolean;
+}
+interface BreadcrumbProps {
+    router: RouteType[];
+    className?: string;
+}
+/**
+ * Breadcrumb component
+ */
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export default Breadcrumb;

package/lib/layout/Breadcrumb/index.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouter = require("react-router");
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _lodash = require("lodash");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _formatRoutes = require("./_utils/formatRoutes");
+var _formatMenu = require("./_utils/formatMenu");
+var _useBreadcrumbPath = require("./_hooks/useBreadcrumbPath");
+var _BreadcrumbItemIcon = _interopRequireDefault(require("./_components/BreadcrumbItemIcon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Omit 掉 children：antd v6 把 BreadcrumbItemType.children 收窄成了
+// `Omit<BreadcrumbItemType, "children">[]`，而这里的 children 要能递归携带 parent / route
+// 这些自有字段，直接 extends 会判为不兼容。渲染时再转回 antd 认识的形状。
+
+/**
+ * Breadcrumb component
+ */
+const Breadcrumb = props => {
+  const {
+    router,
+    className
+  } = props;
+  const navigate = (0, _reactRouter.useNavigate)();
+  const _routes = (0, _react.useMemo)(() => {
+    return (0, _formatRoutes.formatRoutes)(router);
+  }, [router]);
+  const breadcrumb = (0, _useBreadcrumbPath.useBreadcrumbPath)(_routes);
+
+  /**
+   * Handle the breadcrumb item click event
+   */
+  const handleItemClick = (0, _react.useCallback)(path => {
+    navigate(path);
+  }, [navigate]);
+
+  /**
+   * Format breadcrumb items
+   */
+  const formattedItems = (0, _react.useMemo)(() => {
+    return (0, _lodash.cloneDeep)(breadcrumb)?.map((item, index) => {
+      const isLastItem = index === breadcrumb.length - 1;
+      const children = item.children?.filter(i => !i.path?.includes(":"));
+      const hasChildren = children && children.length > 0;
+
+      // If there are child menus, set the menu items
+      if (hasChildren) {
+        item.onClick = e => e.preventDefault();
+        item.menu = {
+          items: (0, _formatMenu.formatBreadcrumbMenu)((0, _lodash.cloneDeep)(children), navigate)
+        };
+      }
+
+      // The last item does not show a path
+      if (isLastItem) {
+        item.path = undefined;
+      }
+
+      // If there is an icon, wrap the title
+      if (item.icon) {
+        item.title = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BreadcrumbItemIcon.default, {
+          icon: item.icon,
+          title: item.title
+        });
+      }
+
+      // If there is a path and no child menu, set the click handler
+      if (item.path && !hasChildren) {
+        item.onClick = e => {
+          e.preventDefault();
+          handleItemClick(item.path);
+        };
+      }
+      return {
+        ...item
+      };
+    });
+  }, [breadcrumb, navigate, handleItemClick]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Breadcrumb, {
+    className: (0, _classnames.default)(_indexModule.default.Breadcrumb, className)
+    // BreadcrumbType 比 antd 的 ItemType 多带了 parent / route / children 这些自有字段，
+    // 供上面的格式化与点击逻辑使用；渲染时 antd 只读它认识的那几个，多出来的会被忽略。
+    ,
+    items: formattedItems
+  });
+};
+var _default = exports.default = Breadcrumb;

package/lib/layout/Breadcrumb/index.module.scss

@@ -0,0 +1,15 @@
+.Breadcrumb {
+  cursor: default;
+
+  // On narrow screens, keep long paths on one line so they do not squeeze the top bar; hide the overflow
+  overflow: hidden;
+
+  :global(ol) {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+
+  * {
+    color: inherit !important;
+  }
+}

package/lib/layout/Header/index.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import Breadcrumb from "../Breadcrumb";
+import { MenuType } from "../Menu";
+/**
+ * 账号动作（改密 / 退出）由 App 传进来，本组件只认这个形状、不认来源。
+ *
+ * 别把 `PwdChange` 或 `LoginStore` 搬进来——看着它们该跟用户菜单待在一起，
+ * 但会同时踩两条：
+ *   1. `layout/` 反向 import `@/pages/…`（共享层依赖页面私有目录）；
+ *   2. `PwdChange` 用 `FormItem`，而 `FormItem` 静态引入全部字段渲染器
+ *      （wangeditor / codemirror / pdfjs / xlsx）。它现在由 App 以 `lazy()`
+ *      ＋「打开才挂载」持有，搬进来很容易顺手写成静态 import，那些库就又钉回首屏了。
+ */
+export interface AccountAction {
+    title: string;
+    icon: string;
+    onclick: () => void;
+    /** 危险动作（退出登录之类），悬浮态用红色区分 */
+    danger?: boolean;
+}
+interface HeaderProps {
+    router: Parameters<typeof Breadcrumb>[0]["router"];
+    collapsed: boolean;
+    onToggleCollapsed: () => void;
+    /** mixed 布局下把顶部菜单的子项回传给左侧栏 */
+    onChildItems: (items: MenuType[]) => void;
+    menu: AccountAction[];
+    /** 当前用户，用于右上角展示。不传则不显示用户名 */
+    user?: {
+        nickname?: string;
+        avatar?: string;
+    };
+    /** 站点标题。原本读的是应用的全局 Config，组件不该认识那个 */
+    title?: React.ReactNode;
+    /** 侧栏收起时用的短标题；不传则回落到 title */
+    smallTitle?: React.ReactNode;
+}
+declare const Header: React.FC<HeaderProps>;
+export default Header;

package/lib/layout/Header/index.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _Button = _interopRequireDefault(require("../../components/Button"));
+var _Icon = _interopRequireDefault(require("../../components/Icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+var _mobxReactLite = require("mobx-react-lite");
+var _Breadcrumb = _interopRequireDefault(require("../Breadcrumb"));
+var _Menu = _interopRequireDefault(require("../Menu"));
+var _ThemeStore = _interopRequireDefault(require("../Theme/ThemeStore"));
+var _I18nStore = _interopRequireDefault(require("../I18n/I18nStore"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Only components hsu-ui does not provide fall back to antd; Button comes from hsu-ui
+
+// 用户信息由 App 传进来。这里原本是 `import { getUserInfo } from "@/utils/auth"` ——
+// 那是消费方自己的鉴权模块，组件不该认识它。改成 props 之后本组件只关心「显示什么名字」。
+
+/**
+ * 账号动作（改密 / 退出）由 App 传进来，本组件只认这个形状、不认来源。
+ *
+ * 别把 `PwdChange` 或 `LoginStore` 搬进来——看着它们该跟用户菜单待在一起，
+ * 但会同时踩两条：
+ *   1. `layout/` 反向 import `@/pages/…`（共享层依赖页面私有目录）；
+ *   2. `PwdChange` 用 `FormItem`，而 `FormItem` 静态引入全部字段渲染器
+ *      （wangeditor / codemirror / pdfjs / xlsx）。它现在由 App 以 `lazy()`
+ *      ＋「打开才挂载」持有，搬进来很容易顺手写成静态 import，那些库就又钉回首屏了。
+ */
+
+const Header = (0, _mobxReactLite.observer)(props => {
+  const {
+    router,
+    collapsed,
+    onToggleCollapsed,
+    onChildItems,
+    menu,
+    user,
+    title,
+    smallTitle
+  } = props;
+  const {
+    layout,
+    headerTheme,
+    appearance,
+    setAppearance
+  } = _ThemeStore.default;
+  const {
+    locale,
+    setLocale
+  } = _I18nStore.default;
+
+  // Appearance + language are grouped into the user dropdown; bilingual labels follow the current language
+  const isEn = locale === "en-US";
+  const appearanceOptions = [{
+    label: isEn ? "Light" : "浅色",
+    value: "light"
+  }, {
+    label: isEn ? "Dark" : "深色",
+    value: "dark"
+  }, {
+    label: isEn ? "System" : "跟随",
+    value: "system"
+  }];
+  const languageOptions = [{
+    label: "中文",
+    value: "zh-CN"
+  }, {
+    label: "English",
+    value: "en-US"
+  }];
+
+  // Nav (header/sidebar) light/dark: light -> light, dark/theme-colored -> dark
+  const navTheme = headerTheme === "light" ? "light" : "dark";
+  const nickname = user?.nickname;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Layout.Header, {
+    className: (0, _classnames.default)(_indexModule.default.header, _indexModule.default[headerTheme]),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _indexModule.default.headerLeft,
+      children: [["left", "mixed"].includes(layout) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)(_indexModule.default.title, {
+          [_indexModule.default.titleCollapsed]: collapsed
+        }),
+        children: collapsed ? smallTitle ?? title : title
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)(_indexModule.default.title, _indexModule.default.titleTop),
+        children: title
+      }), ["left", "mixed"].includes(layout) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        className: _indexModule.default.collapsed,
+        type: "text",
+        icon: collapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MenuUnfoldOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MenuFoldOutlined, {}),
+        onClick: onToggleCollapsed
+      }), ["left"].includes(layout) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Breadcrumb.default, {
+        router: router,
+        className: _indexModule.default.breadcrumb
+      }), ["top", "mixed"].includes(layout) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+        router: router,
+        mode: "horizontal",
+        theme: navTheme,
+        onlyLvOneMenu: layout === "mixed",
+        getCurrChildItems: onChildItems
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.headerRight,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
+        classNames: {
+          root: _indexModule.default.userPopover
+        },
+        placement: "bottomRight",
+        content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _indexModule.default.userMenuPanel,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: _indexModule.default.settingRow,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: _indexModule.default.settingLabel,
+              children: isEn ? "Appearance" : "外观"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Segmented, {
+              size: "small",
+              value: appearance,
+              options: appearanceOptions,
+              onChange: v => setAppearance(v)
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: _indexModule.default.settingRow,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: _indexModule.default.settingLabel,
+              children: isEn ? "Language" : "语言"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Segmented, {
+              size: "small",
+              value: locale,
+              options: languageOptions,
+              onChange: v => setLocale(v)
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _indexModule.default.settingDivider
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _indexModule.default.menu,
+            children: menu?.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              className: (0, _classnames.default)({
+                [_indexModule.default.menuBtnDanger]: item.danger
+              }),
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                icon: item.icon
+              }),
+              onClick: item.onclick,
+              type: "text",
+              children: item.title
+            }, index))
+          })]
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
+          className: _indexModule.default.user,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, {
+            style: {
+              backgroundColor: "#1677ff",
+              verticalAlign: "middle"
+            },
+            icon: nickname ? undefined : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.UserOutlined, {}),
+            children: nickname?.[0]?.toUpperCase()
+          }), nickname]
+        })
+      })
+    })]
+  });
+});
+var _default = exports.default = Header;

package/lib/layout/Header/index.module.scss

@@ -0,0 +1,215 @@
+// 顶栏样式。原本写在消费方的全局 App.scss 里（`.header` 这样的裸类名），组件搬进库之后
+// 一起收成 CSS Module —— 否则库里发出去的是一个没有任何样式的顶栏，还会和消费方自己的
+// `.header` / `.menu` / `.title` 撞名。
+//
+// 注意：CSS Module 里的类名都会被哈希，antd 的类名必须写在 :global() 里，否则规则不报错
+// 但永远匹配不到 antd 渲染出的 DOM。
+//
+// 没有搬进来的部分（属于应用，不属于这个组件）：`#App` 外壳、`.body` / `.content` 的布局、
+// 侧栏 `.ant-layout-sider` 的背景与分隔线、以及右上角的 `.app-version` 版本号。
+.header {
+  position: relative;
+  z-index: 11;
+
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  padding: 0px;
+  overflow: hidden;
+
+  // 用细边框而不是投影，跟随明暗切换
+  border-bottom: 1px solid var(--vita-border);
+  box-shadow: none;
+
+  .headerLeft {
+    display: flex;
+    align-items: center;
+
+    flex: 1;
+    min-width: 0px;
+
+    .title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 230px;
+      min-width: 230px;
+      height: 100%;
+      padding: 0px 20px;
+
+      color: var(--vita-foreground);
+      font-size: 20px;
+      font-weight: bold;
+      white-space: nowrap;
+      word-break: keep-all;
+
+      overflow: hidden;
+
+      transition:
+        width 0.2s,
+        min-width 0.2s;
+
+      // 侧栏收起时标题一起收窄，宽度和收起后的侧栏对齐
+      &.titleCollapsed {
+        width: 80px;
+        min-width: 80px;
+        padding: 0px 10px;
+      }
+
+      // 顶部布局下标题不占固定宽度，按内容撑开
+      &.titleTop {
+        width: max-content;
+        min-width: max-content;
+      }
+    }
+
+    .collapsed {
+      width: max-content;
+      height: 100%;
+      padding: 0px 10px;
+
+      font-size: 16px;
+    }
+
+    .breadcrumb {
+      padding: 0px 10px;
+    }
+  }
+
+  .headerRight {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    column-gap: 12px;
+
+    min-width: max-content;
+    height: 100%;
+
+    font-size: 16px;
+
+    .user {
+      width: max-content;
+      min-width: max-content;
+      height: 36px;
+      padding: 0 12px;
+      margin-right: 8px;
+
+      white-space: nowrap;
+      word-break: keep-all;
+      color: var(--vita-foreground);
+
+      border-radius: 8px;
+      cursor: pointer;
+
+      transition:
+        background-color 0.3s,
+        color 0.3s;
+
+      &:hover {
+        background-color: var(--vita-hover);
+      }
+    }
+  }
+
+  // 深色 / 主题色导航的覆盖放在最后，并且每条都比上面的结构规则多一个类 ——
+  // 权重打平时后写的赢，靠顺序太脆，这里让它无论顺序都稳赢。
+  &.dark,
+  &.theme {
+    color: #fff;
+
+    border-bottom-color: rgb(255 255 255 / 10%);
+
+    .headerLeft .title,
+    .headerLeft .collapsed,
+    .headerLeft .breadcrumb {
+      color: #fff;
+    }
+
+    .headerRight .user {
+      color: #ffffffd9;
+
+      &:hover {
+        background-color: #ffffff26;
+        color: #ffffff;
+      }
+    }
+  }
+
+  // 只有深色导航铺中性黑渐变。两端颜色由 Layout.Theme 的 navDarkColors 给，但顶栏也允许
+  // 脱离 Theme 单独用，所以这里带上兜底值 —— 否则变量取不到，整条 gradient 会被判为无效，
+  // 深色导航直接变成透明底。
+  &.dark {
+    background: linear-gradient(
+      90deg,
+      var(--nav-dark-top, #1f1f1f) 0%,
+      var(--nav-dark-bottom, #141414) 100%
+    );
+  }
+}
+
+// 账号下拉。挂在 body 上，够不到 .header，所以是一条独立的顶层规则
+.userPopover {
+  // antd v6 里承载内边距的是 .ant-popover-container，v5 的 .ant-popover-inner 已经没有了 ——
+  // 照着 v5 写不会报错，只是这条规则永远不生效
+  :global(.ant-popover-container) {
+    padding: 8px;
+  }
+
+  :global(.ant-btn):hover {
+    color: var(--vita-primary) !important;
+    background-color: transparent !important;
+  }
+
+  .userMenuPanel {
+    min-width: 230px;
+
+    .settingRow {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      column-gap: 12px;
+
+      padding: 6px 8px;
+
+      .settingLabel {
+        color: var(--vita-muted-foreground);
+        font-size: 13px;
+        white-space: nowrap;
+      }
+    }
+
+    .settingDivider {
+      height: 1px;
+      margin: 6px 0;
+
+      background: var(--vita-border);
+    }
+
+    .menu {
+      display: flex;
+      flex-direction: column;
+
+      :global(.ant-btn) {
+        justify-content: flex-start;
+
+        width: 100%;
+
+        // 图标贴左、文字贴右：图标容器右侧留白撑满，把文字推到右端，和上面设置项
+        // 右侧的控件对齐。每一项都这样，不是只有「退出登录」
+        :global(.ant-btn-icon) {
+          margin-right: auto;
+        }
+
+        // 退出登录这类危险动作，用红色悬浮态区分
+        &.menuBtnDanger:hover {
+          background: color-mix(in srgb, var(--vita-error) 14%, transparent);
+          color: var(--vita-error);
+        }
+      }
+    }
+  }
+}

package/lib/layout/I18n/I18nStore.d.ts

@@ -0,0 +1,29 @@
+import { IntlFormatters } from "react-intl";
+import { Locale } from "antd/lib/locale";
+type MessagesType = Record<string, string>;
+type FormatMessage = IntlFormatters["formatMessage"];
+export interface LocaleOption {
+    label: string;
+    value: string;
+}
+export declare const LocaleOptions: LocaleOption[];
+declare class I18n {
+    get locale(): string;
+    private _locale;
+    get messages(): MessagesType;
+    private _messages;
+    get antLocale(): Locale;
+    private _antLocale;
+    get formatMessage(): FormatMessage;
+    private _formatMessage;
+    constructor();
+    /**
+     * 应用默认语言：只在本地从未缓存过语言时生效，不覆盖用户已经做过的选择。
+     * 由 `<Layout.I18n defaultLocale>` 调用。
+     */
+    applyDefaultLocale: (locale: string) => void;
+    setLocale: (locale?: string) => void;
+    private _setFormatMessage;
+}
+declare const I18nStore: I18n;
+export default I18nStore;