aldehyde 0.2.349 → 0.2.351

package/src/aldehyde/custom-page/custom-detail-modal-page.tsx

@@ -0,0 +1,52 @@
+import React, { ReactNode } from "react";
+import DefCustomPage from "./def-custom-page";
+import { ProgramConfig } from "../index";
+import DraggableModal from "../module/draggable-modal";
+
+interface Props {
+  serverKey?: string;
+  height?: number | string;
+  minHeight?: number | string;
+  width?: number;
+  bodyWidth?: number | string;
+  title?: ReactNode;
+  code?: string; //详情模板code
+  mainCode?: string; //模块名称
+  sourceId: string;
+  customPath: string;
+  open: boolean;
+  onCancel: () => void;
+}
+
+const Index = (props: Props) => {
+  const { width, title, height, bodyWidth, code, sourceId, open, mainCode, customPath, onCancel, minHeight } = props;
+
+  const customPage = () => {
+    if (open) {
+      let Page = ProgramConfig.getCustomPage(customPath) || DefCustomPage;
+      return React.createElement(Page, {
+        code,
+        sourceId,
+        mainCode,
+        pageName: customPath,
+      });
+    }
+  };
+
+  return (
+    <DraggableModal
+      open={open}
+      width={width}
+      title={title}
+      styles={{ body: { height: height, width: bodyWidth, minHeight, overflow: "auto" } }}
+      destroyOnHidden={true}
+      centered
+      onCancel={onCancel}
+      footer={[]}
+    >
+      {customPage()}
+    </DraggableModal>
+  );
+}
+
+export default Index;

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

@@ -70,6 +70,29 @@
       background-color: var(--color-7) !important;
     }
   }
+
+  .card-list {
+    .card-list-item {
+      background: linear-gradient(180deg, #025CC3 0%, #00193D 100%);
+      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4969), inset 0px 0px 12px 0px #32C5FF;
+    }
+
+    .card-list-item-main {
+      background-color: #041C3A;
+
+      .card-show-cols {
+        background-color: #071034;
+      }
+
+      .card-show-col-title {
+        color: #A6E6FF;
+      }
+
+      .card-show-col-value {
+        color: #F7B500;
+      }
+    }
+  }
 }
 
 .v3-antd-table {

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

@@ -62,6 +62,30 @@
       background-color: var(--color-8) !important;
     }
   }
+
+
+  .card-list {
+    .card-list-item {
+      background: linear-gradient(180deg, #1668dc 0%, #00193D 100%);
+      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4969), inset 0px 0px 12px 0px #32C5FF;
+    }
+
+    .card-list-item-main {
+      background-color: #041C3A;
+
+      .card-show-cols {
+        background-color: #071034;
+      }
+
+      .card-show-col-title {
+        color: #A6E6FF;
+      }
+
+      .card-show-col-value {
+        color: #F7B500;
+      }
+    }
+  }
 }
 
 .v4-antd-table {

package/src/aldehyde/list/card-list/card-list-item.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from "react";
+import { useLocale } from "../../locale/useLocale";
+import { Card, Row, Col, Empty } from "antd";
+import ViewControl from "../../controls/view-control";
+import { CardListConfig } from "../../tmpl/interface";
+import CustomDetailModalPage from "../../custom-page/custom-detail-modal-page";
+import "./index.css";
+
+type Props = {
+    cardListConfig?: CardListConfig;
+    item?: any;
+    renderOpt?: React.ReactNode;
+    serverKey?: string;
+    sourceId?: string;
+};
+
+const dataKeys = ["primaryColumn", "primaryColumnLabel", "secondColumn", "secondColumnLabel", "cardShowCols", "labelColumn", "mainPicture", "mainPictureLabel"];
+
+const Index = (props: Props) => {
+    const { cardListConfig, item, renderOpt, serverKey, sourceId } = props;
+    const { buttons, customViewPagePath, mainCode } = cardListConfig;
+    const { translate } = useLocale();
+    const [data, setData] = useState({});
+    const [detailOpen, setDetailOpen] = useState<boolean>(false);
+
+    const handleData = (type: string) => {
+        const itemConfig = cardListConfig[type];
+        if (!itemConfig) {
+            return "";
+        }
+        if (type === "cardShowCols") {
+            return itemConfig.map(r => {
+                const value = item[r.id];
+                const element = <ViewControl serverKey={serverKey} holderType="table" value={value} fieldConfig={r} />;
+                const title = r.title;
+                return { element, value, title };
+            });
+        }
+        const value = item[itemConfig.id];
+        const element = <ViewControl serverKey={serverKey} holderType="table" value={value} fieldConfig={type === "mainPicture" ? { ...itemConfig, preview: false } : itemConfig} />;
+        const title = itemConfig.title;
+        return { element, value, title };
+    }
+
+    useEffect(() => {
+        if (cardListConfig && item) {
+            const temData = dataKeys.reduce((total, next) => {
+                total[next] = handleData(next);
+                return total;
+            }, {});
+            setData(temData);
+        }
+    }, [cardListConfig, item]);
+
+    const onClickDetail = () => {
+        if (!buttons.some(r => ["customDetail", "detail"].includes(r)) || !customViewPagePath) {
+            return;
+        }
+        setDetailOpen(true);
+    }
+
+    return (
+        <Card className="card-list-item" styles={{ body: { height: "100%", padding: "0 12px 12px" } }} >
+            <div className="card-list-item-body">
+                <div className="card-list-item-content">
+                    <div className="card-list-item-head">
+                        <div className="card-list-item-head-title">
+                            {data["primaryColumn"] ?
+                                <div className="card-list-item-head-primary">
+                                    <div className="primary-column">{data["primaryColumn"]?.element}</div>
+                                    <div className="primary-column-label">{data["primaryColumnLabel"]?.element}</div>
+                                </div>
+                                : ""}
+                            <div className="label-column">{data["labelColumn"]?.element}</div>
+                        </div>
+                        <div className="card-list-item-head-title">
+                            {data["secondColumn"] ?
+                                <div className="card-list-item-head-second">
+                                    <div className="second-column">{data["secondColumn"].value ? data["secondColumn"]?.element : "-"}</div>
+                                    <div className="second-column-label">{data["secondColumnLabel"]?.element}</div>
+                                </div>
+                                : ""}
+                        </div>
+                    </div>
+                    <div className="card-list-item-main" onClick={onClickDetail}>
+                        {data["mainPicture"] ? <div className="card-main-picture">
+                            {data["mainPicture"].value ? data["mainPicture"].element : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无图片" />}
+                            <div className="card-main-picture-label">{data["mainPictureLabel"].element}</div>
+                        </div> : ""}
+                        {data["cardShowCols"] ?
+                            <div className="card-show-cols">
+                                <Row gutter={6}>
+                                    {data["cardShowCols"].map((col, index) => // 卡片展示字段是两个，则右侧对齐
+                                        <Col className="card-show-col" span={12} key={index} style={data["cardShowCols"].length < 3 && index % 2 ? { justifyContent: "flex-end" } : {}}>
+                                            <div className="card-show-col-title">{translate("${" + col.title + "}")}:</div>
+                                            <div className="card-show-col-value">{col.value || col.value === 0 ? col.element : "-"}</div>
+                                        </Col>)
+                                    }
+                                </Row>
+                            </div> : ""}
+                    </div>
+                </div>
+                <div className="card-list-item-footer">
+                    {renderOpt}
+                </div>
+            </div>
+            {detailOpen ? <CustomDetailModalPage width={1000} minHeight="70vh" mainCode={mainCode} sourceId={sourceId} code={item.code} customPath={customViewPagePath} open={detailOpen} onCancel={() => { setDetailOpen(false) }} /> : ""}
+        </Card >);
+};
+
+export default Index;

package/src/aldehyde/list/card-list/index.css

@@ -0,0 +1,144 @@
+.card-list {
+    margin-top: 6px;
+
+    .card-list-item {
+        height: calc(100% - 14px);
+
+        .card-list-item-body {
+            height: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            align-content: space-between;
+            flex-direction: column;
+        }
+
+        .card-list-item-content {
+            width: 100%;
+            flex-grow: 1;
+            display: flex;
+            flex-wrap: wrap;
+            align-content: space-between;
+            flex-direction: column;
+        }
+    }
+
+    .card-list-item-head {
+        width: 100%;
+        margin: 12px 0;
+
+        .card-list-item-head-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+
+            .card-list-item-head-primary,
+            .card-list-item-head-second {
+                display: flex;
+                align-items: center;
+                position: relative;
+                max-width: 70%;
+                min-height: 32px;
+
+                .primary-column,
+                .second-column {
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    font-size: 20px;
+                    font-weight: 600;
+                }
+
+                .second-column {
+                    font-size: 16px;
+                    font-weight: normal;
+                }
+
+                .primary-column-label,
+                .second-column-label {
+                    position: absolute;
+                    top: 0;
+                    right: -4px;
+                    transform: translate(100%, -30%);
+
+                    .ant-tag {
+                        font-size: 10px;
+                        padding: 0 4px;
+                    }
+                }
+
+                .second-column-label {
+                    .ant-tag {
+                        font-size: 8px;
+                        padding: 3px;
+                        line-height: normal;
+                    }
+                }
+            }
+
+            .card-list-item-head-second {
+                margin-top: 6px;
+            }
+        }
+    }
+
+    .card-list-item-main {
+        width: 100%;
+        min-height: 100px;
+        margin-bottom: 12px;
+        background-color: #f5f5f5;
+        flex-grow: 1;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: space-between;
+        flex-direction: column;
+        cursor: pointer;
+
+        .card-main-picture {
+            width: 100%;
+            min-height: 200px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            flex-grow: 1;
+
+            .ant-image {
+                width: 100% !important;
+            }
+
+            .card-main-picture-label {
+                position: absolute;
+                top: 6px;
+                right: 12px;
+                color: var(--ant-color-primary);
+                font-size: 16px;
+            }
+        }
+
+        .card-show-cols {
+            padding: 6px 12px;
+            background-color: rgba(0, 0, 0, 0.04);
+        }
+
+        .card-show-col {
+            display: flex;
+            align-items: center;
+
+            .card-show-col-title {
+                margin-right: 6px;
+                white-space: nowrap;
+            }
+
+            .card-show-col-value {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .card-list-item-footer {
+        width: 100%;
+    }
+}

package/src/aldehyde/list/card-list/index.tsx

@@ -0,0 +1,37 @@
+import React, { useMemo } from "react";
+import { Col, Row } from "antd";
+import { CardListConfig } from "../../tmpl/interface";
+import CardListItem from "./card-list-item";
+import "./index.css";
+
+type Props = {
+    cardListConfig?: CardListConfig;
+    dataSource?: object[];
+    columns?: any[];
+    serverKey?: string;
+    sourceId?: string;
+};
+
+const Index = (props: Props) => {
+    const { cardListConfig, dataSource, columns, serverKey, sourceId } = props;
+
+    const renderOpt = (item: unknown) => {
+        const actionCol = columns.find(col => col["操作"] == 1);
+        return actionCol?.render(item, item);
+    }
+
+    const colFlex = useMemo(() => {
+        const rowCardCount = cardListConfig?.rowCardCount || 5;
+        const flex = Math.floor((100 / rowCardCount) * 100) / 100;
+        return `${flex}%`;
+    }, [cardListConfig]);
+
+    return (
+        <div className="card-list">
+            <Row gutter={[12, 12]}>
+                {dataSource?.map((item, index) => <Col style={{ minWidth: 0 }} key={`col-${index}`} xl={{ flex: colFlex }} lg={{ flex: "25%" }} sm={{ flex: "50%" }}><CardListItem cardListConfig={cardListConfig} item={item} renderOpt={renderOpt(item)} serverKey={serverKey} sourceId={sourceId} /></Col>)}
+            </Row>
+        </div>);
+};
+
+export default Index;

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

@@ -32,13 +32,24 @@ const screenFitStyleMap: Record<string, CSSProperties> = {
     'full-y': { overflow: 'scroll hidden' }
 }
 
+// 非全屏-不同风格的页面高度
+const viewHeight = {
+    v2: "calc(100vh - 121px)",
+    v3: "calc(100vh - 230px)",
+    v4: "calc(100vh - 153px)",
+    v5: "calc(100vh - 88px)"
+}
+
 interface Props {
-    isFullScreen: boolean
+    isFullScreen: boolean,
+    ddpageId?: string,
+    layoutRootPath?: string,
 }
 
 const LowcodeView = (props: Props) => {
-    const { isFullScreen } = props;
-    const { ddpageId } = useParams();
+    const { isFullScreen, layoutRootPath, ddpageId: propsDdpageId } = props;
+    const { ddpageId: urlDdpageId } = useParams();
+    const ddpageId = propsDdpageId || urlDdpageId;
     const [loading, setLoading] = useState<boolean>(false);
     const [layerManager, setLayerManager] = useState<LayerManagerDataType>();
     const [canvasConfig, setCanvasConfig] = useState<CanvasConfig>();
@@ -155,7 +166,7 @@ const LowcodeView = (props: Props) => {
 
     return (
         <ControllerContext.Provider value={{ setControllers, setSearchParams }}>
-            <div className='lowcodeView' style={{ height: isFullScreen ? "100vh" : "calc(100vh - 121px)", ...screenFitStyleMap[adaptationType || "scale"] }}>
+            <div className='lowcodeView' style={{ height: isFullScreen ? "100vh" : viewHeight[layoutRootPath || "v2"], ...screenFitStyleMap[adaptationType || "scale"] }}>
                 {loading || !layerManager ?
                     <Loading />
                     :