aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/layout3/sider.tsx

@@ -1,198 +1,198 @@
-import { ConfigProvider, Layout, Menu, MenuProps, Space, Tooltip } from "antd";
-import React, { useEffect, useRef, useState } from "react";
-import { NavLink, useParams, useSearchParams } from "react-router-dom";
-import {
-  getLeftMostRouteInfo,
-  getTargetMenuItemIdRouteList,
-  handlePropsMenuToAntdMenu,
-} from "../layout2/util/menu-util";
-import { useLayoutContext } from "../layout2/layout-context";
-import { MenuType } from "../layout2/type/layout-type";
-import { useLocale } from "../locale/useLocale";
-import IconFont from "../layout2/components/icon-font";
-import { UserInfo, ThemeConfig } from "../tmpl/interface";
-import Units from "../units";
-import "./css/sider.less"
-
-type SiderPropsType = {
-  menuList: MenuType[];
-  collapsed: boolean;
-  themeConfig?: ThemeConfig;
-};
-
-type MenuItem = Required<MenuProps>["items"][number];
-type SecoundFloorMenuList = MenuType[][];
-
-/**
- * @param menuList 自定义的menu
- * @returns 下标为 n 对应第 n 个根节点对应的第二层级menu
- * @desc 获取第二层级 menu 与其下标映射的数组
- */
-const getSecoundFloorMenuList = (
-  menuList: MenuType[]
-): SecoundFloorMenuList => {
-  const secoundFloorMenuList: SecoundFloorMenuList = Array.from({
-    length: menuList.length,
-  }).map(() => Array.from({ length: 0 }));
-
-  for (let i = 0; i < menuList.length; i++) {
-    const menuItem = menuList[i];
-    Array.isArray(menuItem.children) &&
-      (secoundFloorMenuList[i] = menuItem.children);
-  }
-  return secoundFloorMenuList;
-};
-
-const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) => {
-  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
-  const { translate, getLocale } = useLocale();
-  const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
-  const [menu, setMenu] = useState<MenuItem[]>([]);
-  const [orgName, setOrgName] = useState<string>(""); // 组织名称
-  // menu select
-  const [selectedKeys, setSelectedKeys] = useState([]);
-  const [openKeys, setOpenKeys] = useState([]);
-  const { sourceId } = useParams();
-  const [search] = useSearchParams();
-  const menuId: string = search.get("menuId");
-
-  const initUserConfig = async () => {
-    let userInfo: UserInfo = await Units.getCurrentUserInfo();
-    if (!userInfo) {
-      userInfo = await Units.getUserInfo();
-    }
-    setOrgName(userInfo?.orgName);
-  };
-
-  useEffect(() => {
-    initUserConfig();
-  }, [])
-
-  useEffect(() => {
-    secoundFloorMenuList.current = getSecoundFloorMenuList(menuList);
-  }, [menuList]);
-
-  // menu
-  const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
-    const locale = getLocale();
-    return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
-      const { disabled, label, children, icon } = menuItem;
-      const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
-      if (disabled)
-        return (
-          <div
-            style={{
-              color: "inherit",
-              width: "100%",
-              height: "100%",
-              display: "block",
-            }}
-          >
-            {translate("${" + label + "}")}
-          </div>
-        );
-      const { path, target } = getLeftMostRouteInfo(menuItem);
-      if (Array.isArray(children) && !children.length) {
-        const navLink = <NavLink
-          to={`/${path}`}
-          target={target}
-          style={{
-            color: "inherit",
-            width: "100%",
-            height: "100%",
-            display: "block",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-          }}
-        >
-          <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
-        </NavLink>;
-        return (locale === "zh" ? navLink :
-          <Tooltip title={translate("${" + label + "}")}>
-            {navLink}
-          </Tooltip>
-        );
-      }
-      return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
-    });
-  };
-
-  useEffect(() => {
-    if (!menuList.length) {
-      setMenu([]);
-      return;
-    }
-    const targetId =
-      menuId !== undefined ? menuId : sourceId !== undefined ? sourceId : null;
-    if (!targetId) return;
-    const curSiderMenuList =
-      secoundFloorMenuList.current[menuItemIdToFirstFloorIdxMap[targetId]];
-    if (curSiderMenuList) {
-      setMenu(getMenuWithSecoundFloor(curSiderMenuList));
-      const temIds = getTargetMenuItemIdRouteList(curSiderMenuList, targetId);
-      setTimeout(() => {
-        setSelectedKeys(temIds);
-        setOpenKeys(temIds);
-      }, 10);
-    }
-  }, [sourceId, menuId, menuList, getLocale()]);
-
-  // default select keys
-  useEffect(() => {
-    if (sourceId === undefined) {
-      if (secoundFloorMenuList.current[0] !== undefined) {
-        setMenu(getMenuWithSecoundFloor(secoundFloorMenuList.current[0]));
-        setSelectedKeys([]);
-        setOpenKeys([]);
-      }
-      setDocumentTitle("");
-    } else {
-      const documentTitle =
-        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
-      setDocumentTitle(translate("${" + documentTitle + "}"));
-    }
-  }, [menuList, sourceId, getLocale()]);
-
-  return (
-    <Layout.Sider
-      collapsed={collapsed}
-      collapsedWidth={0}
-      width={200}
-      className="v3-layout-sider"
-    >
-      <ConfigProvider
-        theme={{
-          components: {
-            Menu: {
-              itemBg: "transparent",
-              itemColor: "#009BFF",
-              itemSelectedColor: "#ffffff",
-              fontSize: 14,
-              subMenuItemBg: "transparent",
-              subMenuItemSelectedColor: "#ffffff",
-              iconSize: 16
-            },
-          },
-        }}
-      >
-        {orgName ? <div className="sider-orgName">{orgName}</div> : ""}
-        <div className="sider-menu" style={{ height: orgName ? "calc(100% - 48px)" : "100%" }}>
-          <Menu
-            mode="inline"
-            items={menu}
-            selectedKeys={selectedKeys}
-            openKeys={openKeys}
-            inlineCollapsed={false}
-            style={{
-              userSelect: "none",
-              borderInlineEnd: "none"
-            }}
-            onOpenChange={(val) => setOpenKeys([...val])}
-          />
-        </div>
-      </ConfigProvider>
-    </Layout.Sider>
-  );
-};
-
-export default Sider;
+import { ConfigProvider, Layout, Menu, MenuProps, Space, Tooltip } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import { NavLink, useParams, useSearchParams } from "react-router-dom";
+import {
+  getLeftMostRouteInfo,
+  getTargetMenuItemIdRouteList,
+  handlePropsMenuToAntdMenu,
+} from "../layout2/util/menu-util";
+import { useLayoutContext } from "../layout2/layout-context";
+import { MenuType } from "../layout2/type/layout-type";
+import { useLocale } from "../locale/useLocale";
+import IconFont from "../layout2/components/icon-font";
+import { UserInfo, ThemeConfig } from "../tmpl/interface";
+import Units from "../units";
+import "./css/sider.less"
+
+type SiderPropsType = {
+  menuList: MenuType[];
+  collapsed: boolean;
+  themeConfig?: ThemeConfig;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+type SecoundFloorMenuList = MenuType[][];
+
+/**
+ * @param menuList 自定义的menu
+ * @returns 下标为 n 对应第 n 个根节点对应的第二层级menu
+ * @desc 获取第二层级 menu 与其下标映射的数组
+ */
+const getSecoundFloorMenuList = (
+  menuList: MenuType[]
+): SecoundFloorMenuList => {
+  const secoundFloorMenuList: SecoundFloorMenuList = Array.from({
+    length: menuList.length,
+  }).map(() => Array.from({ length: 0 }));
+
+  for (let i = 0; i < menuList.length; i++) {
+    const menuItem = menuList[i];
+    Array.isArray(menuItem.children) &&
+      (secoundFloorMenuList[i] = menuItem.children);
+  }
+  return secoundFloorMenuList;
+};
+
+const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) => {
+  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
+  const { translate, getLocale } = useLocale();
+  const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  const [orgName, setOrgName] = useState<string>(""); // 组织名称
+  // menu select
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [openKeys, setOpenKeys] = useState([]);
+  const { sourceId } = useParams();
+  const [search] = useSearchParams();
+  const menuId: string = search.get("menuId");
+
+  const initUserConfig = async () => {
+    let userInfo: UserInfo = await Units.getCurrentUserInfo();
+    if (!userInfo) {
+      userInfo = await Units.getUserInfo();
+    }
+    setOrgName(userInfo?.orgName);
+  };
+
+  useEffect(() => {
+    initUserConfig();
+  }, [])
+
+  useEffect(() => {
+    secoundFloorMenuList.current = getSecoundFloorMenuList(menuList);
+  }, [menuList]);
+
+  // menu
+  const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
+    const locale = getLocale();
+    return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
+      const { disabled, label, children, icon } = menuItem;
+      const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
+      if (disabled)
+        return (
+          <div
+            style={{
+              color: "inherit",
+              width: "100%",
+              height: "100%",
+              display: "block",
+            }}
+          >
+            {translate("${" + label + "}")}
+          </div>
+        );
+      const { path, target } = getLeftMostRouteInfo(menuItem);
+      if (Array.isArray(children) && !children.length) {
+        const navLink = <NavLink
+          to={`/${path}`}
+          target={target}
+          style={{
+            color: "inherit",
+            width: "100%",
+            height: "100%",
+            display: "block",
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+          }}
+        >
+          <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
+        </NavLink>;
+        return (locale === "zh" ? navLink :
+          <Tooltip title={translate("${" + label + "}")}>
+            {navLink}
+          </Tooltip>
+        );
+      }
+      return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
+    });
+  };
+
+  useEffect(() => {
+    if (!menuList.length) {
+      setMenu([]);
+      return;
+    }
+    const targetId =
+      menuId !== undefined ? menuId : sourceId !== undefined ? sourceId : null;
+    if (!targetId) return;
+    const curSiderMenuList =
+      secoundFloorMenuList.current[menuItemIdToFirstFloorIdxMap[targetId]];
+    if (curSiderMenuList) {
+      setMenu(getMenuWithSecoundFloor(curSiderMenuList));
+      const temIds = getTargetMenuItemIdRouteList(curSiderMenuList, targetId);
+      setTimeout(() => {
+        setSelectedKeys(temIds);
+        setOpenKeys(temIds);
+      }, 10);
+    }
+  }, [sourceId, menuId, menuList, getLocale()]);
+
+  // default select keys
+  useEffect(() => {
+    if (sourceId === undefined) {
+      if (secoundFloorMenuList.current[0] !== undefined) {
+        setMenu(getMenuWithSecoundFloor(secoundFloorMenuList.current[0]));
+        setSelectedKeys([]);
+        setOpenKeys([]);
+      }
+      setDocumentTitle("");
+    } else {
+      const documentTitle =
+        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
+      setDocumentTitle(translate("${" + documentTitle + "}"));
+    }
+  }, [menuList, sourceId, getLocale()]);
+
+  return (
+    <Layout.Sider
+      collapsed={collapsed}
+      collapsedWidth={0}
+      width={200}
+      className="v3-layout-sider"
+    >
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              itemBg: "transparent",
+              itemColor: "#009BFF",
+              itemSelectedColor: "#ffffff",
+              fontSize: 14,
+              subMenuItemBg: "transparent",
+              subMenuItemSelectedColor: "#ffffff",
+              iconSize: 16
+            },
+          },
+        }}
+      >
+        {orgName ? <div className="sider-orgName">{orgName}</div> : ""}
+        <div className="sider-menu" style={{ height: orgName ? "calc(100% - 48px)" : "100%" }}>
+          <Menu
+            mode="inline"
+            items={menu}
+            selectedKeys={selectedKeys}
+            openKeys={openKeys}
+            inlineCollapsed={false}
+            style={{
+              userSelect: "none",
+              borderInlineEnd: "none"
+            }}
+            onOpenChange={(val) => setOpenKeys([...val])}
+          />
+        </div>
+      </ConfigProvider>
+    </Layout.Sider>
+  );
+};
+
+export default Sider;

package/src/aldehyde/layout4/components/tabs-layout.tsx

@@ -1,111 +1,111 @@
-import React, { useCallback, useMemo, useContext } from "react";
-import { Dropdown, Tabs } from 'antd';
-import { MenuItemType } from 'antd/es/menu/interface';
-import { KeepAliveTabContext } from '../../layout2/tabs/tabs-context';
-import { KeepAliveTab } from "../../hooks/use-tabs";
-import antdIcons from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
-import QueueAnim from 'rc-queue-anim';
-import Units from '../../units';
-import { useLocale } from "../../locale/useLocale";
-import { MenuType } from "../../layout2/type/layout-type";
-import "../css/tabs-layout.less";
-
-const getIcon = (icon?: string): React.ReactElement | undefined => {
-  return icon && antdIcons[icon] && React.createElement(antdIcons[icon]);
-}
-
-interface Props {
-  menuList?: MenuType[];
-}
-
-const TabsLayout = (props: Props) => {
-  const { menuList } = props;
-  const { translate, getLocale } = useLocale();
-  const navigate = useNavigate();
-  const { activeTabRoutePath, closeTab, refreshTab, closeOtherTab, tabs = [] } = useContext(KeepAliveTabContext);
-
-  const menuItems: MenuItemType[] = useMemo(
-    () => tabs.length <= 1 ? [] : [
-      { label: translate("${关闭}"), key: "close" },
-      { label: translate("${关闭其他}"), key: "other" },
-    ],
-    [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 => open && navigate(tab.pathname)}
-      >
-        <div className='flex gap-[6px]'>
-          {getIcon(tab.icon)}
-          {label}
-        </div>
-      </Dropdown >
-    )
-  }, [menuItems, getLocale()]);
-
-  const tabItems = useMemo(() => {
-    if (!menuList.length) { // 无菜单不显示
-      return [];
-    }
-    return tabs.map(tab => ({
-      key: tab.routePath,
-      label: renderTabTitle(tab),
-      children: (
-        <div key={tab.key} className="overflow-y-auto tabs-children" >
-          <QueueAnim type={["left", "right"]} duration={1000}>
-            <div key={tab.key}>
-              {tab.children}
-            </div>
-          </QueueAnim>
-        </div>
-      ),
-      closable: tabs.length > 1, // 剩最后一个就不能删除了
-    }))
-  }, [tabs, menuList, getLocale()]);
-
-  const onTabsChange = useCallback((tabKey: string) => {
-    const tab = tabs.find(r => r.routePath === tabKey);
-    if (tab) {
-      navigate(tab.pathname);
-    }
-  }, [tabs]);
-
-
-  return (
-    <Tabs
-      animated={true}
-      className="v4-tabs-layout"
-      activeKey={activeTabRoutePath}
-      items={tabItems}
-      type="editable-card"
-      onChange={onTabsChange}
-      hideAdd
-      onEdit={(e) => closeTab(e.toString())}
-      size="small"
-    // tabBarGutter={10}
-    />
-  )
-}
-
+import React, { useCallback, useMemo, useContext } from "react";
+import { Dropdown, Tabs } from 'antd';
+import { MenuItemType } from 'antd/es/menu/interface';
+import { KeepAliveTabContext } from '../../layout2/tabs/tabs-context';
+import { KeepAliveTab } from "../../hooks/use-tabs";
+import antdIcons from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import QueueAnim from 'rc-queue-anim';
+import Units from '../../units';
+import { useLocale } from "../../locale/useLocale";
+import { MenuType } from "../../layout2/type/layout-type";
+import "../css/tabs-layout.less";
+
+const getIcon = (icon?: string): React.ReactElement | undefined => {
+  return icon && antdIcons[icon] && React.createElement(antdIcons[icon]);
+}
+
+interface Props {
+  menuList?: MenuType[];
+}
+
+const TabsLayout = (props: Props) => {
+  const { menuList } = props;
+  const { translate, getLocale } = useLocale();
+  const navigate = useNavigate();
+  const { activeTabRoutePath, closeTab, refreshTab, closeOtherTab, tabs = [] } = useContext(KeepAliveTabContext);
+
+  const menuItems: MenuItemType[] = useMemo(
+    () => tabs.length <= 1 ? [] : [
+      { label: translate("${关闭}"), key: "close" },
+      { label: translate("${关闭其他}"), key: "other" },
+    ],
+    [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 => open && navigate(tab.pathname)}
+      >
+        <div className='flex gap-[6px]'>
+          {getIcon(tab.icon)}
+          {label}
+        </div>
+      </Dropdown >
+    )
+  }, [menuItems, getLocale()]);
+
+  const tabItems = useMemo(() => {
+    if (!menuList.length) { // 无菜单不显示
+      return [];
+    }
+    return tabs.map(tab => ({
+      key: tab.routePath,
+      label: renderTabTitle(tab),
+      children: (
+        <div key={tab.key} className="overflow-y-auto tabs-children" >
+          <QueueAnim type={["left", "right"]} duration={1000}>
+            <div key={tab.key}>
+              {tab.children}
+            </div>
+          </QueueAnim>
+        </div>
+      ),
+      closable: tabs.length > 1, // 剩最后一个就不能删除了
+    }))
+  }, [tabs, menuList, getLocale()]);
+
+  const onTabsChange = useCallback((tabKey: string) => {
+    const tab = tabs.find(r => r.routePath === tabKey);
+    if (tab) {
+      navigate(tab.pathname);
+    }
+  }, [tabs]);
+
+
+  return (
+    <Tabs
+      animated={true}
+      className="v4-tabs-layout"
+      activeKey={activeTabRoutePath}
+      items={tabItems}
+      type="editable-card"
+      onChange={onTabsChange}
+      hideAdd
+      onEdit={(e) => closeTab(e.toString())}
+      size="small"
+    // tabBarGutter={10}
+    />
+  )
+}
+
 export default TabsLayout;