aldehyde 0.2.460 → 0.2.462

package/src/aldehyde/layout2/sider.tsx

@@ -87,9 +87,9 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) =
 
   // menu
   const [menu, setMenu] = useState<MenuItem[]>([]);
-  const getMenuWithSecoundFloor = (
-    secoundFloorMenu: SecoundFloorMenuList[number]
-  ) => {
+
+  const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
+    const locale = getLocale();
     return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem, floor) => {
       const { disabled, label, children, icon } = menuItem;
       const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
@@ -110,26 +110,27 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) =
 
       const { path, target } = getLeftMostRouteInfo(menuItem);
 
-      if (Array.isArray(children) && !children.length)
-        return (
+      if (Array.isArray(children) && !children.length) {
+        const navLink = <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>;
+        return (locale === "zh" ? navLink :
           <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>
+            {navLink}
           </Tooltip>
         );
-
+      }
       return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
     });
   };

package/src/aldehyde/layout3/css/main.less

@@ -19,7 +19,8 @@
   }
 
   .ant-drawer,
-  .ant-modal-content {
+  .ant-modal-content,
+  .ant-modal-container {
 
     .ant-card-head {
       background: transparent !important;
@@ -95,7 +96,8 @@
   }
 
   /* selectTable 弹窗样式 */
-  .ant-popover-inner-content {
+  .ant-popover-inner-content,
+  .ant-popover-content {
     .select-table-popover {
       background-color: #041B3B !important;
       border-color: #15325b !important;
@@ -126,7 +128,9 @@
 }
 
 .v3-antd-modal {
-  .ant-modal-content {
+
+  .ant-modal-content,
+  .ant-modal-container {
     background: var(--ant-color-bg-base) !important;
     border: 1px solid var(--ant-color-border-secondary) !important;
   }

package/src/aldehyde/layout3/page.tsx

@@ -63,7 +63,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   );
 
   return (
-    <DocumentTitle title={documentTitle}>
+    <DocumentTitle title={documentTitle || ""}>
       <div
         ref={pageRef}
         className="v3-main"

package/src/aldehyde/layout3/sider.tsx

@@ -74,6 +74,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) =
 
   // menu
   const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
+    const locale = getLocale();
     return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
       const { disabled, label, children, icon } = menuItem;
       const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
@@ -91,25 +92,27 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) =
           </div>
         );
       const { path, target } = getLeftMostRouteInfo(menuItem);
-      if (Array.isArray(children) && !children.length)
-        return (
+      if (Array.isArray(children) && !children.length) {
+        const navLink = <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>;
+        return (locale === "zh" ? navLink :
           <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>
+            {navLink}
           </Tooltip>
         );
+      }
       return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
     });
   };

package/src/aldehyde/layout4/css/main.less

@@ -19,7 +19,8 @@
   }
 
   .ant-drawer,
-  .ant-modal-content {
+  .ant-modal-content,
+  .ant-modal-container {
 
     .ant-card-head {
       background: transparent !important;
@@ -88,7 +89,8 @@
   }
 
   /* selectTable 弹窗样式 */
-  .ant-popover-inner-content {
+  .ant-popover-inner-content,
+  .ant-popover-content {
     .select-table-popover {
       background-color: #001325 !important;
       border-color: #15325b !important;
@@ -119,7 +121,9 @@
 }
 
 .v4-antd-modal {
-  .ant-modal-content {
+
+  .ant-modal-content,
+  .ant-modal-container {
     background: var(--ant-color-bg-base) !important;
     border: 1px solid var(--ant-color-border-secondary) !important;
   }

package/src/aldehyde/layout4/page.tsx

@@ -68,7 +68,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   );
 
   return (
-    <DocumentTitle title={documentTitle}>
+    <DocumentTitle title={documentTitle || ""}>
       <div
         ref={pageRef}
         className="v4-main"

package/src/aldehyde/layout4/sider.tsx

@@ -77,6 +77,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) =
 
   // menu
   const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
+    const locale = getLocale();
     return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
       const { disabled, label, children, icon } = menuItem;
       const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
@@ -94,25 +95,27 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) =
           </div>
         );
       const { path, target } = getLeftMostRouteInfo(menuItem);
-      if (Array.isArray(children) && !children.length)
-        return (
+      if (Array.isArray(children) && !children.length) {
+        const navLink = <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>;
+        return (locale === "zh" ? navLink :
           <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>
+            {navLink}
           </Tooltip>
         );
+      }
       return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
     });
   };

package/src/aldehyde/layout5/page.tsx

@@ -67,7 +67,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   );
 
   return (
-    <DocumentTitle title={documentTitle}>
+    <DocumentTitle title={documentTitle || ""}>
       <div
         ref={pageRef}
         style={{

package/src/aldehyde/layout5/sider.tsx

@@ -82,6 +82,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName, logo
 
   // menu
   const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
+    const locale = getLocale();
     return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
       const { disabled, label, children, icon } = menuItem;
       const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
@@ -99,25 +100,27 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName, logo
           </div>
         );
       const { path, target } = getLeftMostRouteInfo(menuItem);
-      if (Array.isArray(children) && !children.length)
-        return (
+      if (Array.isArray(children) && !children.length) {
+        const navLink = <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>;
+        return (locale === "zh" ? navLink :
           <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>
+            {navLink}
           </Tooltip>
         );
+      }
       return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
     });
   };

package/src/aldehyde/list/gantt/index.less

@@ -2,6 +2,7 @@
     margin-top: 6px;
 
     .ant-spin-nested-loading,
+    .ant-spin,
     .ant-spin-container {
         height: 100%;
     }

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

@@ -6,6 +6,7 @@
     /* Firefox */
 
     .ant-spin-nested-loading,
+    .ant-spin,
     .ant-spin-container {
         width: 100%;
         height: 100%;

package/src/aldehyde/module/block-menu-tree-drawer.tsx

@@ -16,7 +16,8 @@ interface BlockMenuTreeDrawerProps {
 interface BlockMenuTreeDrawerState {
     selectedAuths: string[],
     loading: boolean,
-    role?: object
+    role?: object,
+    drawerSize?: number | string; // 抽屉组件尺寸
 }
 
 export default class BlockMenuTreeDrawer extends React.PureComponent<BlockMenuTreeDrawerProps, BlockMenuTreeDrawerState> {
@@ -32,13 +33,16 @@ export default class BlockMenuTreeDrawer extends React.PureComponent<BlockMenuTr
     state = {
         selectedAuths: [],
         loading: true,
-        role: undefined
+        role: undefined,
+        drawerSize: undefined,
     }
 
     async componentDidMount() {
-
         await this.loadData();
+        const { width } = this.props;
+        this.setState({ drawerSize: width });
     }
+
     async componentDidUpdate(preProps) {
         const { roleCode } = this.props
         const { roleCode: preRoleCode } = preProps
@@ -80,23 +84,24 @@ export default class BlockMenuTreeDrawer extends React.PureComponent<BlockMenuTr
 
 
     render() {
-        const { width, onCancel, open } = this.props;
+        const { onCancel, open } = this.props;
         const placement = this.props.placement || 'left';
-        const { loading, role } = this.state;
+        const { loading, role, drawerSize } = this.state;
+        const maxSize = document.documentElement.clientWidth * 0.9;
+
         return (<Drawer
             loading={loading}
             title={role?.name}
             placement={placement}
+            size={drawerSize}
+            resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
+            maxSize={maxSize}
             closable={true}
             mask={false}
             onClose={onCancel}
             // onOk={()=>this.saveAuth}
             open={open}
-            width={width}
             extra={[<Button type={'primary'} onClick={this.saveAuth} >{translate("${保存}")}</Button>]}
-            style={{
-                maxWidth: '92vw',
-            }}
         // extra={
         //     <Space>{this.getFooter()}</Space>
         // }
@@ -105,7 +110,7 @@ export default class BlockMenuTreeDrawer extends React.PureComponent<BlockMenuTr
                 this.setState({
                     selectedAuths: auths
                 })
-            }}></BlockMenuTree>
+            }} />
         </Drawer>
         )
 

package/src/aldehyde/module/dtmpl-edit-page.tsx

@@ -48,6 +48,8 @@ interface ModalEditorState {
   dtmplData?: DtmplData;
   valueFieldMap?: { [key: string]: any };
   isContinueSave?: boolean; // 是否连续保存
+  btnLoading?: string; // 按钮loading控制
+  drawerSize?: number | string; // 抽屉组件尺寸
 }
 
 export default class DtmplEditPage extends React.PureComponent<
@@ -88,9 +90,14 @@ export default class DtmplEditPage extends React.PureComponent<
     dtmplData: undefined,
     valueFieldMap: {},
     isContinueSave: false, // 是否连续保存
+    btnLoading: "",
+    drawerSize: 0
   };
 
   async componentDidMount() {
+    const { height, width } = this.props;
+    const placement = this.props.placement || 'left';
+    this.setState({ drawerSize: ["top", "bottom"].includes(placement) ? height : width });
     if (this.props.open) {
       await this.loadConfigData();
     }
@@ -207,6 +214,7 @@ export default class DtmplEditPage extends React.PureComponent<
         if (this.autoSaveTimer >= dtmplConfig.autoSaveInterval) {
           //console.log('执行自动保存');
           this.autoSaveTimer = -1000000000000000;
+          this.setState({ btnLoading: "saveLoading" });
           this.doSubmit(undefined);
         } else {
           this.autoSaveTimer = this.autoSaveTimer + 1;
@@ -321,7 +329,6 @@ export default class DtmplEditPage extends React.PureComponent<
 
   doSubmit = (actionId?: number, codes?: string[], params?: object, isContinue?: boolean) => {
     const { mainCode } = this.props;
-    this.setState({ loading: true })
     //if (actionId) {
     this.formRef.current.setFieldsValue({ actionId: actionId });
     // }
@@ -337,20 +344,26 @@ export default class DtmplEditPage extends React.PureComponent<
 
   getFooter = () => {
     const { onCancel, serverKey } = this.props;
-    const { dtmplData, serial, loading } = this.state;
+    const { dtmplData, serial, loading, btnLoading } = this.state;
     const footerButtons = [];
     const { dtmplConfig } = this.state;
     const { saveBtnTitle, continueSaveBtnTitle } = dtmplConfig || {};
     const { translate } = this.context;
     if (dtmplConfig?.buttons?.includes("dtmplSave")) {
       footerButtons.unshift(
-        <Button type="primary" loading={loading} onClick={() => this.doSubmit()}>
+        <Button type="primary" loading={loading || btnLoading === "saveLoading"} onClick={() => {
+          this.setState({ btnLoading: "saveLoading" });
+          this.doSubmit();
+        }}>
           {translate("${" + (saveBtnTitle || "保存") + "}")}
         </Button>
       );
       if (continueSaveBtnTitle) {
         footerButtons.unshift(
-          <Button type="primary" loading={loading} onClick={() => this.doSubmit(null, null, null, true)}>
+          <Button type="primary" loading={loading || btnLoading === "continueSaveLoading"} onClick={() => {
+            this.setState({ btnLoading: "continueSaveLoading" });
+            this.doSubmit(null, null, null, true);
+          }}>
             {translate("${" + continueSaveBtnTitle + "}")}
           </Button>
         );
@@ -369,8 +382,12 @@ export default class DtmplEditPage extends React.PureComponent<
             data={[dtmplData]}
             formRef={this.formRef}
             actionConfig={ac}
-            doAction={this.doSubmit}
-          ></Action>
+            doAction={(...val) => {
+              this.setState({ btnLoading: `actionLoading${index}` });
+              this.doSubmit(...val);
+            }}
+            loading={loading || btnLoading === `actionLoading${index}`}
+          />
         );
       });
     }
@@ -392,7 +409,7 @@ export default class DtmplEditPage extends React.PureComponent<
   onFinish = (code) => {
     const { code: propsCode } = this.props;
     const { isContinueSave } = this.state;
-    this.setState({ loading: false });
+    this.setState({ loading: false, btnLoading: "" });
     if (code) {
       if (propsCode && isContinueSave) {
         this.loadConfigData();
@@ -415,8 +432,9 @@ export default class DtmplEditPage extends React.PureComponent<
       title,
       serverKey, parentFormInstance
     } = this.props;
-    const { dtmplConfig, id, dtmplData, valueFieldMap } = this.state;
+    const { dtmplConfig, id, dtmplData, valueFieldMap, drawerSize } = this.state;
     const placement = this.props.placement || "left";
+    const maxSize = ["top", "bottom"].includes(placement) ? document.documentElement.clientHeight : document.documentElement.clientWidth * 0.9;
 
     let title1 = title ? title : dtmplConfig ? dtmplConfig.title : "";
     const { translate } = this.context;
@@ -427,7 +445,7 @@ export default class DtmplEditPage extends React.PureComponent<
 
     return (
       <>
-        {pageType == "modal" ? (
+        {pageType === "modal" ? (
           // <Draggable  handle=".ant-modal-header">
           <DraggableModal
             open={open}
@@ -461,40 +479,39 @@ export default class DtmplEditPage extends React.PureComponent<
           >
           </DraggableModal>
           // </Draggable>
-        ) : pageType == "drawer" ? (
-
+        ) : pageType === "drawer" ? (
           <Drawer
             onClick={this.onClickBody}
             title={title1}
             placement={placement}
+            resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
+            size={drawerSize}
+            maxSize={maxSize}
             closable={true}
             mask={false}
-            width={width}
             onClose={onCancel}
             open={open}
-            height={["top", "bottom"].includes(placement) ? height : "calc(100%)"}
-            style={{
-              maxWidth: ["top", "bottom"].includes(placement) ? "100vw" : "92vw",
-              border: "2px solid #d9d9d9",
-              width,
-            }}
+            style={{ border: "2px solid #d9d9d9" }}
             extra={<Space>{this.getFooter()}</Space>}
+            styles={{ body: { minWidth: width } }}
           >
-            <DtmplForm
-              serverKey={serverKey}
-              mainCode={mainCode}
-              parentId={id}
-              dtmplConfig={dtmplConfig}
-              formRef={this.formRef}
-              sourceId={sourceId}
-              onFinish={this.onFinish}
-              maxColsOnRow={maxColsOnRow}
-              showConfirm={false}
-              dtmplData={dtmplData}
-              onValuesChange={this.onValuesChange}
-              parentFormInstance={parentFormInstance}
-              valueFieldMap={valueFieldMap}
-            />
+            <div style={{ width: '100%', minWidth: width }}>
+              <DtmplForm
+                serverKey={serverKey}
+                mainCode={mainCode}
+                parentId={id}
+                dtmplConfig={dtmplConfig}
+                formRef={this.formRef}
+                sourceId={sourceId}
+                onFinish={this.onFinish}
+                maxColsOnRow={maxColsOnRow}
+                showConfirm={false}
+                dtmplData={dtmplData}
+                onValuesChange={this.onValuesChange}
+                parentFormInstance={parentFormInstance}
+                valueFieldMap={valueFieldMap}
+              />
+            </div>
           </Drawer>
         ) : (
           <Card title={title1}>

package/src/aldehyde/module/dtmpl-view-drawer.tsx

@@ -15,13 +15,13 @@ interface DtmplViewDrawerProps extends DtmplBaseProps {
 }
 
 interface DtmplViewDrawerState {
-
+    drawerSize?: number | string; // 抽屉组件尺寸
 }
 
 
 class DtmplViewDrawer extends React.PureComponent<DtmplViewDrawerProps, DtmplViewDrawerState> {
     state = {
-
+        drawerSize: "82vw"
     }
 
     static defaultProps = {
@@ -35,29 +35,29 @@ class DtmplViewDrawer extends React.PureComponent<DtmplViewDrawerProps, DtmplVie
     }
 
     async componentDidMount() {
-
+        const { height, width } = this.props;
+        const placement = this.props.placement || 'left';
+        this.setState({ drawerSize: ["top", "bottom"].includes(placement) ? height : width });
     }
 
     render() {
-        const { title, sourceId, code, open, onClose, width, height, cancelText, editable, serverKey, codeSource } = this.props;
+        const { title, sourceId, code, open, onClose, cancelText, editable, serverKey, codeSource } = this.props;
+        const { drawerSize } = this.state;
         const placement = this.props.placement || 'left';
+        const maxSize = ["top", "bottom"].includes(placement) ? document.documentElement.clientHeight : document.documentElement.clientWidth * 0.9;
 
         return (<Drawer
-            height={["top", "bottom"].includes(placement) ? height : "100%"}
+            size={drawerSize}
             placement={placement}
             title={title}
+            resizable={{ onResize: (newSize => this.setState({ drawerSize: newSize })) }}
+            maxSize={maxSize}
             closable={true}
             mask={false}
             destroyOnHidden={true}
             onClose={onClose}
             open={open}
-            style={{
-                maxWidth: ["top", "bottom"].includes(placement) ? "100vw" : "92vw",
-                border: "2px solid #d9d9d9",
-                width
-                // borderRightWidth:"2px",
-                // borderLeftWidth:"2px",
-            }}
+            style={{ border: "2px solid #d9d9d9" }}
             extra={
                 <Space>
                     <Button onClick={() => onClose()}>{cancelText}</Button>