docs: adjust the doc table of contents (#909)

* docs: add vertical ports docs

* docs: adjust the doc table of contents

apps/demo-free-layout/src/hooks/use-editor-props.tsx

@@ -218,7 +218,10 @@ export function useEditorProps(
        */
       history: {
         enable: true,
-        enableChangeNode: true, // Listen Node engine data change
+        /**
+         * Listen form data change, default true
+         */
+        enableChangeNode: true,
       },
       /**
        * Content change
@@ -276,6 +279,10 @@ export function useEditorProps(
         },
       },
       plugins: () => [
+        /**
+         * Custom node sorting, the code below will make the comment nodes always below the normal nodes
+         * 自定义节点排序，下边的代码会让 comment 节点永远在普通节点下边
+         */
         createFreeStackPlugin({
           sortNodes: (nodes: WorkflowNodeEntity[]) => {
             const commentNodes: WorkflowNodeEntity[] = [];

apps/docs/rspress.config.ts

@@ -57,7 +57,7 @@ export default defineConfig({
       '/en/guide/getting-started/create-fixed-layout-simple',
       '/en/guide/getting-started/create-free-layout-simple',
       '/en/examples/node-form/effect',
-      '/en/guide/advanced/fixed-layout/composite-nodes',
+      '/en/guide/fixed-layout/composite-nodes',
       '/en/examples/playground',
       '/en/examples/fixed-layout/fixed-composite-nodes',
       '/en/examples/fixed-layout/fixed-layout-simple',
@@ -71,7 +71,7 @@ export default defineConfig({
       '/guide/getting-started/create-fixed-layout-simple',
       '/guide/getting-started/create-free-layout-simple',
       '/examples/node-form/effect',
-      '/guide/advanced/fixed-layout/composite-nodes',
+      '/guide/fixed-layout/composite-nodes',
       '/examples/playground',
       '/examples/fixed-layout/fixed-composite-nodes',
       '/examples/fixed-layout/fixed-layout-simple',

apps/docs/src/en/api/core/workflow-lines-manager.mdx

@@ -30,7 +30,7 @@ const json = ctx.document.linesManager.toJSON()
 
 ## Custom Arrow Renderer
 
-WorkflowLinesManager supports customizing arrow styles through the renderer registry. For detailed usage, please refer to the [Line Configuration Guide](/en/guide/advanced/free-layout/line#4-custom-arrow-renderer) documentation.
+WorkflowLinesManager supports customizing arrow styles through the renderer registry. For detailed usage, please refer to the [Line Configuration Guide](/en/guide/free-layout/line#4-custom-arrow-renderer) documentation.
 
 ```tsx
 // Simple example: Register custom arrow

apps/docs/src/en/guide/_meta.json

@@ -6,6 +6,31 @@
     "name": "getting-started",
     "label": "Getting Started"
   },
+  {
+    "type": "dir",
+    "name": "free-layout",
+    "label": "Free Layout"
+  },
+  {
+    "type": "dir",
+    "name": "fixed-layout",
+    "label": "Fixed Layout"
+  },
+  {
+    "type": "dir",
+    "name": "form",
+    "label": "Form"
+  },
+  {
+    "type": "dir",
+    "name": "variable",
+    "label": "Variable"
+  },
+  {
+    "type": "dir",
+    "name": "plugin",
+    "label": "Plugin"
+  },
   {
     "type": "dir",
     "name": "advanced",

apps/docs/src/en/guide/advanced/_meta.json

@@ -1,34 +1,8 @@
 [
-  {
-    "type": "dir",
-    "name": "free-layout",
-    "label": "Free Layout"
-  },
-  {
-    "type": "dir",
-    "name": "fixed-layout",
-    "label": "Fixed Layout"
-  },
-  "form",
-  "without-form",
-  {
-    "type": "dir",
-    "name": "variable",
-    "label": "Variable",
-    "collapsed": true
-  },
   "zoom-scroll",
   "history",
   "shortcuts",
-  "minimap",
-  {
-    "type": "dir",
-    "name": "plugin",
-    "label": "Plugin",
-    "collapsed": true
-  },
   "custom-service",
   "custom-layer",
-  "form-materials",
-  "background"
+  "custom-plugin"
 ]

apps/docs/src/en/guide/advanced/fixed-layout/composite-nodes.mdx → apps/docs/src/en/guide/fixed-layout/composite-nodes.mdx

@@ -28,6 +28,6 @@ export const nodeRegistries: FlowNodeRegistry[] = [
   </a>
 </div>
 
-import { CompositeNodesPreview } from '../../../../../components';
+import { CompositeNodesPreview } from '../../../../components';
 
 <CompositeNodesPreview />

apps/docs/src/en/guide/advanced/fixed-layout/node.mdx → apps/docs/src/en/guide/fixed-layout/node.mdx

@@ -211,7 +211,7 @@ function BaseNode() {
 
 ```
 
-- Update form data through Field, see [Form Usage](/guide/advanced/form.html) for details
+- Update form data through Field, see [Form Usage](/guide/form/form.html) for details
 
 ```tsx pure
 function FormRender() {

apps/docs/src/en/guide/form/_meta.json

@@ -0,0 +1,5 @@
+[
+  "form",
+  "without-form",
+  "form-materials"
+]

apps/docs/src/en/guide/advanced/free-layout/node.mdx → apps/docs/src/en/guide/free-layout/node.mdx

@@ -157,7 +157,7 @@ function BaseNode() {
 }
 
 ```
-- Update form data through Field, see details in [Form Usage](/guide/advanced/form.html)
+- Update form data through Field, see details in [Form Usage](/guide/form/form.html)
 
 ```tsx pure
 

apps/docs/src/en/guide/advanced/free-layout/port.mdx → apps/docs/src/en/guide/free-layout/port.mdx

@@ -83,6 +83,32 @@ function BaseNode() {
 }
 ```
 
+## Vertical Ports
+
+<img loading="lazy" className="invert-img" src="/free-layout/vertical-ports.png"/>
+
+```typescript pure
+export const nodeRegsistries = [
+  {
+    type: 'chain',
+    meta: {
+      defaultPorts: [
+        { type: 'input' },
+        { type: 'output' },
+        { portID: 'p4', location: 'bottom', offset: { x: -10, y: 0 }, type: 'output' },
+        { portID: 'p5', location: 'bottom', offset: { x: 10, y: 0 }, type: 'output' },
+      ],
+    },
+  },
+  {
+    type: 'tool',
+    meta: {
+      defaultPorts: [{ location: 'top', type: 'input' }],
+    },
+  },
+]
+```
+
 ## Update Ports Data
 
 - Static Ports Update

apps/docs/src/en/guide/advanced/plugin/_meta.json → apps/docs/src/en/guide/plugin/_meta.json

@@ -1,5 +1,6 @@
 [
-  "custom-plugin",
+  "background-plugin",
+  "minimap-plugin",
   "panel-manager-plugin",
   "free-auto-layout-plugin",
   "free-stack-plugin"

apps/docs/src/en/guide/advanced/background.mdx → apps/docs/src/en/guide/plugin/background-plugin.mdx

@@ -1,10 +1,10 @@
-# Background
+# @flowgram.ai/background-plugin
 
 The background plugin is used to customize canvas background effects, supporting dot patterns, logo display, and neumorphism visual effects.
 
 ## Background Configuration
 
-The background plugin is provided through `BackgroundPlugin`, configuration options include:
+The background plugin is provided through `@flowgram.ai/background-plugin`(built-in), configuration options include:
 
 ### Basic Configuration
 

apps/docs/src/en/guide/advanced/minimap.mdx → apps/docs/src/en/guide/plugin/minimap-plugin.mdx

@@ -1,4 +1,4 @@
-# Minimap
+# @flowgram.ai/minimap-plugin
 
 import { PackageManagerTabs } from '@theme';
 

apps/docs/src/en/guide/advanced/variable/variable-consume.mdx → apps/docs/src/en/guide/variable/variable-consume.mdx

@@ -94,7 +94,7 @@ To make it easier for you to integrate variable selection functionality into you
 
 <img loading="lazy" src="/materials/variable-selector.png" style={{width:500}}/>
 
-`VariableSelector` not only supports displaying a variable tree but also has built-in advanced features such as search and filtering, which can greatly enhance the user experience. For a more detailed introduction, please refer to the [Official Form Materials](/guide/advanced/form-materials.html) documentation.
+`VariableSelector` not only supports displaying a variable tree but also has built-in advanced features such as search and filtering, which can greatly enhance the user experience. For a more detailed introduction, please refer to the [Official Form Materials](/guide/form/form-materials.html) documentation.
 
 You can use it in the following two ways:
 

apps/docs/src/zh/api/core/workflow-lines-manager.mdx

@@ -58,7 +58,7 @@ function SomeReact() {
 
 ## 自定义箭头渲染器
 
-WorkflowLinesManager 支持通过渲染器注册表自定义箭头样式。详细使用方法请参考 [线条配置指南](/zh/guide/advanced/free-layout/line#4自定义箭头渲染器) 文档。
+WorkflowLinesManager 支持通过渲染器注册表自定义箭头样式。详细使用方法请参考 [线条配置指南](/zh/guide/free-layout/line#4自定义箭头渲染器) 文档。
 
 ```tsx
 // 简单示例：注册自定义箭头

apps/docs/src/zh/guide/_meta.json

@@ -6,6 +6,31 @@
     "name": "getting-started",
     "label": "快速开始"
   },
+  {
+    "type": "dir",
+    "name": "free-layout",
+    "label": "自由布局"
+  },
+  {
+    "type": "dir",
+    "name": "fixed-layout",
+    "label": "固定布局"
+  },
+  {
+    "type": "dir",
+    "name": "form",
+    "label": "表单"
+  },
+  {
+    "type": "dir",
+    "name": "variable",
+    "label": "变量"
+  },
+  {
+    "type": "dir",
+    "name": "plugin",
+    "label": "插件"
+  },
   {
     "type": "dir",
     "name": "advanced",
@@ -14,8 +39,7 @@
   {
     "type": "dir",
     "name": "concepts",
-    "label": "概念",
-    "collapsed": true
+    "label": "概念"
   },
   {
     "type": "dir",

apps/docs/src/zh/guide/advanced/_meta.json

@@ -1,34 +1,8 @@
 [
-  {
-    "type": "dir",
-    "name": "free-layout",
-    "label": "自由布局"
-  },
-  {
-    "type": "dir",
-    "name": "fixed-layout",
-    "label": "固定布局"
-  },
-  "form",
-  "without-form",
-  {
-    "type": "dir",
-    "name": "variable",
-    "label": "变量",
-    "collapsed": true
-  },
   "zoom-scroll",
   "history",
   "shortcuts",
-  "minimap",
-  {
-    "type": "dir",
-    "name": "plugin",
-    "label": "插件",
-    "collapsed": true
-  },
   "custom-service",
   "custom-layer",
-  "form-materials",
-  "background"
+  "custom-plugin"
 ]

apps/docs/src/zh/guide/advanced/fixed-layout/composite-nodes.mdx → apps/docs/src/zh/guide/fixed-layout/composite-nodes.mdx

@@ -28,7 +28,7 @@ export const nodeRegistries: FlowNodeRegistry[] = [
   </a>
 </div>
 
-import { CompositeNodesPreview } from '../../../../../components';
+import { CompositeNodesPreview } from '../../../../components';
 
 <CompositeNodesPreview />
 

apps/docs/src/zh/guide/advanced/fixed-layout/node.mdx → apps/docs/src/zh/guide/fixed-layout/node.mdx

@@ -209,7 +209,7 @@ function BaseNode() {
   return <input value={form.values.title} onChange={onChange}/>
 }
 ```
-- 通过 Field 更新表单数据, 详细见 [表单的使用](/guide/advanced/form.html)
+- 通过 Field 更新表单数据, 详细见 [表单的使用](/guide/form/form.html)
 
 ```tsx pure
 

apps/docs/src/zh/guide/form/_meta.json

@@ -0,0 +1,5 @@
+[
+  "form",
+  "without-form",
+  "form-materials"
+]

apps/docs/src/zh/guide/advanced/free-layout/node.mdx → apps/docs/src/zh/guide/free-layout/node.mdx

@@ -156,7 +156,7 @@ function BaseNode() {
   return <input value={form.values.title} onChange={onChange}/>
 }
 ```
-- 通过 Field 更新表单数据, 详细见 [表单的使用](/guide/advanced/form.html)
+- 通过 Field 更新表单数据, 详细见 [表单的使用](/guide/form/form.html)
 
 ```tsx pure
 

apps/docs/src/zh/guide/advanced/free-layout/port.mdx → apps/docs/src/zh/guide/free-layout/port.mdx

@@ -76,13 +76,39 @@ function BaseNode() {
   return (
     <div>
       <div data-port-id="condition-if-0" data-port-type="output" data-port-location="right"></div>
-      <div data-port-id="condition-if-1" data-port-type="output" data-port-location="righ" ></div>
+      <div data-port-id="condition-if-1" data-port-type="output" data-port-location="right" ></div>
       {/* others */}
     </div>
   )
 }
 ```
 
+## 垂直端口
+
+<img loading="lazy" className="invert-img" src="/free-layout/vertical-ports.png"/>
+
+```typescript pure
+export const nodeRegsistries = [
+  {
+    type: 'chain',
+    meta: {
+      defaultPorts: [
+        { type: 'input' },
+        { type: 'output' },
+        { portID: 'p4', location: 'bottom', offset: { x: -10, y: 0 }, type: 'output' },
+        { portID: 'p5', location: 'bottom', offset: { x: 10, y: 0 }, type: 'output' },
+      ],
+    },
+  },
+  {
+    type: 'tool',
+    meta: {
+      defaultPorts: [{ location: 'top', type: 'input' }],
+    },
+  },
+]
+```
+
 ## 更新端口数据
 
 - 静态端口更新

apps/docs/src/zh/guide/advanced/plugin/_meta.json → apps/docs/src/zh/guide/plugin/_meta.json

@@ -1,5 +1,6 @@
 [
-  "custom-plugin",
+  "background-plugin",
+  "minimap-plugin",
   "panel-manager-plugin",
   "free-auto-layout-plugin",
   "free-stack-plugin"

apps/docs/src/zh/guide/advanced/background.mdx → apps/docs/src/zh/guide/plugin/background-plugin.mdx

@@ -1,10 +1,10 @@
-# 背景
+# @flowgram.ai/background-plugin
 
 背景插件用于自定义画布的背景效果，支持点阵背景、Logo显示和新拟态(Neumorphism)视觉效果。
 
 ## 背景配置
 
-背景插件通过 `BackgroundPlugin` 提供，配置项包括：
+背景插件通过 `@flowgram.ai/background-plugin`(内置) 提供，配置项包括：
 
 ### 基础配置
 

apps/docs/src/zh/guide/advanced/minimap.mdx → apps/docs/src/zh/guide/plugin/minimap-plugin.mdx

@@ -1,4 +1,4 @@
-# 缩略图
+# @flowgram.ai/minimap-plugin
 
 import { PackageManagerTabs } from '@theme';
 

apps/docs/src/zh/guide/advanced/variable/variable-consume.mdx → apps/docs/src/zh/guide/variable/variable-consume.mdx

@@ -94,7 +94,7 @@ const renderVariable = (variable: BaseVariableField) => ({
 
 <img loading="lazy" src="/materials/variable-selector.png" style={{width:500}}/>
 
-`VariableSelector` 不仅支持展示变量树，还内置了搜索、过滤等高级功能，可以极大地提升用户体验。更详细的介绍，请参考 [官方表单物料](/guide/advanced/form-materials.html) 文档。
+`VariableSelector` 不仅支持展示变量树，还内置了搜索、过滤等高级功能，可以极大地提升用户体验。更详细的介绍，请参考 [官方表单物料](/guide/form/form-materials.html) 文档。
 
 你可以通过以下两种方式来使用它：