aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/layout2/tabs/tabs-layout.tsx

@@ -1,147 +1,147 @@
-import React, { useCallback, useMemo, useContext } from "react";
-import { Dropdown, Tabs } from 'antd';
-import { MenuItemType } from 'antd/es/menu/interface';
-import { KeepAliveTabContext } from './tabs-context';
-import { KeepAliveTab } from "../../hooks/use-tabs";
-import antdIcons from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
-import Units from '../../units';
-import { useLocale } from "../../locale/useLocale";
-import "../css/tabs-layout.less";
-import QueueAnim from 'rc-queue-anim';
-import { MenuType } from "../type/layout-type";
-// import {arrayMove} from "react-sortable-hoc";
-
-interface Props {
-  menuList?: MenuType[];
-}
-
-const TabsLayout = (props: Props) => {
-  const { menuList } = props;
-  const { translate, getLocale } = useLocale();
-  const { activeTabRoutePath, closeTab, refreshTab, closeOtherTab, tabs, } = useContext(KeepAliveTabContext);
-
-  const getIcon = (icon?: string): React.ReactElement | undefined => {
-    return icon && antdIcons[icon] && React.createElement(antdIcons[icon]);
-  }
-
-  const menuItems: MenuItemType[] = useMemo(
-    () => [
-      tabs.length <= 1 ? null : {
-        label: translate("${关闭}"),
-        key: "close",
-      },
-      tabs.length <= 1 ? null : {
-        label: translate("${关闭其他}"),
-        key: "other",
-      },
-    ].filter(o => o !== null),
-    [tabs]);
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const menuClick = useCallback(({ key, domEvent }: any, tab: KeepAliveTab) => {
-    domEvent.stopPropagation();
-
-    if (key === 'refresh') {
-      refreshTab(tab.routePath);
-    } else if (key === "close") {
-      closeTab(tab.routePath);
-    } else if (key === "other") {
-      closeOtherTab(tab.routePath);
-    }
-  }, [closeOtherTab, closeTab, refreshTab]);
-
-  const renderTabTitle = useCallback((tab: KeepAliveTab) => {
-    let label = Units.mapMenu(tab.title) ? Units.mapMenu(tab.title) : tab.title;
-    label = translate("${" + label + "}");
-    return (
-      <Dropdown
-        menu={{
-          items: menuItems,
-          onClick: (e) => menuClick(e, tab),
-        }}
-        trigger={['contextMenu']}
-        onOpenChange={open => {
-          if (open) {
-            navigate(tab.pathname);
-          }
-        }}
-      >
-        <div className='flex gap-[6px]' style={{ margin: '-12px 0', padding: '12px 0' }}>
-          {getIcon(tab.icon)}
-          {label}
-        </div>
-      </Dropdown>
-    )
-  }, [menuItems, getLocale()]);
-
-  const tabItems = useMemo(() => {
-    if (!menuList.length) { // 无菜单不显示
-      return [];
-    }
-    return tabs.map(tab => {
-      return {
-        key: tab.routePath,
-        label: renderTabTitle(tab),
-        children: (
-          <QueueAnim type={["left", "right"]} duration={1000}>
-            <div
-              key={tab.key}
-              className='overflow-y-auto'
-            // style={{
-            //   height: `calc(100vh - ${defaultSetting.headerHeight + 36}px)`,
-            // }}
-            >
-              {/*<Watermark type='content'>*/}
-              {tab.children}
-              {/*</Watermark>*/}
-            </div>
-          </QueueAnim>
-        ),
-        closable: tabs.length > 1, // 剩最后一个就不能删除了
-      }
-    })
-  }, [tabs, menuList, getLocale()]);
-  //let tabItems=tabItemsf();
-
-  let navigate = useNavigate();
-
-  const onTabsChange = useCallback((tabKey: string) => {
-    tabs.forEach(tab => {
-      if (tab.routePath == tabKey) {
-        navigate(tab.pathname);
-      }
-    })
-  }, [tabs]);
-
-  const onTabEdit = (
-    targetKey: string,
-    action: 'add' | 'remove',
-  ) => {
-    if (action === 'remove') {
-      closeTab(targetKey);
-    }
-  };
-
-  return (
-    <Tabs
-      animated={true}
-      className="v2-tabs-layout"
-      tabBarStyle={{ marginBottom: '4px' }}
-      activeKey={activeTabRoutePath}
-      items={tabItems}
-      type="editable-card"
-      onChange={onTabsChange}
-      hideAdd
-      onEdit={(e, a) => { onTabEdit(e.toString(), a) }}
-      size="small"
-    // onDragEnd={({ activeIndex, overIndex }) => {
-    //   setTabs(
-    //     arrayMove(tabs, activeIndex, overIndex)
-    //   );
-    // }}
-    />
-  )
-}
-
+import React, { useCallback, useMemo, useContext } from "react";
+import { Dropdown, Tabs } from 'antd';
+import { MenuItemType } from 'antd/es/menu/interface';
+import { KeepAliveTabContext } from './tabs-context';
+import { KeepAliveTab } from "../../hooks/use-tabs";
+import antdIcons from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import Units from '../../units';
+import { useLocale } from "../../locale/useLocale";
+import "../css/tabs-layout.less";
+import QueueAnim from 'rc-queue-anim';
+import { MenuType } from "../type/layout-type";
+// import {arrayMove} from "react-sortable-hoc";
+
+interface Props {
+  menuList?: MenuType[];
+}
+
+const TabsLayout = (props: Props) => {
+  const { menuList } = props;
+  const { translate, getLocale } = useLocale();
+  const { activeTabRoutePath, closeTab, refreshTab, closeOtherTab, tabs, } = useContext(KeepAliveTabContext);
+
+  const getIcon = (icon?: string): React.ReactElement | undefined => {
+    return icon && antdIcons[icon] && React.createElement(antdIcons[icon]);
+  }
+
+  const menuItems: MenuItemType[] = useMemo(
+    () => [
+      tabs.length <= 1 ? null : {
+        label: translate("${关闭}"),
+        key: "close",
+      },
+      tabs.length <= 1 ? null : {
+        label: translate("${关闭其他}"),
+        key: "other",
+      },
+    ].filter(o => o !== null),
+    [tabs]);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const menuClick = useCallback(({ key, domEvent }: any, tab: KeepAliveTab) => {
+    domEvent.stopPropagation();
+
+    if (key === 'refresh') {
+      refreshTab(tab.routePath);
+    } else if (key === "close") {
+      closeTab(tab.routePath);
+    } else if (key === "other") {
+      closeOtherTab(tab.routePath);
+    }
+  }, [closeOtherTab, closeTab, refreshTab]);
+
+  const renderTabTitle = useCallback((tab: KeepAliveTab) => {
+    let label = Units.mapMenu(tab.title) ? Units.mapMenu(tab.title) : tab.title;
+    label = translate("${" + label + "}");
+    return (
+      <Dropdown
+        menu={{
+          items: menuItems,
+          onClick: (e) => menuClick(e, tab),
+        }}
+        trigger={['contextMenu']}
+        onOpenChange={open => {
+          if (open) {
+            navigate(tab.pathname);
+          }
+        }}
+      >
+        <div className='flex gap-[6px]' style={{ margin: '-12px 0', padding: '12px 0' }}>
+          {getIcon(tab.icon)}
+          {label}
+        </div>
+      </Dropdown>
+    )
+  }, [menuItems, getLocale()]);
+
+  const tabItems = useMemo(() => {
+    if (!menuList.length) { // 无菜单不显示
+      return [];
+    }
+    return tabs.map(tab => {
+      return {
+        key: tab.routePath,
+        label: renderTabTitle(tab),
+        children: (
+          <QueueAnim type={["left", "right"]} duration={1000}>
+            <div
+              key={tab.key}
+              className='overflow-y-auto'
+            // style={{
+            //   height: `calc(100vh - ${defaultSetting.headerHeight + 36}px)`,
+            // }}
+            >
+              {/*<Watermark type='content'>*/}
+              {tab.children}
+              {/*</Watermark>*/}
+            </div>
+          </QueueAnim>
+        ),
+        closable: tabs.length > 1, // 剩最后一个就不能删除了
+      }
+    })
+  }, [tabs, menuList, getLocale()]);
+  //let tabItems=tabItemsf();
+
+  let navigate = useNavigate();
+
+  const onTabsChange = useCallback((tabKey: string) => {
+    tabs.forEach(tab => {
+      if (tab.routePath == tabKey) {
+        navigate(tab.pathname);
+      }
+    })
+  }, [tabs]);
+
+  const onTabEdit = (
+    targetKey: string,
+    action: 'add' | 'remove',
+  ) => {
+    if (action === 'remove') {
+      closeTab(targetKey);
+    }
+  };
+
+  return (
+    <Tabs
+      animated={true}
+      className="v2-tabs-layout"
+      tabBarStyle={{ marginBottom: '4px' }}
+      activeKey={activeTabRoutePath}
+      items={tabItems}
+      type="editable-card"
+      onChange={onTabsChange}
+      hideAdd
+      onEdit={(e, a) => { onTabEdit(e.toString(), a) }}
+      size="small"
+    // onDragEnd={({ activeIndex, overIndex }) => {
+    //   setTabs(
+    //     arrayMove(tabs, activeIndex, overIndex)
+    //   );
+    // }}
+    />
+  )
+}
+
 export default TabsLayout;

package/src/aldehyde/layout2/type/layout-type.ts

@@ -1,15 +1,15 @@
-import { HTMLAttributeAnchorTarget } from "react";
-
-export type MenuType = {
-  id: string;
-  label: string; // 菜单标题
-  disabled: boolean; // 是否禁用
-  url: string | null; // 菜单链接
-  linkTarget?: HTMLAttributeAnchorTarget;
-  icon?: string;
-  children?: MenuType[]; // 子菜单
-  themeColor?: string;
-  funcDescription?: string;
-  dragDropPageId?: string;
-  customPath?: string;
-};
+import { HTMLAttributeAnchorTarget } from "react";
+
+export type MenuType = {
+  id: string;
+  label: string; // 菜单标题
+  disabled: boolean; // 是否禁用
+  url: string | null; // 菜单链接
+  linkTarget?: HTMLAttributeAnchorTarget;
+  icon?: string;
+  children?: MenuType[]; // 子菜单
+  themeColor?: string;
+  funcDescription?: string;
+  dragDropPageId?: string;
+  customPath?: string;
+};

package/src/aldehyde/layout2/util/menu-util.tsx

@@ -1,125 +1,125 @@
-import { ReactNode } from "react";
-import { MenuProps } from "antd";
-import { MenuType } from "../type/layout-type";
-import {SettingOutlined} from "@ant-design/icons";
-import React from "react";
-
-type AntdMenuItemType = Required<MenuProps>["items"][number];
-
-/**
- * @param menu 自定义的 menu 树
- * @returns 最左子节点的路由信息: 链接跳转方式和路由路径
- * @desc 获取最左子节点的路由信息
- */
-export const getLeftMostRouteInfo = (
-  menu: MenuType
-): {
-  target: MenuType["linkTarget"];
-  path: string | null;
-} => {
-  if (Array.isArray(menu.children) && menu.children.length) {
-    for (const menuChild of menu.children) {
-      if (!menuChild.disabled)  return getLeftMostRouteInfo(menuChild);
-    }
-  }
-
-  if (!menu.disabled && (!Array.isArray(menu.children) || (Array.isArray(menu.children) && menu.children.length === 0))) 
-    return {
-      target: menu.linkTarget,
-      path: menu.url,
-    };
-
-  return {
-    target: '_self',
-    path: null
-  }
-};
-
-/**
- * @param menuList 自定义的 menuList
- * @returns antd 可以使用的 menuList
- * @desc 将自定义的 menuList 处理成 antd 可以使用的 menuList
- */
-export const handlePropsMenuToAntdMenu = (
-  menuList: MenuType[],
-  customLabelFn: (
-    menuItem: MenuType,
-    floor: number
-  ) => string | number | ReactNode,
-  className?: string,
-  floor: number = 0
-): AntdMenuItemType[] => {
-  try {
-    const retList: AntdMenuItemType[] = [];
-
-    for (const item of menuList) {
-      const { id, label, disabled, url, linkTarget, children } = item;
-
-      const menu: AntdMenuItemType = {
-        label: customLabelFn(item, floor),
-        key: id,
-        // icon: <SettingOutlined />,
-        disabled,
-        className,
-        children:
-          Array.isArray(children) && children.length
-            ? handlePropsMenuToAntdMenu(
-                children,
-                customLabelFn,
-                className,
-                floor + 1
-              )
-            : null,
-      };
-      retList.push(menu);
-    }
-
-    return retList;
-  } catch (err) {
-    console.log("handlePropsMenuToAntdMenu", err, `menu: ${menuList}`);
-  }
-};
-
-/**
- * @param menuList 自定义的 menuList
- * @param targetMenuId 目标 menu id
- * @returns 从根节点到目标节点路径
- * @desc 寻找从 menu 根节点到目标节点的路径
- */
-export const getTargetMenuItemIdRouteList = (
-  menuList: MenuType[],
-  targetMenuId: string
-): string[] => {
-  const routeList: string[] = [];
-
-  const root: MenuType = {
-    id: "",
-    label: "",
-    disabled: false,
-    url: "",
-    children: menuList,
-  };
-
-  const dfs = (menuItem: MenuType): boolean => {
-    routeList.push(menuItem.id);
-
-    if (menuItem.id === targetMenuId) return true;
-
-    let flag = false;
-
-    for (const menuItemChild of menuItem.children) {
-      if (!flag) flag = dfs(menuItemChild);
-      else break;
-    }
-
-    if (flag) return true;
-
-    routeList.pop();
-    return false;
-  };
-
-  dfs(root);
-
-  routeList.shift();
-  return routeList;
-};
+import { ReactNode } from "react";
+import { MenuProps } from "antd";
+import { MenuType } from "../type/layout-type";
+import {SettingOutlined} from "@ant-design/icons";
+import React from "react";
+
+type AntdMenuItemType = Required<MenuProps>["items"][number];
+
+/**
+ * @param menu 自定义的 menu 树
+ * @returns 最左子节点的路由信息: 链接跳转方式和路由路径
+ * @desc 获取最左子节点的路由信息
+ */
+export const getLeftMostRouteInfo = (
+  menu: MenuType
+): {
+  target: MenuType["linkTarget"];
+  path: string | null;
+} => {
+  if (Array.isArray(menu.children) && menu.children.length) {
+    for (const menuChild of menu.children) {
+      if (!menuChild.disabled)  return getLeftMostRouteInfo(menuChild);
+    }
+  }
+
+  if (!menu.disabled && (!Array.isArray(menu.children) || (Array.isArray(menu.children) && menu.children.length === 0))) 
+    return {
+      target: menu.linkTarget,
+      path: menu.url,
+    };
+
+  return {
+    target: '_self',
+    path: null
+  }
+};
+
+/**
+ * @param menuList 自定义的 menuList
+ * @returns antd 可以使用的 menuList
+ * @desc 将自定义的 menuList 处理成 antd 可以使用的 menuList
+ */
+export const handlePropsMenuToAntdMenu = (
+  menuList: MenuType[],
+  customLabelFn: (
+    menuItem: MenuType,
+    floor: number
+  ) => string | number | ReactNode,
+  className?: string,
+  floor: number = 0
+): AntdMenuItemType[] => {
+  try {
+    const retList: AntdMenuItemType[] = [];
+
+    for (const item of menuList) {
+      const { id, label, disabled, url, linkTarget, children } = item;
+
+      const menu: AntdMenuItemType = {
+        label: customLabelFn(item, floor),
+        key: id,
+        // icon: <SettingOutlined />,
+        disabled,
+        className,
+        children:
+          Array.isArray(children) && children.length
+            ? handlePropsMenuToAntdMenu(
+                children,
+                customLabelFn,
+                className,
+                floor + 1
+              )
+            : null,
+      };
+      retList.push(menu);
+    }
+
+    return retList;
+  } catch (err) {
+    console.log("handlePropsMenuToAntdMenu", err, `menu: ${menuList}`);
+  }
+};
+
+/**
+ * @param menuList 自定义的 menuList
+ * @param targetMenuId 目标 menu id
+ * @returns 从根节点到目标节点路径
+ * @desc 寻找从 menu 根节点到目标节点的路径
+ */
+export const getTargetMenuItemIdRouteList = (
+  menuList: MenuType[],
+  targetMenuId: string
+): string[] => {
+  const routeList: string[] = [];
+
+  const root: MenuType = {
+    id: "",
+    label: "",
+    disabled: false,
+    url: "",
+    children: menuList,
+  };
+
+  const dfs = (menuItem: MenuType): boolean => {
+    routeList.push(menuItem.id);
+
+    if (menuItem.id === targetMenuId) return true;
+
+    let flag = false;
+
+    for (const menuItemChild of menuItem.children) {
+      if (!flag) flag = dfs(menuItemChild);
+      else break;
+    }
+
+    if (flag) return true;
+
+    routeList.pop();
+    return false;
+  };
+
+  dfs(root);
+
+  routeList.shift();
+  return routeList;
+};