@ysjdemo/umi-create-cli 0.0.3 → 0.0.4

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlow/UpdateArrowPropertyDrawer.tsx

@@ -0,0 +1,125 @@
+import { DrawerForm, DrawerFormProps, ProFormDigit, ProFormSelect, ProFormTextArea } from '@ant-design/pro-components';
+import LogicFlow from '@logicflow/core';
+import { MyColorPicker, useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+interface IProps extends DrawerFormProps {
+  arrowData: LogicFlow.EdgeData | undefined;
+}
+
+const UpdateArrowPropertyDrawer: React.FC<IProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const { arrowData, ...reset } = props;
+  const { properties = {} } = arrowData || {};
+  const [form] = Form.useForm<any>();
+  const [arrowType, setArrowType] = useState(properties.arrowType || 'defautl');
+
+  useEffect(() => {
+    if (arrowData) {
+      form.setFieldsValue({
+        ...arrowData,
+        ...properties,
+        value: arrowData.text?.value,
+      });
+      setArrowType(properties.arrowType);
+    }
+  }, [arrowData]);
+
+  return (
+    <DrawerForm
+      {...reset}
+      title={formatMessage({ id: 'Edit Arrow Appearance Configuration', defaultMessage: '修改箭头外观配置' })}
+      resize={{
+        onResize() {},
+        maxWidth: window.innerWidth * 0.8,
+        minWidth: 500,
+      }}
+      form={form}
+      autoFocusFirstInput
+      drawerProps={{
+        destroyOnClose: true,
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        return await props.onFinish?.(values);
+      }}
+    >
+      {/* 箭头 */}
+      <ProFormSelect
+        label={formatMessage({ id: 'lib.Flow.modal.arrow.type', defaultMessage: '箭头类型' })}
+        name="arrowType"
+        width="md"
+        initialValue={arrowType || 'defautl'}
+        fieldProps={{
+          onChange: (value) => {
+            setArrowType(value);
+          },
+        }}
+        options={[
+          {
+            label: formatMessage({ id: 'lib.Flow.modal.arrow.type.defautl', defaultMessage: '默认' }),
+            value: 'defautl',
+          },
+          {
+            label: formatMessage({ id: 'lib.Flow.modal.arrow.type.empty', defaultMessage: '空心箭头' }),
+            value: 'empty',
+          },
+          {
+            label: formatMessage({ id: 'lib.Flow.modal.arrow.type.half', defaultMessage: '半箭头' }),
+            value: 'half',
+          },
+          {
+            label: formatMessage({ id: 'lib.Flow.modal.arrow.type.none', defaultMessage: '无箭头' }),
+            value: 'none',
+          },
+          {
+            label: formatMessage({ id: 'lib.Flow.modal.arrow.type.custom', defaultMessage: '自定义' }),
+            value: 'custom',
+          },
+        ]}
+      />
+      <ProFormDigit
+        name={['arrowStyle', 'strokeWidth']}
+        min={1}
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.node.strokeWidth', defaultMessage: '边框粗细' })}
+      />
+      <Form.Item
+        name={['arrowStyle', 'stroke']}
+        label={formatMessage({ id: 'lib.Flow.modal.node.stroke', defaultMessage: '边框颜色' })}
+      >
+        <MyColorPicker
+          onChange={(value) => {
+            /**
+             * 设置form中的值为返回的数据
+             */
+            form.setFieldValue(['arrowStyle', 'stroke'], value?.toHexString());
+          }}
+        />
+      </Form.Item>
+      <Form.Item
+        name={['arrowStyle', 'fill']}
+        label={formatMessage({ id: 'lib.Flow.modal.node.fill', defaultMessage: '填充颜色' })}
+      >
+        <MyColorPicker
+          onChange={(value) => {
+            /**
+             * 设置form中的值为返回的数据
+             */
+            form.setFieldValue(['arrowStyle', 'fill'], value?.toHexString());
+          }}
+        />
+      </Form.Item>
+      {arrowType === 'custom' ? (
+        <ProFormTextArea
+          name="arrowPath"
+          label={formatMessage({ id: 'lib.Flow.modal.arrow.arrowPath', defaultMessage: '自定义箭头路径' })}
+          tooltip={formatMessage({ id: 'lib.Flow.modal.arrow.tips', defaultMessage: 'svg path的坐标' })}
+        />
+      ) : null}
+    </DrawerForm>
+  );
+};
+
+export default UpdateArrowPropertyDrawer;

package/lib/templates/qiankun/cf-workbench-function/src/components/LogicFlow/UpdateLinePropertyDrawer.tsx

@@ -0,0 +1,242 @@
+import {
+  DrawerForm,
+  DrawerFormProps,
+  ProFormDigit,
+  ProFormGroup,
+  ProFormList,
+  ProFormRadio,
+  ProFormText,
+} from '@ant-design/pro-components';
+import LogicFlow from '@logicflow/core';
+import { MyColorPicker, useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+interface IProps extends DrawerFormProps {
+  lineData: LogicFlow.EdgeData | undefined;
+}
+
+const UpdateHtmlNodeText: React.FC<IProps> = (props) => {
+  const { formatMessage } = useIntl();
+
+  const { lineData, ...reset } = props;
+  const { properties = {} } = lineData || {};
+  const [form] = Form.useForm<any>();
+  const [lineType, setLineType] = useState<'solid' | 'dashed'>(properties.lineType || 'solid');
+
+  useEffect(() => {
+    if (lineData) {
+      // 处理虚线格式
+      form.setFieldsValue({
+        ...lineData,
+        ...properties,
+        value: lineData.text?.value,
+      });
+      setLineType(properties.lineType);
+    }
+  }, [lineData]);
+
+  return (
+    <DrawerForm
+      {...reset}
+      title={formatMessage({ id: 'lib.Flow.modal.edge.update.title', defaultMessage: '修改边外观配置' })}
+      resize={{
+        onResize() {},
+        maxWidth: window.innerWidth * 0.8,
+        minWidth: 500,
+      }}
+      form={form}
+      autoFocusFirstInput
+      drawerProps={{
+        destroyOnClose: true,
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        return await props.onFinish?.(values);
+      }}
+    >
+      <ProFormText
+        name="type"
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.edge.type', defaultMessage: '边类型' })}
+      />
+
+      {/* 文案 */}
+      <ProFormText
+        name="value"
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.text.title', defaultMessage: '文案' })}
+      />
+      <ProFormDigit
+        name={['textStyle', 'fontSize']}
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.text.style.fontSize', defaultMessage: '字体大小' })}
+      />
+      <Form.Item
+        name={['textStyle', 'color']}
+        label={formatMessage({ id: 'lib.Flow.modal.text.style.color', defaultMessage: '文案颜色' })}
+      >
+        <MyColorPicker
+          onChange={(value) => {
+            /**
+             * 设置form中的值为返回的数据
+             */
+            form.setFieldValue(['textStyle', 'color'], value?.toHexString());
+          }}
+        />
+      </Form.Item>
+
+      {/* 线条 */}
+      <ProFormDigit
+        name="strokeWidth"
+        min={1}
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.edge.strokeWidth', defaultMessage: '边粗细' })}
+      />
+      <Form.Item name="stroke" label={formatMessage({ id: 'lib.Flow.modal.edge.stroke', defaultMessage: '边颜色' })}>
+        <MyColorPicker
+          onChange={(value) => {
+            /**
+             * 设置form中的值为返回的数据
+             */
+            form.setFieldValue('stroke', value?.toHexString());
+          }}
+        />
+      </Form.Item>
+      <ProFormRadio.Group
+        label={formatMessage({ id: 'lib.Flow.modal.edge.lineType', defaultMessage: '线条类型' })}
+        name="lineType"
+        initialValue={lineType}
+        options={[
+          {
+            label: formatMessage({ id: 'lib.Flow.modal.edge.solidLine', defaultMessage: '实线' }),
+            value: 'solid',
+          },
+          {
+            label: formatMessage({ id: 'lib.Flow.modal.edge.dashedLine', defaultMessage: '虚线' }),
+            value: 'dashed',
+          },
+        ]}
+        fieldProps={{
+          onChange: (e) => {
+            setLineType(e.target.value);
+          },
+        }}
+      />
+      {lineType === 'dashed' ? (
+        <ProFormList
+          name="strokeDasharray"
+          label={formatMessage({ id: 'lib.Flow.modal.edge.dashed.config', defaultMessage: '虚线配置' })}
+          tooltip={formatMessage({
+            id: 'lib.Flow.modal.edge.dashed.tips',
+            defaultMessage: '每一行代表一个虚线点，重复渲染',
+          })}
+          min={1}
+        >
+          <ProFormGroup key="group">
+            <ProFormDigit
+              name={[0]}
+              width={150}
+              label={formatMessage({ id: 'lib.Flow.modal.edge.dashed.length', defaultMessage: '线长' })}
+            />
+            <ProFormDigit
+              name={[1]}
+              width={150}
+              label={formatMessage({ id: 'lib.Flow.modal.edge.dashed.interval', defaultMessage: '间隔' })}
+            />
+          </ProFormGroup>
+        </ProFormList>
+      ) : null}
+
+      <ProFormList name="pointsList" label="自定义路径" tooltip={'每一行代表x,y轴的点，最后将点连接成线'} min={2}>
+        <ProFormGroup key="group">
+          <ProFormDigit
+            name="x"
+            width={150}
+            label={'x' + formatMessage({ id: 'lib.Flow.modal.node.axis', defaultMessage: '轴' })}
+          />
+          <ProFormDigit
+            name="y"
+            width={150}
+            label={'y' + formatMessage({ id: 'lib.Flow.modal.node.axis', defaultMessage: '轴' })}
+          />
+        </ProFormGroup>
+      </ProFormList>
+
+      {/* 动画边样式 */}
+      <ProFormDigit
+        name={['lineAnimationStyle', 'strokeWidth']}
+        min={1}
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.edge.animation.strokeWidth', defaultMessage: '动画边粗细' })}
+      />
+      <Form.Item
+        name={['lineAnimationStyle', 'stroke']}
+        label={formatMessage({ id: 'lib.Flow.modal.edge.animation.stroke', defaultMessage: '动画边颜色' })}
+      >
+        <MyColorPicker
+          onChange={(value) => {
+            /**
+             * 设置form中的值为返回的数据
+             */
+            form.setFieldValue(['lineAnimationStyle', 'stroke'], value?.toHexString());
+          }}
+        />
+      </Form.Item>
+      <ProFormDigit
+        name={['lineAnimationStyle', 'animationDuration']}
+        min={1}
+        width="md"
+        label={formatMessage({ id: 'lib.Flow.modal.edge.animation.duration', defaultMessage: '动画速率' })}
+      />
+      <ProFormList
+        name={['lineAnimationStyle', 'strokeDasharray']}
+        label={formatMessage({ id: 'lib.Flow.modal.edge.animation.config', defaultMessage: '动画虚线配置' })}
+        tooltip={formatMessage({
+          id: 'lib.Flow.modal.edge.dashed.tips',
+          defaultMessage: '每一行代表一个虚线点，重复渲染',
+        })}
+        min={1}
+      >
+        <ProFormGroup key="group">
+          <ProFormDigit
+            name={[0]}
+            width={150}
+            label={formatMessage({ id: 'lib.Flow.modal.edge.dashed.length', defaultMessage: '线长' })}
+          />
+          <ProFormDigit
+            name={[1]}
+            width={150}
+            label={formatMessage({ id: 'lib.Flow.modal.edge.dashed.interval', defaultMessage: '间隔' })}
+          />
+        </ProFormGroup>
+      </ProFormList>
+
+      {/* 选框 */}
+      <ProFormDigit
+        name={['outlineStyle', 'strokeWidth']}
+        min={1}
+        width="md"
+        label={formatMessage({
+          id: 'lib.Flow.modal.node.outlineStyle.strokeWidth',
+          defaultMessage: '选框粗细',
+        })}
+      />
+      <Form.Item
+        name={['outlineStyle', 'stroke']}
+        label={formatMessage({ id: 'lib.Flow.modal.node.outlineStyle.stroke', defaultMessage: '选框颜色' })}
+      >
+        <MyColorPicker
+          onChange={(value) => {
+            /**
+             * 设置form中的值为返回的数据
+             */
+            form.setFieldValue(['outlineStyle', 'stroke'], value?.toHexString());
+          }}
+        />
+      </Form.Item>
+    </DrawerForm>
+  );
+};
+
+export default UpdateHtmlNodeText;