aldehyde 0.2.160 → 0.2.163

package/src/aldehyde/layout2/components/userButton.tsx

@@ -0,0 +1,171 @@
+import React, { ReactNode, useEffect, useState } from "react";
+import {
+  CaretDownOutlined,
+  ClearOutlined,
+  LoginOutlined,
+  LogoutOutlined,
+  SettingOutlined,
+  UnlockOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import { Button, ButtonProps, Dropdown, GetProp, MenuProps } from "antd";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import { UserInfo } from "../../tmpl/interface";
+import UserInfoBar from "../../layout/menu/userinfo-bar";
+import { useLocale } from "../../locale/useLocale";
+import { NavLink, useNavigate } from "react-router-dom";
+import ResetPassword from "../../layout/menu/reset-password";
+import HCDataSource from "../../tmpl/hc-data-source";
+
+type DropDownMenuType = {
+  label: string | number | ReactNode;
+  key: string;
+  icon?: ReactNode;
+  show?: () => boolean;
+};
+
+const UserButton: React.FC<ButtonProps> = (props) => {
+  // translate
+  const { translate } = useLocale();
+
+  // navigation
+  const navigate = useNavigate();
+
+  // 用户配置信息
+  const [userConfig, setUserConfig] = useState<UserInfo>({
+    id: undefined,
+    name: undefined,
+  });
+  const initUserConfig = async () => {
+    const userInfo: UserInfo = await HcserviceV3.getUser();
+    setUserConfig(userInfo);
+  };
+  useEffect(() => {}, [userConfig]);
+
+  // 上下文配置信息
+  const [globalContext, setGlobalContext] = useState<any[]>();
+  const initContext = async () => {
+    let context = await HcserviceV3.getContextSourceValue();
+    setGlobalContext(context);
+  };
+  useEffect(() => {
+    initContext();
+  }, []);
+
+  // 用户是否登录
+  const [isLogin, setIsLogin] = useState<boolean>(false);
+  useEffect(() => {
+    if (userConfig.name !== undefined && userConfig.name !== null)
+      setIsLogin(true);
+    else setIsLogin(false);
+  }, [userConfig]);
+  useEffect(() => {
+    initUserConfig();
+  }, []);
+
+  // logout
+  const logout = async () => {
+    await HcserviceV3.logout2();
+    navigate("/login2");
+  };
+
+  // dropdown menu
+  const onClick: MenuProps["onClick"] = ({ key }) => {};
+  const dropdownMenuList: DropDownMenuType[] = [
+    {
+      label: <NavLink to="/login2">{translate("${登录}")}</NavLink>,
+      key: "login",
+      icon: <LoginOutlined />,
+      show: () => {
+        return !isLogin;
+      },
+    },
+    {
+      label: (
+        <UserInfoBar
+          gtmplSourceId={userConfig.gtmplSourceId}
+          editable={userConfig.changePersonalInfoable}
+          userCode={userConfig.id}
+        />
+      ),
+      key: "userInfo",
+      icon: <UserOutlined />,
+      show: () => {
+        return isLogin && userConfig.viewPersonalInfoable;
+      },
+    },
+    {
+      label: <NavLink to="/context-setter">{translate("${全局配置}")}</NavLink>,
+      key: "globalContext",
+      icon: <SettingOutlined />,
+      show: () => {
+        return (
+          isLogin && Array.isArray(globalContext) && globalContext.length > 0
+        );
+      },
+    },
+    {
+      label: <ResetPassword></ResetPassword>,
+      key: "resetPwd",
+      icon: <UnlockOutlined />,
+      show: () => {
+        return isLogin && userConfig.changePasswordable;
+      },
+    },
+    {
+      label: (
+        <span onClick={() => HCDataSource.reload([])}>
+          {translate("${清空缓存}")}
+        </span>
+      ),
+      key: "cleanCache",
+      icon: <ClearOutlined />,
+      show: () => {
+        return isLogin && userConfig.cleanCachable;
+      },
+    },
+    {
+      label: <span onClick={logout}>{translate("${退出}")}</span>,
+      key: "logout",
+      icon: <LogoutOutlined />,
+      show: () => {
+        return isLogin;
+      },
+    },
+  ];
+  const cleanDropdownMenuList: GetProp<MenuProps, "items"> = dropdownMenuList
+    .filter((item) => {
+      if (!item.show) return true;
+      return item.show();
+    })
+    .map(({ label, key, icon }) => {
+      return {
+        label,
+        key,
+        icon,
+      };
+    });
+
+  return (
+    <Dropdown
+      overlayClassName="localeButton"
+      menu={{ items: cleanDropdownMenuList, onClick }}
+    >
+      <Button
+        type="text"
+        icon={<CaretDownOutlined />}
+        style={{
+          width: "100%",
+          height: "100%",
+          borderRadius: 0,
+          color: "#fff",
+        }}
+        {...props}
+      >
+        {isLogin ? userConfig.name : translate("${请登录}")}
+      </Button>
+    </Dropdown>
+  );
+};
+
+export default UserButton;

package/src/aldehyde/layout2/css/header.css

@@ -0,0 +1,38 @@
+/* .header-menu > li,
+.header-menu > li > div {
+  color: #ffffff !important;
+}
+
+.ant-menu-item-active::after,
+.ant-menu-item-selected::after {
+  border-color: #ffffff !important;
+} */
+
+.ant-menu-submenu > .ant-menu-submenu-selected {
+  /* background: #fff !important; */
+  /* color: #53b572; */
+  /* width: calc(100% - 8px); */
+}
+
+.ant-menu-submenu-selected > .ant-menu-submenu-title {
+  /* color: #fff !important; */
+}
+
+/* .ant-menu-item-group-list > .ant-menu-item-selected,
+.ant-menu-sub > .ant-menu-item-selected {
+  color: var(--ant-color-primary) !important;
+} */
+
+.layout2-header-menu-item::after {
+  width: 0;
+}
+
+.layout2-header-menu > li:nth-last-child(1)::after {
+  width: 0;
+}
+
+.ant-menu-sub:has(.layout2-header-menu-item)
+  > .ant-menu-submenu-selected
+  > .ant-menu-submenu-title {
+  background-color: var(--color-3) !important;
+}

package/src/aldehyde/layout2/header.tsx

@@ -0,0 +1,348 @@
+import {
+  ConfigProvider,
+  Flex,
+  Layout,
+  Menu,
+  MenuProps,
+  theme,
+  Tooltip,
+} from "antd";
+import React, { useEffect, useState } from "react";
+import "./css/header.css";
+import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
+import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
+import LocaleButton from "../locale/LocaleButton";
+import UserBar from "../layout/menu/user-bar";
+import UserButton from "./components/userButton";
+import homePng from "./imgs/home.png";
+import { MenuType } from "./type/layout.type";
+import { NavLink, useParams } from "react-router-dom";
+import {
+  getLeftMostRouteInfo,
+  handlePropsMenuToAntdMenu,
+} from "./util/menu.util";
+import { useLocale } from "../locale/useLocale";
+import { generate } from "@ant-design/colors";
+
+type HeaderPropsType = {
+  systemName: string;
+  menuList: MenuType[];
+  style?: typeof Layout.Header.defaultProps.style;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+
+// const items: MenuItem[] = [
+//   {
+//     label: "Navigation One",
+//     key: "mail",
+//     icon: <img src={png1} alt="1" width={16} height={16}></img>,
+//   },
+//   {
+//     label: "Navigation Two",
+//     key: "app",
+//     disabled: false,
+//     icon: <img src={png2} alt="2" width={16} height={16}></img>,
+//   },
+//   {
+//     label: "Navigation Two",
+//     key: "app2",
+//     disabled: false,
+//     icon: <img src={png3} alt="2" width={16} height={16}></img>,
+//   },
+//   {
+//     label: "Navigation Two",
+//     key: "app3",
+//     disabled: false,
+//     icon: <img src={png4} alt="2" width={16} height={16}></img>,
+//   },
+//   {
+//     label: "Navigation Two",
+//     key: "app4",
+//     disabled: true,
+//     icon: <img src={png5} alt="2" width={16} height={16}></img>,
+//   },
+//   {
+//     label: "Navigation Three - Submenu",
+//     key: "SubMenu",
+//     icon: <img src={png6} alt="2" width={16} height={16}></img>,
+//     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>
+//     ),
+//     icon: <img src={png6} alt="2" width={16} height={16}></img>,
+//   },
+// ];
+
+const { useToken } = theme;
+
+const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style }) => {
+  // token
+  const {
+    token: { colorPrimary },
+  } = useToken();
+
+  const colors = generate(colorPrimary);
+  console.log("header", colors);
+
+  // translate
+  const { translate } = useLocale();
+
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  useEffect(() => {
+    setMenu(
+      handlePropsMenuToAntdMenu(
+        menuList,
+        (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 (floor === 0)
+            return (
+              <NavLink
+                to={`/${path}`}
+                target={target}
+                style={{
+                  color: "inherit",
+                  width: "100%",
+                  height: "100%",
+                  display: "block",
+                }}
+              >
+                {translate("${" + label + "}")}
+              </NavLink>
+            );
+
+          if (Array.isArray(children) && !children.length)
+            return (
+              <NavLink
+                to={`/${path}`}
+                target={target}
+                style={{
+                  color: "inherit",
+                  width: "100%",
+                  height: "100%",
+                  display: "block",
+                }}
+              >
+                {translate("${" + label + "}")}
+              </NavLink>
+            );
+
+          return label;
+        },
+        "layout2-header-menu-item"
+      )
+    );
+  }, [menuList]);
+
+  // menu select
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const { sourceId } = useParams();
+  useEffect(() => {
+    if (sourceId !== undefined) setSelectedKeys([sourceId]);
+  }, [sourceId]);
+
+  // default select keys
+  useEffect(() => {
+    if (sourceId === undefined) {
+      if (menuList[0] !== undefined) {
+        setSelectedKeys([menuList[0].id]);
+      }
+    }
+  }, [menuList, sourceId]);
+
+  return (
+    <Layout.Header
+      style={{
+        padding: 0,
+        display: "flex",
+        flexDirection: "row",
+        background: colorPrimary,
+        color: "#FFFFFF",
+        ...style,
+      }}
+    >
+      <NavLink
+        style={{
+          width: "200px",
+          minWidth: "200px",
+          height: "100%",
+          display: "flex",
+          paddingLeft: "10px",
+          alignItems: "center",
+          fontSize: "18px",
+          userSelect: "none",
+          color: "inherit",
+        }}
+        to={"/v2"}
+      >
+        <img
+          src={homePng}
+          alt="home"
+          width={35}
+          height={35}
+          style={{
+            marginRight: 5,
+          }}
+        />
+        <Tooltip title={systemName}>
+          <span
+            style={{
+              width: "100%",
+              height: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {systemName}
+          </span>
+        </Tooltip>
+      </NavLink>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          width: "calc(100% - 200px)",
+          justifyContent: "space-between",
+        }}
+      >
+        <ConfigProvider
+          theme={{
+            components: {
+              Menu: {
+                itemBg: "transparent",
+                popupBg: colors[4],
+                subMenuItemBg: colors[4],
+                itemHoverColor: "#fff",
+                itemColor: "#fff",
+                itemSelectedBg: colors[3],
+                itemSelectedColor: "#fff !important",
+                groupTitleColor: "#fff",
+                horizontalItemHoverColor: "#fff",
+                horizontalItemSelectedColor: "#fff",
+                horizontalItemSelectedBg: colors[6],
+                fontSize: 16,
+              },
+            },
+          }}
+        >
+          <Menu
+            mode="horizontal"
+            items={menu}
+            selectedKeys={selectedKeys}
+            style={{
+              userSelect: "none",
+              minWidth: 0,
+              flex: "auto",
+            }}
+            className="layout2-header-menu"
+          />
+        </ConfigProvider>
+        <div
+          style={{
+            height: "100%",
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          <div
+            style={{
+              width: "64px",
+              height: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <L2MenuQuickBar></L2MenuQuickBar>
+          </div>
+          <div
+            style={{
+              width: "64px",
+              height: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <L2MenuMessageBar></L2MenuMessageBar>
+          </div>
+          <div
+            style={{
+              width: "64px",
+              height: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <LocaleButton
+              shape="default"
+              size="large"
+              type="text"
+              style={{
+                width: "100%",
+                height: "100%",
+                boxSizing: "border-box",
+                padding: "0 10px",
+                borderRadius: 0,
+                color: "#fff",
+              }}
+            ></LocaleButton>
+          </div>
+          <div
+            style={{
+              height: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <UserButton></UserButton>
+          </div>
+        </div>
+      </div>
+    </Layout.Header>
+  );
+};
+
+export default Header;

package/src/aldehyde/layout2/main.tsx

@@ -0,0 +1,27 @@
+import { Layout } from "antd";
+import React, { useState } from "react";
+import { Outlet } from "react-router-dom";
+
+type MainPropsType = {
+  style?: typeof Layout.Content.defaultProps.style;
+  children?: React.ReactNode;
+};
+
+const Main: React.FC<MainPropsType> = ({ style, children }) => {
+  return (
+    <Layout.Content style={{ background: "#fff", overflow: "auto", ...style }}>
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          overflow: "auto",
+          padding: 10,
+        }}
+      >
+        {children ? children : <Outlet />}
+      </div>
+    </Layout.Content>
+  );
+};
+
+export default Main;