aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/layout2/components/theme-button.tsx

@@ -1,65 +1,65 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { Button, ButtonProps, Dropdown, MenuProps, theme } from "antd";
-import { useSessionStorageState } from "ahooks";
-import AliIcon from "../../icon/aliIcon";
-import { KeepAliveTab } from "../../hooks/use-tabs";
-import ProgramConfig from "../../units";
-import { useLocale } from "../../locale/useLocale";
-
-const { useToken } = theme;
-
-const regex = /#\/v\d+\/(.*)/;
-const defThemes = [{ label: "默认", value: "v2" }, { label: "科技风一", value: "v3" }, { label: "科技风二", value: "v4" }, { label: "侧边布局", value: "v5" }];
-
-interface Props extends ButtonProps {
-    children?: React.ReactNode,
-    placement?: "topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight" | "top" | "bottom",
-}
-
-const ThemeButton = (props: Props) => {
-    const { children, placement, ...otherProps } = props;
-    const { token } = useToken();
-    const [version, setVersion] = useState<string>();
-    const [themes, setThemes] = useState<{ label: string, value: string }[]>([]);
-    const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
-    const { translate } = useLocale();
-
-    const getThemeConfig = async () => {
-        const themeConfig = await ProgramConfig.getThemeConfig();
-        const themeKeys = themeConfig?.styleTheme?.split(",") || ProgramConfig.themes();
-        const temThemes = defThemes.filter(item => themeKeys?.includes(item.value));
-        setThemes(temThemes.length ? temThemes : [{ label: "默认", value: "v2" }]);
-    }
-
-    useEffect(() => {
-        getThemeConfig();
-        const version = localStorage.getItem("version") || "v2";
-        setVersion(version);
-    }, []);
-
-    const onClick: MenuProps["onClick"] = ({ key }) => {
-        setKeepAliveTabs([]);
-        localStorage.setItem("version", key);
-        setVersion(key);
-        const hash = window.location.hash;
-        const match = hash.match(regex);
-        window.location.hash = `#/${key}/${match[1]}`;
-    };
-
-    const items: MenuProps["items"] = useMemo(() => themes.map((item) => ({
-        label: (
-            <span style={version === item.value ? { color: token.colorPrimary } : {}}>
-                {translate("${" + item.label + "}")}
-            </span>
-        ),
-        key: item.value,
-    })), [themes]);
-
-    return (
-        <Dropdown arrow={{ pointAtCenter: true }} placement={placement} overlayStyle={{ minWidth: "105px" }} overlayClassName="themeButton" menu={{ items, onClick, selectedKeys: [version] }}>
-            {children || <Button type="text" icon={<AliIcon type="icon-theme" />} {...otherProps} />}
-        </Dropdown>
-    );
-};
-
-export default ThemeButton;
+import React, { useEffect, useMemo, useState } from "react";
+import { Button, ButtonProps, Dropdown, MenuProps, theme } from "antd";
+import { useSessionStorageState } from "ahooks";
+import AliIcon from "../../icon/aliIcon";
+import { KeepAliveTab } from "../../hooks/use-tabs";
+import ProgramConfig from "../../units";
+import { useLocale } from "../../locale/useLocale";
+
+const { useToken } = theme;
+
+const regex = /#\/v\d+\/(.*)/;
+const defThemes = [{ label: "默认", value: "v2" }, { label: "科技风一", value: "v3" }, { label: "科技风二", value: "v4" }, { label: "侧边布局", value: "v5" }];
+
+interface Props extends ButtonProps {
+    children?: React.ReactNode,
+    placement?: "topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight" | "top" | "bottom",
+}
+
+const ThemeButton = (props: Props) => {
+    const { children, placement, ...otherProps } = props;
+    const { token } = useToken();
+    const [version, setVersion] = useState<string>();
+    const [themes, setThemes] = useState<{ label: string, value: string }[]>([]);
+    const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
+    const { translate } = useLocale();
+
+    const getThemeConfig = async () => {
+        const themeConfig = await ProgramConfig.getThemeConfig();
+        const themeKeys = themeConfig?.styleTheme?.split(",") || ProgramConfig.themes();
+        const temThemes = defThemes.filter(item => themeKeys?.includes(item.value));
+        setThemes(temThemes.length ? temThemes : [{ label: "默认", value: "v2" }]);
+    }
+
+    useEffect(() => {
+        getThemeConfig();
+        const version = localStorage.getItem("version") || "v2";
+        setVersion(version);
+    }, []);
+
+    const onClick: MenuProps["onClick"] = ({ key }) => {
+        setKeepAliveTabs([]);
+        localStorage.setItem("version", key);
+        setVersion(key);
+        const hash = window.location.hash;
+        const match = hash.match(regex);
+        window.location.hash = `#/${key}/${match[1]}`;
+    };
+
+    const items: MenuProps["items"] = useMemo(() => themes.map((item) => ({
+        label: (
+            <span style={version === item.value ? { color: token.colorPrimary } : {}}>
+                {translate("${" + item.label + "}")}
+            </span>
+        ),
+        key: item.value,
+    })), [themes]);
+
+    return (
+        <Dropdown arrow={{ pointAtCenter: true }} placement={placement} overlayStyle={{ minWidth: "105px" }} overlayClassName="themeButton" menu={{ items, onClick, selectedKeys: [version] }}>
+            {children || <Button type="text" icon={<AliIcon type="icon-theme" />} {...otherProps} />}
+        </Dropdown>
+    );
+};
+
+export default ThemeButton;

package/src/aldehyde/layout2/components/user-button.tsx

@@ -1,258 +1,258 @@
-import React, { ReactNode, useEffect, useState } from "react";
-import {
-  CaretDownOutlined,
-  ClearOutlined,
-  LoginOutlined,
-  LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined,
-  SettingOutlined,
-  UnlockOutlined,
-  UserOutlined,
-  CompressOutlined, GlobalOutlined, DownloadOutlined
-} from "@ant-design/icons";
-import { Button, ButtonProps, Dropdown, GetProp, MenuProps, Popconfirm } from "antd";
-import HcserviceV3 from "../../tmpl/hcservice-v3";
-import { UserInfo, ThemeConfig } 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";
-import { useSessionStorageState } from 'ahooks';
-import { KeepAliveTab } from "../../hooks/use-tabs";
-import Units from "../../units";
-import ThemeButton from "./theme-button";
-import LocaleButton from "../../locale/LocaleButton";
-import AliIcon from "../../icon/aliIcon";
-
-type DropDownMenuType = {
-  label: string | number | ReactNode;
-  key: string;
-  icon?: ReactNode;
-  show?: () => boolean;
-};
-
-interface Props extends ButtonProps {
-  logoutUrl?: string;
-  customRender?: ReactNode;
-  layoutRootPath?: string;
-  themeConfig?: ThemeConfig;
-}
-
-const UserButton: React.FC<Props> = (props) => {
-  const { logoutUrl = "/login2", customRender, layoutRootPath = "v2", themeConfig, ...otherProps } = props;
-  // translate
-  const { translate, changeSiderCollapsed, getSiderCollapsed, compactTheme, changeCompactTheme } = useLocale();
-  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
-    defaultValue: [],
-  });
-  // navigation
-  const navigate = useNavigate();
-
-  // 用户配置信息
-  const [userConfig, setUserConfig] = useState<UserInfo>({
-    id: undefined,
-    name: undefined,
-  });
-
-  const initUserConfig = async () => {
-    const userInfo: UserInfo = await Units.getUserInfo();
-    setUserConfig(userInfo);
-  };
-
-  // 初始化侧边栏菜单显隐
-  const initSiderCollapsed = (hideLeftMenuTheme: string) => {
-    if (!hideLeftMenuTheme || !layoutRootPath) {
-      return;
-    }
-    const temThemes = hideLeftMenuTheme.split(",");
-    const isCollapsed = getSiderCollapsed();
-    if ((temThemes.includes(layoutRootPath) && !isCollapsed) || (!temThemes.includes(layoutRootPath) && isCollapsed)) {
-      changeSiderCollapsed();
-    }
-  }
-
-  // 上下文配置信息
-  const [globalContext, setGlobalContext] = useState<any[]>();
-  const initContext = async () => {
-    let context = await HcserviceV3.getContextSourceValue();
-    setGlobalContext(context);
-  };
-  useEffect(() => {
-    initContext();
-    initUserConfig();
-  }, []);
-
-  useEffect(() => {
-    if (themeConfig) {
-      initSiderCollapsed(themeConfig.hideLeftMenuTheme);
-    }
-  }, [themeConfig]);
-
-  // 用户是否登录
-  const [isLogin, setIsLogin] = useState<boolean>(false);
-  useEffect(() => {
-    if (userConfig?.name !== undefined && userConfig?.name !== null)
-      setIsLogin(true);
-    else setIsLogin(false);
-  }, [userConfig]);
-
-  // logout
-  const logout = async () => {
-    setKeepAliveTabs([]);
-    await HcserviceV3.logout2();
-    Units.logout();
-    navigate(logoutUrl);
-  };
-
-  // dropdown menu
-  const onClick: MenuProps["onClick"] = ({ key }) => { };
-  const dropdownMenuList: DropDownMenuType[] = [
-    {
-      label: <NavLink to={logoutUrl}>{translate("${登录}")}</NavLink>,
-      key: "login",
-      icon: <LoginOutlined />,
-      show: () => !isLogin,
-    },
-    {
-      label: (
-        <UserInfoBar
-          gtmplSourceId={userConfig?.gtmplSourceId}
-          editable={userConfig?.changePersonalInfoable}
-          userCode={userConfig?.id}
-        />
-      ),
-      key: "userInfo",
-      icon: <UserOutlined />,
-      show: () => {
-        return isLogin && userConfig?.viewPersonalInfoable;
-      },
-    },
-    {
-      label: userConfig?.name,
-      key: "userInfo",
-      icon: <UserOutlined />,
-      show: () => isLogin && !!customRender,
-    },
-    {
-      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={(e) => e.stopPropagation()}>
-          <Popconfirm
-            placement="rightBottom"
-            title={translate("${确定要[拉取]我的配置吗}?")}
-            onConfirm={() => Units.getPageConfigDefault()}
-            okText={translate("${确定}")}
-            cancelText={translate("${取消}")}
-            okType="danger"
-          >
-            {translate("${我的配置}")}
-          </Popconfirm>
-        </span>
-      ),
-      key: "userPageConfig",
-      icon: <DownloadOutlined />,
-      show: () => isLogin && themeConfig?.allowUserConfig,
-    },
-    {
-      label: <span onClick={() => changeCompactTheme()}>{translate(compactTheme ? "${默认主题}" : "${紧凑主题}")}</span>,
-      key: "compactTheme",
-      icon: <CompressOutlined />,
-      show: () => isLogin,
-    },
-    {
-      label: <ThemeButton placement="bottomRight"><div style={{ width: "100%" }}>{translate("${主题切换}")}</div></ThemeButton>,
-      key: "changeTheme",
-      icon: <AliIcon type="icon-theme" />,
-      show: () => isLogin,
-    },
-    {
-      label: <LocaleButton placement="bottomRight"><div style={{ width: "100%" }}>{translate("${语言}")}</div></LocaleButton>,
-      key: "changeLocale",
-      icon: <GlobalOutlined />,
-      show: () => isLogin,
-    },
-    {
-      label: (
-        <span onClick={() => changeSiderCollapsed()}>
-          {getSiderCollapsed() ? translate("${显示侧边栏}") : translate("${ 隐藏侧边栏 }")}
-        </span >
-      ),
-      key: "collapseSider",
-      icon: <span>{getSiderCollapsed() ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}</span>,
-      show: () => isLogin,
-    },
-    {
-      label: <div onClick={logout}>{translate("${退出}")}</div>,
-      key: "logout",
-      icon: <LogoutOutlined />,
-      show: () => 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 }}
-    >
-      {customRender && isLogin ? customRender :
-        <Button
-          type="text"
-          icon={<CaretDownOutlined />}
-          style={{
-            width: "100%",
-            height: "100%",
-            borderRadius: 0,
-            color: "#fff",
-          }}
-          {...otherProps}
-        >
-          {isLogin ? userConfig?.name : translate("${请登录}")}
-        </Button>
-      }
-    </Dropdown>
-  );
-};
-
-export default UserButton;
+import React, { ReactNode, useEffect, useState } from "react";
+import {
+  CaretDownOutlined,
+  ClearOutlined,
+  LoginOutlined,
+  LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined,
+  SettingOutlined,
+  UnlockOutlined,
+  UserOutlined,
+  CompressOutlined, GlobalOutlined, DownloadOutlined
+} from "@ant-design/icons";
+import { Button, ButtonProps, Dropdown, GetProp, MenuProps, Popconfirm } from "antd";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import { UserInfo, ThemeConfig } 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";
+import { useSessionStorageState } from 'ahooks';
+import { KeepAliveTab } from "../../hooks/use-tabs";
+import Units from "../../units";
+import ThemeButton from "./theme-button";
+import LocaleButton from "../../locale/LocaleButton";
+import AliIcon from "../../icon/aliIcon";
+
+type DropDownMenuType = {
+  label: string | number | ReactNode;
+  key: string;
+  icon?: ReactNode;
+  show?: () => boolean;
+};
+
+interface Props extends ButtonProps {
+  logoutUrl?: string;
+  customRender?: ReactNode;
+  layoutRootPath?: string;
+  themeConfig?: ThemeConfig;
+}
+
+const UserButton: React.FC<Props> = (props) => {
+  const { logoutUrl = "/login2", customRender, layoutRootPath = "v2", themeConfig, ...otherProps } = props;
+  // translate
+  const { translate, changeSiderCollapsed, getSiderCollapsed, compactTheme, changeCompactTheme } = useLocale();
+  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
+    defaultValue: [],
+  });
+  // navigation
+  const navigate = useNavigate();
+
+  // 用户配置信息
+  const [userConfig, setUserConfig] = useState<UserInfo>({
+    id: undefined,
+    name: undefined,
+  });
+
+  const initUserConfig = async () => {
+    const userInfo: UserInfo = await Units.getUserInfo();
+    setUserConfig(userInfo);
+  };
+
+  // 初始化侧边栏菜单显隐
+  const initSiderCollapsed = (hideLeftMenuTheme: string) => {
+    if (!hideLeftMenuTheme || !layoutRootPath) {
+      return;
+    }
+    const temThemes = hideLeftMenuTheme.split(",");
+    const isCollapsed = getSiderCollapsed();
+    if ((temThemes.includes(layoutRootPath) && !isCollapsed) || (!temThemes.includes(layoutRootPath) && isCollapsed)) {
+      changeSiderCollapsed();
+    }
+  }
+
+  // 上下文配置信息
+  const [globalContext, setGlobalContext] = useState<any[]>();
+  const initContext = async () => {
+    let context = await HcserviceV3.getContextSourceValue();
+    setGlobalContext(context);
+  };
+  useEffect(() => {
+    initContext();
+    initUserConfig();
+  }, []);
+
+  useEffect(() => {
+    if (themeConfig) {
+      initSiderCollapsed(themeConfig.hideLeftMenuTheme);
+    }
+  }, [themeConfig]);
+
+  // 用户是否登录
+  const [isLogin, setIsLogin] = useState<boolean>(false);
+  useEffect(() => {
+    if (userConfig?.name !== undefined && userConfig?.name !== null)
+      setIsLogin(true);
+    else setIsLogin(false);
+  }, [userConfig]);
+
+  // logout
+  const logout = async () => {
+    setKeepAliveTabs([]);
+    await HcserviceV3.logout2();
+    Units.logout();
+    navigate(logoutUrl);
+  };
+
+  // dropdown menu
+  const onClick: MenuProps["onClick"] = ({ key }) => { };
+  const dropdownMenuList: DropDownMenuType[] = [
+    {
+      label: <NavLink to={logoutUrl}>{translate("${登录}")}</NavLink>,
+      key: "login",
+      icon: <LoginOutlined />,
+      show: () => !isLogin,
+    },
+    {
+      label: (
+        <UserInfoBar
+          gtmplSourceId={userConfig?.gtmplSourceId}
+          editable={userConfig?.changePersonalInfoable}
+          userCode={userConfig?.id}
+        />
+      ),
+      key: "userInfo",
+      icon: <UserOutlined />,
+      show: () => {
+        return isLogin && userConfig?.viewPersonalInfoable;
+      },
+    },
+    {
+      label: userConfig?.name,
+      key: "userInfo",
+      icon: <UserOutlined />,
+      show: () => isLogin && !!customRender,
+    },
+    {
+      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={(e) => e.stopPropagation()}>
+          <Popconfirm
+            placement="rightBottom"
+            title={translate("${确定要[拉取]我的配置吗}?")}
+            onConfirm={() => Units.getPageConfigDefault()}
+            okText={translate("${确定}")}
+            cancelText={translate("${取消}")}
+            okType="danger"
+          >
+            {translate("${我的配置}")}
+          </Popconfirm>
+        </span>
+      ),
+      key: "userPageConfig",
+      icon: <DownloadOutlined />,
+      show: () => isLogin && themeConfig?.allowUserConfig,
+    },
+    {
+      label: <span onClick={() => changeCompactTheme()}>{translate(compactTheme ? "${默认主题}" : "${紧凑主题}")}</span>,
+      key: "compactTheme",
+      icon: <CompressOutlined />,
+      show: () => isLogin,
+    },
+    {
+      label: <ThemeButton placement="bottomRight"><div style={{ width: "100%" }}>{translate("${主题切换}")}</div></ThemeButton>,
+      key: "changeTheme",
+      icon: <AliIcon type="icon-theme" />,
+      show: () => isLogin,
+    },
+    {
+      label: <LocaleButton placement="bottomRight"><div style={{ width: "100%" }}>{translate("${语言}")}</div></LocaleButton>,
+      key: "changeLocale",
+      icon: <GlobalOutlined />,
+      show: () => isLogin,
+    },
+    {
+      label: (
+        <span onClick={() => changeSiderCollapsed()}>
+          {getSiderCollapsed() ? translate("${显示侧边栏}") : translate("${ 隐藏侧边栏 }")}
+        </span >
+      ),
+      key: "collapseSider",
+      icon: <span>{getSiderCollapsed() ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}</span>,
+      show: () => isLogin,
+    },
+    {
+      label: <div onClick={logout}>{translate("${退出}")}</div>,
+      key: "logout",
+      icon: <LogoutOutlined />,
+      show: () => 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 }}
+    >
+      {customRender && isLogin ? customRender :
+        <Button
+          type="text"
+          icon={<CaretDownOutlined />}
+          style={{
+            width: "100%",
+            height: "100%",
+            borderRadius: 0,
+            color: "#fff",
+          }}
+          {...otherProps}
+        >
+          {isLogin ? userConfig?.name : translate("${请登录}")}
+        </Button>
+      }
+    </Dropdown>
+  );
+};
+
+export default UserButton;