aldehyde 0.2.489 → 0.2.491

package/src/aldehyde/layout4/sider.tsx

@@ -1,201 +1,201 @@
-import { ConfigProvider, Layout, Menu, MenuProps, Space, Tooltip, theme } 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 { useToken } = theme;
-
-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 { token: { colorPrimary } } = useToken();
-
-  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="v4-layout-sider"
-    >
-      <ConfigProvider
-        theme={{
-          components: {
-            Menu: {
-              itemBg: "transparent",
-              itemColor: "#ffffffd9",
-              itemSelectedColor: colorPrimary,
-              fontSize: 14,
-              subMenuItemBg: "transparent",
-              subMenuItemSelectedColor: "#ffffffd9",
-              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, theme } 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 { useToken } = theme;
+
+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 { token: { colorPrimary } } = useToken();
+
+  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="v4-layout-sider"
+    >
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              itemBg: "transparent",
+              itemColor: "#ffffffd9",
+              itemSelectedColor: colorPrimary,
+              fontSize: 14,
+              subMenuItemBg: "transparent",
+              subMenuItemSelectedColor: "#ffffffd9",
+              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/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%;
+    }
 }