feat: 添加属性配置

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

@@ -0,0 +1,112 @@
+import {
+  Select,
+  Form,
+  Input,
+  Divider,
+} from "antd";
+import { useModel } from "umi";
+
+export default function NodeAttrs() {
+  const { pageState, onChangePageSettings } = useModel("appModel");
+
+  return (
+    <div>
+      <Divider style={{margin: '0'}}>基本</Divider>
+      <section className="px-16px">
+        <Form.Item
+          label="中文"
+          labelCol={{ span: 10 }}
+          labelAlign="left"
+          className="mb-8px"
+          colon={false}
+        >
+          <Input placeholder="请输入" />
+        </Form.Item>
+        <Form.Item
+          label="English"
+          labelCol={{ span: 10 }}
+          labelAlign="left"
+          className="mb-8px"
+          colon={false}
+        >
+          <Input placeholder="请输入" />
+        </Form.Item>
+        <Form.Item
+          label="节点描述"
+          labelCol={{ span: 10 }}
+          labelAlign="left"
+          className="mb-8px"
+          colon={false}
+        >
+          <Input.TextArea placeholder="请输入" />
+        </Form.Item>
+        <Form.Item
+          label="关联类型"
+          labelCol={{ span: 10 }}
+          labelAlign="left"
+          className="mb-8px"
+          colon={false}
+        >
+          <Select placeholder="请选择" options={[
+            { value: "1", label: "场景" },
+            { value: "2", label: "流程" },
+            { value: "3", label: "页面" },
+            { value: "4", label: "数据表" },
+          ]}/>
+        </Form.Item>
+        <Form.Item
+          labelCol={{ span: 10 }}
+          labelAlign="left"
+          className="mb-8px"
+          colon={false}
+        >
+          <Select placeholder="请选择" options={[
+            { value: "1", label: "场景" },
+            { value: "2", label: "流程" },
+            { value: "3", label: "页面" },
+            { value: "4", label: "数据表" },
+          ]}/>
+        </Form.Item>
+      </section>
+      <Divider style={{margin: '0'}}>需求</Divider>
+      <section className="px-16px">
+        <Form.Item
+          label="参与人"
+          labelCol={{ span: 10 }}
+          labelAlign="left"
+          className="mb-8px"
+          colon={false}
+        >
+          <Input placeholder="请输入" />
+        </Form.Item>
+        <Form.Item
+          label="记录时间"
+          labelCol={{ span: 10 }}
+          labelAlign="left"
+          className="mb-8px"
+          colon={false}
+        >
+          <Input placeholder="请输入" />
+        </Form.Item>
+        <Form.Item
+          label="记录人"
+          labelCol={{ span: 10 }}
+          labelAlign="left"
+          className="mb-8px"
+          colon={false}
+        >
+          <Input.TextArea placeholder="请输入" />
+        </Form.Item>
+        <Form.Item
+          label="内容"
+          labelCol={{ span: 10 }}
+          labelAlign="left"
+          className="mb-8px"
+          colon={false}
+        >
+          <Input.TextArea rows={5} placeholder="请输入" />
+        </Form.Item>
+      </section>
+    </div>
+  );
+}

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

@@ -2,6 +2,7 @@ import { ConfigProvider, Tabs } from "antd";
 import React, { useEffect, useState } from "react";
 import PageStyle from "./PageStyle";
 import GraphStyle from "./GraphStyle";
+import NodeAttrs from "./NodeAttrs";
 import { useModel } from "umi";
 import InsetCss from "insert-css";
 
@@ -56,7 +57,16 @@ export default function Config() {
     {
       key: "3",
       label: `节点属性`,
-      children: `Content of Tab Pane 2`,
+      children: <ConfigProvider
+      componentSize="small"
+      theme={{
+        token: {
+          colorPrimary: "#1890ff",
+        },
+      }}
+    >
+      <NodeAttrs />
+    </ConfigProvider>,
     },
   ];