aldehyde 0.2.197 → 0.2.199

package/src/aldehyde/layout/header/index.tsx

@@ -1,145 +1,145 @@
-import React, { CSSProperties } from "react";
-import { Col, ConfigProvider, Layout, Menu, Row, theme } from "antd";
-import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
-import "./index.css";
-import Block, { BlockProps } from "../menu/block";
-import L2MenuMessageBar from "../menu/l2menu-message-bar";
-import L2MenuQuickBar from "../menu/l2menu-quick-bar";
-import UserBar from "../menu/user-bar";
-import LocaleButton from "../../locale/LocaleButton";
-
-const { Header: AntdHeader } = Layout;
-
-interface HeaderProps extends BlockProps {
-  toggle: any;
-  collapsed: boolean;
-}
-
-interface HeaderState {}
-
-const { useToken } = theme;
-const Header: React.FC<HeaderProps> = (props) => {
-  const { token } = useToken();
-  let { collapsed } = props;
-  const syyy: CSSProperties = {
-    "--antd-color-primary": token.colorPrimary,
-  } as CSSProperties;
-  return (
-    <AntdHeader  style={{position: 'sticky',
-        top: 0,
-        zIndex: 100,
-        width: '100%',
-         padding: 0, height: "auto", minWidth: "760px" }}>
-      {/*<Row  justify="space-around" align="middle" style={{'background':'#0f4da1',height:'100px'}}>*/}
-      {/*      <Col span={12}>*/}
-      {/*          <img style={{height:'80px'}} src={Logo}></img>*/}
-      {/*      </Col>*/}
-      {/*      <Col  span={4}>*/}
-
-      {/*      </Col>*/}
-      {/*  </Row>*/}
-      <Row
-        className="header-top"
-        style={syyy}
-        wrap={false}
-        justify={"space-between"}
-      >
-        <Col className="header-col" style={{ flex: 1 }}>
-          <div style={{ float: "left" }}>
-            {React.createElement(
-              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
-              {
-                className: "trigger",
-                onClick: () => {
-                  props.toggle();
-                },
-              }
-            )}
-          </div>
-          <div className="header-menu">
-            <Block {...props} activeColor={token.colorPrimary} />
-          </div>
-        </Col>
-        <Col
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <div className="right-block">
-            <L2MenuQuickBar
-              backgroudColor={token.colorPrimary}
-            ></L2MenuQuickBar>
-          </div>
-
-          <div className="right-block">
-            <L2MenuMessageBar
-              backgroudColor={token.colorPrimary}
-            ></L2MenuMessageBar>
-          </div>
-
-          <div className="right-block">
-            <ConfigProvider
-              theme={{
-                components: {
-                  Button: {
-                    colorText: "rgb(0, 136, 204)",
-                    colorBgTextHover: "var(--antd-color-primary)",
-                  },
-                },
-              }}
-            >
-              <LocaleButton
-                shape="default"
-                size="large"
-                type="text"
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  boxSizing: "border-box",
-                  padding: "0 10px",
-                  borderRadius: 0,
-                }}
-              ></LocaleButton>
-            </ConfigProvider>
-          </div>
-
-          <div className="right-block" style={{ width: 80 }}>
-            <UserBar backgroudColor={token.colorPrimary}></UserBar>
-          </div>
-        </Col>
-        {/* <Col style={{ width: "100%" }}>
-          <L2MenuQuickBar backgroudColor={token.colorPrimary}></L2MenuQuickBar>
-        </Col>
-        <Col style={{ width: "100%" }}>
-          <L2MenuMessageBar
-            backgroudColor={token.colorPrimary}
-          ></L2MenuMessageBar>
-        </Col>
-        <Col
-          style={{
-            width: "100%",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <LocaleButton></LocaleButton>
-        </Col>
-        <Col
-          style={{
-            width: "100%",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <UserBar backgroudColor={token.colorPrimary}></UserBar>
-        </Col> */}
-      </Row>
-    </AntdHeader>
-  );
-};
-
-export default Header;
+import React, { CSSProperties } from "react";
+import { Col, ConfigProvider, Layout, Menu, Row, theme } from "antd";
+import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
+import "./index.css";
+import Block, { BlockProps } from "../menu/block";
+import L2MenuMessageBar from "../menu/l2menu-message-bar";
+import L2MenuQuickBar from "../menu/l2menu-quick-bar";
+import UserBar from "../menu/user-bar";
+import LocaleButton from "../../locale/LocaleButton";
+
+const { Header: AntdHeader } = Layout;
+
+interface HeaderProps extends BlockProps {
+  toggle: any;
+  collapsed: boolean;
+}
+
+interface HeaderState {}
+
+const { useToken } = theme;
+const Header: React.FC<HeaderProps> = (props) => {
+  const { token } = useToken();
+  let { collapsed } = props;
+  const syyy: CSSProperties = {
+    "--antd-color-primary": token.colorPrimary,
+  } as CSSProperties;
+  return (
+    <AntdHeader  style={{position: 'sticky',
+        top: 0,
+        zIndex: 100,
+        width: '100%',
+         padding: 0, height: "auto", minWidth: "760px" }}>
+      {/*<Row  justify="space-around" align="middle" style={{'background':'#0f4da1',height:'100px'}}>*/}
+      {/*      <Col span={12}>*/}
+      {/*          <img style={{height:'80px'}} src={Logo}></img>*/}
+      {/*      </Col>*/}
+      {/*      <Col  span={4}>*/}
+
+      {/*      </Col>*/}
+      {/*  </Row>*/}
+      <Row
+        className="header-top"
+        style={syyy}
+        wrap={false}
+        justify={"space-between"}
+      >
+        <Col className="header-col" style={{ flex: 1 }}>
+          <div style={{ float: "left" }}>
+            {React.createElement(
+              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
+              {
+                className: "trigger",
+                onClick: () => {
+                  props.toggle();
+                },
+              }
+            )}
+          </div>
+          <div className="header-menu">
+            <Block {...props} activeColor={token.colorPrimary} />
+          </div>
+        </Col>
+        <Col
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <div className="right-block">
+            <L2MenuQuickBar
+              backgroudColor={token.colorPrimary}
+            ></L2MenuQuickBar>
+          </div>
+
+          <div className="right-block">
+            <L2MenuMessageBar
+              backgroudColor={token.colorPrimary}
+            ></L2MenuMessageBar>
+          </div>
+
+          <div className="right-block">
+            <ConfigProvider
+              theme={{
+                components: {
+                  Button: {
+                    colorText: "rgb(0, 136, 204)",
+                    colorBgTextHover: "var(--antd-color-primary)",
+                  },
+                },
+              }}
+            >
+              <LocaleButton
+                shape="default"
+                size="large"
+                type="text"
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  boxSizing: "border-box",
+                  padding: "0 10px",
+                  borderRadius: 0,
+                }}
+              ></LocaleButton>
+            </ConfigProvider>
+          </div>
+
+          <div className="right-block" style={{ width: 80 }}>
+            <UserBar backgroudColor={token.colorPrimary}></UserBar>
+          </div>
+        </Col>
+        {/* <Col style={{ width: "100%" }}>
+          <L2MenuQuickBar backgroudColor={token.colorPrimary}></L2MenuQuickBar>
+        </Col>
+        <Col style={{ width: "100%" }}>
+          <L2MenuMessageBar
+            backgroudColor={token.colorPrimary}
+          ></L2MenuMessageBar>
+        </Col>
+        <Col
+          style={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <LocaleButton></LocaleButton>
+        </Col>
+        <Col
+          style={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <UserBar backgroudColor={token.colorPrimary}></UserBar>
+        </Col> */}
+      </Row>
+    </AntdHeader>
+  );
+};
+
+export default Header;

package/src/aldehyde/layout/menu/block.css

@@ -1,7 +1,7 @@
-.menu-item > div {
-  color: var(--antd-color-primary) !important;
-}
-
-.ant-menu:has(.menu-item) > .ant-menu-submenu-selected {
-  background-color: var(--antd-color-primary) !important;
-}
+.menu-item > div {
+  color: var(--antd-color-primary) !important;
+}
+
+.ant-menu:has(.menu-item) > .ant-menu-submenu-selected {
+  background-color: var(--antd-color-primary) !important;
+}

package/src/aldehyde/layout/menu/block.tsx

@@ -1,174 +1,174 @@
-import React, { CSSProperties } from "react";
-import { Dropdown, Menu, MenuItemProps, MenuProps } from "antd";
-import { BlockMenu, Level2Menu } from "../../tmpl/interface";
-import MenuRender from "./menu-render";
-import { LocaleContext } from "../../locale/LocaleProvider";
-import "./block.css";
-import { NavLink } from "react-router-dom";
-import { inherits } from "util";
-
-export interface BlockProps {
-  blocks: BlockMenu[];
-  currentBlockId?: string;
-  currentL2MenuId?: string;
-  activeColor?: string;
-}
-interface BlockState {}
-
-class Block extends React.PureComponent<BlockProps, BlockState> {
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-  constructor(props) {
-    super(props);
-  }
-
-  getSubMenu = (blockMenu: BlockMenu) => {
-    return MenuRender.getMenu(blockMenu, null);
-  };
-
-  findBlockId = (blocks: BlockMenu[], currentL2MenuId: string) => {
-    let blockId: string = undefined;
-    for (const block of blocks) {
-      if (block.l1Menus) {
-        for (const menul1 of block.l1Menus) {
-          for (const menul2 of menul1.l2Menus) {
-            if (menul2.id === currentL2MenuId) {
-              blockId = block.id;
-              return blockId;
-            }
-          }
-        }
-      } else {
-        for (const menul1 of block.items) {
-          for (const menul2 of menul1.items) {
-            if (menul2.id === currentL2MenuId) {
-              blockId = block.id;
-              return blockId;
-            }
-          }
-        }
-      }
-    }
-    return blockId;
-  };
-
-  get computedBlocks() {
-    const { translate } = this.context;
-    const blocks: BlockMenu[] = JSON.parse(JSON.stringify(this.props.blocks));
-
-    blocks &&
-      Array.isArray(blocks) &&
-      blocks.forEach((block) => {
-        block.title = translate("${" + block.title + "}");
-
-        const dropdownMenu = block.items;
-
-        dropdownMenu &&
-          Array.isArray(dropdownMenu) &&
-          dropdownMenu.forEach((menu) => {
-            menu.title = translate("${" + menu.title + "}");
-          });
-      });
-
-    return blocks;
-  }
-
-  get menuItems() {
-    const blocks = this.computedBlocks;
-
-    const items: MenuProps["items"] = [];
-
-    console.log(items);
-
-    blocks.forEach((block) => {
-      const item: typeof items[0] = {
-        className: "menu-item",
-        key: block.id,
-        children: this.getSubMenu(block),
-      };
-
-      item.label = (
-        <NavLink
-          to={this.getDefaultIndexPath(block)}
-          style={{
-            color: "inherit",
-            width: "100%",
-            height: "100%",
-            display: "block",
-          }}
-        >
-          {block.title}
-        </NavLink>
-      );
-
-      items.push(item);
-    });
-
-    return items;
-  }
-
-  getDefaultIndexPath(menuItem) {
-    if (menuItem.items) return this.getDefaultIndexPath(menuItem.items[0]);
-    return menuItem.path;
-  }
-
-  render() {
-    const { currentBlockId, blocks, currentL2MenuId, activeColor } = this.props;
-
-    const syyy = {
-      "--header-block-active-bottom-color": activeColor
-        ? activeColor
-        : "#1E90FF",
-      "--header-top-active-background": activeColor ? activeColor : "#1E90FF",
-    } as CSSProperties;
-
-    if (!blocks || blocks.length < 1) {
-      return <></>;
-    }
-    let blockId = currentBlockId;
-    if (currentL2MenuId && !blockId) {
-      blockId = this.findBlockId(blocks, currentL2MenuId);
-    }
-    if (!blockId) {
-      blockId = blocks.at(0).id;
-    }
-
-    // return this.computedBlocks.map((item, index) => {
-    //   return (
-    //     <div
-    //       key={index}
-    //       className={`${item.id == blockId ? "active" : ""} header-block`}
-    //       style={syyy}
-    //     >
-    //       <Dropdown menu={{ items: this.getSubMenu(item) }}>
-    //         <a
-    //           className="dropdown-link"
-    //           style={
-    //             item.id == blockId ? { color: "#fff" } : { color: activeColor }
-    //           }
-    //           rel="noopener noreferrer"
-    //         >
-    //           {item.title}
-    //         </a>
-    //       </Dropdown>
-    //     </div>
-    //   );
-    // });
-
-    return (
-      <Menu
-        mode="horizontal"
-        defaultSelectedKeys={[currentBlockId, currentL2MenuId]}
-        items={this.menuItems}
-        selectedKeys={[currentBlockId, currentL2MenuId]}
-        style={{
-          flex: 1,
-          minWidth: 0,
-        }}
-        className="block"
-      />
-    );
-  }
-}
-
-export default Block;
+import React, { CSSProperties } from "react";
+import { Dropdown, Menu, MenuItemProps, MenuProps } from "antd";
+import { BlockMenu, Level2Menu } from "../../tmpl/interface";
+import MenuRender from "./menu-render";
+import { LocaleContext } from "../../locale/LocaleProvider";
+import "./block.css";
+import { NavLink } from "react-router-dom";
+import { inherits } from "util";
+
+export interface BlockProps {
+  blocks: BlockMenu[];
+  currentBlockId?: string;
+  currentL2MenuId?: string;
+  activeColor?: string;
+}
+interface BlockState {}
+
+class Block extends React.PureComponent<BlockProps, BlockState> {
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+  constructor(props) {
+    super(props);
+  }
+
+  getSubMenu = (blockMenu: BlockMenu) => {
+    return MenuRender.getMenu(blockMenu, null);
+  };
+
+  findBlockId = (blocks: BlockMenu[], currentL2MenuId: string) => {
+    let blockId: string = undefined;
+    for (const block of blocks) {
+      if (block.l1Menus) {
+        for (const menul1 of block.l1Menus) {
+          for (const menul2 of menul1.l2Menus) {
+            if (menul2.id === currentL2MenuId) {
+              blockId = block.id;
+              return blockId;
+            }
+          }
+        }
+      } else {
+        for (const menul1 of block.items) {
+          for (const menul2 of menul1.items) {
+            if (menul2.id === currentL2MenuId) {
+              blockId = block.id;
+              return blockId;
+            }
+          }
+        }
+      }
+    }
+    return blockId;
+  };
+
+  get computedBlocks() {
+    const { translate } = this.context;
+    const blocks: BlockMenu[] = JSON.parse(JSON.stringify(this.props.blocks));
+
+    blocks &&
+      Array.isArray(blocks) &&
+      blocks.forEach((block) => {
+        block.title = translate("${" + block.title + "}");
+
+        const dropdownMenu = block.items;
+
+        dropdownMenu &&
+          Array.isArray(dropdownMenu) &&
+          dropdownMenu.forEach((menu) => {
+            menu.title = translate("${" + menu.title + "}");
+          });
+      });
+
+    return blocks;
+  }
+
+  get menuItems() {
+    const blocks = this.computedBlocks;
+
+    const items: MenuProps["items"] = [];
+
+    console.log(items);
+
+    blocks.forEach((block) => {
+      const item: typeof items[0] = {
+        className: "menu-item",
+        key: block.id,
+        children: this.getSubMenu(block),
+      };
+
+      item.label = (
+        <NavLink
+          to={this.getDefaultIndexPath(block)}
+          style={{
+            color: "inherit",
+            width: "100%",
+            height: "100%",
+            display: "block",
+          }}
+        >
+          {block.title}
+        </NavLink>
+      );
+
+      items.push(item);
+    });
+
+    return items;
+  }
+
+  getDefaultIndexPath(menuItem) {
+    if (menuItem.items) return this.getDefaultIndexPath(menuItem.items[0]);
+    return menuItem.path;
+  }
+
+  render() {
+    const { currentBlockId, blocks, currentL2MenuId, activeColor } = this.props;
+
+    const syyy = {
+      "--header-block-active-bottom-color": activeColor
+        ? activeColor
+        : "#1E90FF",
+      "--header-top-active-background": activeColor ? activeColor : "#1E90FF",
+    } as CSSProperties;
+
+    if (!blocks || blocks.length < 1) {
+      return <></>;
+    }
+    let blockId = currentBlockId;
+    if (currentL2MenuId && !blockId) {
+      blockId = this.findBlockId(blocks, currentL2MenuId);
+    }
+    if (!blockId) {
+      blockId = blocks.at(0).id;
+    }
+
+    // return this.computedBlocks.map((item, index) => {
+    //   return (
+    //     <div
+    //       key={index}
+    //       className={`${item.id == blockId ? "active" : ""} header-block`}
+    //       style={syyy}
+    //     >
+    //       <Dropdown menu={{ items: this.getSubMenu(item) }}>
+    //         <a
+    //           className="dropdown-link"
+    //           style={
+    //             item.id == blockId ? { color: "#fff" } : { color: activeColor }
+    //           }
+    //           rel="noopener noreferrer"
+    //         >
+    //           {item.title}
+    //         </a>
+    //       </Dropdown>
+    //     </div>
+    //   );
+    // });
+
+    return (
+      <Menu
+        mode="horizontal"
+        defaultSelectedKeys={[currentBlockId, currentL2MenuId]}
+        items={this.menuItems}
+        selectedKeys={[currentBlockId, currentL2MenuId]}
+        style={{
+          flex: 1,
+          minWidth: 0,
+        }}
+        className="block"
+      />
+    );
+  }
+}
+
+export default Block;