@hsu-react/ui 1.0.0 → 2.0.0

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;
+};
+
+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;

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

@@ -0,0 +1,84 @@
+import React from "react";
+import { Popover } from "antd";
+import { TabType } from "../..";
+import TabContextMenu from "../TabContextMenu";
+import styles from "../../index.module.scss";
+import classNames from "classnames";
+
+interface TabLabelProps {
+  item: TabType;
+  index: number;
+  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;
+  className?: string;
+}
+
+/**
+ * Tab label component
+ */
+const TabLabel: React.FC<TabLabelProps> = ({
+  item,
+  index,
+  openKeys,
+  basePath,
+  affixRouter,
+  open,
+  onReload,
+  refresh,
+  drop,
+  setOpenkeys,
+  setOpen,
+  navigate,
+  className,
+}) => {
+  return (
+    <Popover
+      open={item.key === open}
+      placement="bottomLeft"
+      classNames={{ root: styles.popover }}
+      content={
+        <TabContextMenu
+          item={item}
+          index={index}
+          openKeys={openKeys}
+          basePath={basePath}
+          affixRouter={affixRouter}
+          onReload={onReload}
+          refresh={refresh}
+          drop={drop}
+          setOpenkeys={setOpenkeys}
+          setOpen={setOpen}
+          navigate={navigate}
+        />
+      }
+    >
+      <span
+        onContextMenu={(event) => {
+          event.preventDefault();
+        }}
+        onMouseDown={(e) => {
+          if (e.button === 2) {
+            setOpen(item.key === open ? "" : item.key);
+          } else {
+            setOpen("");
+            navigate(item.key);
+          }
+        }}
+        className={classNames(styles.tabLabel, className)}
+      >
+        {item.icon}
+        {item.label}
+      </span>
+    </Popover>
+  );
+};
+
+export default TabLabel;

package/src/layout/NavTabBar/_hooks/useDropTabKey.ts

@@ -0,0 +1,27 @@
+import { useEffect, useContext } from "react";
+import { useAliveController } from "react-activation";
+import { NavTabBarContent } from "../../_hooks/useDropTab";
+import { TabType } from "..";
+
+/**
+ * Hook that closes a tab via dropKey
+ */
+export const useDropTabKey = (
+  setOpenkeys: React.Dispatch<React.SetStateAction<TabType[]>>
+) => {
+  const { drop } = useAliveController();
+  const { dropKey } = useContext(NavTabBarContent);
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (dropKey) {
+        drop(dropKey);
+
+        setOpenkeys((prev) => {
+          const newOpenKeys = prev.filter((item) => item.key !== dropKey);
+          return newOpenKeys;
+        });
+      }
+    }, 0);
+  }, [drop, dropKey, setOpenkeys]);
+};

package/src/layout/NavTabBar/_hooks/useTabContextMenu.ts

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { useDebounceEffect } from "ahooks";
+
+/**
+ * Hook that handles the tab context menu
+ */
+export const useTabContextMenu = () => {
+  const [open, setOpen] = useState<string>("");
+
+  useDebounceEffect(() => {
+    const close = () => {
+      setOpen("");
+    };
+
+    document.removeEventListener("click", close);
+    if (open) {
+      document.addEventListener("click", close);
+    }
+  }, [open]);
+
+  return { open, setOpen };
+};
+