mirror of
https://gitee.com/ByteDance/flowgram.ai.git
synced 2025-07-07 17:43:29 +08:00
Merge pull request #38 from dragooncjw/fix/resource
fix: static resource
This commit is contained in:
commit
a78d25e30d
@ -26,7 +26,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
<td>Minimap</td>
|
<td>Minimap</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/minimap.gif" />
|
<img loading="lazy" src="/fixed-layout/minimap.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -34,7 +34,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
<td>Undo/Redo</td>
|
<td>Undo/Redo</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/redo-undo.gif" />
|
<img loading="lazy" src="/fixed-layout/redo-undo.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -42,7 +42,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
<td>Copy/Paste (Support Shortcut)</td>
|
<td>Copy/Paste (Support Shortcut)</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/copypaste.gif" />
|
<img loading="lazy" src="/fixed-layout/copypaste.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -55,7 +55,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/dragdrop.gif" />
|
<img loading="lazy" src="/fixed-layout/dragdrop.gif" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -66,7 +66,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/layout-change.gif" />
|
<img loading="lazy" src="/fixed-layout/layout-change.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -76,7 +76,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/fold.gif" />
|
<img loading="lazy" src="/fixed-layout/fold.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -86,7 +86,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/group.gif" />
|
<img loading="lazy" src="/fixed-layout/group.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@ -29,7 +29,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/free-layout/autolayout.gif" />
|
<img loading="lazy" src="/free-layout/autolayout.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -39,7 +39,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/free-layout/snap.gif" />
|
<img loading="lazy" src="/free-layout/snap.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@ -130,7 +130,7 @@ The following example shows:
|
|||||||
3. How to display the error of the array item
|
3. How to display the error of the array item
|
||||||
|
|
||||||
<div className="rs-center" >
|
<div className="rs-center" >
|
||||||
<img loading="lazy" src="@/public/field-array.gif" style={{ maxWidth: 600 }}/>
|
<img loading="lazy" src="/field-array.gif" style={{ maxWidth: 600 }}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```tsx pure
|
```tsx pure
|
||||||
@ -203,7 +203,7 @@ export const arrayMeta: FormMeta = {
|
|||||||
Validation logic is configured globally, and the validation logic is declared by the form item path
|
Validation logic is configured globally, and the validation logic is declared by the form item path
|
||||||
|
|
||||||
<div className="rs-center" >
|
<div className="rs-center" >
|
||||||
<img loading="lazy" src="@/public/form-validate.gif" style={{ maxWidth: 600 }}/>
|
<img loading="lazy" src="/form-validate.gif" style={{ maxWidth: 600 }}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```tsx pure
|
```tsx pure
|
||||||
@ -304,7 +304,7 @@ The following example shows:
|
|||||||
- onArrayDelete
|
- onArrayDelete
|
||||||
|
|
||||||
<div className="rs-center" >
|
<div className="rs-center" >
|
||||||
<img loading="lazy" src="@/public/form-effect.gif" style={{ maxWidth: 600 }}/>
|
<img loading="lazy" src="/form-effect.gif" style={{ maxWidth: 600 }}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```tsx pure
|
```tsx pure
|
||||||
|
|||||||
@ -26,11 +26,11 @@ Compared to ReactFlow, FlowGram aims to provide a complete out-of-the-box soluti
|
|||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-tip">Since events are bound to SVG, it's difficult to click on elements when zoomed out</div>
|
<div className="rs-tip">Since events are bound to SVG, it's difficult to click on elements when zoomed out</div>
|
||||||
<img loading="lazy" src="@/public/reactflow/reactflow-render.gif"/>
|
<img loading="lazy" src="/reactflow/reactflow-render.gif"/>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-tip">FlowGram's events use global mousemove monitoring and calculate positions with Threshold, allowing clicks even when zoomed out, while also supporting edge reconnection</div>
|
<div className="rs-tip">FlowGram's events use global mousemove monitoring and calculate positions with Threshold, allowing clicks even when zoomed out, while also supporting edge reconnection</div>
|
||||||
<img loading="lazy" src="@/public/reactflow/reactflow-interaction.gif"/>
|
<img loading="lazy" src="/reactflow/reactflow-interaction.gif"/>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@ -5,8 +5,8 @@ See: https://reactflow.dev/examples/nodes/custom-node
|
|||||||
- ReactFlow's interaction customization cost is high. As shown below, it's difficult to select points when the canvas is zoomed out, and it doesn't support drag-and-drop line reconnection
|
- ReactFlow's interaction customization cost is high. As shown below, it's difficult to select points when the canvas is zoomed out, and it doesn't support drag-and-drop line reconnection
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td><img loading="lazy" src="@/public/reactflow/reactflow-render.gif"/></td>
|
<td><img loading="lazy" src="/reactflow/reactflow-render.gif"/></td>
|
||||||
<td><img loading="lazy" src="@/public/reactflow/reactflow-interaction.gif"/></td>
|
<td><img loading="lazy" src="/reactflow/reactflow-interaction.gif"/></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|||||||
@ -23,7 +23,7 @@ In today's AI-driven era, we are focusing more on how to empower workflows with
|
|||||||
Fixed layout with nodes/branches supporting specified position drag and drop, offering compound nodes like branches and loops
|
Fixed layout with nodes/branches supporting specified position drag and drop, offering compound nodes like branches and loops
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img loading="lazy" src="@/public/fixed-layout/fixed-layout-demo.gif"/>
|
<img loading="lazy" src="/fixed-layout/fixed-layout-demo.gif"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -36,7 +36,7 @@ In today's AI-driven era, we are focusing more on how to empower workflows with
|
|||||||
Free layout where nodes can be moved to any position and connected through free connections
|
Free layout where nodes can be moved to any position and connected through free connections
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img loading="lazy" src="@/public/free-layout/free-layout-demo.gif"/>
|
<img loading="lazy" src="/free-layout/free-layout-demo.gif"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -53,7 +53,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
Motion animations in web applications can be traced back to Material Design, which suggests that element changes in width, height, or position need a transition process. The canvas engine separates the drawing of lines and nodes, greatly reducing the cost of implementing motion transitions
|
Motion animations in web applications can be traced back to Material Design, which suggests that element changes in width, height, or position need a transition process. The canvas engine separates the drawing of lines and nodes, greatly reducing the cost of implementing motion transitions
|
||||||
</p>
|
</p>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/common/motion.gif" />
|
<img loading="lazy" src="/common/motion.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -64,7 +64,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
Gestures refer to Mac touchpad two-finger spread/pinch for canvas zoom in/out, or holding space to drag the canvas, interactions inspired by Sketch and Figma
|
Gestures refer to Mac touchpad two-finger spread/pinch for canvas zoom in/out, or holding space to drag the canvas, interactions inspired by Sketch and Figma
|
||||||
</p>
|
</p>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/common/touch-pad.gif" />
|
<img loading="lazy" src="/common/touch-pad.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -72,7 +72,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
<td>Minimap</td>
|
<td>Minimap</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/minimap.gif" />
|
<img loading="lazy" src="/fixed-layout/minimap.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -80,7 +80,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
<td>Undo/Redo</td>
|
<td>Undo/Redo</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/redo-undo.gif" />
|
<img loading="lazy" src="/fixed-layout/redo-undo.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -88,7 +88,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
<td>Copy/Paste (Shortcut Support)</td>
|
<td>Copy/Paste (Shortcut Support)</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/copypaste.gif" />
|
<img loading="lazy" src="/fixed-layout/copypaste.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -102,7 +102,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/dragdrop.gif" />
|
<img loading="lazy" src="/fixed-layout/dragdrop.gif" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -114,7 +114,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/layout-change.gif" />
|
<img loading="lazy" src="/fixed-layout/layout-change.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -125,7 +125,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/fold.gif" />
|
<img loading="lazy" src="/fixed-layout/fold.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -136,7 +136,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/group.gif" />
|
<img loading="lazy" src="/fixed-layout/group.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -147,7 +147,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/free-layout/autolayout.gif" />
|
<img loading="lazy" src="/free-layout/autolayout.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -158,7 +158,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/free-layout/snap.gif" />
|
<img loading="lazy" src="/free-layout/snap.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -169,7 +169,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/free-layout/loop.gif" />
|
<img loading="lazy" src="/free-layout/loop.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -185,7 +185,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img loading="lazy" src="@/public/ref-coze-en.png"/>
|
<img loading="lazy" src="/ref-coze-en.png"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -193,7 +193,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
Lark Low-code Platform Workflow
|
Lark Low-code Platform Workflow
|
||||||
</a>
|
</a>
|
||||||
<div>
|
<div>
|
||||||
<img loading="lazy" src="@/public/ref-apaas-en.png"/>
|
<img loading="lazy" src="/ref-apaas-en.png"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -201,7 +201,7 @@ Providing a set of interactive best practices for smoother workflow operations
|
|||||||
Lark Base Workflow
|
Lark Base Workflow
|
||||||
</a>
|
</a>
|
||||||
<div>
|
<div>
|
||||||
<img loading="lazy" src="@/public/ref-bitable-en.png"/>
|
<img loading="lazy" src="/ref-bitable-en.png"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -26,7 +26,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
<td>缩略图</td>
|
<td>缩略图</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/minimap.gif" />
|
<img loading="lazy" src="/fixed-layout/minimap.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -34,7 +34,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
<td>撤销/重做</td>
|
<td>撤销/重做</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/redo-undo.gif" />
|
<img loading="lazy" src="/fixed-layout/redo-undo.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -42,7 +42,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
<td>复制/粘贴(支持快捷键)</td>
|
<td>复制/粘贴(支持快捷键)</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/copypaste.gif" />
|
<img loading="lazy" src="/fixed-layout/copypaste.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -55,7 +55,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/dragdrop.gif" />
|
<img loading="lazy" src="/fixed-layout/dragdrop.gif" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -66,7 +66,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/layout-change.gif" />
|
<img loading="lazy" src="/fixed-layout/layout-change.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -76,7 +76,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/fold.gif" />
|
<img loading="lazy" src="/fixed-layout/fold.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -86,7 +86,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/group.gif" />
|
<img loading="lazy" src="/fixed-layout/group.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@ -29,7 +29,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/free-layout/autolayout.gif" />
|
<img loading="lazy" src="/free-layout/autolayout.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -39,7 +39,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/free-layout/snap.gif" />
|
<img loading="lazy" src="/free-layout/snap.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@ -130,7 +130,7 @@ const render = () => (
|
|||||||
3. 数组项错误的展示
|
3. 数组项错误的展示
|
||||||
|
|
||||||
<div className="rs-center" >
|
<div className="rs-center" >
|
||||||
<img loading="lazy" src="@/public/field-array.gif" style={{ maxWidth: 600 }}/>
|
<img loading="lazy" src="/field-array.gif" style={{ maxWidth: 600 }}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```tsx pure
|
```tsx pure
|
||||||
@ -203,7 +203,7 @@ export const arrayMeta: FormMeta = {
|
|||||||
校验逻辑配置在全局,通过表单项路径声明校验逻辑
|
校验逻辑配置在全局,通过表单项路径声明校验逻辑
|
||||||
|
|
||||||
<div className="rs-center" >
|
<div className="rs-center" >
|
||||||
<img loading="lazy" src="@/public/form-validate.gif" style={{ maxWidth: 600 }}/>
|
<img loading="lazy" src="/form-validate.gif" style={{ maxWidth: 600 }}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```tsx pure
|
```tsx pure
|
||||||
@ -304,7 +304,7 @@ export const VALIDATE_EXAMPLE: FormMeta = {
|
|||||||
- onArrayDelete
|
- onArrayDelete
|
||||||
|
|
||||||
<div className="rs-center" >
|
<div className="rs-center" >
|
||||||
<img loading="lazy" src="@/public/form-effect.gif" style={{ maxWidth: 600 }}/>
|
<img loading="lazy" src="/form-effect.gif" style={{ maxWidth: 600 }}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```tsx pure
|
```tsx pure
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
<img loading="lazy" style={{filter: 'invert(0.9)'}} src="@/public/ecs.png"/>
|
<img loading="lazy" style={{filter: 'invert(0.9)'}} src="/ecs.png"/>
|
||||||
|
|
||||||
ReduxStore 伪代码
|
ReduxStore 伪代码
|
||||||
```jsx pure
|
```jsx pure
|
||||||
|
|||||||
@ -27,11 +27,11 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-tip">由于 事件是绑定在 svg 上,svg 在缩放后很容易点不到</div>
|
<div className="rs-tip">由于 事件是绑定在 svg 上,svg 在缩放后很容易点不到</div>
|
||||||
<img loading="lazy" src="@/public/reactflow/reactflow-render.gif"/>
|
<img loading="lazy" src="/reactflow/reactflow-render.gif"/>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-tip">FlowGram 的事件是一种全局监听 mousemove 变化,并通过计算及 Threshold 大致确定位置,即使缩放很小也能点到, 同时支持线条重连</div>
|
<div className="rs-tip">FlowGram 的事件是一种全局监听 mousemove 变化,并通过计算及 Threshold 大致确定位置,即使缩放很小也能点到, 同时支持线条重连</div>
|
||||||
<img loading="lazy" src="@/public/reactflow/reactflow-interaction.gif"/>
|
<img loading="lazy" src="/reactflow/reactflow-interaction.gif"/>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@ -69,8 +69,8 @@
|
|||||||
:::
|
:::
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td><img loading="lazy" src="@/public/variable-type1.png"/></td>
|
<td><img loading="lazy" src="/variable-type1.png"/></td>
|
||||||
<td><img loading="lazy" src="@/public/variable-type2.png"/></td>
|
<td><img loading="lazy" src="/variable-type2.png"/></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|||||||
@ -23,7 +23,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
固定的排版,节点/分支支持指定位置拖拽移动,并提供分支、循环等复合节点
|
固定的排版,节点/分支支持指定位置拖拽移动,并提供分支、循环等复合节点
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img loading="lazy" src="@/public/fixed-layout/fixed-layout-demo.gif"/>
|
<img loading="lazy" src="/fixed-layout/fixed-layout-demo.gif"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -36,7 +36,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
自由的排版,节点支持任意位置移动,通过自由连线连接节点
|
自由的排版,节点支持任意位置移动,通过自由连线连接节点
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img loading="lazy" src="@/public/free-layout/free-layout-demo.gif"/>
|
<img loading="lazy" src="/free-layout/free-layout-demo.gif"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -53,7 +53,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
Motion 动画在 Web 端应用可追溯到 Material Design,里边提到元素的变化如宽高或位置需要一个过渡过程,画布引擎会把线条和节点拆分单独绘制,使实现 Motion 过渡动画成本大大降低
|
Motion 动画在 Web 端应用可追溯到 Material Design,里边提到元素的变化如宽高或位置需要一个过渡过程,画布引擎会把线条和节点拆分单独绘制,使实现 Motion 过渡动画成本大大降低
|
||||||
</p>
|
</p>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/common/motion.gif" />
|
<img loading="lazy" src="/common/motion.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -64,7 +64,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
手势指在 Mac 触摸板两指展开/合并可以实现画布放大/缩小,或者按住空格拖动画布,交互借鉴 Sketch、Figma
|
手势指在 Mac 触摸板两指展开/合并可以实现画布放大/缩小,或者按住空格拖动画布,交互借鉴 Sketch、Figma
|
||||||
</p>
|
</p>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/common/touch-pad.gif" />
|
<img loading="lazy" src="/common/touch-pad.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -72,7 +72,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
<td>缩略图</td>
|
<td>缩略图</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/minimap.gif" />
|
<img loading="lazy" src="/fixed-layout/minimap.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -80,7 +80,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
<td>撤销/重做</td>
|
<td>撤销/重做</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/redo-undo.gif" />
|
<img loading="lazy" src="/fixed-layout/redo-undo.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -88,7 +88,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
<td>复制/粘贴(支持快捷键)</td>
|
<td>复制/粘贴(支持快捷键)</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/copypaste.gif" />
|
<img loading="lazy" src="/fixed-layout/copypaste.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -102,7 +102,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/dragdrop.gif" />
|
<img loading="lazy" src="/fixed-layout/dragdrop.gif" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -114,7 +114,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/layout-change.gif" />
|
<img loading="lazy" src="/fixed-layout/layout-change.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -125,7 +125,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/fold.gif" />
|
<img loading="lazy" src="/fixed-layout/fold.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -136,7 +136,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/fixed-layout/group.gif" />
|
<img loading="lazy" src="/fixed-layout/group.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -147,7 +147,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/free-layout/autolayout.gif" />
|
<img loading="lazy" src="/free-layout/autolayout.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -158,7 +158,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/free-layout/snap.gif" />
|
<img loading="lazy" src="/free-layout/snap.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -169,7 +169,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="rs-center">
|
<div className="rs-center">
|
||||||
<img loading="lazy" src="@/public/free-layout/loop.gif" />
|
<img loading="lazy" src="/free-layout/loop.gif" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -185,7 +185,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img loading="lazy" src="@/public/ref-coze.png"/>
|
<img loading="lazy" src="/ref-coze.png"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -193,7 +193,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
飞书低代码平台工作流
|
飞书低代码平台工作流
|
||||||
</a>
|
</a>
|
||||||
<div>
|
<div>
|
||||||
<img loading="lazy" src="@/public/ref-apaas.png"/>
|
<img loading="lazy" src="/ref-apaas.png"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -201,7 +201,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快
|
|||||||
飞书多维表格工作流
|
飞书多维表格工作流
|
||||||
</a>
|
</a>
|
||||||
<div>
|
<div>
|
||||||
<img loading="lazy" src="@/public/ref-bitable.png"/>
|
<img loading="lazy" src="/ref-bitable.png"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user