aldehyde 0.2.159 → 0.2.161

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,334 @@
+import { ConfigProvider, Flex, Layout, Menu, MenuProps, theme } 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 png1 from "./imgs/1.png";
+import png2 from "./imgs/2.png";
+import png3 from "./imgs/3.png";
+import png4 from "./imgs/4.png";
+import png5 from "./imgs/5.png";
+import png6 from "./imgs/6.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,
+          }}
+        />
+        {systemName}
+      </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/imgs/s.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
+  <image id="图层_1" data-name="图层 1" x="18" y="15" width="164" height="164" xlink:href="data:img/png;base64,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"/>
+</svg>

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;