diff --git a/.gitignore b/.gitignore
index 0c76a4b37117ac56270bb5a2d9e4d742d1ebc4f5..562a0af93a1612957e640b71e46c62cb67ebb057 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,7 @@ dist-ssr
 # Editor directories and files
 .idea
 .DS_Store
+.history/
 *.suo
 *.ntvs*
 *.njsproj
diff --git a/docs/OSPP Project Application.docx b/docs/OSPP Project Application.docx
new file mode 100644
index 0000000000000000000000000000000000000000..f892d0975358ec60270e8a3966acbd53a72d76eb
Binary files /dev/null and b/docs/OSPP Project Application.docx differ
diff --git a/packages/ui-vue/components/data-view/designer.ts b/packages/ui-vue/components/data-view/designer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9cd068520f68dc05fad86953036e408ab254236d
--- /dev/null
+++ b/packages/ui-vue/components/data-view/designer.ts
@@ -0,0 +1,3 @@
+export * from './designer/use-designer-fit-column';
+export * from './designer/use-column';
+export * from './designer/use-visual-data';
diff --git a/packages/ui-vue/components/drawer/designer.ts b/packages/ui-vue/components/drawer/designer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..93490f132cc1a670fd475b901d7d008b394e82cf
--- /dev/null
+++ b/packages/ui-vue/components/drawer/designer.ts
@@ -0,0 +1,39 @@
+ 
+/**
+ * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createPropsResolver } from '@farris/ui-vue/components/dynamic-resolver';
+import { withInstall } from '@farris/ui-vue/components/common';
+import FDrawer from './src/drawer.component';
+import FDrawerDesign from './src/designer/drawer.design.component';
+import { schemaResolver } from './src/schema/schema-resolver';
+import { schemaMapper } from './src/schema/schema-mapper';
+import drawerSchema from './src/schema/drawer.schema.json';
+import { drawerPropsDesignerProps } from './src/designer/drawer.design.props';
+
+export * from './src/drawer.props';
+
+export const propsResolver = createPropsResolver<typeof drawerPropsDesignerProps>(drawerPropsDesignerProps, drawerSchema, schemaMapper, schemaResolver);
+
+FDrawerDesign.register = (componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>) => {
+    componentMap['drawer'] = FDrawer;
+    propsResolverMap['drawer'] = propsResolver;
+};
+
+FDrawerDesign.registerDesigner = (componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>) => {
+    componentMap['drawer'] = FDrawerDesign;
+    propsResolverMap['drawer'] = propsResolver;
+};
+export default withInstall(FDrawerDesign);
diff --git a/packages/ui-vue/components/drawer/src/designer/drawer.design.props.ts b/packages/ui-vue/components/drawer/src/designer/drawer.design.props.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b63627747905f9e5883bb11c58127483d52052c
--- /dev/null
+++ b/packages/ui-vue/components/drawer/src/designer/drawer.design.props.ts
@@ -0,0 +1,7 @@
+import { ExtractPropTypes } from "vue";
+import { drawerProps } from "../drawer.props";
+
+export const drawerPropsDesignerProps = Object.assign({}, drawerProps, {
+    componentId: { type: String, default: '' }
+});
+export type DrawerDesignerProps = ExtractPropTypes<typeof drawerPropsDesignerProps>;
diff --git a/packages/ui-vue/components/flow-canvas/src/schema/flow-canvas.schema.json b/packages/ui-vue/components/flow-canvas/src/schema/flow-canvas.schema.json
new file mode 100644
index 0000000000000000000000000000000000000000..ed43eb168bff699a0772826af1aa9334322c5341
--- /dev/null
+++ b/packages/ui-vue/components/flow-canvas/src/schema/flow-canvas.schema.json
@@ -0,0 +1,73 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "https://farris-design.gitee.io/flow-canvas.schema.json",
+    "title": "Flow Canvas",
+    "description": "A Farris Flow Canvas Application",
+    "type": "object",
+    "properties": {
+        "id": {
+            "type": "string",
+            "description": "Unique identifier"
+        },
+        "type": {
+            "type": "string",
+            "description": "Type of the flow canvas",
+            "default": "process"
+        },
+        "contents": {
+            "type": "array",
+            "description": "Unified array of all nodes and connections",
+            "items": {
+                "anyOf": [
+                    {
+                        "$ref": "flow-node.schema.json"
+                    },
+                    {
+                        "$ref": "flow-connection.schema.json"
+                    }
+                ]
+            }
+        },
+        "diagram": {
+            "type": "object",
+            "description": "Node layout information",
+            "properties": {
+                "nodes": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "properties": {
+                            "id": {
+                                "type": "string"
+                            },
+                            "position": {
+                                "type": "object",
+                                "properties": {
+                                    "x": {
+                                        "type": "number"
+                                    },
+                                    "y": {
+                                        "type": "number"
+                                    }
+                                },
+                                "required": [
+                                    "x",
+                                    "y"
+                                ]
+                            }
+                        },
+                        "required": [
+                            "id",
+                            "position"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "required": [
+        "id",
+        "type",
+        "contents"
+    ]
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/flow-canvas/src/schema/flow-connection.schema.json b/packages/ui-vue/components/flow-canvas/src/schema/flow-connection.schema.json
new file mode 100644
index 0000000000000000000000000000000000000000..de1eb9400b15ca7bb1bcaf044229092f463d6e63
--- /dev/null
+++ b/packages/ui-vue/components/flow-canvas/src/schema/flow-connection.schema.json
@@ -0,0 +1,76 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "https://farris-design.gitee.io/flow-connection.schema.json",
+    "title": "Flow Connection",
+    "description": "A Farris Flow Canvas Connection",
+    "type": "object",
+    "properties": {
+        "id": {
+            "type": "string",
+            "description": "Unique identifier"
+        },
+        "type": {
+            "type": "string",
+            "description": "Connection type",
+            "default": "flow-connection"
+        },
+        "source": {
+            "type": "string",
+            "description": "Source node ID"
+        },
+        "sourcePort": {
+            "type": "string",
+            "description": "Source port ID (optional, auto-selected if single port)"
+        },
+        "target": {
+            "type": "string",
+            "description": "Target node ID"
+        },
+        "targetPort": {
+            "type": "string",
+            "description": "Target port ID (optional, auto-selected if single port)"
+        },
+        "lineType": {
+            "type": "string",
+            "description": "Connection line style",
+            "enum": [
+                "straight",
+                "polyline",
+                "bezier"
+            ],
+            "default": "bezier"
+        },
+        "lineStyle": {
+            "type": "object",
+            "description": "Line style properties",
+            "properties": {
+                "strokeWidth": {
+                    "type": "number",
+                    "description": "Line width in pixels",
+                    "default": 2
+                },
+                "strokeColor": {
+                    "type": "string",
+                    "description": "Line color (CSS color value)",
+                    "default": "#4d53e8"
+                },
+                "strokeDasharray": {
+                    "type": "string",
+                    "description": "Dash pattern for dashed lines",
+                    "default": null
+                }
+            }
+        },
+        "autoRoute": {
+            "type": "boolean",
+            "description": "Whether to auto-route connection path",
+            "default": true
+        }
+    },
+    "required": [
+        "id",
+        "type",
+        "source",
+        "target"
+    ]
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/flow-canvas/src/schema/flow-node.schema.json b/packages/ui-vue/components/flow-canvas/src/schema/flow-node.schema.json
new file mode 100644
index 0000000000000000000000000000000000000000..9580ed293a5b073993c2ffd83f25c25e0483fd3a
--- /dev/null
+++ b/packages/ui-vue/components/flow-canvas/src/schema/flow-node.schema.json
@@ -0,0 +1,38 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "https://farris-design.gitee.io/flow-node.schema.json",
+    "title": "Flow Node",
+    "description": "A Farris Flow Canvas Node",
+    "type": "object",
+    "properties": {
+        "id": {
+            "type": "string",
+            "description": "Unique identifier"
+        },
+        "type": {
+            "type": "string",
+            "description": "Node type",
+            "default": "flow-node"
+        },
+        "input": {
+            "type": "array",
+            "description": "Input ports",
+            "items": {
+                "$ref": "flow-port.schema.json"
+            },
+            "default": []
+        },
+        "output": {
+            "type": "array",
+            "description": "Output ports",
+            "items": {
+                "$ref": "flow-port.schema.json"
+            },
+            "default": []
+        }
+    },
+    "required": [
+        "id",
+        "type"
+    ]
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/flow-canvas/src/schema/flow-port.schema.json b/packages/ui-vue/components/flow-canvas/src/schema/flow-port.schema.json
new file mode 100644
index 0000000000000000000000000000000000000000..f072b2ef0c2020bf957066be69283a09955d88de
--- /dev/null
+++ b/packages/ui-vue/components/flow-canvas/src/schema/flow-port.schema.json
@@ -0,0 +1,52 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "https://farris-design.gitee.io/flow-port.schema.json",
+    "title": "Flow Port",
+    "description": "The Port (Anchor) Of Flow Canvas Node",
+    "type": "object",
+    "properties": {
+        "id": {
+            "type": "string",
+            "description": "Unique identifier, supports path-based naming for complex nodes (e.g., 'node1-condition1-output1')"
+        },
+        "type": {
+            "type": "string",
+            "description": "Port type (always 'port')",
+            "default": "port"
+        },
+        "direction": {
+            "type": "string",
+            "description": "Port direction (input or output)",
+            "enum": [
+                "input",
+                "output"
+            ]
+        },
+        "position": {
+            "type": "string",
+            "description": "Port position on the node",
+            "enum": [
+                "left",
+                "top",
+                "right",
+                "bottom"
+            ]
+        },
+        "parentId": {
+            "type": "string",
+            "description": "Parent element ID for complex nodes (e.g., condition ID, result ID)",
+            "default": null
+        },
+        "autoConnect": {
+            "type": "boolean",
+            "description": "Whether to auto-connect when dragging to node (default: true for single port)",
+            "default": true
+        }
+    },
+    "required": [
+        "id",
+        "type",
+        "direction",
+        "position"
+    ]
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/flow-canvas/src/schema/if-node.schema.json b/packages/ui-vue/components/flow-canvas/src/schema/if-node.schema.json
new file mode 100644
index 0000000000000000000000000000000000000000..b6c4fe573cdd845ffb56e94b93ebfc6aa4fc2c14
--- /dev/null
+++ b/packages/ui-vue/components/flow-canvas/src/schema/if-node.schema.json
@@ -0,0 +1,59 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "https://farris-design.gitee.io/if-node.schema.json",
+    "title": "If Node",
+    "description": "A Farris Flow Canvas If/Condition Node",
+    "type": "object",
+    "allOf": [
+        {
+            "$ref": "flow-node.schema.json"
+        }
+    ],
+    "properties": {
+        "conditions": {
+            "type": "array",
+            "description": "List of condition branches (e.g., if/else if/else)",
+            "items": {
+                "type": "object",
+                "properties": {
+                    "id": {
+                        "type": "string",
+                        "description": "Unique condition identifier"
+                    },
+                    "label": {
+                        "type": "string",
+                        "description": "Branch label (e.g., 'if', 'else if', 'else')"
+                    },
+                    "expression": {
+                        "type": "string",
+                        "description": "Condition expression"
+                    },
+                    "output": {
+                        "type": "array",
+                        "description": "Output ports for this condition branch",
+                        "items": {
+                            "$ref": "flow-port.schema.json"
+                        },
+                        "default": []
+                    }
+                },
+                "required": [
+                    "id",
+                    "label"
+                ]
+            },
+            "default": []
+        },
+        "defaultOutput": {
+            "type": "array",
+            "description": "Default output ports (when no conditions match)",
+            "items": {
+                "$ref": "flow-port.schema.json"
+            },
+            "default": []
+        }
+    },
+    "required": [
+        "conditions"
+    ]
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/flow-canvas/src/schema/sample-flow.json b/packages/ui-vue/components/flow-canvas/src/schema/sample-flow.json
new file mode 100644
index 0000000000000000000000000000000000000000..17544aee41568125e5af38b1812969555bd87dda
--- /dev/null
+++ b/packages/ui-vue/components/flow-canvas/src/schema/sample-flow.json
@@ -0,0 +1,202 @@
+{
+    "id": "project-application-flow",
+    "type": "process",
+    "contents": [
+        {
+            "id": "start-node",
+            "type": "start-node",
+            "output": [
+                {
+                    "id": "start-node-output",
+                    "type": "port",
+                    "direction": "output",
+                    "position": "right",
+                    "autoConnect": true
+                }
+            ]
+        },
+        {
+            "id": "intent-recognition",
+            "type": "selector-node",
+            "input": [
+                {
+                    "id": "intent-recognition-input",
+                    "type": "port",
+                    "direction": "input",
+                    "position": "left",
+                    "autoConnect": true
+                }
+            ],
+            "options": [
+                {
+                    "id": "option-1",
+                    "label": "选项一",
+                    "value": "option1",
+                    "output": [
+                        {
+                            "id": "intent-recognition-option-1-output",
+                            "type": "port",
+                            "direction": "output",
+                            "position": "right",
+                            "parentId": "option-1",
+                            "autoConnect": true
+                        }
+                    ]
+                },
+                {
+                    "id": "option-2",
+                    "label": "选项二",
+                    "value": "option2",
+                    "output": [
+                        {
+                            "id": "intent-recognition-option-2-output",
+                            "type": "port",
+                            "direction": "output",
+                            "position": "right",
+                            "parentId": "option-2",
+                            "autoConnect": true
+                        }
+                    ]
+                },
+                {
+                    "id": "option-3",
+                    "label": "选项三",
+                    "value": "option3",
+                    "output": [
+                        {
+                            "id": "intent-recognition-option-3-output",
+                            "type": "port",
+                            "direction": "output",
+                            "position": "right",
+                            "parentId": "option-3",
+                            "autoConnect": true
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": "condition-check",
+            "type": "if-node",
+            "input": [
+                {
+                    "id": "condition-check-input",
+                    "type": "port",
+                    "direction": "input",
+                    "position": "left",
+                    "autoConnect": true
+                }
+            ],
+            "conditions": [
+                {
+                    "id": "condition-1",
+                    "label": "if",
+                    "expression": "value > 500",
+                    "output": [
+                        {
+                            "id": "condition-check-condition-1-output",
+                            "type": "port",
+                            "direction": "output",
+                            "position": "right",
+                            "parentId": "condition-1",
+                            "autoConnect": true
+                        }
+                    ]
+                },
+                {
+                    "id": "condition-2",
+                    "label": "else",
+                    "expression": "",
+                    "output": [
+                        {
+                            "id": "condition-check-condition-2-output",
+                            "type": "port",
+                            "direction": "output",
+                            "position": "right",
+                            "parentId": "condition-2",
+                            "autoConnect": true
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": "end-node",
+            "type": "end-node",
+            "input": [
+                {
+                    "id": "end-node-input",
+                    "type": "port",
+                    "direction": "input",
+                    "position": "left",
+                    "autoConnect": true
+                }
+            ]
+        },
+        {
+            "id": "connection-1",
+            "type": "flow-connection",
+            "source": "start-node-output",
+            "target": "intent-recognition-input",
+            "lineType": "bezier",
+            "lineStyle": {
+                "strokeWidth": 2,
+                "strokeColor": "#4d53e8"
+            }
+        },
+        {
+            "id": "connection-2",
+            "type": "flow-connection",
+            "source": "intent-recognition-option-1-output",
+            "target": "condition-check-input",
+            "lineType": "polyline",
+            "lineStyle": {
+                "strokeWidth": 2,
+                "strokeColor": "#37d0ff"
+            }
+        },
+        {
+            "id": "connection-3",
+            "type": "flow-connection",
+            "source": "condition-check-condition-1-output",
+            "target": "end-node-input",
+            "lineType": "straight",
+            "lineStyle": {
+                "strokeWidth": 3,
+                "strokeColor": "#ff6b6b"
+            }
+        }
+    ],
+    "diagram": {
+        "nodes": [
+            {
+                "id": "start-node",
+                "position": {
+                    "x": 100,
+                    "y": 200
+                }
+            },
+            {
+                "id": "intent-recognition",
+                "position": {
+                    "x": 400,
+                    "y": 200
+                }
+            },
+            {
+                "id": "condition-check",
+                "position": {
+                    "x": 700,
+                    "y": 200
+                }
+            },
+            {
+                "id": "end-node",
+                "position": {
+                    "x": 1000,
+                    "y": 200
+                }
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/flow-canvas/src/schema/selector-node.schema.json b/packages/ui-vue/components/flow-canvas/src/schema/selector-node.schema.json
new file mode 100644
index 0000000000000000000000000000000000000000..b5c962fcf4a49a9f9203181fb50e87e3c819a91e
--- /dev/null
+++ b/packages/ui-vue/components/flow-canvas/src/schema/selector-node.schema.json
@@ -0,0 +1,49 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "https://farris-design.gitee.io/selector-node.schema.json",
+    "title": "Selector Node",
+    "description": "A Farris Flow Canvas Selector Node (e.g., Intent Recognition)",
+    "type": "object",
+    "allOf": [
+        {
+            "$ref": "flow-node.schema.json"
+        }
+    ],
+    "properties": {
+        "options": {
+            "type": "array",
+            "description": "List of selection options. Used to express user options or model inference result branches. Each option can contain independent output ports.",
+            "items": {
+                "type": "object",
+                "properties": {
+                    "id": {
+                        "type": "string",
+                        "description": "Unique option identifier"
+                    },
+                    "label": {
+                        "type": "string",
+                        "description": "Option display label"
+                    },
+                    "value": {
+                        "type": "string",
+                        "description": "Option value"
+                    },
+                    "output": {
+                        "type": "array",
+                        "description": "Output ports for this option",
+                        "items": {
+                            "$ref": "flow-port.schema.json"
+                        },
+                        "default": []
+                    }
+                },
+                "required": [
+                    "id",
+                    "label"
+                ]
+            },
+            "default": []
+        }
+    },
+    "required": []
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/flow-canvas/src/schema/start-node.schema.json b/packages/ui-vue/components/flow-canvas/src/schema/start-node.schema.json
new file mode 100644
index 0000000000000000000000000000000000000000..ba56ebd0e3d6987219b849d681ae1c58d02e183b
--- /dev/null
+++ b/packages/ui-vue/components/flow-canvas/src/schema/start-node.schema.json
@@ -0,0 +1,25 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "https://farris-design.gitee.io/start-node.schema.json",
+    "title": "Start Node",
+    "description": "A Farris Flow Canvas Start Node",
+    "type": "object",
+    "allOf": [
+        {
+            "$ref": "flow-node.schema.json"
+        }
+    ],
+    "properties": {
+        "label": {
+            "type": "string",
+            "description": "Node display name"
+        },
+        "icon": {
+            "type": "string",
+            "description": "Node icon (optional)"
+        }
+    },
+    "required": [
+        "label"
+    ]
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/section/src/schema/section-toolbar.schema.json b/packages/ui-vue/components/section/src/schema/section-toolbar.schema.json
new file mode 100644
index 0000000000000000000000000000000000000000..ff0e7b0b9aa0788ae0f46a2313d5f742d0f62c7b
--- /dev/null
+++ b/packages/ui-vue/components/section/src/schema/section-toolbar.schema.json
@@ -0,0 +1,55 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "https://farris-design.gitee.io/section-toolbar.schema.json",
+    "title": "section-toolbar",
+    "description": "A Farris Toolbar Component",
+    "type": "object",
+    "properties": {
+        "id": {
+            "description": "The unique identifier for a Section Toolbar",
+            "type": "string"
+        },
+        "type": {
+            "description": "The type string of Section Toolbar",
+            "type": "string",
+            "default": "section-toolbar"
+        },
+        "appearance": {
+            "description": "",
+            "type": "object",
+            "properties": {
+                "class": {
+                    "type": "string",
+                    "default": ""
+                }
+            }
+        },
+        "alignment": {
+            "description": "The alignment of Section Toolbar Button.",
+            "type": "string",
+            "default": "right"
+        },
+        "buttons": {
+            "description": "The items of Section Toolbar.",
+            "type": "array",
+            "default": []
+        },
+        "buttonSize": {
+            "type": "string",
+            "default": ""
+        },
+        "visible": {
+            "description": "",
+            "type": "boolean",
+            "default": true
+        }
+    },
+    "required": [
+        "id",
+        "type",
+        "buttons"
+    ],
+    "events": {
+        "onClick": "点击事件"
+    }
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/tabs/src/schema/tab-toolbar.schema.json b/packages/ui-vue/components/tabs/src/schema/tab-toolbar.schema.json
new file mode 100644
index 0000000000000000000000000000000000000000..3ff2b27a68632d2e7758cb8baafd5ba87724bd93
--- /dev/null
+++ b/packages/ui-vue/components/tabs/src/schema/tab-toolbar.schema.json
@@ -0,0 +1,55 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "https://farris-design.gitee.io/tab-toolbar.schema.json",
+    "title": "tab-toolbar",
+    "description": "A Farris Toolbar Component",
+    "type": "object",
+    "properties": {
+        "id": {
+            "description": "The unique identifier for a Tab Toolbar",
+            "type": "string"
+        },
+        "type": {
+            "description": "The type string of Tab Toolbar",
+            "type": "string",
+            "default": "tab-toolbar"
+        },
+        "appearance": {
+            "description": "",
+            "type": "object",
+            "properties": {
+                "class": {
+                    "type": "string",
+                    "default": ""
+                }
+            }
+        },
+        "alignment": {
+            "description": "The alignment of Tab Toolbar Button.",
+            "type": "string",
+            "default": "right"
+        },
+        "buttons": {
+            "description": "The items of Tab Toolbar.",
+            "type": "array",
+            "default": []
+        },
+        "buttonSize": {
+            "type": "string",
+            "default": ""
+        },
+        "visible": {
+            "description": "",
+            "type": "boolean",
+            "default": true
+        }
+    },
+    "required": [
+        "id",
+        "type",
+        "buttons"
+    ],
+    "events": {
+        "onClick": "点击事件"
+    }
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/tree-grid/designer.ts b/packages/ui-vue/components/tree-grid/designer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba1350bc77b155fec728676b3cfdfac22e3ef06f
--- /dev/null
+++ b/packages/ui-vue/components/tree-grid/designer.ts
@@ -0,0 +1,36 @@
+ 
+/**
+ * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { withInstall } from '@farris/ui-vue/components/common';
+import FTreeGrid from './src/tree-grid.component';
+import FTreeGridDesign from './src/designer/tree-grid.design.component';
+import { designPropsResolver, propsResolver, selectionItemResolver, bindingResolver, updateColumnsResolver } from './src/tree-grid.props';
+
+export * from './src/tree-grid.props';
+
+FTreeGridDesign.register = (componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>, resolverMap: Record<string, any>) => {
+    componentMap['tree-grid'] = FTreeGrid;
+    propsResolverMap['tree-grid'] = propsResolver;
+    resolverMap['tree-grid'] = { bindingResolver, selectionItemResolver, updateColumnsResolver };
+};
+
+FTreeGridDesign.registerDesigner = (componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>) => {
+    componentMap['tree-grid'] = FTreeGridDesign;
+    propsResolverMap['tree-grid'] = designPropsResolver;
+};
+
+export { FTreeGridDesign };
+export default withInstall(FTreeGridDesign);
diff --git a/packages/ui-vue/demos/drawer/host.vue b/packages/ui-vue/demos/drawer/host.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a06f422ddf5b4b02af955db8f8fb8c8d7979ccf6
--- /dev/null
+++ b/packages/ui-vue/demos/drawer/host.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="custom-drawer" style="border:1px solid #000;width: 400px;height: 300px;
+    background-color: rgba(0,0,0,.3);position:relative;overflow: hidden;">
+        
+    </div>
+    <f-button @click="openDrawer">打开抽屉</f-button>
+        <f-drawer host=".custom-drawer" v-model="open" title="某个DOM内部打开抽屉">
+            <template #content> 右侧打开内容如下：我是一个抽屉组件 </template>
+            <template #footerTemplate>
+                <f-button>确定</f-button>
+            </template>
+        </f-drawer>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const open = ref(false)
+
+const openDrawer = () => {
+    open.value = true
+}
+</script>
diff --git a/packages/ui-vue/demos/modal/host.vue b/packages/ui-vue/demos/modal/host.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d475fc650b8d85323bf303d645ec181c09f6ec8
--- /dev/null
+++ b/packages/ui-vue/demos/modal/host.vue
@@ -0,0 +1,27 @@
+<script setup lang="tsx">
+
+import { inject } from 'vue';
+import { F_MODAL_SERVICE_TOKEN } from '../../components/modal';
+
+const modalService = inject(F_MODAL_SERVICE_TOKEN) as any;
+function renderComponent() {
+    return () => (<><h2 class="m-3 pt-5" style="text-align:center;font-size: 36px;"> 自定义模态框容器 </h2></>);
+}
+function openModal() {
+    modalService.open({
+        host:'.custom-modal-container',
+        fitContent: false,
+        width: 800,
+        height: 600,
+        draggable: true,
+        title: '自定义尺寸',
+        render: renderComponent()
+    });
+}
+
+</script>
+<template>
+    <div class="custom-modal-container" style="padding: 20px">Modal Content
+        <f-button @click="openModal">弹出窗口</f-button>
+    </div>
+</template>