aldehyde 0.2.480 → 0.2.481

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

@@ -1,38 +1,38 @@
-.v4-layout-sider {
-    margin-bottom: 12px;
-    overflow: auto;
-    background: linear-gradient(180deg, rgba(7, 27, 67, 0.1) 0%, rgba(13, 46, 89, 0.2) 100%), radial-gradient(188% 188% at -139% 100%, rgba(39, 115, 255, 0.1) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(488% 488% at -439% 100%, rgba(39, 115, 255, 0.2) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(716% 716% at -667% 100%, rgba(39, 115, 255, 0.5) 0%, rgba(39, 115, 255, 0) 100%);
-    border: 1px solid #17375e;
-    box-shadow: inset 0 0 8px #17375e, inset 0 0 8px #17375e;
-
-    .ant-menu-item:not(.ant-menu-item-selected):hover {
-        background-color: #ffffff0d !important;
-        color: #ffffff !important;
-    }
-
-    .ant-menu-item-selected {
-        background: linear-gradient(90deg, #88EFFF00, rgba(163, 194, 255, 0.2), #88EFFF00);
-    }
-
-    .sider-orgName {
-        height: 48px;
-        width: 100%;
-        font-weight: 600;
-        font-size: 24px;
-        padding: 12px 12px 6px 12px;
-        border-bottom: 1px solid #17375e;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        font-family: YouSheBiaoTiHei;
-        background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
-        -webkit-background-clip: text;
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }
-
-    .sider-menu {
-        height: calc(~"100% - 48px");
-        overflow-y: auto;
-    }
+.v4-layout-sider {
+    margin-bottom: 12px;
+    overflow: auto;
+    background: linear-gradient(180deg, rgba(7, 27, 67, 0.1) 0%, rgba(13, 46, 89, 0.2) 100%), radial-gradient(188% 188% at -139% 100%, rgba(39, 115, 255, 0.1) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(488% 488% at -439% 100%, rgba(39, 115, 255, 0.2) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(716% 716% at -667% 100%, rgba(39, 115, 255, 0.5) 0%, rgba(39, 115, 255, 0) 100%);
+    border: 1px solid #17375e;
+    box-shadow: inset 0 0 8px #17375e, inset 0 0 8px #17375e;
+
+    .ant-menu-item:not(.ant-menu-item-selected):hover {
+        background-color: #ffffff0d !important;
+        color: #ffffff !important;
+    }
+
+    .ant-menu-item-selected {
+        background: linear-gradient(90deg, #88EFFF00, rgba(163, 194, 255, 0.2), #88EFFF00);
+    }
+
+    .sider-orgName {
+        height: 48px;
+        width: 100%;
+        font-weight: 600;
+        font-size: 24px;
+        padding: 12px 12px 6px 12px;
+        border-bottom: 1px solid #17375e;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        font-family: YouSheBiaoTiHei;
+        background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .sider-menu {
+        height: calc(~"100% - 48px");
+        overflow-y: auto;
+    }
 }

package/src/aldehyde/layout4/css/tabs-layout.less

@@ -1,43 +1,43 @@
-.v4-tabs-layout {
-    height: 100%;
-
-    .ant-tabs-nav {
-        margin-bottom: 0;
-    }
-
-    .ant-tabs-tab {
-        min-width: 110px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .ant-tabs-content,
-    .ant-tabs-tabpane {
-        height: 100%;
-    }
-
-    .tabs-children {
-        height: 100%;
-        overflow: auto;
-        border: 1px solid #17375e;
-        box-shadow: inset 0 0 16px #17375e,
-            inset 0 0 16px #17375e;
-        padding: 8px 16px 16px;
-        border-top: 0;
-    }
-
-    /* 组件样式异常覆盖 */
-    .ant-card-head {
-        // background: transparent !important;
-    }
-
-    .actTable {
-        .ant-card {
-            background: transparent;
-            box-shadow: inset 0 0 12px #17375e,
-                inset 0 0 12px #17375e;
-            border: none;
-        }
-    }
+.v4-tabs-layout {
+    height: 100%;
+
+    .ant-tabs-nav {
+        margin-bottom: 0;
+    }
+
+    .ant-tabs-tab {
+        min-width: 110px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .ant-tabs-content,
+    .ant-tabs-tabpane {
+        height: 100%;
+    }
+
+    .tabs-children {
+        height: 100%;
+        overflow: auto;
+        border: 1px solid #17375e;
+        box-shadow: inset 0 0 16px #17375e,
+            inset 0 0 16px #17375e;
+        padding: 8px 16px 16px;
+        border-top: 0;
+    }
+
+    /* 组件样式异常覆盖 */
+    .ant-card-head {
+        // background: transparent !important;
+    }
+
+    .actTable {
+        .ant-card {
+            background: transparent;
+            box-shadow: inset 0 0 12px #17375e,
+                inset 0 0 12px #17375e;
+            border: none;
+        }
+    }
 }

package/src/aldehyde/layout4/header.tsx

@@ -1,190 +1,190 @@
-import { Layout, Menu, MenuProps, Space, theme } from "antd";
-import React, { useEffect, useState, CSSProperties } from "react";
-import { NavLink, useParams, useSearchParams } from "react-router-dom";
-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 { getLeftMostRouteInfo, handlePropsMenuToAntdMenu } from "../layout2/util/menu-util";
-import { MenuType } from "../layout2/type/layout-type";
-import { useLocale } from "../locale/useLocale";
-import { useLayoutContext } from "../layout2/layout-context";
-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 headerBgImg from "./imgs/header-bg.png";
-import menuItemBgImg from "./imgs/menu-item-bg.png";
-import userImg from "./imgs/user.png";
-import IconFont from "../layout2/components/icon-font";
-import { ThemeConfig } from "../tmpl/interface";
-import "./css/header.less";
-
-// 查找当前选中菜单的顶层菜单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;
-}
-
-const { useToken } = theme;
-
-type HeaderPropsType = {
-  systemName: string;
-  menuList: MenuType[];
-  style?: any;
-  logoImg?: string;
-  themeConfig?: ThemeConfig;
-  customHome?: string;
-};
-
-type MenuItem = Required<MenuProps>["items"][number];
-
-const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg, themeConfig, customHome }) => {
-  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
-  const { translate, getLocale } = useLocale();
-  const [menu, setMenu] = useState<MenuItem[]>([]);
-  const [selectedKeys, setSelectedKeys] = useState([]);
-  const [selParentId, setSelParentId] = useState<string>();
-  const { sourceId } = useParams();
-  const [search] = useSearchParams();
-  const menuId: string = search.get("menuId");
-  const { token: { colorPrimary } } = useToken();
-
-  const toolbarStyle: CSSProperties = {
-    width: "100%",
-    height: "100%",
-    boxSizing: "border-box",
-    padding: 0,
-    borderRadius: 0,
-    minWidth: 0,
-    color: colorPrimary,
-    fontSize: "20px"
-  };
-
-  const renderMenuItem = (menuItem) => {
-    const { label, id, disabled, icon } = menuItem;
-    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} className="menu-icon" /> : "";
-    return <div className={`menu-item ${disabled ? "menu-disabled" : ""} ${selParentId === id ? "menu-item-selected" : ""}`} style={{ backgroundImage: selParentId === id ? `url(${menuItemBgImg})` : undefined }}><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space></div>;
-  }
-
-  const handleMenu = (menuItem, floor) => {
-    const { disabled, label, children, icon } = menuItem;
-    if (disabled) {
-      return renderMenuItem(menuItem);
-    }
-    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
-    const { path, target } = getLeftMostRouteInfo(menuItem);
-    if (floor === 0) {
-      return path === null ? (
-        renderMenuItem(menuItem)
-      ) : (
-        <NavLink
-          to={`/${path}`}
-          target={target}
-        >
-          {renderMenuItem(menuItem)}
-        </NavLink>
-      );
-    }
-    if (Array.isArray(children) && !children.length) {
-      return (
-        <NavLink to={`/${path}`} target={target} >
-          <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
-        </NavLink>
-      );
-    }
-    return renderMenuItem(menuItem);
-  };
-
-  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);
-      }
-      setDocumentTitle("");
-    } else if (menuList.length) {
-      const documentTitle =
-        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
-      setDocumentTitle(translate("${" + documentTitle + "}"));
-      setSelectedKeys([sourceId]);
-      setSelParentId(findPathToRoot(menuList, sourceId));
-    }
-  }, [menuList, sourceId]);
-
-  return (
-    <Layout.Header className="v4-layout-header"  >
-      <div className="header-top" style={{ backgroundImage: `url(${headerBgImg})` }}>
-        <NavLink to={customHome || "/v4/home"} style={{ display: "contents" }}>
-          <div className="header-title">
-            {logoImg ? <img src={logoImg} alt="" /> : <IconFont type="icon-xinpian" className="header-title-icon" />}
-            <div className="header-title-text">{translate("${" + systemName + "}")}</div></div>
-        </NavLink>
-        <div className="header-nav">
-          <Menu
-            mode="horizontal"
-            items={menu}
-            selectedKeys={selectedKeys}
-            style={{ background: "transparent", border: "none", width: "100%" }}
-          />
-        </div>
-        <div className="header-right" >
-          {themeConfig?.wsTypes?.includes("sys-messages") ? <SystemMessages menuList={menuList} /> : ""}
-          {themeConfig?.wsTypes?.includes("user-notification") ? <UserNotification menuList={menuList} /> : ""}
-          <Space size="large">
-            <ScreenfullButton style={toolbarStyle} />
-            <SearchMenu menuList={menuList} style={toolbarStyle} />
-            <L2MenuQuickBar style={{ color: colorPrimary, fontSize: "20px" }} />
-            <L2MenuMessageBar version="v4" style={{ color: colorPrimary, fontSize: "20px" }} />
-            {/* <LocaleButton
-              shape="default"
-              size="large"
-              type="link"
-              style={toolbarStyle}
-            />
-            <ThemeButton
-              shape="default"
-              size="large"
-              type="link"
-              style={toolbarStyle}
-            /> */}
-            <div className="header-user">
-              <UserButton themeConfig={themeConfig} layoutRootPath="v4" logoutUrl="/login4" style={{ padding: 0, color: "#fff" }} customRender={<img src={userImg} alt="" className="userButton" />} />
-            </div>
-          </Space>
-        </div>
-      </div>
-    </Layout.Header>
-  );
-};
-
-export default Header;
+import { Layout, Menu, MenuProps, Space, theme } from "antd";
+import React, { useEffect, useState, CSSProperties } from "react";
+import { NavLink, useParams, useSearchParams } from "react-router-dom";
+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 { getLeftMostRouteInfo, handlePropsMenuToAntdMenu } from "../layout2/util/menu-util";
+import { MenuType } from "../layout2/type/layout-type";
+import { useLocale } from "../locale/useLocale";
+import { useLayoutContext } from "../layout2/layout-context";
+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 headerBgImg from "./imgs/header-bg.png";
+import menuItemBgImg from "./imgs/menu-item-bg.png";
+import userImg from "./imgs/user.png";
+import IconFont from "../layout2/components/icon-font";
+import { ThemeConfig } from "../tmpl/interface";
+import "./css/header.less";
+
+// 查找当前选中菜单的顶层菜单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;
+}
+
+const { useToken } = theme;
+
+type HeaderPropsType = {
+  systemName: string;
+  menuList: MenuType[];
+  style?: any;
+  logoImg?: string;
+  themeConfig?: ThemeConfig;
+  customHome?: string;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+
+const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg, themeConfig, customHome }) => {
+  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
+  const { translate, getLocale } = useLocale();
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [selParentId, setSelParentId] = useState<string>();
+  const { sourceId } = useParams();
+  const [search] = useSearchParams();
+  const menuId: string = search.get("menuId");
+  const { token: { colorPrimary } } = useToken();
+
+  const toolbarStyle: CSSProperties = {
+    width: "100%",
+    height: "100%",
+    boxSizing: "border-box",
+    padding: 0,
+    borderRadius: 0,
+    minWidth: 0,
+    color: colorPrimary,
+    fontSize: "20px"
+  };
+
+  const renderMenuItem = (menuItem) => {
+    const { label, id, disabled, icon } = menuItem;
+    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} className="menu-icon" /> : "";
+    return <div className={`menu-item ${disabled ? "menu-disabled" : ""} ${selParentId === id ? "menu-item-selected" : ""}`} style={{ backgroundImage: selParentId === id ? `url(${menuItemBgImg})` : undefined }}><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space></div>;
+  }
+
+  const handleMenu = (menuItem, floor) => {
+    const { disabled, label, children, icon } = menuItem;
+    if (disabled) {
+      return renderMenuItem(menuItem);
+    }
+    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
+    const { path, target } = getLeftMostRouteInfo(menuItem);
+    if (floor === 0) {
+      return path === null ? (
+        renderMenuItem(menuItem)
+      ) : (
+        <NavLink
+          to={`/${path}`}
+          target={target}
+        >
+          {renderMenuItem(menuItem)}
+        </NavLink>
+      );
+    }
+    if (Array.isArray(children) && !children.length) {
+      return (
+        <NavLink to={`/${path}`} target={target} >
+          <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
+        </NavLink>
+      );
+    }
+    return renderMenuItem(menuItem);
+  };
+
+  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);
+      }
+      setDocumentTitle("");
+    } else if (menuList.length) {
+      const documentTitle =
+        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
+      setDocumentTitle(translate("${" + documentTitle + "}"));
+      setSelectedKeys([sourceId]);
+      setSelParentId(findPathToRoot(menuList, sourceId));
+    }
+  }, [menuList, sourceId]);
+
+  return (
+    <Layout.Header className="v4-layout-header"  >
+      <div className="header-top" style={{ backgroundImage: `url(${headerBgImg})` }}>
+        <NavLink to={customHome || "/v4/home"} style={{ display: "contents" }}>
+          <div className="header-title">
+            {logoImg ? <img src={logoImg} alt="" /> : <IconFont type="icon-xinpian" className="header-title-icon" />}
+            <div className="header-title-text">{translate("${" + systemName + "}")}</div></div>
+        </NavLink>
+        <div className="header-nav">
+          <Menu
+            mode="horizontal"
+            items={menu}
+            selectedKeys={selectedKeys}
+            style={{ background: "transparent", border: "none", width: "100%" }}
+          />
+        </div>
+        <div className="header-right" >
+          {themeConfig?.wsTypes?.includes("sys-messages") ? <SystemMessages menuList={menuList} /> : ""}
+          {themeConfig?.wsTypes?.includes("user-notification") ? <UserNotification menuList={menuList} /> : ""}
+          <Space size="large">
+            <ScreenfullButton style={toolbarStyle} />
+            <SearchMenu menuList={menuList} style={toolbarStyle} />
+            <L2MenuQuickBar style={{ color: colorPrimary, fontSize: "20px" }} />
+            <L2MenuMessageBar version="v4" style={{ color: colorPrimary, fontSize: "20px" }} />
+            {/* <LocaleButton
+              shape="default"
+              size="large"
+              type="link"
+              style={toolbarStyle}
+            />
+            <ThemeButton
+              shape="default"
+              size="large"
+              type="link"
+              style={toolbarStyle}
+            /> */}
+            <div className="header-user">
+              <UserButton themeConfig={themeConfig} layoutRootPath="v4" logoutUrl="/login4" style={{ padding: 0, color: "#fff" }} customRender={<img src={userImg} alt="" className="userButton" />} />
+            </div>
+          </Space>
+        </div>
+      </div>
+    </Layout.Header>
+  );
+};
+
+export default Header;

package/src/aldehyde/layout4/main.tsx

@@ -1,29 +1,29 @@
-import React from "react";
-import { Layout } from "antd";
-import TabsLayout from "./components/tabs-layout";
-import { MenuType } from "../layout2/type/layout-type";
-
-type MainPropsType = {
-  style?: any;
-  children?: React.ReactNode;
-  menuList?: MenuType[];
-};
-
-const Main: React.FC<MainPropsType> = ({ style, children, menuList }) => {
-  return (
-    <Layout.Content style={{ overflow: "auto", ...style }}>
-      <div
-        style={{
-          width: "100%",
-          height: "100%",
-          overflow: "auto",
-          padding: "0 12px 12px 12px",
-        }}
-      >
-        {children ? children : <TabsLayout menuList={menuList} />}
-      </div>
-    </Layout.Content>
-  );
-};
-
-export default Main;
+import React from "react";
+import { Layout } from "antd";
+import TabsLayout from "./components/tabs-layout";
+import { MenuType } from "../layout2/type/layout-type";
+
+type MainPropsType = {
+  style?: any;
+  children?: React.ReactNode;
+  menuList?: MenuType[];
+};
+
+const Main: React.FC<MainPropsType> = ({ style, children, menuList }) => {
+  return (
+    <Layout.Content style={{ overflow: "auto", ...style }}>
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          overflow: "auto",
+          padding: "0 12px 12px 12px",
+        }}
+      >
+        {children ? children : <TabsLayout menuList={menuList} />}
+      </div>
+    </Layout.Content>
+  );
+};
+
+export default Main;