aldehyde 0.2.339 → 0.2.342

package/src/aldehyde/layout/menu/l2menu-quick-bar.tsx

@@ -10,6 +10,7 @@ import IconFont from "../../layout2/components/icon-font";
 
 interface L2MenuQuickBarProps {
   backgroudColor?: string;
+  style?: CSSProperties;
 }
 
 interface QuickBar {
@@ -76,7 +77,7 @@ class L2MenuQuickBar extends React.PureComponent<
   };
 
   renderQuickBar = (quickBars: QuickBar[]) => {
-    const { backgroudColor } = this.props;
+    const { backgroudColor, style = {} } = this.props;
     let total: number = 0;
     const syyy: CSSProperties = {
       "--message-bar-backgroupd": backgroudColor,
@@ -105,27 +106,43 @@ class L2MenuQuickBar extends React.PureComponent<
     if (!quickBars || quickBars.length == 0) {
       return;
     } else if (quickBars.length == 1) {
-      let quickBar = quickBars[0];
-      const l2Menu = quickBar.l2Menu;
+      let l2Menu = quickBars[0].l2Menu;
       return (
-        <div
-          className={"message-bar"}
-          style={syyy}
-          onClick={() => this.showDraw(quickBar.l2Menu.id)}
-        >
-          <span style={{ fontSize: "20px" }}>
-            <AppstoreOutlined />
-          </span>
-        </div>
+        <Button
+          onClick={() => this.showDraw(l2Menu.id)}
+          icon={<AppstoreOutlined />}
+          shape="default"
+          size="large"
+          type="text"
+          style={{
+            width: "100%",
+            height: "100%",
+            boxSizing: "border-box",
+            padding: 0,
+            borderRadius: 0,
+            ...syyy,
+            ...style
+          }}
+        />
       );
     } else {
       return (
         <Dropdown overlay={menu} placement="bottomCenter">
-          <div className={"message-bar"} style={syyy}>
-            <span style={{ fontSize: "20px" }}>
-              <AppstoreOutlined />
-            </span>
-          </div>
+          <Button
+            icon={<AppstoreOutlined />}
+            shape="default"
+            size="large"
+            type="text"
+            style={{
+              width: "100%",
+              height: "100%",
+              boxSizing: "border-box",
+              padding: 0,
+              borderRadius: 0,
+              ...syyy,
+              ...style
+            }}
+          />
         </Dropdown>
       );
     }

package/src/aldehyde/layout2/components/theme-button.tsx

@@ -7,7 +7,7 @@ import { KeepAliveTab } from "../../hooks/use-tabs";
 const { useToken } = theme;
 
 const regex = /#\/v\d+\/(.*)/;
-const themes = [{ label: "默认", value: "v2" }, { label: "科技风一", value: "v3" }, { label: "科技风二", value: "v4" }];
+const themes = [{ label: "默认", value: "v2" }, { label: "科技风一", value: "v3" }, { label: "科技风二", value: "v4" }, { label: "侧边布局", value: "v5" }];
 
 const ThemeButton = (props: ButtonProps) => {
     const { token } = useToken();

package/src/aldehyde/layout2/components/user-button.tsx

@@ -7,6 +7,7 @@ import {
   SettingOutlined,
   UnlockOutlined,
   UserOutlined,
+  CompressOutlined
 } from "@ant-design/icons";
 import { Button, ButtonProps, Dropdown, GetProp, MenuProps } from "antd";
 import HcserviceV3 from "../../tmpl/hcservice-v3";
@@ -35,7 +36,7 @@ interface Props extends ButtonProps {
 const UserButton: React.FC<Props> = (props) => {
   const { logoutUrl = "/login2", customRender } = props;
   // translate
-  const { translate, changeSiderCollapsed, getSiderCollapsed } = useLocale();
+  const { translate, changeSiderCollapsed, getSiderCollapsed, compactTheme, changeCompactTheme } = useLocale();
   const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
     defaultValue: [],
   });
@@ -139,7 +140,14 @@ const UserButton: React.FC<Props> = (props) => {
       show: () => {
         return isLogin && userConfig.cleanCachable;
       },
-    }, {
+    },
+    {
+      label: <span onClick={() => changeCompactTheme()}>{compactTheme ? "默认主题" : "紧凑主题"}</span>,
+      key: "compactTheme",
+      icon: <CompressOutlined />,
+      show: () => isLogin,
+    },
+    {
       label: (
         <span onClick={() => changeSiderCollapsed()}>
           {getSiderCollapsed() ? translate("${显示侧边栏}") : translate("${隐藏侧边栏}")}

package/src/aldehyde/layout2/header.tsx

@@ -239,9 +239,9 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style }) => {
             flexDirection: "row",
           }}
         >
-          <Space size={28}>
-            <L2MenuQuickBar />
-            <L2MenuMessageBar />
+          <Space size="large">
+            <L2MenuQuickBar style={{ color: "#fff" }} />
+            <L2MenuMessageBar version="v2" style={{ color: "#fff" }} />
             <LocaleButton
               shape="default"
               size="large"
@@ -250,7 +250,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style }) => {
                 width: "100%",
                 height: "100%",
                 boxSizing: "border-box",
-                padding: "0 10px",
+                padding: 0,
                 borderRadius: 0,
                 color: "#fff",
               }}
@@ -262,7 +262,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style }) => {
                 width: "100%",
                 height: "100%",
                 boxSizing: "border-box",
-                padding: "0 10px",
+                padding: 0,
                 borderRadius: 0,
                 color: "#fff",
               }} />

package/src/aldehyde/layout2/page.tsx

@@ -1,4 +1,4 @@
-import { Layout, theme } from "antd";
+import { Layout, theme, ConfigProvider } from "antd";
 import React, {
   useEffect,
   useRef,
@@ -173,7 +173,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
     documentTitle,
     updateMenuItemIdToFirstFloorIdxMap,
   } = useLayoutContext();
-  const { getSiderCollapsed } = useLocale();
+  const { getSiderCollapsed, compactTheme } = useLocale();
   const {
     token: { colorPrimary },
   } = useToken();
@@ -213,13 +213,18 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
           position: "absolute",
         }}
       >
-        <Layout style={{ height: "100%" }}>
-          <Header systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
-          <Layout>
-            <Sider menuList={menu} collapsed={getSiderCollapsed()}></Sider>
-            <Main>{props.children}</Main>
+        <ConfigProvider
+          theme={{
+            algorithm: compactTheme ? [theme.compactAlgorithm] : [],
+          }}>
+          <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
+            <Header systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
+            <Layout>
+              <Sider menuList={menu} collapsed={getSiderCollapsed()}></Sider>
+              <Main>{props.children}</Main>
+            </Layout>
           </Layout>
-        </Layout>
+        </ConfigProvider>
       </div>
     </DocumentTitle>
   );

package/src/aldehyde/layout3/header.tsx

@@ -126,9 +126,9 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList }) => {
         <div className="header-time"><Time /></div>
         <div className="header-title">{translate("${" + systemName + "}")}</div>
         <div className="header-right" >
-          <Space size={28}>
-            <L2MenuQuickBar />
-            <L2MenuMessageBar />
+          <Space size="large" >
+            <L2MenuQuickBar style={{ color: "#009BFF" }} />
+            <L2MenuMessageBar version="v3" style={{ color: "#009BFF" }} />
             <LocaleButton
               shape="default"
               size="large"

package/src/aldehyde/layout3/page.tsx

@@ -28,7 +28,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   //清空缓存
   const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
   const { documentTitle, updateMenuItemIdToFirstFloorIdxMap } = useLayoutContext();
-  const { getSiderCollapsed } = useLocale();
+  const { getSiderCollapsed, compactTheme } = useLocale();
   const { token: { colorPrimary } } = useToken();
 
   useEffect(() => {
@@ -51,7 +51,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
         <ConfigProvider
           getPopupContainer={() => pageRef.current}
           theme={{
-            algorithm: [theme.darkAlgorithm],
+            algorithm: compactTheme ? [theme.darkAlgorithm, theme.compactAlgorithm] : [theme.darkAlgorithm],
             token: { colorBgBase: "#041B3B" },
             components: {
               Tabs: {
@@ -64,7 +64,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
           modal={{ className: "v3-antd-modal" }}
           card={{ className: "v3-antd-card" }}
         >
-          <Layout style={{ height: "100%" }}>
+          <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
             <Header systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
             <Layout>
               <Sider menuList={menu} collapsed={getSiderCollapsed()}></Sider>

package/src/aldehyde/layout4/header.tsx

@@ -138,9 +138,9 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList }) => {
           />
         </div>
         <div className="header-right" >
-          <Space size={28}>
-            <L2MenuQuickBar />
-            <L2MenuMessageBar />
+          <Space size="large">
+            <L2MenuQuickBar style={{ color: colorPrimary, fontSize: "20px" }} />
+            <L2MenuMessageBar version="v4" style={{ color: colorPrimary, fontSize: "20px" }} />
             <LocaleButton
               shape="default"
               size="large"

package/src/aldehyde/layout4/page.tsx

@@ -28,7 +28,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   //清空缓存
   const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
   const { documentTitle, updateMenuItemIdToFirstFloorIdxMap } = useLayoutContext();
-  const { getSiderCollapsed } = useLocale();
+  const { getSiderCollapsed, compactTheme } = useLocale();
   const { token: { colorPrimary } } = useToken();
 
   useEffect(() => {
@@ -51,7 +51,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
         <ConfigProvider
           getPopupContainer={() => pageRef.current}
           theme={{
-            algorithm: [theme.darkAlgorithm],
+            algorithm: compactTheme ? [theme.darkAlgorithm, theme.compactAlgorithm] : [theme.darkAlgorithm],
             token: {
               colorBgBase: "#001325",
               colorBorderSecondary: "#17375e",
@@ -67,7 +67,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
           modal={{ className: "v4-antd-modal" }}
           card={{ className: "v4-antd-card" }}
         >
-          <Layout style={{ height: "100%" }}>
+          <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
             <Header systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
             <Layout>
               <Sider menuList={menu} collapsed={getSiderCollapsed()}></Sider>

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

@@ -0,0 +1,32 @@
+.v5-layout-header {
+    position: relative;
+    z-index: 10;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    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);
+    }
+}

package/src/aldehyde/layout5/header.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from "react";
+import { Layout, Space, theme, Button, MenuProps, Dropdown } from "antd";
+import { NavLink, useParams, useSearchParams } 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 { 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 "./css/header.css";
+
+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[];
+};
+type MenuItem = Required<MenuProps>["items"][number];
+
+const Header: React.FC<HeaderPropsType> = ({ menuList }) => {
+  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 { 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]);
+
+  return (
+    <Layout.Header className="v5-layout-header" >
+      <div className="sider-collapsed-button" style={{ insetInlineStart: getSiderCollapsed() ? 6 : -13 }} onClick={() => changeSiderCollapsed()}>
+        {getSiderCollapsed() ? <RightOutlined /> : <LeftOutlined />}
+      </div>
+      <Space size="large" style={{ height: "100%" }}>
+        {menu?.length > 1 &&
+          <Dropdown menu={{ items: menu, selectedKeys }}>
+            <Button
+              shape="circle"
+              icon={<UnorderedListOutlined />}
+              size="large"
+              type="text"
+              style={{
+                width: "100%",
+                height: "100%",
+                boxSizing: "border-box",
+                padding: 0,
+                borderRadius: 0,
+                minWidth: 0,
+                color: colorPrimary,
+              }}
+            />
+          </Dropdown>
+        }
+        <L2MenuQuickBar style={{ color: colorPrimary }} />
+        <L2MenuMessageBar version="v5" style={{ color: colorPrimary }} />
+        <LocaleButton
+          shape="default"
+          size="large"
+          type="text"
+          style={{
+            width: "100%",
+            height: "100%",
+            boxSizing: "border-box",
+            padding: 0,
+            borderRadius: 0,
+            color: colorPrimary,
+          }}
+        />
+        <ThemeButton
+          shape="default"
+          size="large"
+          type="text"
+          style={{
+            width: "100%",
+            height: "100%",
+            boxSizing: "border-box",
+            padding: 0,
+            borderRadius: 0,
+            color: colorPrimary,
+          }}
+        />
+        <UserButton logoutUrl="/login2" style={{ padding: 0, color: "#000" }} />
+      </Space>
+    </Layout.Header>
+  );
+};
+
+export default Header;

package/src/aldehyde/layout5/page.tsx

@@ -0,0 +1,79 @@
+import { Layout, theme, ConfigProvider } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import DocumentTitle from "react-document-title";
+import { useSessionStorageState } from "ahooks";
+import { generate } from "@ant-design/colors";
+import Header from "./header";
+import Sider from "./sider";
+import Main from "../layout2/main";
+import { useVarCssColor } from "../hooks/useVarCssColor";
+import { LayoutProvider, useLayoutContext } from "../layout2/layout-context";
+import { MenuType } from "../layout2/type/layout-type";
+import Units from '../units';
+import { useLocale } from "../locale/useLocale";
+import { KeepAliveTab } from "../hooks/use-tabs";
+import { getMenuConfig } from "../layout2/page";
+
+const { useToken } = theme;
+
+type PagePropsType = {
+  children?: React.ReactNode;
+};
+
+const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
+  const [systemName, setSystemName] = useState("");
+  const [menu, setMenu] = useState<MenuType[]>([]);
+  const pageRef = useRef<HTMLDivElement>(undefined); // page ref
+  //清空缓存
+  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
+  const { documentTitle, updateMenuItemIdToFirstFloorIdxMap } = useLayoutContext();
+  const { getSiderCollapsed, compactTheme } = useLocale();
+  const { token: { colorPrimary } } = useToken();
+
+  useEffect(() => {
+    getMenuConfig("v5").then(({ menu, systemName: name }) => {
+      setSystemName(name);
+      setMenu(menu);
+      updateMenuItemIdToFirstFloorIdxMap(menu);
+    });
+    useVarCssColor(generate(colorPrimary));
+    localStorage.setItem("version", "v5");
+    window.addEventListener('beforeunload', () => { setKeepAliveTabs([]); });
+  }, []);
+
+  return (
+    <DocumentTitle title={documentTitle}>
+      <div
+        ref={pageRef}
+        style={{
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+        }}
+      >
+        <ConfigProvider
+          theme={{
+            algorithm: compactTheme ? [theme.compactAlgorithm] : [],
+          }}>
+          <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
+            <Sider menuList={menu} collapsed={getSiderCollapsed()} systemName={systemName ? systemName : Units.programName_NavLeft()} />
+            <Layout>
+              <Header menuList={menu} />
+              <Main>{props.children}</Main>
+            </Layout>
+          </Layout>
+        </ConfigProvider>
+      </div>
+    </DocumentTitle>
+  );
+};
+
+const ContextPage: React.FC<PagePropsType> = (props: PagePropsType) => {
+  return (
+    <LayoutProvider>
+      <Page>{props.children}</Page>
+    </LayoutProvider>
+  );
+};
+
+export default ContextPage;