feat: 添加样式设置页面

apps/designer/.umirc.ts

@@ -5,7 +5,7 @@ export default defineConfig({
     '/favicon.ico'
   ],
   styles: [
-    '//at.alicdn.com/t/c/font_4676747_m5eh88rluja.css'
+    '//at.alicdn.com/t/c/font_4676747_vnsdgzy6xf8.css'
   ],
   plugins: [
     require.resolve('@umijs/plugins/dist/unocss'),

apps/designer/src/components/CustomColorPicker.tsx

@@ -252,6 +252,7 @@ export default function CustomColorPicker(props: {
   onChange?: (color: string) => void;
   color?: string;
   pickerOption?: ColorPickerProps;
+  children?: React.ReactNode;
 }) {
   const { color } = props;
   const [colorSystem, setColorSystem] = useState(0);
@@ -264,7 +265,7 @@ export default function CustomColorPicker(props: {
   };
 
   insertCss(`
-    .shalu-input-number-input {
+    .rgb .shalu-input-number-input {
       padding: 0 !important;
     }
   `);
@@ -334,7 +335,11 @@ export default function CustomColorPicker(props: {
             <CaretDownOutlined />
           </div>
         </Dropdown>
-        <Button size="small" className="block w-full my-8px" onClick={() => onChange('transparent')}>
+        <Button
+          size="small"
+          className="block w-full my-8px"
+          onClick={() => onChange("transparent")}
+        >
           无填充
         </Button>
         <Space wrap size={4} className="justify-between">
@@ -376,7 +381,7 @@ export default function CustomColorPicker(props: {
             <SwapOutlined />
           </Button>
           {colorType === "rgb" ? (
-            <div className="flex">
+            <div className="flex rgb">
               <InputNumber
                 size="small"
                 max={255}
@@ -419,7 +424,13 @@ export default function CustomColorPicker(props: {
           </Tooltip>
         </div>
         <div className="my-8px border border-transparent border-1px border-solid border-b-#e9edf2" />
-        <ColorPicker value={color} disabledAlpha format="hex" onChange={(_value, css) => onChange(css)} className="w-0 h-0">
+        <ColorPicker
+          value={color}
+          disabledAlpha
+          format="hex"
+          onChange={(_value, css) => onChange(css)}
+          className="w-0 h-0"
+        >
           <Button
             type="text"
             className="w-full flex justify-between items-center"
@@ -435,9 +446,10 @@ export default function CustomColorPicker(props: {
     );
   };
 
-  const backgroundStyle = color === 'transparent' 
-    ? {background: `url(${noColorImg})`, backgroundSize: 'cover'} 
-    : {background: color}
+  const backgroundStyle =
+    color === "transparent"
+      ? { background: `url(${noColorImg})`, backgroundSize: "cover" }
+      : { background: color };
 
   return (
     <div className="inline-block">
@@ -451,10 +463,14 @@ export default function CustomColorPicker(props: {
         open={open}
         onOpenChange={handleOpenChange}
       >
-        <div
-          className="w-30px h-24px border border-solid border-#435f7329 border-radius-2px"
-          style={backgroundStyle}
-        />
+        {props.children ? (
+          props.children
+        ) : (
+          <div
+            className="w-30px h-24px border border-solid border-#435f7329 border-radius-2px"
+            style={backgroundStyle}
+          />
+        )}
       </Popover>
     </div>
   );

apps/designer/src/components/basic/circle.tsx

@@ -21,7 +21,7 @@ const component = ({ node }: { node: Node }) => {
             cy="35"
             r="29"
             stroke="#323232"
-            stroke-width="2"
+            strokeWidth="2"
             fill="white"
           />
         </svg>

apps/designer/src/components/basic/diamond.tsx

@@ -14,7 +14,7 @@ const component = ({ node }: { node: Node }) => {
         viewBox="0 0 90 70"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <polygon points="45,2 88,35 45,68 2,35" fill="white" stroke="#323232" stroke-width="2"/>
+        <polygon points="45,2 88,35 45,68 2,35" fill="white" stroke="#323232" strokeWidth="2"/>
       </svg>
     </div>
   );

apps/designer/src/components/basic/rectangle.tsx

@@ -23,7 +23,7 @@ const component = ({ node }: { node: Node }) => {
             height="50"
             fill="white"
             stroke="#323232"
-            stroke-width="2"
+            strokeWidth="2"
           />
         </svg>
       </div>

apps/designer/src/components/basic/start.tsx

@@ -25,7 +25,7 @@ const component = ({ node }: { node: Node }) => {
             ry="26"
             fill="white"
             stroke="#323232"
-            stroke-width="2"
+            strokeWidth="2"
           />
         </svg>
       </div>

apps/designer/src/components/basic/triangle.tsx

@@ -16,7 +16,7 @@ const component = ({ node }: { node: Node }) => {
           viewBox="0 0 80 70"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polygon points="40,2 78,69 2,69" fill="white" stroke="#323232" stroke-width="2"/>
+          <polygon points="40,2 78,69 2,69" fill="white" stroke="#323232" strokeWidth="2"/>
         </svg>
       </div>
     </>

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

@@ -0,0 +1,364 @@
+import CustomColorPicker from "@/components/CustomColorPicker";
+import {
+  BoldOutlined,
+  ColumnHeightOutlined,
+  FontSizeOutlined,
+  ItalicOutlined,
+  StrikethroughOutlined,
+  SwapOutlined,
+  UnderlineOutlined,
+  VerticalAlignBottomOutlined,
+  VerticalAlignMiddleOutlined,
+  VerticalAlignTopOutlined,
+} from "@ant-design/icons";
+import {
+  Button,
+  Col,
+  Divider,
+  Form,
+  InputNumber,
+  Row,
+  Select,
+  Space,
+  Tooltip,
+} from "antd";
+import { arrowOptions } from "@/pages/flow/data";
+
+const alignData = [
+  { id: "left", name: "左对齐", icon: "icon-zuoduiqi2" },
+  { id: "vcenter", name: "居中对齐", icon: "icon-shuipingduiqi2" },
+  { id: "right", name: "右对齐", icon: "icon-youduiqi2" },
+  { id: "top", name: "顶端对齐", icon: "icon-dingbuduiqi2" },
+  { id: "hcenter", name: "垂直居中对齐", icon: "icon-chuizhiduiqi2" },
+  { id: "bottom", name: "底端对齐", icon: "icon-dibuduiqi2" },
+  { id: "v", name: "水平平均分布", icon: "icon-shuipingfenbu2" },
+  { id: "h", name: "垂直平均分布", icon: "icon-chuizhifenbu2" },
+];
+export default function GraphStyle() {
+  return (
+    <div>
+      <section className="px-16px">
+        <div className="bg-white rounded-s flex justify-between items-center mb-8px">
+          {alignData.map((item) => (
+            <Tooltip key={item.id} title={item.name}>
+              <Button
+                type="text"
+                icon={<i className={"iconfont " + item.icon} />}
+              />
+            </Tooltip>
+          ))}
+        </div>
+        <Form.Item
+          label="不透明度"
+          labelCol={{ span: 14 }}
+          wrapperCol={{ span: 10 }}
+          labelAlign="left"
+          className="mb-8px"
+          colon={false}
+        >
+          <InputNumber
+            className="w-full"
+            step={5}
+            min={0}
+            max={100}
+            formatter={(val) => `${val}%`}
+          />
+        </Form.Item>
+      </section>
+      <Divider className="my-8px" />
+      <section className="px-16px">
+        <div className="font-bold mb-8px">布局</div>
+        <Row gutter={8} className="mb-8px">
+          <Col span={12}>
+            <InputNumber
+              className="w-full"
+              step={1}
+              min={20}
+              max={10000}
+              suffix="W"
+              formatter={(val) => `${val}px`}
+            />
+          </Col>
+          <Col span={12}>
+            <InputNumber
+              className="w-full"
+              step={1}
+              min={20}
+              max={10000}
+              suffix="H"
+              formatter={(val) => `${val}px`}
+            />
+          </Col>
+        </Row>
+        <Row gutter={8} className="mb-8px">
+          <Col span={12}>
+            <InputNumber
+              className="w-full"
+              step={1}
+              min={0}
+              max={10000}
+              suffix="X"
+              formatter={(val) => `${val}px`}
+            />
+          </Col>
+          <Col span={12}>
+            <InputNumber
+              className="w-full"
+              step={1}
+              min={0}
+              max={10000}
+              suffix="Y"
+              formatter={(val) => `${val}px`}
+            />
+          </Col>
+        </Row>
+        <div className="flex justify-between items-center gap-12px mb-8px">
+          <InputNumber
+            className="flex-1"
+            step={1}
+            min={0}
+            max={360}
+            formatter={(val) => `${val}°`}
+            suffix={<i className="iconfont icon-a-ziyuan126 text-12px" />}
+          />
+          <Button icon={<i className="iconfont icon-shangxiafanzhuan" />} />
+          <Button icon={<i className="iconfont icon-zuoyoufanzhuan" />} />
+        </div>
+        <Form.Item
+          label="匹配大小"
+          labelCol={{ span: 14 }}
+          wrapperCol={{ span: 10 }}
+          labelAlign="left"
+          className="mb-8px"
+          colon={false}
+        >
+          <div className="bg-white rounded-s flex justify-between items-center mb-8px">
+            <Tooltip title="适配宽度">
+              <Button
+                type="text"
+                icon={<i className="iconfont icon-kuandu" />}
+              />
+            </Tooltip>
+            <Tooltip title="适配高度">
+              <Button
+                type="text"
+                icon={<i className="iconfont icon-gaodu" />}
+              />
+            </Tooltip>
+            <Tooltip title="适配宽高">
+              <Button
+                type="text"
+                icon={<i className="iconfont icon-shiyingkuangao" />}
+              />
+            </Tooltip>
+          </div>
+        </Form.Item>
+      </section>
+      <Divider className="my-8px" />
+      <section className="px-16px">
+        <div className="font-bold mb-8px">文本</div>
+        <div className="flex items-center  gap-12px mb-8px">
+          <Select className="flex-1" />
+          <CustomColorPicker />
+        </div>
+        <div className="flex items-center gap-12px mb-8px">
+          <InputNumber
+            className="flex-1"
+            prefix={<FontSizeOutlined />}
+            step={1}
+            min={12}
+            max={10000}
+            formatter={(val) => `${val}px`}
+          />
+          <Select className="flex-1" suffixIcon={<ColumnHeightOutlined />} />
+        </div>
+        <div className="flex items-center gap-12px mb-8px">
+          <div className="bg-white rounded-s flex justify-between items-center mb-8px">
+            <Tooltip title="左对齐">
+              <Button
+                type="text"
+                icon={<i className="iconfont icon-zuoduiqi" />}
+              />
+            </Tooltip>
+            <Tooltip title="居中">
+              <Button
+                type="text"
+                icon={<i className="iconfont icon-juzhong" />}
+              />
+            </Tooltip>
+            <Tooltip title="右对齐">
+              <Button
+                type="text"
+                icon={<i className="iconfont icon-youduiqi" />}
+              />
+            </Tooltip>
+          </div>
+          <div className="bg-white rounded-s flex justify-between items-center mb-8px">
+            <Tooltip title="顶部对齐">
+              <Button type="text" icon={<VerticalAlignTopOutlined />} />
+            </Tooltip>
+            <Tooltip title="垂直居中">
+              <Button type="text" icon={<VerticalAlignMiddleOutlined />} />
+            </Tooltip>
+            <Tooltip title="底部对齐">
+              <Button type="text" icon={<VerticalAlignBottomOutlined />} />
+            </Tooltip>
+          </div>
+        </div>
+        <div className="flex items-center gap-12px mb-8px">
+          <div className="bg-white rounded-s flex justify-between items-center mb-8px">
+            <Tooltip placement="bottom" title="字体加粗">
+              <Button type="text" icon={<BoldOutlined />} />
+            </Tooltip>
+            <Tooltip placement="bottom" title="字体倾斜">
+              <Button type="text" icon={<ItalicOutlined />} />
+            </Tooltip>
+            <Tooltip placement="bottom" title="下划线">
+              <Button type="text" icon={<UnderlineOutlined />} />
+            </Tooltip>
+            <Tooltip placement="bottom" title="中划线">
+              <Button type="text" icon={<StrikethroughOutlined />} />
+            </Tooltip>
+          </div>
+        </div>
+      </section>
+      <Divider className="my-8px" />
+      <section className="px-16px">
+        <div className="font-bold mb-8px">填充</div>
+        <div className="flex items-center gap-12px mb-8px">
+          <Select
+            className="flex-1"
+            options={[
+              { label: "纯色", value: "color" },
+              { label: "渐变", value: "gradient" },
+              { label: "图片", value: "image" },
+            ]}
+          />
+          {
+            <div className="flex items-center gap-12px">
+              <CustomColorPicker />
+              <Button icon={<SwapOutlined />} />
+              <CustomColorPicker />
+            </div>
+          }
+        </div>
+        <div>
+          <Form.Item
+            label="填充方式"
+            labelCol={{ span: 14 }}
+            wrapperCol={{ span: 10 }}
+            labelAlign="left"
+            className="mb-8px"
+            colon={false}
+          >
+            <Select
+              options={[
+                { value: "1", label: "填充" },
+                { value: "2", label: "自适应" },
+                { value: "3", label: "按图形伸展" },
+                { value: "4", label: "原始尺寸" },
+                { value: "5", label: "平铺" },
+              ]}
+            />
+          </Form.Item>
+        </div>
+        <div className="flex items-center gap-12px">
+          <Select
+            className="flex-1"
+            options={[
+              { value: "1", label: "线性渐变" },
+              { value: "2", label: "径向渐变" },
+            ]}
+          />
+          <InputNumber
+            className="flex-1"
+            step={1}
+            min={0}
+            max={360}
+            formatter={(val) => `${val}°`}
+            suffix={<i className="iconfont icon-a-ziyuan126 text-12px" />}
+          />
+          {/* <InputNumber
+            className="flex-1"
+            step={1}
+            min={0}
+            max={100}
+            formatter={(val) => `${val}%`}
+            suffix={<i className="iconfont icon-a-ziyuan126 text-12px" />}
+          /> */}
+        </div>
+      </section>
+      <Divider className="my-8px" />
+      <section className="px-16px">
+        <div className="font-bold mb-8px">线条</div>
+        <div className="flex gap-12px mb-8px">
+          <Select
+            className="flex-1"
+            options={[
+              { label: "实线", value: "solid" },
+              { label: "虚线", value: "dashed" },
+              { label: "点线", value: "dotted" },
+              { label: "点划线", value: "dashdot" },
+            ]}
+          />
+          <CustomColorPicker />
+        </div>
+        <div className="flex gap-12px mb-8px">
+          <InputNumber
+            className="flex-1"
+            step={1}
+            min={1}
+            max={10}
+            formatter={(val) => `${val}px`}
+          />
+          <div className="bg-white rounded-s flex justify-between items-center">
+            <Button
+              type="text"
+              icon={
+                <i className="iconfont icon-a-icon16lianxianleixinghuizhilianxian" />
+              }
+            />
+            <Button
+              type="text"
+              icon={
+                <i className="iconfont icon-a-icon16lianxianleixingbeisaierquxian" />
+              }
+            />
+            <Button
+              type="text"
+              icon={
+                <i className="iconfont icon-a-icon16lianxianleixinghuizhizhixian" />
+              }
+            />
+          </div>
+        </div>
+        <Form.Item
+          label="箭头类型"
+          labelAlign="left"
+          colon={false}
+          labelCol={{ span: 6 }}
+          wrapperCol={{ span: 18 }}
+        >
+          <div className="flex gap-12px items-center">
+            <Select
+              options={arrowOptions.map((item) => {
+                return {
+                  value: item.name,
+                  label: <img className="w-12px mx-50%" src={item.icon} />,
+                };
+              })}
+            />
+            <Select
+              options={arrowOptions.map((item) => {
+                return {
+                  value: item.name,
+                  label: <img className="w-12px mx-50%" src={item.icon} />,
+                };
+              })}
+            />
+          </div>
+        </Form.Item>
+      </section>
+    </div>
+  );
+}

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

@@ -1,33 +1,142 @@
 import React, { useState } from "react";
 import CustomColorPicker from "@/components/CustomColorPicker";
-import { Button, Checkbox, InputNumber, Select } from "antd";
-import { SwapOutlined } from "@ant-design/icons";
+import {
+  Button,
+  Checkbox,
+  InputNumber,
+  Select,
+  Form,
+  Popover,
+  Input,
+  Divider,
+} from "antd";
+import { QuestionCircleOutlined, SwapOutlined } from "@ant-design/icons";
+import crossLineImg from "@/assets/image/linejump.png";
+import noCrossLineImg from "@/assets/image/unlinejump.png";
 
 export default function PageStyle() {
   const [setting, setSetting] = useState({
-    color: '#ffff00'
+    color: "#ffff00",
   });
   return (
     <div>
-      <div className="border border-solid border-transparent border-1px border-b-#eee flex items-center justify-between px-16px py-8px">
-        <div className="flex-1 font-bold">背景样式</div>
-        <CustomColorPicker color={setting.color} onChange={color => setSetting({color})}/>
-      </div>
-      <div>
-        <Select className="w-full" options={[
-          {value: '1', label: 'A3尺寸(1500px*2100px)'},
-          {value: '2', label: 'A4尺寸(1050px*1000px)'},
-          {value: '3', label: 'A5尺寸(700px*1050px)'},
-        ]}/>
-      </div>
-      <div className="flex justify-between">
-        <InputNumber suffix="W" step={1} min={500} max={10000} formatter={(val) => `${val}px`}/>
-        <Button type="text" icon={<SwapOutlined/>}/>
-        <InputNumber suffix="H" step={1} min={500} max={10000} formatter={(val) => `${val}px`}/>
-      </div>
-      <div>
-        <Checkbox>显示网格</Checkbox>
-      </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 })}
+          />
+        </div>
+        <div className="pb-8px">
+          <Select
+            className="w-full"
+            options={[
+              { value: "1", label: "A3尺寸(1500px*2100px)" },
+              { value: "2", label: "A4尺寸(1050px*1000px)" },
+              { value: "3", label: "A5尺寸(700px*1050px)" },
+            ]}
+          />
+        </div>
+        <div className="flex justify-between pb-8px">
+          <InputNumber
+            suffix="W"
+            step={1}
+            min={500}
+            max={10000}
+            formatter={(val) => `${val}px`}
+          />
+          <Button icon={<SwapOutlined />} />
+          <InputNumber
+            suffix="H"
+            step={1}
+            min={500}
+            max={10000}
+            formatter={(val) => `${val}px`}
+          />
+        </div>
+      </section>
+      <Divider className="my-8px" />
+      <section className="px-16px">
+        <div>
+          <Checkbox>
+            <span className="font-bold">显示网格</span>
+          </Checkbox>
+        </div>
+        <div>
+          <Form.Item
+            label="网格大小"
+            labelCol={{ span: 10 }}
+            labelAlign="left"
+            className="mb-8px"
+            colon={false}
+          >
+            <Select
+              options={[
+                { value: "1", label: "小" },
+                { value: "2", label: "正常" },
+                { value: "3", label: "大" },
+                { value: "4", label: "很大" },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item
+            label="网格尺寸"
+            labelCol={{ span: 10 }}
+            wrapperCol={{ span: 14 }}
+            labelAlign="left"
+            className="mb-8px"
+            colon={false}
+          >
+            <InputNumber
+              className="w-full"
+              step={1}
+              min={10}
+              max={100}
+              formatter={(val) => `${val}px`}
+            />
+          </Form.Item>
+        </div>
+      </section>
+      <Divider className="my-8px" />
+      <section className="px-16px">
+        <div>
+          <Checkbox>
+            <span className="font-bold">显示跨线</span>
+          </Checkbox>
+          <Popover
+            content={
+              <div className="flex justify-between">
+                <div className="mr-8px">
+                  <img src={crossLineImg} alt="" />
+                  <div>显示跨线</div>
+                </div>
+                <div>
+                  <img src={noCrossLineImg} alt="" />
+                  <div>不显示跨线</div>
+                </div>
+              </div>
+            }
+          >
+            <QuestionCircleOutlined className="color-#999 hover:color-#666" />
+          </Popover>
+        </div>
+      </section>
+      <Divider className="my-8px" />
+      <section className="px-16px">
+        <div>
+          <Checkbox>
+            <span className="font-bold">显示打印分割线</span>
+          </Checkbox>
+        </div>
+      </section>
+      <Divider className="my-8px" />
+      <section className="px-16px">
+        <Checkbox className="mb-8px">
+          <span className="font-bold">显示水印</span>
+        </Checkbox>
+        <Input placeholder="不超过15字，回车保存" maxLength={15} />
+      </section>
     </div>
   );
 }

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

@@ -1,29 +1,52 @@
-import { Tabs } from 'antd'
-import React from 'react'
-import PageStyle from './PageStyle'
+import { ConfigProvider, Tabs } from "antd";
+import React from "react";
+import PageStyle from "./PageStyle";
+import GraphStyle from "./GraphStyle";
 
 export default function Config() {
   const tabItems = [
     {
-      key: '1',
+      key: "1",
       label: `页面样式`,
-      children: <PageStyle/>,
+      children: (
+        <ConfigProvider
+          componentSize="small"
+          theme={{
+            token: {
+              colorPrimary: "#1890ff",
+            },
+          }}
+        >
+          <PageStyle />
+        </ConfigProvider>
+      ),
     },
     {
-      key: '2',
+      key: "2",
       label: `图形样式`,
-      children: `Content of Tab Pane 2`,
+      children: (
+        <ConfigProvider
+          componentSize="small"
+          theme={{
+            token: {
+              colorPrimary: "#1890ff",
+            },
+          }}
+        >
+          <GraphStyle />
+        </ConfigProvider>
+      ),
     },
     {
-      key: '3',
+      key: "3",
       label: `节点属性`,
       children: `Content of Tab Pane 2`,
     },
-  ]
+  ];
 
   return (
     <div>
-      <Tabs centered items={tabItems}/>
+      <Tabs centered items={tabItems} />
     </div>
-  )
+  );
 }

apps/designer/src/pages/flow/components/Footer/index.tsx

@@ -1,9 +1,31 @@
-import React from 'react'
+import { CompressOutlined, ExpandOutlined, MinusOutlined, PlusOutlined, QuestionCircleFilled } from "@ant-design/icons";
+import { Button, ConfigProvider, Divider, Slider, Tooltip } from "antd";
+import React from "react";
 
 export default function Footer() {
   return (
-    <div className='h-24px bg-white'>
-      底部工具
-    </div>
-  )
+    <ConfigProvider componentSize="small">
+      <div className="h-24px bg-white flex justify-between items-center px-16px">
+        <div className="footer-left"></div>
+        <div className="footer-right flex items-center">
+          <div>图形：1/25</div>
+          <Divider type="vertical" />
+          <Tooltip title="模板">
+            <Button type="text" icon={<i className="iconfont icon-buju" />} />
+          </Tooltip>
+          <Tooltip title="视图导航">
+            <Button type="text" icon={<i className="iconfont icon-map" />} />
+          </Tooltip>
+          <Button type="text" icon={<PlusOutlined/>} />
+          <Slider min={20} max={200} className="w-120px m-0 mx-8px" tooltip={{formatter: (val) => `${val}%`}}/>
+          <Button type="text" icon={<MinusOutlined/>} />
+          <div className="cursor-pointer mx-8px">100%</div>
+          <Button type="text" icon={<ExpandOutlined/>} />
+          <Button type="text" icon={<CompressOutlined/>} />
+          <Divider type="vertical" />
+          <Button type="text" icon={<QuestionCircleFilled/>} />
+        </div>
+      </div>
+    </ConfigProvider>
+  );
 }

apps/designer/src/pages/flow/components/Libary/index.tsx

@@ -39,17 +39,17 @@ export default function Libary() {
     {
       key: "1",
       label: "基础图形",
-      children: <Space wrap size={[8, 8]}>{basic.map((item, index) => renderItem(item, index))}</Space>,
+      children: <Space wrap size={6}>{basic.map((item, index) => renderItem(item, index))}</Space>,
     },
     {
       key: "2",
       label: "Flowchart流程图",
-      children: <Space wrap size={[8, 8]}>{basic.map((item, index) => renderItem(item, index))}</Space>,
+      children: <Space wrap size={6}>{basic.map((item, index) => renderItem(item, index))}</Space>,
     },
     {
       key: "3",
       label: "E-R图",
-      children: <Space wrap size={[8, 8]}>{basic.map((item, index) => renderItem(item, index))}</Space>,
+      children: <Space wrap size={6}>{basic.map((item, index) => renderItem(item, index))}</Space>,
     },
   ]);
 

apps/designer/src/pages/flow/data.ts

@@ -0,0 +1,12 @@
+/** 箭头类型 */
+export const arrowOptions = [
+  { name: 'none', icon: require('@/assets/icon/arrow0.png') },
+  { name: 'block', icon: require('@/assets/icon/arrow1.png') },
+  { name: 'classic', icon: require('@/assets/icon/arrow2.png') },
+  { name: 'diamond', icon: require('@/assets/icon/arrow3.png') },
+  { name: 'circle', icon: require('@/assets/icon/arrow4.png') },
+  { name: 'circlePlus', icon: require('@/assets/icon/arrow5.png') },
+  { name: 'ellipse', icon: require('@/assets/icon/arrow6.png') },
+  { name: 'cross', icon: require('@/assets/icon/arrow7.png') },
+  { name: 'async', icon: require('@/assets/icon/arrow8.png') },
+]

package.json

@@ -32,6 +32,7 @@
     "@antv/x6-react-shape": "^2.2.3",
     "@emotion/css": "^11.13.0",
     "@unocss/cli": "^0.62.3",
+    "ahooks": "^3.8.1",
     "antd": "^5.20.5",
     "axios": "^1.7.7",
     "insert-css": "^2.0.0",

pnpm-lock.yaml

@@ -50,6 +50,9 @@ importers:
       '@unocss/cli':
         specifier: ^0.62.3
         version: 0.62.3
+      ahooks:
+        specifier: ^3.8.1
+        version: 3.8.1(react@18.3.1)
       antd:
         specifier: ^5.20.5
         version: 5.20.5(react-dom@18.3.1)(react@18.3.1)
@@ -5088,6 +5091,24 @@ packages:
       indent-string: 4.0.0
     dev: true
 
+  /ahooks@3.8.1(react@18.3.1):
+    resolution: {integrity: sha512-JoP9+/RWO7MnI/uSKdvQ8WB10Y3oo1PjLv+4Sv4Vpm19Z86VUMdXh+RhWvMGxZZs06sq2p0xVtFk8Oh5ZObsoA==}
+    engines: {node: '>=8.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.25.6
+      dayjs: 1.11.13
+      intersection-observer: 0.12.2
+      js-cookie: 3.0.5
+      lodash: 4.17.21
+      react: 18.3.1
+      react-fast-compare: 3.2.2
+      resize-observer-polyfill: 1.5.1
+      screenfull: 5.2.0
+      tslib: 2.7.0
+    dev: false
+
   /ajv-keywords@3.5.2(ajv@6.12.6):
     resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
     peerDependencies:
@@ -8878,6 +8899,10 @@ packages:
       hasown: 2.0.2
       side-channel: 1.0.6
 
+  /intersection-observer@0.12.2:
+    resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
+    dev: false
+
   /intl-format-cache@4.3.1:
     resolution: {integrity: sha512-OEUYNA7D06agqPOYhbTkl0T8HA3QKSuwWh1HiClEnpd9vw7N+3XsQt5iZ0GUEchp5CW1fQk/tary+NsbF3yQ1Q==}
     dev: true
@@ -9388,6 +9413,11 @@ packages:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
     dev: true
 
+  /js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+    dev: false
+
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -12547,6 +12577,11 @@ packages:
       ajv-keywords: 3.5.2(ajv@6.12.6)
     dev: false
 
+  /screenfull@5.2.0:
+    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /scroll-into-view-if-needed@3.1.0:
     resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
     dependencies: