aldehyde 0.2.479 → 0.2.481

package/src/aldehyde/layout5/css/header.less

@@ -1,36 +1,36 @@
-.v5-layout-header {
-    position: relative;
-    z-index: 10;
-    padding: 0 16px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #ffffff;
-    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-    height: 32px;
-    line-height: normal;
-
-    .sider-collapsed-button {
-        position: absolute;
-        z-index: 101;
-        width: 24px;
-        height: 24px;
-        font-size: 12px;
-        text-align: center;
-        border-radius: 40px;
-        inset-inline-start: -13px;
-        transition: transform 0.3s;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        color: rgba(0, 0, 0, 0.25);
-        background-color: #ffffff;
-        border: 1px solid rgba(0, 21, 41, 0.08);
-        box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(25, 15, 15, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
-    }
-
-    .ant-breadcrumb a:hover {
-        background: transparent;
-    }
+.v5-layout-header {
+    position: relative;
+    z-index: 10;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #ffffff;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+    height: 32px;
+    line-height: normal;
+
+    .sider-collapsed-button {
+        position: absolute;
+        z-index: 101;
+        width: 24px;
+        height: 24px;
+        font-size: 12px;
+        text-align: center;
+        border-radius: 40px;
+        inset-inline-start: -13px;
+        transition: transform 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: rgba(0, 0, 0, 0.25);
+        background-color: #ffffff;
+        border: 1px solid rgba(0, 21, 41, 0.08);
+        box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(25, 15, 15, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
+    }
+
+    .ant-breadcrumb a:hover {
+        background: transparent;
+    }
 }

package/src/aldehyde/layout5/css/sider.less

@@ -1,19 +1,19 @@
-.v5-layout-sider {
-    .sider-orgName {
-        height: 46px;
-        width: 100%;
-        font-weight: 600;
-        font-size: 18px;
-        padding: 12px;
-        border-bottom: 1px solid rgba(0, 21, 41, 0.08);
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-
-    .header-logo {
-        width: 24%;
-        max-width: 80px;
-        margin-right: 4%;
-    }
+.v5-layout-sider {
+    .sider-orgName {
+        height: 46px;
+        width: 100%;
+        font-weight: 600;
+        font-size: 18px;
+        padding: 12px;
+        border-bottom: 1px solid rgba(0, 21, 41, 0.08);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .header-logo {
+        width: 24%;
+        max-width: 80px;
+        margin-right: 4%;
+    }
 }

package/src/aldehyde/layout5/header.tsx

@@ -1,204 +1,204 @@
-import React, { useState, useEffect, useMemo, CSSProperties } from "react";
-import { Layout, Space, theme, Button, MenuProps, Dropdown, Breadcrumb, ConfigProvider } from "antd";
-import { NavLink, useParams, useSearchParams, useLocation } from "react-router-dom";
-import { LeftOutlined, RightOutlined, UnorderedListOutlined } from '@ant-design/icons';
-import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
-import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
-// import LocaleButton from "../locale/LocaleButton";
-// import ThemeButton from "../layout2/components/theme-button";
-import UserButton from "../layout2/components/user-button";
-import SearchMenu from "../layout2/components/search-menu";
-import ScreenfullButton from "../layout2/components/screenfull-button";
-import SystemMessages from "../layout2/components/system-messages";
-import UserNotification from "../layout2/components/user-notification";
-import { MenuType } from "../layout2/type/layout-type";
-import { useLocale } from "../locale/useLocale";
-import { getLeftMostRouteInfo, handlePropsMenuToAntdMenu } from "../layout2/util/menu-util";
-import IconFont from "../layout2/components/icon-font";
-import { ThemeConfig } from "../tmpl/interface";
-import "./css/header.less";
-
-const { useToken } = theme;
-
-// 查找当前选中菜单的顶层菜单id
-const findPathToRoot = (menus, targetId) => {
-  // 使用栈来存储需要遍历的节点及其从根节点到该节点的路径
-  const stack = [];
-  // 初始化栈：将每个根节点及其路径（初始只包含自身ID）入栈
-  for (const node of menus) {
-    stack.push({ node, path: [node.id] });
-  }
-  while (stack.length > 0) {
-    const { node, path } = stack.pop(); // 弹出栈顶元素
-    // 检查当前节点是否是目标节点
-    if (node.id === targetId) {
-      return path[0]; // 返回路径的第一个元素，即最顶层根节点ID
-    }
-    // 如果当前节点有子节点，则将它们全部入栈，并记录从根到该子节点的路径
-    if (node.children && node.children.length > 0) {
-      for (const child of node.children) {
-        stack.push({ node: child, path: [...path, child.id] }); // 将子节点和新的路径入栈
-      }
-    }
-  }
-  return null;
-}
-
-type HeaderPropsType = {
-  menuList: MenuType[];
-  themeConfig?: ThemeConfig;
-};
-type MenuItem = Required<MenuProps>["items"][number];
-
-const Header: React.FC<HeaderPropsType> = ({ menuList, themeConfig }) => {
-  const { token: { colorPrimary } } = useToken();
-  const { translate, getLocale } = useLocale();
-  const { changeSiderCollapsed, getSiderCollapsed } = useLocale();
-  const [menu, setMenu] = useState<MenuItem[]>([]);
-  const [selectedKeys, setSelectedKeys] = useState([]);
-  const [selParentId, setSelParentId] = useState<string>();
-  const collapsed = getSiderCollapsed();
-  const { pathname } = useLocation();
-  const { sourceId } = useParams();
-  const [search] = useSearchParams();
-  const menuId: string = search.get("menuId");
-
-  const handleMenu = (menuItem, floor) => {
-    const { disabled, label, children, icon } = menuItem;
-    const renderIcon = icon ? <IconFont type={icon} className="menu-icon" /> : "";
-    const renderItem = <div style={{ textAlign: "left" }}><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space></div>;
-    if (disabled) {
-      return <div style={{ cursor: "not-allowed" }}>{renderItem}</div>;
-    }
-    const { path, target } = getLeftMostRouteInfo(menuItem);
-    if (floor === 0) {
-      return path === null ? (
-        renderItem
-      ) : (
-        <NavLink
-          to={`/${path}`}
-          target={target}
-        >
-          {renderItem}
-        </NavLink>
-      );
-    }
-    if (Array.isArray(children) && !children.length) {
-      return (
-        <NavLink to={`/${path}`} target={target} >
-          {renderItem}
-        </NavLink>
-      );
-    }
-    return renderItem;
-  };
-
-  useEffect(() => {
-    if (menuId !== undefined) setSelectedKeys([menuId]);
-  }, [menuId]);
-
-  useEffect(() => {
-    if (menuList?.length && selParentId) {
-      setMenu(handlePropsMenuToAntdMenu(menuList, handleMenu));
-    }
-  }, [menuList, getLocale(), selParentId]);
-
-  useEffect(() => {
-    if (sourceId === undefined) {
-      if (menuList[0] !== undefined) {
-        setSelectedKeys([menuList[0].id]);
-        setSelParentId(menuList[0].id);
-      }
-    } else if (menuList?.length) {
-      setSelectedKeys([sourceId]);
-      setSelParentId(findPathToRoot(menuList, sourceId));
-    }
-  }, [menuList, sourceId]);
-
-  // 面包屑递归查找第一个叶子节点,解决父节点链接指向
-  const findFirstLeafNode = (node) => {
-    if (!node.children?.length) {
-      return node;
-    }
-    return findFirstLeafNode(node.children[0]);
-  };
-
-  // 面包屑节点处理
-  const handleBreadcrumbItems = (menuArr, path) => {
-    for (const node of menuArr) {
-      const isCurrent = `/${node.url}`?.startsWith(pathname);
-      // 匹配成功
-      if (isCurrent) { // 面包屑最后一项
-        return [...path, { title: <NavLink style={{ color: colorPrimary }} to={`/${node.url}`} target={node.linkTarget || "_self"}>{translate("${" + node.label + "}")}</NavLink> }];
-      }
-      // 递归子树
-      if (node.children?.length > 0) {
-        // 找到当前节点下的第一个叶子节点作为链接目标
-        const leafNode = findFirstLeafNode(node);
-        const result = handleBreadcrumbItems(node.children, [...path, { title: <NavLink to={`/${leafNode.url}`} target={leafNode.linkTarget || "_self"}>{translate("${" + node.label + "}")}</NavLink> }]);
-        if (result) return result; // 找到即返回
-      }
-    }
-    return null;
-  };
-
-  const breadcrumbItems = useMemo(() => {
-    const temData = handleBreadcrumbItems(menuList, []);
-    return temData || [{ title: <NavLink to={pathname} target="_self">{translate("${首页}")}</NavLink> }];
-  }, [menuList, pathname, getLocale()]);
-
-  const toolbarStyle: CSSProperties = {
-    width: "100%",
-    height: "100%",
-    boxSizing: "border-box",
-    padding: 0,
-    borderRadius: 0,
-    minWidth: 0,
-    color: colorPrimary,
-  };
-
-  return (
-    <Layout.Header className="v5-layout-header" style={{ paddingLeft: collapsed ? 38 : 20 }}>
-      <div className="sider-collapsed-button" style={{ insetInlineStart: collapsed ? 6 : -13 }} onClick={() => changeSiderCollapsed()}>
-        {collapsed ? <RightOutlined /> : <LeftOutlined />}
-      </div>
-      <ConfigProvider theme={{ components: { Breadcrumb: { linkHoverColor: colorPrimary } } }}>
-        <Breadcrumb items={breadcrumbItems} />
-      </ConfigProvider>
-      <Space size="large" style={{ height: "100%" }}>
-        {themeConfig?.wsTypes?.includes("sys-messages") ? <SystemMessages menuList={menuList} /> : ""}
-        {themeConfig?.wsTypes?.includes("user-notification") ? <UserNotification menuList={menuList} /> : ""}
-        <ScreenfullButton style={toolbarStyle} />
-        <SearchMenu menuList={menuList} style={toolbarStyle} />
-        {menu?.length > 1 &&
-          <Dropdown menu={{ items: menu, selectedKeys }}>
-            <Button
-              shape="circle"
-              icon={<UnorderedListOutlined />}
-              size="large"
-              type="link"
-              style={toolbarStyle}
-            />
-          </Dropdown>
-        }
-        <L2MenuQuickBar style={{ color: colorPrimary }} />
-        <L2MenuMessageBar version="v5" style={{ color: colorPrimary }} />
-        {/* <LocaleButton
-          shape="default"
-          size="large"
-          type="link"
-          style={toolbarStyle}
-        />
-        <ThemeButton
-          shape="default"
-          size="large"
-          type="link"
-          style={toolbarStyle}
-        /> */}
-        <UserButton themeConfig={themeConfig} layoutRootPath="v5" logoutUrl="/login2" style={{ padding: 0, color: "#000" }} />
-      </Space>
-    </Layout.Header>
-  );
-};
-
-export default Header;
+import React, { useState, useEffect, useMemo, CSSProperties } from "react";
+import { Layout, Space, theme, Button, MenuProps, Dropdown, Breadcrumb, ConfigProvider } from "antd";
+import { NavLink, useParams, useSearchParams, useLocation } from "react-router-dom";
+import { LeftOutlined, RightOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
+import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
+// import LocaleButton from "../locale/LocaleButton";
+// import ThemeButton from "../layout2/components/theme-button";
+import UserButton from "../layout2/components/user-button";
+import SearchMenu from "../layout2/components/search-menu";
+import ScreenfullButton from "../layout2/components/screenfull-button";
+import SystemMessages from "../layout2/components/system-messages";
+import UserNotification from "../layout2/components/user-notification";
+import { MenuType } from "../layout2/type/layout-type";
+import { useLocale } from "../locale/useLocale";
+import { getLeftMostRouteInfo, handlePropsMenuToAntdMenu } from "../layout2/util/menu-util";
+import IconFont from "../layout2/components/icon-font";
+import { ThemeConfig } from "../tmpl/interface";
+import "./css/header.less";
+
+const { useToken } = theme;
+
+// 查找当前选中菜单的顶层菜单id
+const findPathToRoot = (menus, targetId) => {
+  // 使用栈来存储需要遍历的节点及其从根节点到该节点的路径
+  const stack = [];
+  // 初始化栈：将每个根节点及其路径（初始只包含自身ID）入栈
+  for (const node of menus) {
+    stack.push({ node, path: [node.id] });
+  }
+  while (stack.length > 0) {
+    const { node, path } = stack.pop(); // 弹出栈顶元素
+    // 检查当前节点是否是目标节点
+    if (node.id === targetId) {
+      return path[0]; // 返回路径的第一个元素，即最顶层根节点ID
+    }
+    // 如果当前节点有子节点，则将它们全部入栈，并记录从根到该子节点的路径
+    if (node.children && node.children.length > 0) {
+      for (const child of node.children) {
+        stack.push({ node: child, path: [...path, child.id] }); // 将子节点和新的路径入栈
+      }
+    }
+  }
+  return null;
+}
+
+type HeaderPropsType = {
+  menuList: MenuType[];
+  themeConfig?: ThemeConfig;
+};
+type MenuItem = Required<MenuProps>["items"][number];
+
+const Header: React.FC<HeaderPropsType> = ({ menuList, themeConfig }) => {
+  const { token: { colorPrimary } } = useToken();
+  const { translate, getLocale } = useLocale();
+  const { changeSiderCollapsed, getSiderCollapsed } = useLocale();
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [selParentId, setSelParentId] = useState<string>();
+  const collapsed = getSiderCollapsed();
+  const { pathname } = useLocation();
+  const { sourceId } = useParams();
+  const [search] = useSearchParams();
+  const menuId: string = search.get("menuId");
+
+  const handleMenu = (menuItem, floor) => {
+    const { disabled, label, children, icon } = menuItem;
+    const renderIcon = icon ? <IconFont type={icon} className="menu-icon" /> : "";
+    const renderItem = <div style={{ textAlign: "left" }}><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space></div>;
+    if (disabled) {
+      return <div style={{ cursor: "not-allowed" }}>{renderItem}</div>;
+    }
+    const { path, target } = getLeftMostRouteInfo(menuItem);
+    if (floor === 0) {
+      return path === null ? (
+        renderItem
+      ) : (
+        <NavLink
+          to={`/${path}`}
+          target={target}
+        >
+          {renderItem}
+        </NavLink>
+      );
+    }
+    if (Array.isArray(children) && !children.length) {
+      return (
+        <NavLink to={`/${path}`} target={target} >
+          {renderItem}
+        </NavLink>
+      );
+    }
+    return renderItem;
+  };
+
+  useEffect(() => {
+    if (menuId !== undefined) setSelectedKeys([menuId]);
+  }, [menuId]);
+
+  useEffect(() => {
+    if (menuList?.length && selParentId) {
+      setMenu(handlePropsMenuToAntdMenu(menuList, handleMenu));
+    }
+  }, [menuList, getLocale(), selParentId]);
+
+  useEffect(() => {
+    if (sourceId === undefined) {
+      if (menuList[0] !== undefined) {
+        setSelectedKeys([menuList[0].id]);
+        setSelParentId(menuList[0].id);
+      }
+    } else if (menuList?.length) {
+      setSelectedKeys([sourceId]);
+      setSelParentId(findPathToRoot(menuList, sourceId));
+    }
+  }, [menuList, sourceId]);
+
+  // 面包屑递归查找第一个叶子节点,解决父节点链接指向
+  const findFirstLeafNode = (node) => {
+    if (!node.children?.length) {
+      return node;
+    }
+    return findFirstLeafNode(node.children[0]);
+  };
+
+  // 面包屑节点处理
+  const handleBreadcrumbItems = (menuArr, path) => {
+    for (const node of menuArr) {
+      const isCurrent = `/${node.url}`?.startsWith(pathname);
+      // 匹配成功
+      if (isCurrent) { // 面包屑最后一项
+        return [...path, { title: <NavLink style={{ color: colorPrimary }} to={`/${node.url}`} target={node.linkTarget || "_self"}>{translate("${" + node.label + "}")}</NavLink> }];
+      }
+      // 递归子树
+      if (node.children?.length > 0) {
+        // 找到当前节点下的第一个叶子节点作为链接目标
+        const leafNode = findFirstLeafNode(node);
+        const result = handleBreadcrumbItems(node.children, [...path, { title: <NavLink to={`/${leafNode.url}`} target={leafNode.linkTarget || "_self"}>{translate("${" + node.label + "}")}</NavLink> }]);
+        if (result) return result; // 找到即返回
+      }
+    }
+    return null;
+  };
+
+  const breadcrumbItems = useMemo(() => {
+    const temData = handleBreadcrumbItems(menuList, []);
+    return temData || [{ title: <NavLink to={pathname} target="_self">{translate("${首页}")}</NavLink> }];
+  }, [menuList, pathname, getLocale()]);
+
+  const toolbarStyle: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    boxSizing: "border-box",
+    padding: 0,
+    borderRadius: 0,
+    minWidth: 0,
+    color: colorPrimary,
+  };
+
+  return (
+    <Layout.Header className="v5-layout-header" style={{ paddingLeft: collapsed ? 38 : 20 }}>
+      <div className="sider-collapsed-button" style={{ insetInlineStart: collapsed ? 6 : -13 }} onClick={() => changeSiderCollapsed()}>
+        {collapsed ? <RightOutlined /> : <LeftOutlined />}
+      </div>
+      <ConfigProvider theme={{ components: { Breadcrumb: { linkHoverColor: colorPrimary } } }}>
+        <Breadcrumb items={breadcrumbItems} />
+      </ConfigProvider>
+      <Space size="large" style={{ height: "100%" }}>
+        {themeConfig?.wsTypes?.includes("sys-messages") ? <SystemMessages menuList={menuList} /> : ""}
+        {themeConfig?.wsTypes?.includes("user-notification") ? <UserNotification menuList={menuList} /> : ""}
+        <ScreenfullButton style={toolbarStyle} />
+        <SearchMenu menuList={menuList} style={toolbarStyle} />
+        {menu?.length > 1 &&
+          <Dropdown menu={{ items: menu, selectedKeys }}>
+            <Button
+              shape="circle"
+              icon={<UnorderedListOutlined />}
+              size="large"
+              type="link"
+              style={toolbarStyle}
+            />
+          </Dropdown>
+        }
+        <L2MenuQuickBar style={{ color: colorPrimary }} />
+        <L2MenuMessageBar version="v5" style={{ color: colorPrimary }} />
+        {/* <LocaleButton
+          shape="default"
+          size="large"
+          type="link"
+          style={toolbarStyle}
+        />
+        <ThemeButton
+          shape="default"
+          size="large"
+          type="link"
+          style={toolbarStyle}
+        /> */}
+        <UserButton themeConfig={themeConfig} layoutRootPath="v5" logoutUrl="/login2" style={{ padding: 0, color: "#000" }} />
+      </Space>
+    </Layout.Header>
+  );
+};
+
+export default Header;