aldehyde 0.2.160 → 0.2.161

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;
+};

package/src/aldehyde/login2/Login.tsx

@@ -0,0 +1,110 @@
+import { Button, Form, Input } from "antd";
+import React, { useState } from "react";
+import HCserviceV3 from "../tmpl/hcservice-v3";
+import { useLocale } from "../locale/useLocale";
+
+type LoginPropType = {
+  onFinish?: (token: string) => void;
+  title?: any;
+  programCode?: string;
+  autoSaveUser?: boolean;
+};
+
+type FormType = {
+  username: string;
+  password: string;
+};
+
+const Login = (props: LoginPropType) => {
+  // locale
+  const { translate } = useLocale();
+
+  // form
+  const [form] = Form.useForm<FormType>();
+  const submit = async () => {
+    try {
+      const { username, password } = await form.validateFields();
+
+      setLoading(true);
+      const { programCode, onFinish } = props;
+      const pubkey = await HCserviceV3.getRasPubkey(null, programCode);
+      const res = await HCserviceV3.login(
+        { username, password },
+        "",
+        "",
+        pubkey,
+        programCode
+      );
+      if (res.status === "success") {
+        onFinish(res.token);
+      }
+      setLoading(false);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  // button
+  const [loading, setLoading] = useState<boolean>(false);
+
+  return (
+    <Form
+      name="login"
+      form={form}
+      wrapperCol={{ span: 24 }}
+      initialValues={{ remember: true }}
+      autoComplete="off"
+    >
+      <Form.Item
+        name="username"
+        rules={[{ required: true, message: translate("请输入用户名") }]}
+      >
+        <Input
+          placeholder={translate("请输入用户名")}
+          style={{
+            borderRadius: "50px",
+            background: "#EEF3FB",
+            height: "50px",
+            fontSize: "15px",
+            lineHeight: "15px",
+          }}
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="password"
+        rules={[{ required: true, message: translate("请输入密码") }]}
+      >
+        <Input.Password
+          placeholder={translate("请输入密码")}
+          style={{
+            borderRadius: "50px",
+            background: "#EEF3FB",
+            height: "50px",
+            fontSize: "15px",
+            lineHeight: "15px",
+          }}
+        />
+      </Form.Item>
+
+      <Form.Item wrapperCol={{ span: 24 }}>
+        <Button
+          type="primary"
+          onClick={submit}
+          shape="round"
+          loading={loading}
+          style={{
+            width: "100%",
+            height: "50px",
+            fontSize: "15px",
+            lineHeight: "15px",
+          }}
+        >
+          登录
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default Login;

package/src/aldehyde/login2/LoginPage.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import Login from "./Login";
+import LoginBgPng from "./img/login-bg.png";
+import { useLocale } from "../locale/useLocale";
+import HCDataSource from "../tmpl/hc-data-source";
+import Units from "../units";
+
+const LoginPage = () => {
+  const { translate } = useLocale();
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        minWidth: "1600px",
+        position: "absolute",
+        background: `url(${LoginBgPng})`,
+        backgroundSize: "cover",
+        display: "flex",
+        flexDirection: "row-reverse",
+        justifyContent: "flex-start",
+        alignItems: "center",
+      }}
+    >
+      <div
+        style={{
+          width: "500px",
+          height: "500px",
+          background: "linear-gradient(0deg, #FFFFFF 65%, #DFEDFF)",
+          boxShadow: "0px 10px 15px -3px rgba(0,0,0,0.1)",
+          marginRight: "10%",
+          padding: "60px",
+        }}
+      >
+        <div
+          style={{
+            fontWeight: 600,
+            fontSize: "30px",
+            color: "#222222",
+            marginBottom: 60,
+          }}
+        >
+          {translate("欢迎, 登录")}
+        </div>
+        <Login
+          onFinish={(token) => {
+            HCDataSource.clear();
+            window.location.hash = "/v2";
+            Units.setHydrocarbonToken(token);
+          }}
+        ></Login>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

package/src/aldehyde/login2/index.tsx

@@ -0,0 +1,4 @@
+import Login from "./Login";
+import LoginPage from "./LoginPage";
+
+export { Login, LoginPage };