aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/layout5/sider.tsx

@@ -1,235 +1,235 @@
-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 { generate } from "@ant-design/colors";
-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;
-  systemName: string;
-  logoImg?: string;
-  themeConfig?: ThemeConfig;
-  customHome?: string;
-};
-
-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, systemName, logoImg, themeConfig, customHome }) => {
-  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 colors = generate(colorPrimary);
-
-  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 className="v5-layout-sider" collapsed={collapsed} collapsedWidth={0} width={230} style={{ background: colors[0] }}>
-      <NavLink
-        style={{
-          width: "100%",
-          height: "55px",
-          display: "flex",
-          paddingLeft: "10px",
-          alignItems: "center",
-          fontSize: "18px",
-          userSelect: "none",
-          color: "inherit",
-          borderBottom: "1px solid rgba(0,21,41,.08)",
-        }}
-        to={customHome || "/v5/home"}
-      >
-        {logoImg ? <img
-          className="header-logo"
-          src={logoImg}
-          alt="home"
-        /> : ""}
-        <Tooltip title={translate("${" + systemName + "}")}>
-          <span
-            style={{
-              width: "100%",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              fontWeight: "bolder",
-              color: "rgba(0,0,0,0.88)",
-            }}
-          >
-            {translate("${" + systemName + "}")}
-          </span>
-        </Tooltip>
-      </NavLink>
-      <ConfigProvider
-        theme={{
-          components: {
-            Menu: {
-              itemBg: "transparent",
-              itemHoverColor: "#222",
-              itemColor: "#222",
-              itemSelectedBg: colors[1],
-              groupTitleColor: "#222",
-              fontSize: 14,
-              iconSize: 16
-            },
-          },
-        }}
-      >
-        {orgName ? <div className="sider-orgName">{orgName}</div> : ""}
-        <Menu
-          mode="inline"
-          items={menu}
-          selectedKeys={selectedKeys}
-          openKeys={openKeys}
-          inlineCollapsed={false}
-          style={{
-            userSelect: "none",
-            borderInlineEnd: "none",
-            height: orgName ? "calc(100% - 101px)" : "calc(100% - 55px)",
-            overflowY: "auto",
-          }}
-          onOpenChange={(val) => setOpenKeys([...val])}
-        />
-      </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 { generate } from "@ant-design/colors";
+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;
+  systemName: string;
+  logoImg?: string;
+  themeConfig?: ThemeConfig;
+  customHome?: string;
+};
+
+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, systemName, logoImg, themeConfig, customHome }) => {
+  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 colors = generate(colorPrimary);
+
+  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 className="v5-layout-sider" collapsed={collapsed} collapsedWidth={0} width={230} style={{ background: colors[0] }}>
+      <NavLink
+        style={{
+          width: "100%",
+          height: "55px",
+          display: "flex",
+          paddingLeft: "10px",
+          alignItems: "center",
+          fontSize: "18px",
+          userSelect: "none",
+          color: "inherit",
+          borderBottom: "1px solid rgba(0,21,41,.08)",
+        }}
+        to={customHome || "/v5/home"}
+      >
+        {logoImg ? <img
+          className="header-logo"
+          src={logoImg}
+          alt="home"
+        /> : ""}
+        <Tooltip title={translate("${" + systemName + "}")}>
+          <span
+            style={{
+              width: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              fontWeight: "bolder",
+              color: "rgba(0,0,0,0.88)",
+            }}
+          >
+            {translate("${" + systemName + "}")}
+          </span>
+        </Tooltip>
+      </NavLink>
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              itemBg: "transparent",
+              itemHoverColor: "#222",
+              itemColor: "#222",
+              itemSelectedBg: colors[1],
+              groupTitleColor: "#222",
+              fontSize: 14,
+              iconSize: 16
+            },
+          },
+        }}
+      >
+        {orgName ? <div className="sider-orgName">{orgName}</div> : ""}
+        <Menu
+          mode="inline"
+          items={menu}
+          selectedKeys={selectedKeys}
+          openKeys={openKeys}
+          inlineCollapsed={false}
+          style={{
+            userSelect: "none",
+            borderInlineEnd: "none",
+            height: orgName ? "calc(100% - 101px)" : "calc(100% - 55px)",
+            overflowY: "auto",
+          }}
+          onOpenChange={(val) => setOpenKeys([...val])}
+        />
+      </ConfigProvider>
+    </Layout.Sider>
+  );
+};
+
+export default Sider;

package/src/aldehyde/list/calendar/index.less

@@ -1,21 +1,21 @@
-.calendar {
-    .calendar-item {
-        padding: 0 8px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 8px;
-
-        .labelColumn {
-            margin-right: 8px;
-        }
-
-        .primaryColumn {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            text-align: left;
-            width: -webkit-fill-available;
-        }
-    }
+.calendar {
+    .calendar-item {
+        padding: 0 8px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+
+        .labelColumn {
+            margin-right: 8px;
+        }
+
+        .primaryColumn {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-align: left;
+            width: -webkit-fill-available;
+        }
+    }
 }