@hsu-react/ui 1.0.0 → 2.0.1

package/src/layout/Menu/_utils/formatMenu.ts

@@ -0,0 +1,57 @@
+import { cloneDeep } from "lodash";
+import { RouteType } from "../../types";
+import { MenuType } from "..";
+
+/**
+ * Format routes into menu items
+ * @param routes Route config
+ * @param all Whether to include all routes (including those not shown in the menu)
+ * @param parent Parent menu item
+ * @returns Menu item array
+ */
+export const formatMenu = (
+  routes: RouteType[],
+  all: boolean = false,
+  parent?: MenuType
+): MenuType[] => {
+  const newRoutes: MenuType[] = [];
+
+  routes?.forEach((route) => {
+    let children: MenuType[] | undefined = undefined;
+    if (route.children) {
+      children = formatMenu(route.children, all, cloneDeep(route) as MenuType);
+    }
+
+    const { meta } = route;
+
+    if ((!all ? meta?.menu : true) && route.path) {
+      newRoutes.push({
+        key: route.path,
+        title: meta?.name,
+        label: meta?.name,
+        icon: meta?.icon,
+        defaultIcon: meta?.icon,
+        activeIcon: meta?.activeIcon,
+        disabled: meta?.disabled,
+        children: (children?.length || 0) > 0 ? children : undefined,
+        parent: parent,
+      });
+    } else if ((!all ? meta?.menu : true) && route.index && parent?.path) {
+      newRoutes.push({
+        key: parent.path,
+        title: meta?.name,
+        label: meta?.name,
+        icon: meta?.icon,
+        defaultIcon: meta?.icon,
+        activeIcon: meta?.activeIcon,
+        disabled: meta?.disabled,
+      });
+    } else {
+      if (children) {
+        newRoutes.push(...children);
+      }
+    }
+  });
+
+  return newRoutes;
+};

package/src/layout/Menu/_utils/pathMatch.ts

@@ -0,0 +1,48 @@
+import { array_is_includes } from "hsu-utils";
+
+/**
+ * Check whether a path matches
+ * @param pathname Current path
+ * @param key Route key
+ * @param parentPath Parent path
+ * @returns Whether it matches
+ */
+export const checkPathMatch = (
+  pathname: string,
+  key: string,
+  parentPath?: string
+): boolean => {
+  const pathArr = pathname.split("/").filter(Boolean);
+  const keyArr = key.split("/").filter(Boolean);
+
+  if (keyArr.length === 0) {
+    return pathname === "/" && key === "/";
+  }
+
+  if (pathArr.length !== keyArr.length) {
+    return false;
+  }
+
+  // Handle the root path
+  if (pathname === "/" && key === "/") {
+    return true;
+  }
+
+  // Handle routes with params (e.g. /user/:id)
+  if (key.includes(":")) {
+    if (parentPath === "/") {
+      // If the parent path is the root path, check that there are no non-param segments
+      return !keyArr.filter((i: string) => !i.startsWith(":")).length;
+    } else {
+      // Filter out param segments and compare only the non-param parts
+      return array_is_includes(
+        keyArr.filter((i: string) => !i.startsWith(":")),
+        pathArr
+      );
+    }
+  } else {
+    // Plain path matching
+    return array_is_includes(keyArr, pathArr);
+  }
+};
+

package/src/layout/Menu/_utils/setActiveIcon.ts

@@ -0,0 +1,23 @@
+import { MenuType } from "..";
+
+/**
+ * Set the active icon for menu items
+ * @param items Menu item array
+ * @param menuKey Key of the currently active menu
+ */
+export const setActiveIcon = (items: MenuType[], menuKey: string): void => {
+  items?.forEach((item) => {
+    if (item.children) {
+      setActiveIcon(item.children, menuKey);
+    } else {
+      if (item.activeIcon && item.key === menuKey) {
+        item.icon = item.activeIcon;
+      } else {
+        item.icon = item.defaultIcon;
+      }
+    }
+
+    delete item.activeIcon;
+    delete item.defaultIcon;
+  });
+};

package/src/layout/Menu/index.md

@@ -0,0 +1,43 @@
+---
+title: Menu 菜单
+order: 2
+---
+
+# Menu 菜单
+
+从路由配置生成侧边 / 顶部菜单，自带选中态跟随、权限过滤与二级菜单。
+
+## 引入
+
+```ts
+import Layout from "@hsu-react/ui/es/layout";
+
+<Layout.Menu router={router} collapsed={collapsed} />;
+```
+
+## 说明
+
+菜单项由 `RouteType[]` 推导，规则：
+
+- **`meta.menu` 是显式开关**：只有 `meta.menu` 为真的路由才生成菜单项。不写等同于不进菜单 —— 路由本身照常可访问，详情页这类不需要额外标记
+- 文案取 `meta.name`，图标取 `meta.icon`；`meta.activeIcon` 是选中态图标，不传则沿用 `icon`（只对没有子项的菜单项生效）
+- `meta.disabled` 置灰不可点
+- 选中态按当前 `location.pathname` 匹配，深层路由会自动点亮其所属的菜单项
+
+`meta` 上还有 `hasPermi`、`noAuth` 这些字段，**本组件不读**，它们由消费方在生成路由时自行消费（例如按权限先裁剪一遍 `router` 再传进来）。
+
+`meta.secondary` 标记的路由进入**二级菜单**：主菜单只显示到一级，点进去之后左侧换成该模块的次级菜单，顶部可用 `secondaryHeader` 放返回入口、标题或检索框。
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| router | 路由配置 | `RouteType[]` | - |
+| collapsed | 是否收起（只显示图标） | `boolean` | `false` |
+| menuItems | 直接指定菜单项，跳过从 router 推导 | `MenuType[]` | - |
+| onlyLvOneMenu | 只渲染一级菜单（mixed 布局的顶部菜单用） | `boolean` | `false` |
+| getCurrChildItems | 回传当前一级菜单的子项，供外部渲染 | `(children: MenuType[]) => void` | - |
+| secondaryHeader | 次级菜单顶部的自定义区域 | `ReactNode` | - |
+| secondaryItemFilter | 次级菜单项的额外过滤，按 key（绝对路径）判断 | `(key: string) => boolean` | - |
+
+> 其余属性透传给 antd 的 [Menu](https://ant.design/components/menu-cn)。

package/src/layout/Menu/index.module.scss

@@ -0,0 +1,50 @@
+// 注意：CSS Module 里的类名都会被哈希，antd 的类名必须写在 :global() 中，否则
+// `.ant-menu-horizontal` 会变成 `.ant-menu-horizontal___xxxxx`，静悄悄地永不生效。
+.menu {
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+
+  scrollbar-width: none;
+
+  // 顶部横向菜单：占满剩余宽度，背景交给外层的导航渐变
+  &:global(.ant-menu-horizontal) {
+    flex: 1;
+    min-width: 0px;
+
+    background-color: transparent;
+  }
+}
+
+// 弹出的子菜单挂在 body 上，够不到 .menu，所以由组件把这个类挂到 popup 上
+.popup {
+  &:global(.ant-menu-submenu-popup.ant-menu.ant-menu-dark) {
+    :global(.ant-menu-item),
+    :global(.ant-menu-submenu-title) {
+      color: var(--vita-foreground);
+
+      &:hover {
+        color: var(--vita-primary) !important;
+      }
+
+      &:global(.ant-menu-item-selected) {
+        background-color: color-mix(in srgb, var(--vita-primary) 8%, transparent);
+
+        color: var(--vita-primary) !important;
+      }
+    }
+  }
+}
+
+// 次级菜单：头部固定在上，菜单撑满剩余高度
+.secondaryWrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  :global(.ant-menu) {
+    flex: 1;
+    border-inline-end: none !important;
+  }
+}

package/src/layout/Menu/index.tsx

@@ -0,0 +1,208 @@
+import React, { ReactNode, useMemo } from "react";
+import { matchPath, useLocation, useNavigate } from "react-router";
+
+import { Menu as AntdMenu, MenuProps as AntdMenuProps } from "antd";
+import { ItemType } from "antd/es/menu/interface";
+import { RouteType } from "../types";
+import { cloneDeep } from "lodash";
+import classNames from "classnames";
+import { mergeSemantic } from "../../utils/semantic";
+import styles from "./index.module.scss";
+import { formatMenu } from "./_utils/formatMenu";
+import { setActiveIcon } from "./_utils/setActiveIcon";
+import { useMenuPath } from "./_hooks/useMenuPath";
+import SecondaryHeader from "./_components/SecondaryHeader";
+import { useOnlyLvOneMenu } from "./_hooks/useOnlyLvOneMenu";
+
+export type MenuType = ItemType & {
+  key: string;
+  icon?: ReactNode;
+  defaultIcon?: ReactNode;
+  activeIcon?: ReactNode;
+  children?: MenuType[];
+  label?: ReactNode;
+  path?: string;
+  name?: ReactNode;
+  title?: string;
+  disabled?: boolean;
+  renderLabel?: (label: string) => ReactNode;
+  parent?: MenuType;
+};
+
+export interface MenuProps extends AntdMenuProps {
+  router: RouteType[];
+  collapsed?: boolean;
+  menuItems?: MenuType[];
+  onlyLvOneMenu?: boolean;
+  getCurrChildItems?: (children: MenuType[]) => void;
+  /** 次级菜单顶部的自定义区域（返回入口、标题、检索框之类），只在次级菜单生效 */
+  secondaryHeader?: ReactNode;
+  /**
+   * 次级菜单项的额外过滤，按菜单项的 key（绝对路径）判断。
+   * 留给依赖运行时业务数据、菜单表达不了的规则。
+   */
+  secondaryItemFilter?: (key: string) => boolean;
+}
+
+/**
+ * 次级菜单根：进入它的子树后，整个侧栏换成那些子页。
+ * 由菜单表的 `cat=1` 显式标记，不靠前端推断。
+ */
+const isSecondaryRoot = (route: RouteType): boolean =>
+  !!route.path && !!route.children?.length && route.meta?.secondary === true;
+
+/** 把菜单项 key 里的路由参数按当前地址回填：/order/:id/detail → /order/1024/detail */
+const fillParams = (key: string, params: Record<string, string | undefined>) =>
+  key.replace(/:([^/]+)/g, (seg, name: string) => params[name] ?? seg);
+
+const Menu: React.FC<MenuProps> = (props) => {
+  const {
+    router,
+    collapsed = false,
+    className,
+    theme = "dark",
+    mode = "inline",
+    getCurrChildItems,
+    menuItems,
+    onlyLvOneMenu = false,
+    secondaryHeader,
+    secondaryItemFilter,
+    classNames: semanticClassNames,
+    ...menuConfig
+  } = props;
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  // 当前地址落在某个次级菜单根之下时，侧栏整个换成那棵子树
+  const secondary = useMemo(() => {
+    const find = (routes?: RouteType[]): RouteType | undefined => {
+      for (const r of routes ?? []) {
+        if (
+          isSecondaryRoot(r) &&
+          matchPath({ path: r.path as string, end: false }, location.pathname)
+        ) {
+          return r;
+        }
+        const hit = find(r.children);
+        if (hit) return hit;
+      }
+      return undefined;
+    };
+    return find(router);
+  }, [router, location.pathname]);
+
+  const items = useMemo(() => {
+    if (secondary?.path) {
+      const rootLen = secondary.path.length;
+      // all=true：这些子页本就都不进主侧栏，按 menu 标记会被全部过滤掉
+      return formatMenu(secondary.children ?? [], true)
+        // 自身那段还带参数的（detail/:id）点不进去，不列
+        .filter((i) => !i.key.slice(rootLen).includes(":"))
+        .filter((i) => secondaryItemFilter?.(i.key) ?? true);
+    }
+    return menuItems ? cloneDeep(menuItems) : formatMenu(router);
+  }, [router, menuItems, secondary, secondaryItemFilter]);
+
+  const allItems = useMemo(() => {
+    return menuItems
+      ? cloneDeep(menuItems)
+      : formatMenu(cloneDeep(router), true);
+  }, [router, menuItems]);
+
+  const { menuKey, setMenuKey, openKeys, setOpenkeys } = useMenuPath({
+    allItems,
+    collapsed,
+    mode,
+  });
+
+  const _items: MenuType[] = useMemo(() => {
+    const _items: MenuType[] = cloneDeep(items);
+    setActiveIcon(_items, menuKey);
+    return _items;
+  }, [items, menuKey]);
+
+  useOnlyLvOneMenu({
+    items,
+    onlyLvOneMenu,
+    getCurrChildItems,
+    setOpenkeys,
+    setMenuKey,
+  });
+
+  // Cloudflare style: the sidebar (inline) renders top-level directories as non-collapsible "groups";
+  // level 1 = gray section title, level 2 = flat items; collapsible submenus are no longer used in expanded mode.
+  const cfGroupItems = useMemo<ItemType[]>(() => {
+    return _items.map((it) =>
+      it.children?.length && !collapsed
+        ? ({
+            type: "group",
+            key: it.key,
+            label: it.title ?? it.label,
+            children: it.children,
+          } as ItemType)
+        : (it as ItemType)
+    );
+  }, [_items, collapsed]);
+
+  const menu = (
+    <AntdMenu
+      {...menuConfig}
+      mode={mode}
+      inlineCollapsed={collapsed}
+      items={
+        onlyLvOneMenu
+          ? (_items?.map((i) => ({ ...i, children: undefined })) as ItemType[])
+          : mode === "inline"
+            ? cfGroupItems
+            : _items
+      }
+      onClick={(v) => {
+        if (onlyLvOneMenu) {
+          getCurrChildItems?.(
+            items.find((i) => i.key === v.key)?.children || []
+          );
+          setOpenkeys([v.key]);
+          setMenuKey(v.key);
+        } else {
+          // 次级菜单的 key 是带参模式（/admin/order/:id/detail），按当前地址回填再跳
+          const params = secondary?.path
+            ? (matchPath({ path: secondary.path, end: false }, location.pathname)
+                ?.params ?? {})
+            : {};
+          navigate(fillParams(v.key, params));
+        }
+      }}
+      selectedKeys={[menuKey]}
+      openKeys={openKeys}
+      onOpenChange={(keys: string[]) => {
+        setOpenkeys(keys);
+      }}
+      theme={theme}
+      className={classNames(styles.menu, className)}
+      // 弹出的子菜单挂在 body 上，拿不到根节点的类名。给它挂一个自己的类，样式才有地方落
+      classNames={mergeSemantic(semanticClassNames, (outer) => ({
+        ...outer,
+        popup: [
+          styles.popup,
+          typeof outer.popup === "string" ? outer.popup : outer.popup?.root,
+        ]
+          .filter(Boolean)
+          .join(" "),
+      }))}
+    />
+  );
+
+  // 次级菜单默认带一段头部（至少给出返回入口），调用方可用 secondaryHeader 整块换掉
+  return secondary ? (
+    <div className={styles.secondaryWrap}>
+      {secondaryHeader ?? (
+        <SecondaryHeader collapsed={collapsed} theme={theme as "light" | "dark"} />
+      )}
+      {menu}
+    </div>
+  ) : (
+    menu
+  );
+};
+
+export default Menu;

package/src/layout/NavTabBar/_components/SortableTab/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+interface DraggableTabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
+  "data-node-key": string;
+}
+
+/**
+ * Draggable tab node component
+ */
+const DraggableTabNode: React.FC<Readonly<DraggableTabPaneProps>> = (props) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: props["data-node-key"],
+  });
+
+  const style: React.CSSProperties = {
+    ...props.style,
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0 : 1,
+    cursor: "pointer",
+  };
+
+  return React.cloneElement(props.children as React.ReactElement, {
+    ref: setNodeRef,
+    style,
+    ...attributes,
+    ...listeners,
+  });
+};
+
+export default DraggableTabNode;

package/src/layout/NavTabBar/_components/TabContextMenu/index.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import Button from "../../../../components/Button";
+import Icon from "../../../../components/Icon";
+import { TabType } from "../..";
+import {
+  closeTab,
+  closeLeftTabs,
+  closeRightTabs,
+  closeOtherTabs,
+  closeAllTabs,
+} from "../../_utils/tabActions";
+import styles from "../../index.module.scss";
+
+interface TabContextMenuProps {
+  item: TabType;
+  index: number;
+  openKeys: TabType[];
+  basePath: string;
+  affixRouter: string[];
+  onReload: (key: string) => void;
+  refresh: (key: string) => void;
+  drop: (key: string) => void;
+  setOpenkeys: React.Dispatch<React.SetStateAction<TabType[]>>;
+  setOpen: (key: string) => void;
+  navigate: (path: string) => void;
+}
+
+/**
+ * Tab context menu component
+ */
+const TabContextMenu: React.FC<TabContextMenuProps> = ({
+  item,
+  index,
+  openKeys,
+  basePath,
+  affixRouter,
+  onReload,
+  refresh,
+  drop,
+  setOpenkeys,
+  setOpen,
+  navigate,
+}) => {
+  // Determine whether the current tab is affixed
+  const isAffixed = affixRouter.includes(item.key) || item.affix;
+
+  return (
+    <div className={styles.tabContextMenu}>
+      <div className={styles.part}>
+        <Button
+          type="text"
+          onClick={() => {
+            onReload(item.key?.split("?")[0] || "");
+            refresh(item.key?.split("?")[0] || "");
+            setOpen("");
+          }}
+          icon={<Icon icon="ep:refresh" />}
+        >
+          重新加载
+        </Button>
+        <Button
+          type="text"
+          disabled={isAffixed}
+          onClick={() => {
+            const newOpenKeys = closeTab(openKeys, index, drop, affixRouter);
+            setOpenkeys(newOpenKeys);
+            setOpen("");
+            // After closing the tab, select the previous one; fall back to the first one
+            const targetIndex = index > 0 ? index - 1 : 0;
+            navigate(newOpenKeys[targetIndex]?.key || basePath);
+          }}
+          icon={<Icon icon="ep:close" />}
+        >
+          关闭标签页
+        </Button>
+      </div>
+      <div className={styles.part}>
+        <Button
+          type="text"
+          disabled={index === 0}
+          onClick={() => {
+            const newOpenKeys = closeLeftTabs(
+              openKeys,
+              index,
+              drop,
+              affixRouter
+            );
+            setOpenkeys(newOpenKeys);
+            setOpen("");
+            navigate(item.key);
+          }}
+          icon={<Icon icon="ep:d-arrow-left" />}
+        >
+          关闭左侧标签页
+        </Button>
+        <Button
+          type="text"
+          disabled={index === openKeys.length - 1}
+          onClick={() => {
+            const newOpenKeys = closeRightTabs(
+              openKeys,
+              index,
+              drop,
+              affixRouter
+            );
+            setOpenkeys(newOpenKeys);
+            setOpen("");
+            navigate(item.key);
+          }}
+          icon={<Icon icon="ep:d-arrow-right" />}
+        >
+          关闭右侧标签页
+        </Button>
+      </div>
+      <div className={styles.part}>
+        <Button
+          type="text"
+          disabled={openKeys.length <= 1}
+          onClick={() => {
+            const newOpenKeys = closeOtherTabs(
+              openKeys,
+              item,
+              drop,
+              affixRouter
+            );
+            setOpenkeys(newOpenKeys);
+            setOpen("");
+            navigate(item.key);
+          }}
+          icon={<Icon icon="ep:discount" />}
+        >
+          关闭其他标签页
+        </Button>
+        <Button
+          type="text"
+          disabled={isAffixed && openKeys.length <= 1}
+          onClick={() => {
+            const newOpenKeys = closeAllTabs(openKeys, drop, affixRouter);
+            setOpenkeys(newOpenKeys);
+            setOpen("");
+            // If any affixed tabs remain, navigate to the first one
+            if (newOpenKeys.length > 0) {
+              navigate(newOpenKeys[0].key);
+            } else {
+              navigate(basePath);
+            }
+          }}
+          icon={<Icon icon="ep:minus" />}
+        >
+          关闭全部标签页
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default TabContextMenu;

package/src/layout/NavTabBar/_components/TabDragOverlay/index.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { DragOverlay } from "@dnd-kit/core";
+import { TabType } from "../..";
+import TabLabel from "../TabLabel";
+import styles from "../../index.module.scss";
+
+interface TabDragOverlayProps {
+  activeId: string | null;
+  openKeys: TabType[];
+  basePath: string;
+  affixRouter: string[];
+  open: string;
+  onReload: (key: string) => void;
+  refresh: (key: string) => void;
+  drop: (key: string) => void;
+  setOpenkeys: React.Dispatch<React.SetStateAction<TabType[]>>;
+  setOpen: (key: string) => void;
+  navigate: (path: string) => void;
+}
+
+/**
+ * Drag overlay component that renders the tab currently being dragged
+ */
+const TabDragOverlay: React.FC<TabDragOverlayProps> = ({
+  activeId,
+  openKeys,
+  basePath,
+  affixRouter,
+  open,
+  onReload,
+  refresh,
+  drop,
+  setOpenkeys,
+  setOpen,
+  navigate,
+}) => {
+  return (
+    <DragOverlay adjustScale={false}>
+      {activeId ? (
+        <div className={styles.dragOverlay}>
+          {(() => {
+            const item = openKeys.find((item) => item.key === activeId);
+            const idx = openKeys.findIndex((item) => item.key === activeId);
+            return item ? (
+              <TabLabel
+                item={item}
+                index={idx}
+                openKeys={openKeys}
+                basePath={basePath}
+                affixRouter={affixRouter}
+                open={open}
+                onReload={onReload}
+                refresh={refresh}
+                drop={drop}
+                setOpenkeys={setOpenkeys}
+                setOpen={setOpen}
+                navigate={navigate}
+              />
+            ) : (
+              activeId
+            );
+          })()}
+        </div>
+      ) : null}
+    </DragOverlay>
+  );
+};
+
+export default TabDragOverlay;