@hsu-react/ui 0.0.25 → 2.0.0

package/es/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/es/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;

package/es/layout/I18n/I18nStore.js

@@ -0,0 +1,94 @@
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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 _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); }
+import { createIntl, createIntlCache } from "react-intl";
+import enUS from "antd/locale/en_US";
+import en_US from "./locales/en-US";
+import { makeAutoObservable } from "mobx";
+import zhCN from "antd/locale/zh_CN";
+import zh_CN from "./locales/zh-CN";
+import { readStorage, writeStorage, STORAGE_KEY } from "../_utils/storage";
+export var LocaleOptions = [{
+  label: "中文简体",
+  value: "zh-CN"
+}, {
+  label: "English",
+  value: "en-US"
+}];
+var I18n = /*#__PURE__*/function () {
+  function I18n() {
+    var _this = this;
+    _classCallCheck(this, I18n);
+    _defineProperty(this, "_locale", "zh-CN");
+    _defineProperty(this, "_messages", zh_CN);
+    _defineProperty(this, "_antLocale", zhCN);
+    _defineProperty(this, "_formatMessage", void 0);
+    /**
+     * 应用默认语言：只在本地从未缓存过语言时生效，不覆盖用户已经做过的选择。
+     * 由 `<Layout.I18n defaultLocale>` 调用。
+     */
+    _defineProperty(this, "applyDefaultLocale", function (locale) {
+      if (!readStorage(STORAGE_KEY.LANG)) _this.setLocale(locale);
+    });
+    _defineProperty(this, "setLocale", function () {
+      var locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "zh-CN";
+      _this._locale = locale;
+      writeStorage(STORAGE_KEY.LANG, locale);
+      switch (locale) {
+        case "en-US":
+          _this._antLocale = enUS;
+          _this._messages = en_US;
+          break;
+        default:
+          _this._antLocale = zhCN;
+          _this._messages = zh_CN;
+          break;
+      }
+      _this._setFormatMessage();
+    });
+    _defineProperty(this, "_setFormatMessage", function () {
+      var cache = createIntlCache();
+      var intl = createIntl({
+        locale: _this._locale,
+        messages: _this._messages
+      }, cache);
+      _this._formatMessage = intl.formatMessage;
+    });
+    makeAutoObservable(this);
+    // 原本兜底读的是应用的全局 Config.locale。那是消费方 build 期注入的 ambient 全局，
+    // 组件不该认识它 —— 默认语言改由 <Layout.I18n defaultLocale> 传入。
+    this.setLocale(readStorage(STORAGE_KEY.LANG) || "zh-CN");
+  }
+  _createClass(I18n, [{
+    key: "locale",
+    get: function get() {
+      return this._locale;
+    }
+  }, {
+    key: "messages",
+    get: function get() {
+      return this._messages;
+    }
+  }, {
+    key: "antLocale",
+    get: function get() {
+      return this._antLocale;
+    }
+  }, {
+    key: "formatMessage",
+    get:
+    // 显式标注返回类型。不标的话 TS 会把它推断成 react-intl 内部依赖里的类型，
+    // 生成的 d.ts 就会带上 `react-intl/node_modules/intl-messageformat` 这种路径 ——
+    // 在消费方那边（依赖扁平化后位置不同）解析不到。发包才会暴露的问题。
+    function get() {
+      return this._formatMessage;
+    }
+  }]);
+  return I18n;
+}();
+var I18nStore = new I18n();
+export default I18nStore;

package/es/layout/I18n/index.d.ts

@@ -0,0 +1,14 @@
+import "dayjs/locale/zh-cn";
+import React, { ReactNode } from "react";
+export interface InternationalizationProps {
+    children: ReactNode;
+    /**
+     * 默认语言。仅在本地没有缓存过语言时生效 —— 用户选过一次之后以缓存为准。
+     *
+     * 原实现是从应用的全局 `Config.locale` 兜底的，那是 build 期注入的 ambient 全局，
+     * 组件不该认识它，改由这里传入。
+     */
+    defaultLocale?: string;
+}
+declare const Internationalization: React.FC<InternationalizationProps>;
+export default Internationalization;

package/es/layout/I18n/index.js

@@ -0,0 +1,33 @@
+import "dayjs/locale/zh-cn";
+import React, { useEffect } from "react";
+import { ConfigProvider } from "antd";
+import { IntlProvider } from "react-intl";
+import I18nStore from "./I18nStore";
+import { observer } from "mobx-react-lite";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Internationalization = observer(function (_ref) {
+  var children = _ref.children,
+    defaultLocale = _ref.defaultLocale;
+  var messages = I18nStore.messages,
+    locale = I18nStore.locale,
+    antLocale = I18nStore.antLocale;
+
+  // 只在「从未选过语言」时应用默认值，不覆盖用户的选择
+  useEffect(function () {
+    if (defaultLocale) I18nStore.applyDefaultLocale(defaultLocale);
+  }, [defaultLocale]);
+  useEffect(function () {
+    var html = document.documentElement;
+    html.classList.remove("lang-en-US", "lang-zh-CN");
+    html.classList.add("lang-".concat(locale));
+  }, [locale]);
+  return /*#__PURE__*/_jsx(IntlProvider, {
+    locale: locale,
+    messages: messages,
+    children: /*#__PURE__*/_jsx(ConfigProvider, {
+      locale: antLocale,
+      children: children
+    })
+  });
+});
+export default Internationalization;

package/es/layout/I18n/locales/en-US.d.ts

@@ -0,0 +1,2 @@
+declare const en_US: Record<string, string>;
+export default en_US;

package/es/layout/I18n/locales/en-US.js

@@ -0,0 +1,15 @@
+var en_US = {
+  "setting.title": "Settings",
+  "setting.navStyle": "Navigation Style",
+  "setting.nav.light": "Light",
+  "setting.nav.dark": "Dark",
+  "setting.nav.theme": "Primary",
+  "setting.primaryColor": "Primary Color",
+  "setting.layout": "Layout",
+  "setting.layout.left": "Side",
+  "setting.layout.top": "Top",
+  "setting.layout.mixed": "Mixed",
+  "setting.language": "Language",
+  "setting.reset": "Reset"
+};
+export default en_US;

package/es/layout/I18n/locales/zh-CN.d.ts

@@ -0,0 +1,2 @@
+declare const zh_CN: Record<string, string>;
+export default zh_CN;

package/es/layout/I18n/locales/zh-CN.js

@@ -0,0 +1,15 @@
+var zh_CN = {
+  "setting.title": "界面设置",
+  "setting.navStyle": "导航风格",
+  "setting.nav.light": "亮色",
+  "setting.nav.dark": "暗色",
+  "setting.nav.theme": "主题色",
+  "setting.primaryColor": "主题色",
+  "setting.layout": "导航布局",
+  "setting.layout.left": "左侧",
+  "setting.layout.top": "顶部",
+  "setting.layout.mixed": "混合",
+  "setting.language": "语言",
+  "setting.reset": "恢复默认"
+};
+export default zh_CN;

package/es/layout/Menu/_components/SecondaryHeader/index.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from "react";
+export interface SecondaryHeaderProps {
+    collapsed?: boolean;
+    theme?: "light" | "dark";
+    /** 返回入口文案，折叠时只剩箭头 */
+    backText?: string;
+    /** 自定义返回行为；不给就退回浏览器上一页 */
+    onBack?: () => void;
+    /** 当前实体名（详情页的标题），显示在返回入口下方 */
+    title?: string;
+    /** 返回入口与标题之间的额外内容，如详情内检索框 */
+    extra?: ReactNode;
+}
+/**
+ * 次级菜单的默认头部：返回入口 ＋ 标题，中间留一个 `extra` 插槽。
+ *
+ * `Menu` 在切到次级菜单时默认渲染它，调用方只需按需给 title/onBack/extra；
+ * 整块要换掉时再传 `secondaryHeader` 覆盖；业务侧的头部通常就是在这上面补一两件
+ * 自己的东西（检索框之类）。
+ */
+declare const SecondaryHeader: React.FC<SecondaryHeaderProps>;
+export default SecondaryHeader;

package/es/layout/Menu/_components/SecondaryHeader/index.js

@@ -0,0 +1,48 @@
+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 _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); }
+import React from "react";
+import { ArrowLeftOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import classNames from "classnames";
+import styles from "./index.module.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 次级菜单的默认头部：返回入口 ＋ 标题，中间留一个 `extra` 插槽。
+ *
+ * `Menu` 在切到次级菜单时默认渲染它，调用方只需按需给 title/onBack/extra；
+ * 整块要换掉时再传 `secondaryHeader` 覆盖；业务侧的头部通常就是在这上面补一两件
+ * 自己的东西（检索框之类）。
+ */
+var SecondaryHeader = function SecondaryHeader(props) {
+  var _props$collapsed = props.collapsed,
+    collapsed = _props$collapsed === void 0 ? false : _props$collapsed,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? "dark" : _props$theme,
+    _props$backText = props.backText,
+    backText = _props$backText === void 0 ? "返回" : _props$backText,
+    onBack = props.onBack,
+    title = props.title,
+    extra = props.extra;
+  var navigate = useNavigate();
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(styles.SecondaryHeader, styles[theme]),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: classNames(styles.back, _defineProperty({}, styles.backCollapsed, collapsed)),
+      onClick: function onClick() {
+        return onBack ? onBack() : navigate(-1);
+      },
+      children: [/*#__PURE__*/_jsx(ArrowLeftOutlined, {}), !collapsed && /*#__PURE__*/_jsx("span", {
+        className: styles.backText,
+        children: backText
+      })]
+    }), !collapsed && extra, !collapsed && title && /*#__PURE__*/_jsx("div", {
+      className: styles.title,
+      title: title,
+      children: title
+    })]
+  });
+};
+export default SecondaryHeader;

package/es/layout/Menu/_components/SecondaryHeader/index.module.scss

@@ -0,0 +1,65 @@
+.SecondaryHeader {
+  // 只管头部自身：整列的 flex 布局与 .ant-menu 的撑满交给 Menu 的 .secondaryWrap
+  flex: none;
+
+  .back {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 8px 10px 14px;
+    padding: 7px 10px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    background: var(--wa-fill);
+    border: 1px solid var(--vita-border);
+    border-radius: 8px;
+
+    &:hover {
+      background: var(--wa-hover-bg);
+      border-color: var(--vita-primary);
+    }
+  }
+
+  .backText {
+    white-space: nowrap;
+  }
+
+  // 折叠态只剩箭头：图标居中
+  .backCollapsed {
+    justify-content: center;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .title {
+    padding: 2px 16px 10px;
+    font-weight: 600;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // 明暗两套文字色由 --cf-text 一并承担，不再各写一份字面量
+  .back,
+  .title {
+    color: var(--vita-foreground);
+  }
+
+  &.light {
+    border-inline-end: 1px solid var(--vita-border);
+  }
+}
+
+@media (max-width: 768px) {
+  .SecondaryHeader {
+    width: 64px !important;
+    min-width: 64px !important;
+
+    .backText,
+    .title {
+      display: none;
+    }
+  }
+}

package/es/layout/Menu/_hooks/useMenuPath.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { MenuType } from "..";
+interface UseMenuPathOptions {
+    allItems: MenuType[];
+    collapsed: boolean;
+    mode?: string;
+}
+/**
+ * Hook that handles menu path matching and active state
+ */
+export declare const useMenuPath: ({ allItems, collapsed, mode, }: UseMenuPathOptions) => {
+    menuKey: string;
+    setMenuKey: import("react").Dispatch<import("react").SetStateAction<string>>;
+    openKeys: string[];
+    setOpenkeys: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+};
+export {};

package/es/layout/Menu/_hooks/useMenuPath.js

@@ -0,0 +1,91 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router";
+import { checkPathMatch } from "../_utils/pathMatch";
+/**
+ * Hook that handles menu path matching and active state
+ */
+export var useMenuPath = function useMenuPath(_ref) {
+  var allItems = _ref.allItems,
+    collapsed = _ref.collapsed,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "inline" : _ref$mode;
+  var location = useLocation();
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuKey = _useState2[0],
+    setMenuKey = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openKeys = _useState4[0],
+    setOpenkeys = _useState4[1];
+  useEffect(function () {
+    // 菜单里实际存在的 key，用来判断高亮能不能落上去
+    var knownKeys = new Set();
+    var collect = function collect(items) {
+      return items === null || items === void 0 ? void 0 : items.forEach(function (i) {
+        if (i.key) knownKeys.add(i.key);
+        collect(i.children);
+      });
+    };
+    collect(allItems);
+    var _checkPath = function _checkPath(items, parents) {
+      var pathname = decodeURI(location.pathname);
+      items === null || items === void 0 || items.forEach(function (item) {
+        if (item.children) {
+          var _parents = parents ? [].concat(_toConsumableArray(parents), [item]) : [item];
+          _checkPath(item.children, _parents);
+        } else {
+          var _item$parent;
+          var isMatch = checkPathMatch(pathname, item.key, (_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent.path);
+          if (isMatch) {
+            var _item$parent2;
+            // 判断「这一项本身是不是带参详情页」，只能看它**相对父级的那一段**：
+            // 整条 key 里含 ":" 是不够的，父路径带参时（子页的 key 都形如
+            // /admin/xxx/:id/detail）会把普通子页全判成详情页，高亮集体落到容器上。
+            var selfSeg = (_item$parent2 = item.parent) !== null && _item$parent2 !== void 0 && _item$parent2.path ? item.key.slice(item.parent.path.length) : item.key;
+            if (selfSeg.includes(":")) {
+              var _item$parent3;
+              // 详情页自己不在菜单里，高亮回落到它对应的列表页：去掉末尾参数段后
+              // **逐段上退**，直到退到一个菜单里真有的项。只退一段是不够的——
+              // /a/b/detail/:id 退一段是 /a/b/detail，菜单里没有这一项，还要再退一段。
+              var candidate = item.key.replace(/\/:[^/]+$/, "");
+              while (candidate && !knownKeys.has(candidate)) {
+                candidate = candidate.slice(0, candidate.lastIndexOf("/"));
+              }
+              setMenuKey(candidate || ((_item$parent3 = item.parent) === null || _item$parent3 === void 0 ? void 0 : _item$parent3.path) || item.key);
+            } else {
+              setMenuKey(item.key);
+            }
+
+            // Set the expanded menu items
+            if (parents && !collapsed && mode !== "horizontal") {
+              var _openKeys = parents === null || parents === void 0 ? void 0 : parents.map(function (item) {
+                return item.key;
+              });
+              setOpenkeys(_toConsumableArray(_openKeys));
+            }
+          }
+        }
+      });
+    };
+    setMenuKey("");
+    setOpenkeys([]);
+    _checkPath(allItems);
+  }, [allItems, location, collapsed, mode]);
+  return {
+    menuKey: menuKey,
+    setMenuKey: setMenuKey,
+    openKeys: openKeys,
+    setOpenkeys: setOpenkeys
+  };
+};