feat: 🚀 added modal components and initialized farmConfiguration

apps/react-low-code/src/views/lowCode/component/index.tsx

@@ -8,8 +8,8 @@ import TemplateTagList from "@/components/TemplateTagList";
 import { StorageNameMap } from "@/constants/storageNames";
 import { AnyObject } from "@/types";
 import { downloadFile, uuid } from "@limuen/utils";
-import ComponentBody from "./component/ComponentBody";
-import { ComponentGlobalControl, ComponentAttribute, BodyType } from "./component/ComponentGlobalControl";
+import ComponentBody from "./components/ComponentBody";
+import { ComponentGlobalControl, ComponentAttribute, BodyType } from "./components/ComponentGlobalControl";
 import { getComponentTemplate } from "./utils/template";
 import { FormColumn } from "../form";
 import FormFieldControl from "../form/components/FormFieldControl";

apps/react-low-code/src/views/lowCode/component/utils/template.ts

@@ -1,7 +1,7 @@
 import { prettierCode } from "@/utils";
 import { TemplateFormAttribute, getFormContent, getFormHookName } from "@/views/lowCode/form/utils/template";
 import { TemplateTableAttribute, getTableColumnsDataSource, getTableContent } from "@/views/lowCode/table/utils/template";
-import { BodyType, ComponentAttribute } from "../component/ComponentGlobalControl";
+import { BodyType, ComponentAttribute } from "../components/ComponentGlobalControl";
 
 export const generateBody = (body: BodyType[], formAttribute: TemplateFormAttribute, tableAttribute: TemplateTableAttribute) => {
   return body.reduce((result, item) => {

apps/react-low-code/src/views/lowCode/modal/components/ModalGlobalControl.tsx

@@ -0,0 +1,66 @@
+import { ReactNode, useEffect } from "react";
+import Selection from "@/components/Selection";
+import { Form, Input } from "antd";
+import GlobalControl from "@/components/GlobalControl";
+import { BodyFormItem } from "@/views/lowCode/component/components/BodyFormItem";
+import { BodyType } from "@/views/lowCode/component/components/ComponentGlobalControl";
+
+export interface ModalAttribute {
+  name: string;
+  templateName?: string;
+  exportName: string;
+  extension: ".tsx" | ".jsx";
+  attribute: {
+    title: ReactNode;
+    width?: string | number;
+  };
+  body: BodyType[];
+}
+
+interface ModalGlobalControlProps {
+  modalAttribute: ModalAttribute;
+  setModalAttribute: (columns: ModalAttribute) => void;
+}
+
+const ModalGlobalControl: React.FC<ModalGlobalControlProps> = ({ modalAttribute, setModalAttribute }) => {
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    form.setFieldsValue(modalAttribute);
+  }, [modalAttribute]);
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 5 }}
+      labelAlign="left"
+      colon={false}
+      onValuesChange={() => {
+        setModalAttribute(form.getFieldsValue(true));
+      }}
+    >
+      <Selection title="Modal 配置">
+        <Form.Item label="标题" name={["attribute", "title"]}>
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label="宽度"
+          name={["attribute", "width"]}
+          normalize={value => {
+            if (Number(value)) {
+              return Number(value);
+            }
+            return value;
+          }}
+        >
+          <Input />
+        </Form.Item>
+        <BodyFormItem />
+      </Selection>
+
+      <GlobalControl />
+    </Form>
+  );
+};
+
+export default ModalGlobalControl;

apps/react-low-code/src/views/lowCode/modal/index.less

@@ -0,0 +1,8 @@
+.my-modal-wrapper {
+  position: relative !important;
+  overflow: visible !important;
+  .ant-prefix-modal {
+    top: -34px;
+    margin: initial;
+  }
+}

apps/react-low-code/src/views/lowCode/modal/index.tsx

@@ -1,5 +1,258 @@
-const ModalComponent: React.FC = () => {
-  return <>ModalComponent</>;
+import { useEffect, useRef, useState } from "react";
+import { ColumnType } from "antd/lib/table";
+import { useUpdateEffect } from "ahooks";
+import { Button, Col, Modal, Row } from "antd";
+import { useFormHook } from "../form/hook/form";
+import Operations from "@/components/Operations";
+import TemplateTagList from "@/components/TemplateTagList";
+import { StorageNameMap } from "@/constants/storageNames";
+import { AnyObject } from "@/types";
+import { downloadFile, uuid } from "@limuen/utils";
+import ModalGlobalControl from "./components/ModalGlobalControl";
+import { ModalAttribute } from "./components/ModalGlobalControl";
+import { getModalTemplate } from "./utils/template";
+import ComponentBody from "../component/components/ComponentBody";
+import { BodyType } from "../component/components/ComponentGlobalControl";
+import { FormColumn } from "../form";
+import FormFieldControl from "../form/components/FormFieldControl";
+import FormGlobalControl from "../form/components/FormGlobalControl";
+import { FormAttribute } from "../form/components/FormGlobalControl";
+import TableColumnControl from "../table/components/TableColumnControl";
+import TableGlobalControl from "../table/components/TableGlobalControl";
+import { TableAttribute } from "../table/components/TableGlobalControl";
+import { useTableHook } from "../table/hook/table";
+import "./index.less";
+
+interface TemplateList extends ModalAttribute {
+  templateId: string;
+  columns: FormColumn[];
+  formAttribute: FormAttribute;
+  tableAttribute: TableAttribute;
+  tableColumns: ColumnType<any>[];
+  dataSource: AnyObject[];
+}
+
+const ModalComponent = () => {
+  const formBodyRef: any = useRef();
+  const tableBodyRef: any = useRef();
+  const [open, setOpen] = useState(true);
+
+  // form body hook
+  const { form, columns, setColumns, currentFormIndex, setCurrentFormIndex, formAttribute, setFormAttribute } = useFormHook();
+  const [isForm, setIsForm] = useState(false);
+
+  // table body hook
+  const {
+    tableColumns,
+    setTableColumns,
+    dataSource,
+    setDataSource,
+    currentColumn,
+    setCurrentColumn,
+    tableAttribute,
+    setTableAttribute,
+    tableDemoColumns,
+    addTableColumns
+  } = useTableHook();
+  const [isTable, setIsTable] = useState(false);
+
+  const showModal = () => {
+    setOpen(true);
+  };
+
+  const handleOk = () => {
+    setOpen(false);
+  };
+
+  const handleCancel = () => {
+    setOpen(false);
+  };
+
+  // 全局配置属性
+  const [modalAttribute, setModalAttribute] = useState<ModalAttribute>({
+    name: "ModalComponent",
+    exportName: "ModalComponent",
+    extension: ".tsx",
+    attribute: {
+      title: "标题",
+      width: 750
+    },
+    body: [
+      { type: "string", content: "Some contents...", key: uuid() },
+      { type: "form", content: "Some contents...", key: uuid() },
+      { type: "table", content: "Some contents...", key: uuid() }
+    ]
+  });
+  const setBody = (body: BodyType[]) => {
+    setModalAttribute({ ...modalAttribute, body });
+  };
+
+  const [templateList, setTemplateList] = useState<TemplateList[]>([]);
+  useEffect(() => {
+    setTemplateList(JSON.parse(localStorage.getItem(StorageNameMap.modal) || "[]"));
+  }, []);
+
+  useUpdateEffect(() => {
+    localStorage.setItem(StorageNameMap.modal, JSON.stringify(templateList));
+  }, [templateList]);
+
+  // 模板id，定位本地存储的模板
+  const [templateId, setTemplateId] = useState(uuid());
+  const saveTemplate = () => {
+    if (!modalAttribute.templateName) {
+      modalAttribute.templateName = "模板";
+    }
+    const currentTemplate: TemplateList = {
+      templateId,
+      columns,
+      formAttribute,
+      tableAttribute,
+      tableColumns,
+      dataSource,
+      ...modalAttribute
+    };
+    const index = templateList.findIndex((item: TemplateList) => item.templateId === templateId);
+    if (index === -1) {
+      templateList.push(currentTemplate);
+    } else {
+      templateList[index] = currentTemplate;
+    }
+    setTemplateList([...templateList]);
+  };
+  const previewCode = () => {
+    return getModalTemplate(
+      modalAttribute,
+      { ...formAttribute, columns },
+      {
+        ...tableAttribute,
+        dataSource,
+        columns: tableColumns
+      }
+    );
+  };
+  const exportCode = () => {
+    downloadFile(
+      modalAttribute.exportName + modalAttribute.extension,
+      getModalTemplate(
+        modalAttribute,
+        { ...formAttribute, columns },
+        {
+          ...tableAttribute,
+          dataSource,
+          columns: tableColumns
+        }
+      )
+    );
+  };
+
+  // 回填模板数据
+  const templateClick = (template: TemplateList) => {
+    const { templateId, columns, formAttribute, tableAttribute, tableColumns, dataSource, ...modalAttribute } = template;
+    setTemplateId(templateId);
+    setModalAttribute(modalAttribute);
+    setColumns(columns);
+    setFormAttribute(formAttribute);
+    setTableAttribute(tableAttribute);
+    setTableColumns(tableColumns);
+    setDataSource(dataSource);
+  };
+
+  return (
+    <Row style={{ height: "100%" }}>
+      <Col
+        ref={ref => {
+          ref?.addEventListener(
+            "click",
+            e => {
+              setIsForm(formBodyRef?.current?.contains(e.target));
+              setIsTable(tableBodyRef?.current?.contains(e.target));
+            },
+            true
+          );
+        }}
+        span={16}
+        style={{ padding: "10px 15px 10px", borderRight: "1px solid #ccc" }}
+        className="my-modal-container"
+      >
+        <Operations
+          type={StorageNameMap.modal}
+          saveTemplate={saveTemplate}
+          previewCode={previewCode}
+          exportCode={exportCode}
+          setTemplateList={setTemplateList}
+        />
+        <TemplateTagList
+          templateId={templateId}
+          templateList={templateList}
+          setTemplateList={setTemplateList}
+          templateClick={templateClick}
+        />
+        <div>
+          <Button type="primary" onClick={showModal}>
+            Open Modal
+          </Button>
+        </div>
+        <Modal
+          wrapClassName="my-modal-wrapper"
+          getContainer={() => document.querySelector(".my-modal-container") as HTMLElement}
+          open={open}
+          onOk={handleOk}
+          mask={false}
+          maskClosable={false}
+          onCancel={handleCancel}
+          {...modalAttribute.attribute}
+        >
+          <ComponentBody
+            formBodyRef={formBodyRef}
+            tableBodyRef={tableBodyRef}
+            body={modalAttribute.body}
+            setBody={setBody}
+            form={form}
+            columns={columns}
+            setColumns={setColumns}
+            formAttribute={formAttribute}
+            setCurrentFormIndex={setCurrentFormIndex}
+            tableColumns={tableColumns}
+            setTableColumns={setTableColumns}
+            dataSource={dataSource}
+            tableDemoColumns={tableDemoColumns}
+            addTableColumns={addTableColumns}
+            tableAttribute={tableAttribute}
+            setCurrentColumn={setCurrentColumn}
+          />
+        </Modal>
+      </Col>
+      <Col span={8} style={{ padding: "10px 15px 10px" }}>
+        {!isForm && !isTable && <ModalGlobalControl modalAttribute={modalAttribute} setModalAttribute={setModalAttribute} />}
+        {isForm && currentFormIndex > -1 && (
+          <FormFieldControl currentFormIndex={currentFormIndex} columns={columns} setColumns={setColumns} />
+        )}
+        {isForm && currentFormIndex === -1 && (
+          <FormGlobalControl formAttribute={formAttribute} setFormAttribute={setFormAttribute} hiddenGlobalControl />
+        )}
+        {isTable && currentColumn && (
+          <TableColumnControl
+            currentColumn={currentColumn}
+            setCurrentColumn={setCurrentColumn}
+            tableColumns={tableColumns}
+            setTableColumns={setTableColumns}
+            dataSource={dataSource}
+            setDataSource={setDataSource}
+            addTableColumns={addTableColumns}
+          />
+        )}
+        {isTable && !currentColumn && (
+          <TableGlobalControl
+            tableAttribute={tableAttribute}
+            setTableAttribute={setTableAttribute}
+            dataSource={dataSource}
+            setDataSource={setDataSource}
+            hiddenGlobalControl
+          />
+        )}
+      </Col>
+    </Row>
+  );
 };
 
 export default ModalComponent;