aldehyde 0.2.440 → 0.2.442

package/src/aldehyde/layout3/page.tsx

@@ -1,5 +1,5 @@
 import { Layout, theme, ConfigProvider } from "antd";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useMemo } from "react";
 import DocumentTitle from "react-document-title";
 import { useSessionStorageState } from "ahooks";
 import { generate } from "@ant-design/colors";
@@ -11,9 +11,11 @@ import { LayoutProvider, useLayoutContext } from "../layout2/layout-context";
 import { MenuType } from "../layout2/type/layout-type";
 import Units from '../units';
 import { useLocale } from "../locale/useLocale";
-import { KeepAliveTab } from "../hooks/use-tabs";
-import { getMenuConfig } from "../layout2/page";
+import { KeepAliveTab, useTabs } from "../hooks/use-tabs";
+import { getMenuConfig, routeNavigationThemeHome } from "../layout2/page";
 import { ThemeConfig } from "../tmpl/interface";
+import { useLocation, useNavigate, NavigateFunction } from "react-router-dom";
+import { KeepAliveTabContext } from '../layout2/tabs/tabs-context';
 import "./css/main.less";
 
 const { useToken } = theme;
@@ -25,6 +27,7 @@ type PagePropsType = {
 const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const [systemName, setSystemName] = useState("");
   const [menu, setMenu] = useState<MenuType[]>([]);
+  const [customHome, setCustomHome] = useState<string>(); // 自定义首页菜单
   const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
   const pageRef = useRef<HTMLDivElement>(undefined); // page ref
   //清空缓存
@@ -32,6 +35,9 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { documentTitle, updateMenuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { getSiderCollapsed, compactTheme } = useLocale();
   const { token: { colorPrimary } } = useToken();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { closeTab, tabs, refreshTab, closeOtherTab, setTabs, activeTabRoutePath } = useTabs();
 
   const getThemeConfigAndMenuConfig = async () => {
     const tConfig = await Units.getThemeConfig();
@@ -40,6 +46,8 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
     setMenu(menuConfig?.menu);
     updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
     setThemeConfig(tConfig);
+    const temCustomHome = routeNavigationThemeHome(tConfig, menuConfig?.menu, pathname, navigate, closeTab);
+    setCustomHome(temCustomHome);
   };
 
   useEffect(() => {
@@ -49,6 +57,11 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
     window.addEventListener('beforeunload', () => { setKeepAliveTabs([]); });
   }, []);
 
+  const keepAliveContextValue = useMemo(
+    () => ({ closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath }),
+    [closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath]
+  );
+
   return (
     <DocumentTitle title={documentTitle}>
       <div
@@ -71,13 +84,15 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
           modal={{ className: "v3-antd-modal" }}
           card={{ className: "v3-antd-card" }}
         >
-          <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-            <Header themeConfig={themeConfig} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
-            <Layout>
-              <Sider themeConfig={themeConfig} menuList={menu} collapsed={getSiderCollapsed()}></Sider>
-              <Main menuList={menu} >{props.children}</Main>
+          <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+            <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
+              <Header themeConfig={themeConfig} 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>
-          </Layout>
+          </KeepAliveTabContext.Provider>
         </ConfigProvider>
       </div>
     </DocumentTitle>

package/src/aldehyde/layout4/components/tabs-layout.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useContext } from "react";
 import { Dropdown, Tabs } from 'antd';
 import { MenuItemType } from 'antd/es/menu/interface';
 import { KeepAliveTabContext } from '../../layout2/tabs/tabs-context';
-import { KeepAliveTab, useTabs } from "../../hooks/use-tabs";
+import { KeepAliveTab } from "../../hooks/use-tabs";
 import antdIcons from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import QueueAnim from 'rc-queue-anim';
@@ -23,7 +23,7 @@ const TabsLayout = (props: Props) => {
   const { menuList } = props;
   const { translate } = useLocale();
   const navigate = useNavigate();
-  const { activeTabRoutePath, tabs = [], closeTab, refreshTab, closeOtherTab } = useTabs();
+  const { activeTabRoutePath, closeTab, refreshTab, closeOtherTab, tabs = [] } = useContext(KeepAliveTabContext);
 
   const menuItems: MenuItemType[] = useMemo(
     () => tabs.length <= 1 ? [] : [
@@ -91,30 +91,20 @@ const TabsLayout = (props: Props) => {
     }
   }, [tabs]);
 
-  const keepAliveContextValue = useMemo(
-    () => ({
-      closeTab,
-      closeOtherTab,
-      refreshTab,
-    }),
-    [closeTab, closeOtherTab, refreshTab]
-  );
 
   return (
-    <KeepAliveTabContext.Provider value={keepAliveContextValue}>
-      <Tabs
-        animated={true}
-        className="v4-tabs-layout"
-        activeKey={activeTabRoutePath}
-        items={tabItems}
-        type="editable-card"
-        onChange={onTabsChange}
-        hideAdd
-        onEdit={(e) => closeTab(e.toString())}
-        size="small"
-      // tabBarGutter={10}
-      />
-    </KeepAliveTabContext.Provider>
+    <Tabs
+      animated={true}
+      className="v4-tabs-layout"
+      activeKey={activeTabRoutePath}
+      items={tabItems}
+      type="editable-card"
+      onChange={onTabsChange}
+      hideAdd
+      onEdit={(e) => closeTab(e.toString())}
+      size="small"
+    // tabBarGutter={10}
+    />
   )
 }
 

package/src/aldehyde/layout4/header.tsx

@@ -51,11 +51,12 @@ type HeaderPropsType = {
   style?: any;
   logoImg?: string;
   themeConfig?: ThemeConfig;
+  customHome?: string;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
 
-const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg, themeConfig }) => {
+const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg, themeConfig, customHome }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { translate, getLocale } = useLocale();
   const [menu, setMenu] = useState<MenuItem[]>([]);
@@ -141,7 +142,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg, them
   return (
     <Layout.Header className="v4-layout-header"  >
       <div className="header-top" style={{ backgroundImage: `url(${headerBgImg})` }}>
-        <NavLink to="/v4/home" style={{ display: "contents" }}>
+        <NavLink to={customHome || "/v4/home"} style={{ display: "contents" }}>
           <div className="header-title">
             {logoImg ? <img src={logoImg} alt="" /> : <IconFont type="icon-xinpian" className="header-title-icon" />}
             <div className="header-title-text">{translate("${" + systemName + "}")}</div></div>

package/src/aldehyde/layout4/page.tsx

@@ -1,5 +1,5 @@
 import { Layout, theme, ConfigProvider } from "antd";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useMemo } from "react";
 import DocumentTitle from "react-document-title";
 import { useSessionStorageState } from "ahooks";
 import { generate } from "@ant-design/colors";
@@ -11,10 +11,12 @@ import { LayoutProvider, useLayoutContext } from "../layout2/layout-context";
 import { MenuType } from "../layout2/type/layout-type";
 import Units from '../units';
 import { useLocale } from "../locale/useLocale";
-import { KeepAliveTab } from "../hooks/use-tabs";
-import { getMenuConfig } from "../layout2/page";
+import { KeepAliveTab, useTabs } from "../hooks/use-tabs";
+import { getMenuConfig, routeNavigationThemeHome } from "../layout2/page";
 import homePng from "./imgs/home.png";
 import { ThemeConfig } from "../tmpl/interface";
+import { useLocation, useNavigate, NavigateFunction } from "react-router-dom";
+import { KeepAliveTabContext } from '../layout2/tabs/tabs-context';
 import "./css/main.less";
 
 const { useToken } = theme;
@@ -28,6 +30,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { logo } = props;
   const [systemName, setSystemName] = useState("");
   const [systemLogo, setSystemLogo] = useState("");
+  const [customHome, setCustomHome] = useState<string>(); // 自定义首页菜单
   const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
   const [menu, setMenu] = useState<MenuType[]>([]);
   const pageRef = useRef<HTMLDivElement>(undefined); // page ref
@@ -36,6 +39,9 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { documentTitle, updateMenuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { getSiderCollapsed, compactTheme } = useLocale();
   const { token: { colorPrimary } } = useToken();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { closeTab, tabs, refreshTab, closeOtherTab, setTabs, activeTabRoutePath } = useTabs();
 
   const getThemeConfigAndMenuConfig = async () => {
     const tConfig = await Units.getThemeConfig();
@@ -45,6 +51,8 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
     setMenu(menuConfig?.menu);
     updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
     setThemeConfig(tConfig);
+    const temCustomHome = routeNavigationThemeHome(tConfig, menuConfig?.menu, pathname, navigate, closeTab);
+    setCustomHome(temCustomHome);
   };
 
   useEffect(() => {
@@ -54,6 +62,11 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
     window.addEventListener('beforeunload', () => { setKeepAliveTabs([]); });
   }, []);
 
+  const keepAliveContextValue = useMemo(
+    () => ({ closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath }),
+    [closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath]
+  );
+
   return (
     <DocumentTitle title={documentTitle}>
       <div
@@ -86,13 +99,15 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
           modal={{ className: "v4-antd-modal" }}
           card={{ className: "v4-antd-card" }}
         >
-          <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-            <Header themeConfig={themeConfig} logoImg={logo || systemLogo} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
-            <Layout>
-              <Sider themeConfig={themeConfig} menuList={menu} collapsed={getSiderCollapsed()}></Sider>
-              <Main menuList={menu}>{props.children}</Main>
+          <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>
-          </Layout>
+          </KeepAliveTabContext.Provider>
         </ConfigProvider>
       </div>
     </DocumentTitle >

package/src/aldehyde/layout5/page.tsx

@@ -1,5 +1,5 @@
 import { Layout, theme, ConfigProvider } from "antd";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useMemo } from "react";
 import DocumentTitle from "react-document-title";
 import { useSessionStorageState } from "ahooks";
 import { generate } from "@ant-design/colors";
@@ -11,9 +11,11 @@ import { LayoutProvider, useLayoutContext } from "../layout2/layout-context";
 import { MenuType } from "../layout2/type/layout-type";
 import Units from '../units';
 import { useLocale } from "../locale/useLocale";
-import { KeepAliveTab } from "../hooks/use-tabs";
-import { getMenuConfig } from "../layout2/page";
+import { KeepAliveTab, useTabs } from "../hooks/use-tabs";
+import { getMenuConfig, routeNavigationThemeHome } from "../layout2/page";
 import { ThemeConfig } from "../tmpl/interface";
+import { useLocation, useNavigate, NavigateFunction } from "react-router-dom";
+import { KeepAliveTabContext } from '../layout2/tabs/tabs-context';
 import homePng from "./imgs/home.png";
 
 const { useToken } = theme;
@@ -27,6 +29,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { logo } = props;
   const [systemName, setSystemName] = useState("");
   const [systemLogo, setSystemLogo] = useState("");
+  const [customHome, setCustomHome] = useState<string>(); // 自定义首页菜单
   const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
   const [menu, setMenu] = useState<MenuType[]>([]);
   const pageRef = useRef<HTMLDivElement>(undefined); // page ref
@@ -35,6 +38,9 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { documentTitle, updateMenuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { getSiderCollapsed, compactTheme } = useLocale();
   const { token: { colorPrimary } } = useToken();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { closeTab, tabs, refreshTab, closeOtherTab, setTabs, activeTabRoutePath } = useTabs();
 
   const getThemeConfigAndMenuConfig = async () => {
     const tConfig = await Units.getThemeConfig();
@@ -44,6 +50,8 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
     setMenu(menuConfig?.menu);
     updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
     setThemeConfig(tConfig);
+    const temCustomHome = routeNavigationThemeHome(tConfig, menuConfig?.menu, pathname, navigate, closeTab);
+    setCustomHome(temCustomHome);
   };
 
   useEffect(() => {
@@ -53,6 +61,11 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
     window.addEventListener('beforeunload', () => { setKeepAliveTabs([]); });
   }, []);
 
+  const keepAliveContextValue = useMemo(
+    () => ({ closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath }),
+    [closeTab, closeOtherTab, refreshTab, setTabs, tabs, activeTabRoutePath]
+  );
+
   return (
     <DocumentTitle title={documentTitle}>
       <div
@@ -67,13 +80,16 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
           theme={{
             algorithm: compactTheme ? [theme.compactAlgorithm] : [],
           }}>
-          <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-            <Sider themeConfig={themeConfig} logoImg={logo || systemLogo} menuList={menu} collapsed={getSiderCollapsed()} systemName={systemName ? systemName : Units.programName_NavLeft()} />
-            <Layout>
-              <Header themeConfig={themeConfig} menuList={menu} />
-              <Main menuList={menu}>{props.children}</Main>
+          <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+
+            <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
+              <Sider themeConfig={themeConfig} logoImg={logo || systemLogo} menuList={menu} collapsed={getSiderCollapsed()} systemName={systemName ? systemName : Units.programName_NavLeft()} customHome={customHome} />
+              <Layout>
+                <Header themeConfig={themeConfig} menuList={menu} />
+                <Main menuList={menu}>{props.children}</Main>
+              </Layout>
             </Layout>
-          </Layout>
+          </KeepAliveTabContext.Provider>
         </ConfigProvider>
       </div>
     </DocumentTitle>

package/src/aldehyde/layout5/sider.tsx

@@ -21,6 +21,7 @@ type SiderPropsType = {
   systemName: string;
   logoImg?: string;
   themeConfig?: ThemeConfig;
+  customHome?: string;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
@@ -48,7 +49,7 @@ const getSecoundFloorMenuList = (
 
 const { useToken } = theme;
 
-const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName, logoImg, themeConfig }) => {
+const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName, logoImg, themeConfig, customHome }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { translate, getLocale } = useLocale();
   const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
@@ -171,7 +172,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName, logo
           color: "inherit",
           borderBottom: "1px solid rgba(0,21,41,.08)",
         }}
-        to={"/v5/home"}
+        to={customHome || "/v5/home"}
       >
         {logoImg ? <img
           className="header-logo"

package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx

@@ -22,7 +22,7 @@ export default function ScreenFit(props: ScreenFitProps) {
     const canvasRef = useRef(null);
     const [size, setSize] = useState({ width, height, originalHeight: 0, originalWidth: 0 })
 
-    let observer: MutationObserver;
+    let observer: ResizeObserver;
 
     function updateSize() {
         if (size.width && size.height) {
@@ -90,12 +90,8 @@ export default function ScreenFit(props: ScreenFitProps) {
             bodyOverflow = document.body.style.overflow;
             document.body.style.overflow = 'hidden';
         }
-        observer = new MutationObserver(() => onResize());
-        observer.observe(elRef.current, {
-            attributes: true,
-            attributeFilter: ['style'],
-            attributeOldValue: true
-        })
+        observer = new ResizeObserver(() => onResize());
+        observer.observe(canvasRef.current);
         setSize({
             ...size,
             originalWidth: window.screen.width,

package/src/aldehyde/table/act-table.tsx

@@ -732,9 +732,9 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
 
   doJump = async (jump: JumpConfig, record_: DtmplData) => {
     let record = record_.fieldMap ? record_.fieldMap : record_;
+    const version = localStorage.getItem("version") || "";
 
     let url = null;
-
     let path = jump.path;
     if (!path) {
       path = "/";
@@ -751,7 +751,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
       url = path.split("//")[0] + "//";
       path = path.split("//")[1];
     } else {
-      url = new URL(window.location.href).pathname;
+      url = `/#/${version}`;
     }
 
     //处理路由参数

package/src/aldehyde/tmpl/interface.tsx

@@ -887,4 +887,5 @@ export interface ThemeConfig {
   showTopMenuIcon?: boolean;
   styleTheme?: string;
   themeColor?: string;
+  homeSourceId?: string; // 首页菜单
 }

package/src/aldehyde/tree/tmpl-tree.tsx

@@ -203,11 +203,11 @@ class TmplTree extends React.PureComponent<TmplTreeProps, TmplTreeState> {
       }
       if (defSelect && !this.state.currentNodeData && !currentId) { // 是否默认选中
         const leafNode = findFirstLeaf(this.state.data);
-        if (leafNode) this.onClickNode(leafNode);
+        if (leafNode) this.onClickNode(leafNode, false);
       }
       if (currentId) { // 指定默认选中项
         const curNode = findFirstLeaf(this.state.data, currentId);
-        if (curNode) this.onClickNode(curNode);
+        if (curNode) this.onClickNode(curNode, false);
       }
     });
   }
@@ -236,7 +236,8 @@ class TmplTree extends React.PureComponent<TmplTreeProps, TmplTreeState> {
   };
   serial_number = new Date().getTime();
 
-  onClickNode = (dataNode: TreeDataNode) => {
+  // throttle是否节流
+  onClickNode = (dataNode: TreeDataNode, throttle = true) => {
     const {
       doEditRoot,
       doViewRoot,
@@ -247,7 +248,7 @@ class TmplTree extends React.PureComponent<TmplTreeProps, TmplTreeState> {
 
 
     let new_serial_number = new Date().getTime();
-    if (new_serial_number - this.serial_number > 1500) {
+    if (!throttle || (new_serial_number - this.serial_number > 1500)) {
       this.serial_number = new_serial_number;
     } else {
       return;

package/src/aldehyde/units/index.tsx

@@ -1274,5 +1274,22 @@ export default {
     }, {});
     this.coverUserPageConfig(defUserPageConfig); // 覆盖本地缓存
     return configs;
+  },
+  findItemByIdIterative(tree: any[], value: string | number, key = "id") { // 查找树级数组中的指定项
+    if (!tree?.length) {
+      return undefined;
+    }
+    // 使用一个栈来存储待遍历的节点
+    const stack = [...tree];
+    while (stack.length > 0) {
+      const node = stack.pop();
+      if (node[key] === value) {
+        return node;
+      }
+      if (node.children && node.children.length > 0) {
+        stack.push(...node.children);
+      }
+    }
+    return undefined;
   }
 };