aldehyde 0.2.333 → 0.2.335

package/src/aldehyde/layout4/sider.tsx

@@ -0,0 +1,178 @@
+import { ConfigProvider, Layout, Menu, MenuProps, Space, Tooltip, theme } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import { NavLink, useParams, useSearchParams } from "react-router-dom";
+import {
+  getLeftMostRouteInfo,
+  getTargetMenuItemIdRouteList,
+  handlePropsMenuToAntdMenu,
+} from "../layout2/util/menu-util";
+import { useLayoutContext } from "../layout2/layout-context";
+import { MenuType } from "../layout2/type/layout-type";
+import { useLocale } from "../locale/useLocale";
+import IconFont from "../layout2/components/icon-font";
+import "./css/sider.css"
+
+type SiderPropsType = {
+  menuList: MenuType[];
+  collapsed: boolean;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+type SecoundFloorMenuList = MenuType[][];
+
+/**
+ * @param menuList 自定义的menu
+ * @returns 下标为 n 对应第 n 个根节点对应的第二层级menu
+ * @desc 获取第二层级 menu 与其下标映射的数组
+ */
+const getSecoundFloorMenuList = (
+  menuList: MenuType[]
+): SecoundFloorMenuList => {
+  const secoundFloorMenuList: SecoundFloorMenuList = Array.from({
+    length: menuList.length,
+  }).map(() => Array.from({ length: 0 }));
+
+  for (let i = 0; i < menuList.length; i++) {
+    const menuItem = menuList[i];
+    Array.isArray(menuItem.children) &&
+      (secoundFloorMenuList[i] = menuItem.children);
+  }
+  return secoundFloorMenuList;
+};
+
+const { useToken } = theme;
+
+const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
+  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
+  const { translate, getLocale } = useLocale();
+  const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  // menu select
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [openKeys, setOpenKeys] = useState([]);
+  const { sourceId } = useParams();
+  const [search] = useSearchParams();
+  const menuId: string = search.get("menuId");
+  const { token: { colorPrimary } } = useToken();
+
+  useEffect(() => {
+    secoundFloorMenuList.current = getSecoundFloorMenuList(menuList);
+  }, [menuList]);
+
+  // menu
+  const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
+    return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
+      const { disabled, label, children, icon } = menuItem;
+      const renderIcon = icon ? <IconFont type={icon} /> : "";
+      if (disabled)
+        return (
+          <div
+            style={{
+              color: "inherit",
+              width: "100%",
+              height: "100%",
+              display: "block",
+            }}
+          >
+            {translate("${" + label + "}")}
+          </div>
+        );
+      const { path, target } = getLeftMostRouteInfo(menuItem);
+      if (Array.isArray(children) && !children.length)
+        return (
+          <Tooltip title={translate("${" + label + "}")}>
+            <NavLink
+              to={`/${path}`}
+              target={target}
+              style={{
+                color: "inherit",
+                width: "100%",
+                height: "100%",
+                display: "block",
+                textOverflow: "ellipsis",
+                overflow: "hidden",
+              }}
+            >
+              <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
+            </NavLink>
+          </Tooltip>
+        );
+      return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
+    });
+  };
+
+  useEffect(() => {
+    if (!menuList.length) {
+      setMenu([]);
+      return;
+    }
+    const targetId =
+      menuId !== undefined ? menuId : sourceId !== undefined ? sourceId : null;
+    if (!targetId) return;
+    const curSiderMenuList =
+      secoundFloorMenuList.current[menuItemIdToFirstFloorIdxMap[targetId]];
+    if (curSiderMenuList) {
+      setMenu(getMenuWithSecoundFloor(curSiderMenuList));
+      const temIds = getTargetMenuItemIdRouteList(curSiderMenuList, targetId);
+      setTimeout(() => {
+        setSelectedKeys(temIds);
+        setOpenKeys(temIds);
+      }, 10);
+    }
+  }, [sourceId, menuId, menuList, getLocale()]);
+
+  // default select keys
+  useEffect(() => {
+    if (sourceId === undefined) {
+      if (secoundFloorMenuList.current[0] !== undefined) {
+        setMenu(getMenuWithSecoundFloor(secoundFloorMenuList.current[0]));
+        setSelectedKeys([]);
+        setOpenKeys([]);
+      }
+      setDocumentTitle("");
+    } else {
+      const documentTitle =
+        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
+      setDocumentTitle(translate("${" + documentTitle + "}"));
+    }
+  }, [menuList, sourceId, getLocale()]);
+
+  return (
+    <Layout.Sider
+      collapsed={collapsed}
+      collapsedWidth={0}
+      width={200}
+      className="v4-layout-sider"
+    >
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              itemBg: "transparent",
+              itemColor: colorPrimary,
+              itemSelectedColor: "#ffffff",
+              fontSize: 14,
+              subMenuItemBg: "transparent",
+              subMenuItemSelectedColor: "#ffffff"
+            },
+          },
+        }}
+      >
+        <Menu
+          mode="inline"
+          items={menu}
+          selectedKeys={selectedKeys}
+          openKeys={openKeys}
+          inlineCollapsed={false}
+          style={{
+            userSelect: "none",
+            borderInlineEnd: "none"
+          }}
+          onOpenChange={(val) => setOpenKeys([...val])}
+        />
+      </ConfigProvider>
+    </Layout.Sider>
+  );
+};
+
+export default Sider;

package/src/aldehyde/lowcode-components/base-table/index.tsx

@@ -1,5 +1,6 @@
 import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import _ from "lodash";
+import { ConfigProvider } from "antd";
 import HcserviceV3 from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 import { ViewControl } from "../../index";
@@ -213,22 +214,10 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
                         <tr >
                             <td colSpan={columns?.length}>{renderEmpty()}</td>
                         </tr>
-                    </tbody> : <>
-                        <tbody style={{ ...bodyStyle, animation: carousel.enable && data?.length > bodyStyle.pageSize ? `scroll ${carousel.speed || 3}s linear infinite` : `none` }} className="scroll-body" >
-                            {data?.map((item: Record<string, any>, index: number) => <tr key={index} className={'base-table-tr'}>
-                                {columns?.map((column: ITableColumn, i: number) =>
-                                    <td key={i} style={{ textAlign: column.valueAlign }}>
-                                        <ViewControl
-                                            serverKey={dataConfig?.serverKey}
-                                            fieldConfig={column}
-                                            value={item[column.dataIndex]}
-                                            holderType={"table"}
-                                        />
-                                    </td>)}
-                            </tr>)}
-                        </tbody>
-                        {(data?.length > bodyStyle.pageSize) && carousel.enable &&
-                            <tbody style={{ ...bodyStyle, animation: `scroll ${carousel.speed || 3}s linear infinite` }} className="scroll-body" >
+                    </tbody> :
+                        // 表格antd组件样式兼容
+                        <ConfigProvider badge={{ style: { color: bodyStyle.color || "#000000" } }}>
+                            <tbody style={{ ...bodyStyle, animation: carousel.enable && data?.length > bodyStyle.pageSize ? `scroll ${carousel.speed || 3}s linear infinite` : `none` }} className="scroll-body" >
                                 {data?.map((item: Record<string, any>, index: number) => <tr key={index} className={'base-table-tr'}>
                                     {columns?.map((column: ITableColumn, i: number) =>
                                         <td key={i} style={{ textAlign: column.valueAlign }}>
@@ -237,11 +226,25 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
                                                 fieldConfig={column}
                                                 value={item[column.dataIndex]}
                                                 holderType={"table"}
-                                            /></td>)}
+                                            />
+                                        </td>)}
                                 </tr>)}
                             </tbody>
-                        }
-                    </>}
+                            {(data?.length > bodyStyle.pageSize) && carousel.enable &&
+                                <tbody style={{ ...bodyStyle, animation: `scroll ${carousel.speed || 3}s linear infinite` }} className="scroll-body" >
+                                    {data?.map((item: Record<string, any>, index: number) => <tr key={index} className={'base-table-tr'}>
+                                        {columns?.map((column: ITableColumn, i: number) =>
+                                            <td key={i} style={{ textAlign: column.valueAlign }}>
+                                                <ViewControl
+                                                    serverKey={dataConfig?.serverKey}
+                                                    fieldConfig={column}
+                                                    value={item[column.dataIndex]}
+                                                    holderType={"table"}
+                                                /></td>)}
+                                    </tr>)}
+                                </tbody>
+                            }
+                        </ConfigProvider>}
                 </table>
             }
         </div>

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

@@ -11,17 +11,14 @@ interface ScreenFitProps {
     delay?: number,
     mode?: AdaptationType,
     scaleChange?: (xScale: number, yScale: number) => void,
-    containerStyle: {
-        width: number,
-        height: number,
-    },
 }
 
 
 export default function ScreenFit(props: ScreenFitProps) {
-    const { width, height, bodyOverflowHidden = true, delay = 500, scaleChange, containerStyle } = props
+    const { width, height, bodyOverflowHidden = true, delay = 200, scaleChange } = props
     let bodyOverflow: string
-    const elRef = useRef<HTMLDivElement>(null)
+    const elRef = useRef<HTMLDivElement>(null);
+    const canvasRef = useRef(null);
     const [size, setSize] = useState({ width, height, originalHeight: 0, originalWidth: 0 })
 
     let observer: MutationObserver;
@@ -38,8 +35,8 @@ export default function ScreenFit(props: ScreenFitProps) {
 
     function updateScale() {
         // 获取真实视口尺寸
-        const currentWidth = containerStyle.width || 0;
-        const currentHeight = containerStyle.height || 0;
+        const currentWidth = canvasRef.current?.clientWidth || 0;
+        const currentHeight = canvasRef.current?.clientHeight || 0;
         // 获取大屏最终的宽高
         const realWidth = size.width || size.originalWidth;
         const realHeight = size.height || size.originalHeight;
@@ -76,7 +73,7 @@ export default function ScreenFit(props: ScreenFitProps) {
     }
 
     const onResize = debounce(() => {
-        if (!elRef.current) return;
+        if (!elRef.current && !canvasRef.current) return;
         updateSize();
         updateScale();
     }, delay)
@@ -113,7 +110,7 @@ export default function ScreenFit(props: ScreenFitProps) {
     }, [])
 
     return (
-        <div className={'react-screen-box'}>
+        <div ref={canvasRef} className={'react-screen-box'}>
             <div className={'screen-wrapper'} ref={elRef}>
                 {props.children}
             </div>

package/src/aldehyde/lowcode-components/lowcode-view/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useState, useRef, createContext } from 'react'
+import React, { CSSProperties, useEffect, useState, createContext } from 'react'
 import { useParams } from 'react-router-dom';
 import isEqual from "lodash/isEqual";
 import chunk from "lodash/chunk";
@@ -39,7 +39,6 @@ interface Props {
 const LowcodeView = (props: Props) => {
     const { isFullScreen } = props;
     const { ddpageId } = useParams();
-    const canvasRef = useRef(null);
     const [loading, setLoading] = useState<boolean>(false);
     const [layerManager, setLayerManager] = useState<LayerManagerDataType>();
     const [canvasConfig, setCanvasConfig] = useState<CanvasConfig>();
@@ -146,7 +145,7 @@ const LowcodeView = (props: Props) => {
 
     return (
         <ControllerContext.Provider value={{ setControllers }}>
-            <div ref={canvasRef} className='lowcodeView' style={{ height: isFullScreen ? "100vh" : "calc(100vh - 121px)", ...screenFitStyleMap[adaptationType || "scale"] }}>
+            <div className='lowcodeView' style={{ height: isFullScreen ? "100vh" : "calc(100vh - 121px)", ...screenFitStyleMap[adaptationType || "scale"] }}>
                 {loading || !layerManager ?
                     <Loading />
                     :
@@ -155,10 +154,6 @@ const LowcodeView = (props: Props) => {
                             width={width}
                             height={height}
                             mode={adaptationType}
-                            containerStyle={{
-                                width: canvasRef.current?.clientWidth,
-                                height: canvasRef.current?.clientHeight
-                            }}
                         >
                             {canvasDom()}
                         </ScreenFit>)