feat: 绑定页面样式设置

apps/designer/src/index.d.ts

@@ -0,0 +1 @@
+declare module 'insert-css';

apps/designer/src/models/appModel.ts

@@ -1,15 +1,59 @@
 import { useState } from "react";
 
+interface PageSettings {
+  // 背景颜色
+  backgroundColor: string;
+  // 宽
+  width: number;
+  // 高
+  height: number;
+  // 显示网格
+  grid: boolean;
+  // 网格大小
+  gridSize: number;
+  // 显示跨线
+  jumpover: boolean;
+  // 显示打印分割线
+  printLine: boolean;
+  // 显示水印
+  watermark: boolean;
+  // 水印文字
+  watermarkText: string;
+}
 export default function appModel() {
   // 隐藏/显示右侧面板
   const [showRightPanel, setShowRightPanel] = useState(true);
+  const [pageState, setPageState] = useState<PageSettings>({
+    backgroundColor: "transparent",
+    width: 1200,
+    height: 800,
+    grid: true,
+    gridSize: 15,
+    jumpover: true,
+    printLine: false,
+    watermark: false,
+    watermarkText: ""
+  });
 
+  // 收折右侧样式面板
   const toggleRightPanel = () => {
     setShowRightPanel(!showRightPanel);
   }
 
+  const onChangePageSettings = (key: keyof PageSettings, value: any) => {
+    console.log(key, value)
+    setPageState((state) => {
+      return {
+        ...state,
+        [key]: value
+      }
+    })
+  }
+
   return {
     showRightPanel,
-    toggleRightPanel
+    toggleRightPanel,
+    pageState,
+    onChangePageSettings
   }
 }

apps/designer/src/pages/flow/components/Config/PageStyle.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import CustomColorPicker from "@/components/CustomColorPicker";
 import {
   Button,
@@ -13,24 +13,86 @@ import {
 import { QuestionCircleOutlined, SwapOutlined } from "@ant-design/icons";
 import crossLineImg from "@/assets/image/linejump.png";
 import noCrossLineImg from "@/assets/image/unlinejump.png";
+import { useModel } from "umi";
 
 export default function PageStyle() {
-  const [setting, setSetting] = useState({
-    color: "#ffff00",
-  });
+  const { pageState, onChangePageSettings } = useModel('appModel');
+
+  const [pageType, setPageType] = useState(`自定义尺寸(${pageState.width}px*${pageState.height}px)`);
+
+  useEffect(() => {
+    const { width, height} = pageState;
+    if(width === 1500 && height === 2100) {
+      setPageType("1");
+    }
+    else if(width === 1050 && height === 1000) {
+      setPageType("2");
+    }
+    else if(width === 700 && height === 1050) {
+      setPageType("3");
+    } else {
+      setPageType(`自定义尺寸(${width}px*${height}px)`);
+    }
+  }, [pageState.width, pageState.height]);
+
+  // 选择页面尺寸类型
+  const handleChangePageType = (value: string) => {
+    if(value === "1") {
+      onChangePageSettings('width', 1500);
+      onChangePageSettings('height', 2100);
+    }
+    else if(value === "2") {
+      onChangePageSettings('width', 1050);
+      onChangePageSettings('height', 1000);
+    }
+    else if(value === "3") {
+      onChangePageSettings('width', 700);
+      onChangePageSettings('height', 1050);
+    }
+    setPageType(value);
+  }
+
+  // 切换宽高值
+  const handleChangeWH = () => {
+    const { width, height} = pageState;
+    onChangePageSettings('width', height);
+    onChangePageSettings('height', width);
+  }
+
+  const [gridSizeType, setGridSizeType] = useState('2');
+
+  useEffect(() => {
+    if(pageState.gridSize >= 10) { setGridSizeType('1');}
+    if(pageState.gridSize >= 15) { setGridSizeType('2');}
+    if(pageState.gridSize >= 20) { setGridSizeType('3');}
+    if(pageState.gridSize >= 30) { setGridSizeType('4');}
+  }, [pageState.gridSize]);
+
+  const handleChangeGridSizeType = (value: string) => {
+    let size = 15;
+    if(value === "1") { size = 10;}
+    if(value === "2") { size = 15;}
+    if(value === "3") { size = 20;}
+    if(value === "4") { size = 30;}
+    onChangePageSettings('gridSize', size);
+    setGridSizeType(value);
+  }
+
   return (
     <div>
       <section className="px-16px">
         <div className="flex items-center justify-between px-16px py-8px">
           <div className="flex-1 font-bold">背景样式</div>
           <CustomColorPicker
-            color={setting.color}
-            onChange={(color) => setSetting({ color })}
+            color={pageState.backgroundColor}
+            onChange={(color) => onChangePageSettings('backgroundColor', color)}
           />
         </div>
         <div className="pb-8px">
           <Select
             className="w-full"
+            value={pageType}
+            onChange={handleChangePageType}
             options={[
               { value: "1", label: "A3尺寸(1500px*2100px)" },
               { value: "2", label: "A4尺寸(1050px*1000px)" },
@@ -40,26 +102,30 @@ export default function PageStyle() {
         </div>
         <div className="flex justify-between pb-8px">
           <InputNumber
+            value={pageState.width}
             suffix="W"
             step={1}
             min={500}
             max={10000}
             formatter={(val) => `${val}px`}
+            onChange={(val) => onChangePageSettings('width', val)}
           />
-          <Button icon={<SwapOutlined />} />
+          <Button icon={<SwapOutlined />} onClick={handleChangeWH}/>
           <InputNumber
+            value={pageState.height}
             suffix="H"
             step={1}
             min={500}
             max={10000}
             formatter={(val) => `${val}px`}
+            onChange={(val) => onChangePageSettings('height', val)}
           />
         </div>
       </section>
       <Divider className="my-8px" />
       <section className="px-16px">
         <div>
-          <Checkbox>
+          <Checkbox checked={pageState.grid} onChange={(e) => onChangePageSettings('grid', e.target.checked)}>
             <span className="font-bold">显示网格</span>
           </Checkbox>
         </div>
@@ -72,12 +138,15 @@ export default function PageStyle() {
             colon={false}
           >
             <Select
+              value={gridSizeType}
               options={[
                 { value: "1", label: "小" },
                 { value: "2", label: "正常" },
                 { value: "3", label: "大" },
                 { value: "4", label: "很大" },
               ]}
+              disabled={!pageState.grid}
+              onChange={(val) => handleChangeGridSizeType(val)}
             />
           </Form.Item>
           <Form.Item
@@ -89,11 +158,14 @@ export default function PageStyle() {
             colon={false}
           >
             <InputNumber
+              value={pageState.gridSize}
               className="w-full"
               step={1}
               min={10}
               max={100}
               formatter={(val) => `${val}px`}
+              disabled={!pageState.grid}
+              onChange={(val) => onChangePageSettings('gridSize', val)}
             />
           </Form.Item>
         </div>
@@ -101,7 +173,7 @@ export default function PageStyle() {
       <Divider className="my-8px" />
       <section className="px-16px">
         <div>
-          <Checkbox>
+          <Checkbox checked={pageState.jumpover} onChange={(e) => onChangePageSettings('jumpover', e.target.checked)} >
             <span className="font-bold">显示跨线</span>
           </Checkbox>
           <Popover
@@ -125,17 +197,17 @@ export default function PageStyle() {
       <Divider className="my-8px" />
       <section className="px-16px">
         <div>
-          <Checkbox>
+          <Checkbox checked={pageState.printLine} onChange={(e) => onChangePageSettings('printLine', e.target.checked)} >
             <span className="font-bold">显示打印分割线</span>
           </Checkbox>
         </div>
       </section>
       <Divider className="my-8px" />
       <section className="px-16px">
-        <Checkbox className="mb-8px">
+        <Checkbox className="mb-8px" checked={pageState.watermark} onChange={(e) => onChangePageSettings('watermark', e.target.checked)} >
           <span className="font-bold">显示水印</span>
         </Checkbox>
-        <Input placeholder="不超过15字，回车保存" maxLength={15} />
+        <Input value={pageState.watermarkText} disabled={!pageState.watermark} placeholder="不超过15字，回车保存" maxLength={15} />
       </section>
     </div>
   );