aldehyde 0.2.479 → 0.2.481

package/src/aldehyde/layout2/page.tsx

@@ -1,315 +1,315 @@
-import { Layout, theme, ConfigProvider } from "antd";
-import React, {
-  useEffect,
-  useRef,
-  useState, useMemo
-} 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, ThemeConfig } from "../tmpl/interface";
-import { useVarCssColor } from "../hooks/useVarCssColor";
-import { generate } from "@ant-design/colors";
-import { LayoutProvider, useLayoutContext } from "./layout-context";
-import DocumentTitle from "react-document-title";
-import Units from '../units';
-import { useLocale } from "../locale/useLocale";
-import { useSessionStorageState } from "ahooks";
-import { KeepAliveTab, useTabs } from "../hooks/use-tabs";
-import homePng from "./imgs/home.png";
-import { useLocation, useNavigate, NavigateFunction } from "react-router-dom";
-import { KeepAliveTabContext } from './tabs/tabs-context';
-
-type PagePropsType = {
-  children?: React.ReactNode;
-  logo?: string;
-};
-
-// 跳转主题指定首页
-export const routeNavigationThemeHome = (theme: ThemeConfig, menus: MenuType[], pathname: string, navigate: NavigateFunction, closeTab, version?: string) => {
-  const defHomePath = ["/home", "/home/"];
-  const isHome = defHomePath.some(r => pathname.endsWith(r));
-  const { homeSourceId, homePageUrl } = theme || {};
-  if (isHome && homePageUrl) { // 首页自定义链接
-    if (homePageUrl.startsWith("http")) {
-      window.open(homePageUrl, "_self");
-      return homePageUrl;
-    } else {
-      // version 版本路由 v2/v3/v4/v5
-      const temUrl = homePageUrl.startsWith("/") ? `/${version}${homePageUrl}` : `/${version}/${homePageUrl}`;
-      navigate(temUrl, { replace: true });
-      return temUrl;
-    }
-  }
-  if (!homeSourceId || !menus?.length) {
-    return;
-  }
-  const item = Units.findItemByIdIterative(menus, homeSourceId);
-  if (!item) {
-    return;
-  }
-  if (isHome) { // 当前菜单是默认首页，删除默认首页，跳转指定首页
-    setTimeout(() => {
-      closeTab(pathname);
-      navigate(`/${item.url}`, { replace: true });
-    }, 1);
-  }
-  return `/${item.url}`;
-}
-
-export const handleMenuItemUrl = (
-  id: string,
-  pageType: BlockType["pageType"],
-  query: { [key: string]: string } = {},
-  customPath?: string,
-  dragDropPageId?: string,
-  fullScreen?: boolean,
-  version?: string, // 版本路由 v2/v3
-) => {
-  if (customPath) return `${fullScreen ? "" : `${version}/`}page/${id}/${customPath}?menuId=${id}`;
-  if (dragDropPageId) {
-    return `${fullScreen ? "" : `${version}/`}ddpage/${id}/${dragDropPageId}?menuId=${id}`;
-  }
-
-  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;
-    case "导入":
-      routePath = "importer";
-      break;
-    case "报表":
-      routePath = "report-table";
-      break;
-    case "分屏-列表":
-      routePath = "splitview-act-table";
-      break;
-    case "分屏-报表":
-      routePath = "splitview-report-table";
-      break;
-    case "甘特图":
-      routePath = "gantt";
-      break;
-    case "日历":
-      routePath = "calendar";
-      break;
-    default:
-      routePath = "";
-  }
-
-  if (operator !== "") queryParam["codeSource"] = operator;
-  return `${version}/${id}/${routePath}?${Object.entries(queryParam)
-    .map(([key, val]) => `${key}=${val}`)
-    .join("&")}`;
-};
-
-const handleMenuRes = (menuList: MenuConfigAPIType["blocks"], version: string): 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, dragDropPageId,
-    pageType,
-    linkTarget,
-    defaultCriteriaValue,
-    items,
-    fullScreen,
-    icon,
-    themeColor,
-    funcDescription
-  } of menuList) {
-    if (!(hiddenOnDisabled === true && disabled === true)) {
-      const menu: MenuType = {
-        id,
-        label: title,
-        disabled: disabled === undefined ? false : disabled,
-        url: handleMenuItemUrl(id, pageType, defaultCriteriaValue, customPath, dragDropPageId, fullScreen, version),
-        linkTarget,
-        children: items?.length ? handleMenuRes(items, version) : [],
-        icon,
-        themeColor,
-        funcDescription,
-        dragDropPageId,
-        customPath
-      };
-      retList.push(menu);
-    }
-  }
-
-  return retList;
-};
-
-
-
-export const getMenuConfig = async (version = "v2"): Promise<{
-  systemName: string;
-  menu: MenuType[];
-}> => {
-
-  const res = await HcserviceV3.requestBlocks("", "");
-  let menuList: MenuType[] = [];
-  if (res?.blocks) {
-    menuList = handleMenuRes(res.blocks, version);
-  }
-  let tmp = {};
-  menuList.forEach((menu: MenuType) => {
-    getMenuMap(menu, tmp);
-  })
-  Units.setMenuMap(tmp);
-
-  return {
-    menu: menuList,
-    systemName: res?.programName,
-  };
-};
-
-const getMenuMap = (menu: MenuType, menuMap: object = {}) => {
-  if (menu) {
-    menuMap[menu.id] = menu.label;
-    // eslint-disable-next-line no-unused-expressions
-    menu.children?.forEach((m: MenuType) => {
-      getMenuMap(m, menuMap);
-    })
-  }
-}
-
-const { useToken } = theme;
-
-const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
-  const { logo } = props;
-  //清空缓存
-  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
-    defaultValue: [],
-  });
-  window.addEventListener('beforeunload', () => {
-    setKeepAliveTabs([]);
-  });
-
-  const {
-    documentTitle,
-    updateMenuItemIdToFirstFloorIdxMap,
-  } = useLayoutContext();
-  const { getSiderCollapsed, compactTheme } = useLocale();
-  const {
-    token: { colorPrimary },
-  } = useToken();
-
-  useEffect(() => {
-    localStorage.setItem("version", "v2");
-  }, []);
-
-  const [systemName, setSystemName] = useState("");
-  const [systemLogo, setSystemLogo] = useState("");
-  const [menu, SetMenu] = useState<MenuType[]>([]);
-  const [customHome, setCustomHome] = useState<string>(); // 自定义首页菜单
-  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
-  const { pathname } = useLocation();
-  const navigate = useNavigate();
-  const { closeTab, tabs, refreshTab, closeOtherTab, setTabs, activeTabRoutePath } = useTabs();
-
-  const getThemeConfigAndMenuConfig = async () => {
-    const tConfig = await Units.getThemeConfig();
-    const menuConfig = await getMenuConfig();
-    setSystemName(tConfig?.programName || menuConfig?.systemName);
-    setSystemLogo(tConfig?.programIcon || homePng);
-    SetMenu(menuConfig?.menu);
-    updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
-    setThemeConfig(tConfig);
-    const temCustomHome = routeNavigationThemeHome(tConfig, menuConfig?.menu, pathname, navigate, closeTab, "v2");
-    setCustomHome(temCustomHome);
-  };
-
-
-  useEffect(() => {
-    getThemeConfigAndMenuConfig();
-  }, []);
-
-  // page ref
-  const pageRef = useRef<HTMLDivElement>(undefined);
-
-  useEffect(() => {
-    useVarCssColor(generate(colorPrimary));
-  }, []);
-
-  const keepAliveContextValue = useMemo(
-    () => ({ closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath }),
-    [closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath]
-  );
-
-  return (
-    <DocumentTitle title={documentTitle || ""}>
-      <div
-        ref={pageRef}
-        style={{
-          width: "100%",
-          height: "100%",
-          position: "absolute",
-        }}
-      >
-        <ConfigProvider
-          theme={{
-            algorithm: compactTheme ? [theme.compactAlgorithm] : [],
-          }}>
-          <KeepAliveTabContext.Provider value={keepAliveContextValue}>
-            <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-              <Header themeConfig={themeConfig} logoImg={logo || systemLogo} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu} customHome={customHome} />
-              <Layout>
-                <Sider themeConfig={themeConfig} menuList={menu} collapsed={getSiderCollapsed()}></Sider>
-                <Main menuList={menu}>{props.children}</Main>
-              </Layout>
-            </Layout>
-          </KeepAliveTabContext.Provider>
-        </ConfigProvider>
-      </div>
-    </DocumentTitle>
-  );
-};
-
-const ContextPage: React.FC<PagePropsType> = (props: PagePropsType) => {
-
-  return (
-    <LayoutProvider>
-      <Page {...props}>{props.children}</Page>
-    </LayoutProvider>
-  );
-};
-
-export default ContextPage;
+import { Layout, theme, ConfigProvider } from "antd";
+import React, {
+  useEffect,
+  useRef,
+  useState, useMemo
+} 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, ThemeConfig } from "../tmpl/interface";
+import { useVarCssColor } from "../hooks/useVarCssColor";
+import { generate } from "@ant-design/colors";
+import { LayoutProvider, useLayoutContext } from "./layout-context";
+import DocumentTitle from "react-document-title";
+import Units from '../units';
+import { useLocale } from "../locale/useLocale";
+import { useSessionStorageState } from "ahooks";
+import { KeepAliveTab, useTabs } from "../hooks/use-tabs";
+import homePng from "./imgs/home.png";
+import { useLocation, useNavigate, NavigateFunction } from "react-router-dom";
+import { KeepAliveTabContext } from './tabs/tabs-context';
+
+type PagePropsType = {
+  children?: React.ReactNode;
+  logo?: string;
+};
+
+// 跳转主题指定首页
+export const routeNavigationThemeHome = (theme: ThemeConfig, menus: MenuType[], pathname: string, navigate: NavigateFunction, closeTab, version?: string) => {
+  const defHomePath = ["/home", "/home/"];
+  const isHome = defHomePath.some(r => pathname.endsWith(r));
+  const { homeSourceId, homePageUrl } = theme || {};
+  if (isHome && homePageUrl) { // 首页自定义链接
+    if (homePageUrl.startsWith("http")) {
+      window.open(homePageUrl, "_self");
+      return homePageUrl;
+    } else {
+      // version 版本路由 v2/v3/v4/v5
+      const temUrl = homePageUrl.startsWith("/") ? `/${version}${homePageUrl}` : `/${version}/${homePageUrl}`;
+      navigate(temUrl, { replace: true });
+      return temUrl;
+    }
+  }
+  if (!homeSourceId || !menus?.length) {
+    return;
+  }
+  const item = Units.findItemByIdIterative(menus, homeSourceId);
+  if (!item) {
+    return;
+  }
+  if (isHome) { // 当前菜单是默认首页，删除默认首页，跳转指定首页
+    setTimeout(() => {
+      closeTab(pathname);
+      navigate(`/${item.url}`, { replace: true });
+    }, 1);
+  }
+  return `/${item.url}`;
+}
+
+export const handleMenuItemUrl = (
+  id: string,
+  pageType: BlockType["pageType"],
+  query: { [key: string]: string } = {},
+  customPath?: string,
+  dragDropPageId?: string,
+  fullScreen?: boolean,
+  version?: string, // 版本路由 v2/v3
+) => {
+  if (customPath) return `${fullScreen ? "" : `${version}/`}page/${id}/${customPath}?menuId=${id}`;
+  if (dragDropPageId) {
+    return `${fullScreen ? "" : `${version}/`}ddpage/${id}/${dragDropPageId}?menuId=${id}`;
+  }
+
+  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;
+    case "导入":
+      routePath = "importer";
+      break;
+    case "报表":
+      routePath = "report-table";
+      break;
+    case "分屏-列表":
+      routePath = "splitview-act-table";
+      break;
+    case "分屏-报表":
+      routePath = "splitview-report-table";
+      break;
+    case "甘特图":
+      routePath = "gantt";
+      break;
+    case "日历":
+      routePath = "calendar";
+      break;
+    default:
+      routePath = "";
+  }
+
+  if (operator !== "") queryParam["codeSource"] = operator;
+  return `${version}/${id}/${routePath}?${Object.entries(queryParam)
+    .map(([key, val]) => `${key}=${val}`)
+    .join("&")}`;
+};
+
+const handleMenuRes = (menuList: MenuConfigAPIType["blocks"], version: string): 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, dragDropPageId,
+    pageType,
+    linkTarget,
+    defaultCriteriaValue,
+    items,
+    fullScreen,
+    icon,
+    themeColor,
+    funcDescription
+  } of menuList) {
+    if (!(hiddenOnDisabled === true && disabled === true)) {
+      const menu: MenuType = {
+        id,
+        label: title,
+        disabled: disabled === undefined ? false : disabled,
+        url: handleMenuItemUrl(id, pageType, defaultCriteriaValue, customPath, dragDropPageId, fullScreen, version),
+        linkTarget,
+        children: items?.length ? handleMenuRes(items, version) : [],
+        icon,
+        themeColor,
+        funcDescription,
+        dragDropPageId,
+        customPath
+      };
+      retList.push(menu);
+    }
+  }
+
+  return retList;
+};
+
+
+
+export const getMenuConfig = async (version = "v2"): Promise<{
+  systemName: string;
+  menu: MenuType[];
+}> => {
+
+  const res = await HcserviceV3.requestBlocks("", "");
+  let menuList: MenuType[] = [];
+  if (res?.blocks) {
+    menuList = handleMenuRes(res.blocks, version);
+  }
+  let tmp = {};
+  menuList.forEach((menu: MenuType) => {
+    getMenuMap(menu, tmp);
+  })
+  Units.setMenuMap(tmp);
+
+  return {
+    menu: menuList,
+    systemName: res?.programName,
+  };
+};
+
+const getMenuMap = (menu: MenuType, menuMap: object = {}) => {
+  if (menu) {
+    menuMap[menu.id] = menu.label;
+    // eslint-disable-next-line no-unused-expressions
+    menu.children?.forEach((m: MenuType) => {
+      getMenuMap(m, menuMap);
+    })
+  }
+}
+
+const { useToken } = theme;
+
+const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
+  const { logo } = props;
+  //清空缓存
+  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
+    defaultValue: [],
+  });
+  window.addEventListener('beforeunload', () => {
+    setKeepAliveTabs([]);
+  });
+
+  const {
+    documentTitle,
+    updateMenuItemIdToFirstFloorIdxMap,
+  } = useLayoutContext();
+  const { getSiderCollapsed, compactTheme } = useLocale();
+  const {
+    token: { colorPrimary },
+  } = useToken();
+
+  useEffect(() => {
+    localStorage.setItem("version", "v2");
+  }, []);
+
+  const [systemName, setSystemName] = useState("");
+  const [systemLogo, setSystemLogo] = useState("");
+  const [menu, SetMenu] = useState<MenuType[]>([]);
+  const [customHome, setCustomHome] = useState<string>(); // 自定义首页菜单
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { closeTab, tabs, refreshTab, closeOtherTab, setTabs, activeTabRoutePath } = useTabs();
+
+  const getThemeConfigAndMenuConfig = async () => {
+    const tConfig = await Units.getThemeConfig();
+    const menuConfig = await getMenuConfig();
+    setSystemName(tConfig?.programName || menuConfig?.systemName);
+    setSystemLogo(tConfig?.programIcon || homePng);
+    SetMenu(menuConfig?.menu);
+    updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
+    setThemeConfig(tConfig);
+    const temCustomHome = routeNavigationThemeHome(tConfig, menuConfig?.menu, pathname, navigate, closeTab, "v2");
+    setCustomHome(temCustomHome);
+  };
+
+
+  useEffect(() => {
+    getThemeConfigAndMenuConfig();
+  }, []);
+
+  // page ref
+  const pageRef = useRef<HTMLDivElement>(undefined);
+
+  useEffect(() => {
+    useVarCssColor(generate(colorPrimary));
+  }, []);
+
+  const keepAliveContextValue = useMemo(
+    () => ({ closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath }),
+    [closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath]
+  );
+
+  return (
+    <DocumentTitle title={documentTitle || ""}>
+      <div
+        ref={pageRef}
+        style={{
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+        }}
+      >
+        <ConfigProvider
+          theme={{
+            algorithm: compactTheme ? [theme.compactAlgorithm] : [],
+          }}>
+          <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+            <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
+              <Header themeConfig={themeConfig} logoImg={logo || systemLogo} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu} customHome={customHome} />
+              <Layout>
+                <Sider themeConfig={themeConfig} menuList={menu} collapsed={getSiderCollapsed()}></Sider>
+                <Main menuList={menu}>{props.children}</Main>
+              </Layout>
+            </Layout>
+          </KeepAliveTabContext.Provider>
+        </ConfigProvider>
+      </div>
+    </DocumentTitle>
+  );
+};
+
+const ContextPage: React.FC<PagePropsType> = (props: PagePropsType) => {
+
+  return (
+    <LayoutProvider>
+      <Page {...props}>{props.children}</Page>
+    </LayoutProvider>
+  );
+};
+
+export default ContextPage;