aldehyde 0.2.159 → 0.2.161

package/src/aldehyde/layout2/page.tsx

@@ -0,0 +1,169 @@
+import { Layout, theme } from "antd";
+import React, {
+  HTMLAttributeAnchorTarget,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import Header from "./header";
+import Sider from "./sider";
+import Main from "./main";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import { MenuType } from "./type/layout.type";
+import { BlockType, MenuConfigAPIType } from "../tmpl/interface";
+import { useVarCssColor } from "../hooks/useVarCssColor";
+import { generate } from "@ant-design/colors";
+
+type PagePropsType = {
+  children?: React.ReactNode;
+};
+
+const handleMenuItemUrl = (
+  id: string,
+  pageType: BlockType["pageType"],
+  query: { [key: string]: string } = {},
+  customPath?: string
+) => {
+  if (customPath) return customPath;
+
+  const queryParam = { ...query };
+  queryParam["menuId"] = id;
+
+  let routePath = "",
+    operator = "";
+
+  switch (pageType) {
+    case "列表":
+      routePath = "act-table";
+      break;
+    case "树":
+      routePath = "act-tree";
+      break;
+    case "添加":
+      routePath = "detail-edit";
+      operator = "new";
+      break;
+    case "编辑":
+      routePath = "detail-edit";
+      operator = "listop";
+      break;
+    case "编辑或添加":
+      routePath = "detail-edit";
+      operator = "listop-new";
+      break;
+    case "详情":
+      routePath = "detail-view";
+      operator = "listop";
+      break;
+    default:
+      routePath = "";
+  }
+
+  if (operator !== "") queryParam["codeSource"] = operator;
+  return `v2/${id}/${routePath}?${Object.entries(queryParam)
+    .map(([key, val]) => `${key}=${val}`)
+    .join("&")}`;
+};
+
+const handleMenuRes = (menuList: MenuConfigAPIType["blocks"]): MenuType[] => {
+  const retList: MenuType[] = [];
+
+  menuList.sort((a, b) => {
+    const aOrder = Number(a.order);
+    const bOrder = Number(b.order);
+    if (aOrder < bOrder) return -1;
+    if (aOrder > bOrder) return 1;
+    return 0;
+  });
+
+  for (const {
+    id,
+    title,
+    disabled,
+    hiddenOnDisabled,
+    customPath,
+    pageType,
+    linkTarget,
+    defaultCriteriaValue,
+    items,
+  } of menuList) {
+    if (
+      hiddenOnDisabled === true ||
+      hiddenOnDisabled === undefined ||
+      hiddenOnDisabled === null
+    ) {
+      const menu: MenuType = {
+        id,
+        label: title,
+        disabled: disabled === undefined ? false : disabled,
+        url: handleMenuItemUrl(id, pageType, defaultCriteriaValue, customPath),
+        linkTarget,
+        children: items?.length ? handleMenuRes(items) : [],
+      };
+
+      retList.push(menu);
+    }
+  }
+
+  return retList;
+};
+
+const getMenuConfig = async (): Promise<{
+  systemName: string;
+  menu: MenuType[];
+}> => {
+  const res = await HcserviceV3.requestBlocks("", "");
+
+  const menuList: MenuType[] = handleMenuRes(res.blocks);
+
+  return {
+    menu: menuList,
+    systemName: res.programName,
+  };
+};
+
+const { useToken } = theme;
+
+const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
+  const {
+    token: { colorPrimary },
+  } = useToken();
+
+  const [systemName, setSystemName] = useState("");
+
+  const [menu, SetMenu] = useState<MenuType[]>([]);
+
+  useEffect(() => {
+    getMenuConfig().then(({ menu, systemName: name }) => {
+      setSystemName(name);
+      SetMenu(menu);
+    });
+  }, []);
+
+  // page ref
+  const pageRef = useRef<HTMLDivElement>();
+  useEffect(() => {
+    useVarCssColor(generate(colorPrimary));
+  }, []);
+
+  return (
+    <div
+      ref={pageRef}
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+      }}
+    >
+      <Layout style={{ height: "100%" }}>
+        <Header systemName={systemName} menuList={menu}></Header>
+        <Layout>
+          <Sider menuList={menu}></Sider>
+          <Main>{props.children}</Main>
+        </Layout>
+      </Layout>
+    </div>
+  );
+};
+
+export default Page;

package/src/aldehyde/layout2/sider.tsx

@@ -0,0 +1,357 @@
+import { ConfigProvider, Layout, Menu, MenuProps, theme, Tooltip } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import { MenuType } from "./type/layout.type";
+import { NavLink, useParams } from "react-router-dom";
+import {
+  getLeftMostRouteInfo,
+  getTargetMenuItemIdRouteList,
+  handlePropsMenuToAntdMenu,
+} from "./util/menu.util";
+import { useLocale } from "../locale/useLocale";
+import { generate } from "@ant-design/colors";
+
+type SiderPropsType = {
+  menuList: MenuType[];
+  style?: typeof Layout.Sider.defaultProps.style;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+
+type MenuItemIdToFirstFloorIdxMapType = { [key: string]: number };
+
+type SecoundFloorMenuList = MenuType[][];
+
+const items: MenuItem[] = [
+  {
+    label: "Navigation One",
+    key: "mail",
+  },
+  {
+    label: "Navigation Two",
+    key: "app",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app2",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app3",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app4",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app5",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app6",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app7",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app8",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app9",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app10",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app11",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app12",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app13",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app14",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app15",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app16",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app17",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app18",
+    disabled: false,
+  },
+  {
+    label: "Navigation Three - Submenu",
+    key: "SubMenu",
+    children: [
+      {
+        type: "group",
+        label: "Item 1",
+        children: [
+          { label: "Option 1", key: "setting:1" },
+          { label: "Option 2", key: "setting:2" },
+        ],
+      },
+      {
+        type: "group",
+        label: "Item 2",
+        children: [
+          { label: "Option 3", key: "setting:3" },
+          { label: "Option 4", key: "setting:4" },
+        ],
+      },
+    ],
+  },
+  {
+    key: "alipay",
+    label: (
+      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+        Navigation Four - Link
+      </a>
+    ),
+  },
+];
+
+/**
+ * @param menuList 自定义的menu
+ * @param isRoot 是否为根节点
+ * @param rootIdx 根节点层级
+ * @param mp menu item 对应的根节点 map
+ * @returns menu item 对应的根节点 map
+ * @desc 获取 menu item 每一项对应其根节点的 map
+ */
+const getMenuItemIdToFirstFloorIdxMap = (
+  menuList: MenuType[],
+  isRoot: boolean,
+  rootIdx?: number,
+  mp: MenuItemIdToFirstFloorIdxMapType = {}
+): MenuItemIdToFirstFloorIdxMapType => {
+  for (let i = 0; i < menuList.length; i++) {
+    const menuItem = menuList[i];
+    if (isRoot)
+      Array.isArray(menuItem.children) &&
+        getMenuItemIdToFirstFloorIdxMap(menuItem.children, false, i, mp);
+    else {
+      mp[menuItem.id] = rootIdx;
+      Array.isArray(menuItem.children) &&
+        getMenuItemIdToFirstFloorIdxMap(menuItem.children, false, rootIdx, mp);
+    }
+  }
+
+  return mp;
+};
+
+/**
+ * @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, style }) => {
+  // token
+  const {
+    token: { colorPrimary },
+  } = useToken();
+  const colors = generate(colorPrimary);
+
+  // translate
+  const { translate } = useLocale();
+
+  const menuItemIdToFirstFloorIdxMap = useRef<
+    MenuItemIdToFirstFloorIdxMapType
+  >();
+  const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
+  useEffect(() => {
+    menuItemIdToFirstFloorIdxMap.current = getMenuItemIdToFirstFloorIdxMap(
+      menuList,
+      true
+    );
+    secoundFloorMenuList.current = getSecoundFloorMenuList(menuList);
+  }, [menuList]);
+
+  // menu
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  const getMenuWithSecoundFloor = (
+    secoundFloorMenu: SecoundFloorMenuList[number]
+  ) => {
+    return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem, floor) => {
+      const { disabled, label, children } = menuItem;
+
+      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)
+        return (
+          <Tooltip title={translate("${" + label + "}")}>
+            <NavLink
+              to={`/${path}`}
+              target={target}
+              style={{
+                color: "inherit",
+                width: "100%",
+                height: "100%",
+                display: "block",
+                textOverflow: "ellipsis",
+                overflow: "hidden",
+              }}
+            >
+              {translate("${" + label + "}")}
+            </NavLink>
+          </Tooltip>
+        );
+
+      return label;
+    });
+  };
+
+  // menu select
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const { sourceId } = useParams();
+  useEffect(() => {
+    if (!menuList.length) {
+      setMenu([]);
+      return;
+    }
+
+    const curSiderMenuList =
+      secoundFloorMenuList.current[
+        menuItemIdToFirstFloorIdxMap.current[sourceId]
+      ];
+
+    if (curSiderMenuList) {
+      setMenu(getMenuWithSecoundFloor(curSiderMenuList));
+      setSelectedKeys(getTargetMenuItemIdRouteList(curSiderMenuList, sourceId));
+    }
+  }, [sourceId, menuList]);
+
+  // default select keys
+  useEffect(() => {
+    if (sourceId === undefined) {
+      if (secoundFloorMenuList.current[0] !== undefined) {
+        setMenu(getMenuWithSecoundFloor(secoundFloorMenuList.current[0]));
+        setSelectedKeys([]);
+      }
+    }
+  }, [menuList, sourceId]);
+
+  const menuClick = (openKeys) => {
+    setSelectedKeys([...openKeys]);
+  };
+
+  return (
+    <Layout.Sider
+      style={{
+        background: colors[0],
+        // color: "#FFFFFF",
+        borderInlineEnd: "1px solid rgba(5, 5, 5, 0.06)",
+        overflowY: "auto",
+        ...style,
+      }}
+    >
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              itemBg: "transparent",
+              // popupBg: "rgba(221, 240, 228)",
+              // subMenuItemBg: "rgba(221, 240, 228, .3)",
+              itemHoverColor: "#222",
+              itemColor: "#222",
+              itemSelectedBg: colors[1],
+              groupTitleColor: "#222",
+              // horizontalItemHoverColor: "rgba(221, 240, 228)",
+              // horizontalItemSelectedColor: "rgba(221, 240, 228)",
+              fontSize: 14,
+            },
+          },
+        }}
+      >
+        <Menu
+          mode="inline"
+          items={menu}
+          selectedKeys={selectedKeys}
+          openKeys={selectedKeys}
+          inlineCollapsed={false}
+          style={{
+            userSelect: "none",
+            borderInlineEnd: "none",
+          }}
+          onOpenChange={menuClick}
+        />
+      </ConfigProvider>
+    </Layout.Sider>
+  );
+};
+
+export default Sider;

package/src/aldehyde/layout2/type/layout.type.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributeAnchorTarget } from "react";
+
+export type MenuType = {
+  id: string;
+  label: string; // 菜单标题
+  disabled: boolean; // 是否禁用
+  url: string; // 菜单链接
+  linkTarget?: HTMLAttributeAnchorTarget;
+  children?: MenuType[]; // 子菜单
+};

package/src/aldehyde/layout2/util/menu.util.tsx

@@ -0,0 +1,112 @@
+import { ReactNode } from "react";
+import { MenuProps } from "antd";
+import { MenuType } from "../type/layout.type";
+
+type AntdMenuItemType = Required<MenuProps>["items"][number];
+
+/**
+ * @param menu 自定义的 menu 树
+ * @returns 最左子节点的路由信息: 链接跳转方式和路由路径
+ * @desc 获取最左子节点的路由信息
+ */
+export const getLeftMostRouteInfo = (
+  menu: MenuType
+): {
+  target: MenuType["linkTarget"];
+  path: string;
+} => {
+  if (Array.isArray(menu.children) && menu.children.length)
+    return getLeftMostRouteInfo(menu.children[0]);
+  return {
+    target: menu.linkTarget,
+    path: menu.url,
+  };
+};
+
+/**
+ * @param menuList 自定义的 menuList
+ * @returns antd 可以使用的 menuList
+ * @desc 将自定义的 menuList 处理成 antd 可以使用的 menuList
+ */
+export const handlePropsMenuToAntdMenu = (
+  menuList: MenuType[],
+  customLabelFn: (
+    menuItem: MenuType,
+    floor: number
+  ) => string | number | ReactNode,
+  className?: string,
+  floor: number = 0
+): AntdMenuItemType[] => {
+  try {
+    const retList: AntdMenuItemType[] = [];
+
+    for (const item of menuList) {
+      const { id, label, disabled, url, linkTarget, children } = item;
+
+      const menu: AntdMenuItemType = {
+        label: customLabelFn(item, floor),
+        key: id,
+        disabled,
+        className,
+        children:
+          Array.isArray(children) && children.length
+            ? handlePropsMenuToAntdMenu(
+                children,
+                customLabelFn,
+                className,
+                floor + 1
+              )
+            : null,
+      };
+      retList.push(menu);
+    }
+
+    return retList;
+  } catch (err) {
+    console.log("handlePropsMenuToAntdMenu", err, `menu: ${menuList}`);
+  }
+};
+
+/**
+ * @param menuList 自定义的 menuList
+ * @param targetMenuId 目标 menu id
+ * @returns 从根节点到目标节点路径
+ * @desc 寻找从 menu 根节点到目标节点的路径
+ */
+export const getTargetMenuItemIdRouteList = (
+  menuList: MenuType[],
+  targetMenuId: string
+): string[] => {
+  const routeList: string[] = [];
+
+  const root: MenuType = {
+    id: "",
+    label: "",
+    disabled: false,
+    url: "",
+    children: menuList,
+  };
+
+  const dfs = (menuItem: MenuType): boolean => {
+    routeList.push(menuItem.id);
+
+    if (menuItem.id === targetMenuId) return true;
+
+    let flag = false;
+
+    for (const menuItemChild of menuItem.children) {
+      if (!flag) flag = dfs(menuItemChild);
+      else break;
+    }
+
+    if (flag) return true;
+
+    routeList.pop();
+    return false;
+  };
+
+  dfs(root);
+
+  routeList.shift();
+  return routeList;
+};