diff --git a/packages/bef/package.json b/packages/bef/package.json
index 1005a8ebeee13b64f507850342665165be7a1a50..1a295e66a92e5742365cd59c5b3c4632aa604ce4 100644
--- a/packages/bef/package.json
+++ b/packages/bef/package.json
@@ -82,6 +82,6 @@
         "vue": "^3.2.37",
         "vue-router": "^4.3.0"
     },
-    "typings": "package/types/index.d.ts",
+    "types": "package/types/index.d.ts",
     "module": "package/bef-vue.esm.js"
 }
\ No newline at end of file
diff --git a/packages/bef/scripts/commands/create-package.cjs b/packages/bef/scripts/commands/create-package.cjs
index 529652246957b8e91cea2903def5a97bff43965c..6cd5206b2225717d24ca2c85dda986469990f0a2 100644
--- a/packages/bef/scripts/commands/create-package.cjs
+++ b/packages/bef/scripts/commands/create-package.cjs
@@ -23,6 +23,7 @@ const createPackageJson = async (version) => {
     package.main = "./bef-vue.umd.js";
     package.module = "./bef-vue.esm.js";
     package.dependencies = omit(package.dependencies, "");
+    package.typings = "./types/index.d.ts";
     package.types = "./types/index.d.ts";
     package.private = false;
     const fileStr = JSON.stringify(
diff --git a/packages/cli/src/commands/build-components.ts b/packages/cli/src/commands/build-components.ts
index 1373e9f8f528b3b66c660351ed3c8289bac29f56..1e3955e264fe0a15fe34e2e9dd5efa0226465d4d 100644
--- a/packages/cli/src/commands/build-components.ts
+++ b/packages/cli/src/commands/build-components.ts
@@ -44,7 +44,7 @@ export async function buildComponents(options: BuildCommonOptions) {
     if(!existsSync(cssEntry)) {
       return;
     }
-    await buildCss({...options,entry: cssEntry, outfile: `${BaseOutDir}/${component}/index.css` });
+    await buildCss({...options,entry: cssEntry, outfile: `${BaseOutDir}/${component}/index.css`, showSpinner: false });
   });
 
 };
diff --git a/packages/cli/src/commands/build-css.ts b/packages/cli/src/commands/build-css.ts
index cdb7ece7790032401718dcd90b9665fbe714ff6a..69d55a2806e96103220e1315a0919c9e89b7c197 100644
--- a/packages/cli/src/commands/build-css.ts
+++ b/packages/cli/src/commands/build-css.ts
@@ -13,12 +13,16 @@ const replaceUrl = (source: string, pathname: string, entry: string)=> {
 };
 
 export async function buildCss(options: any) {
-  const { entry, outfile, minify = false } = options;
+  const { entry, outfile, minify = false, showSpinner = true } = options;
 
   const spinner = ora(`build css begin`).start();
-
   spinner.text = `building css`;
 
+  if(!showSpinner) {
+    spinner.stop();
+  }
+
+
   await build({
     entryPoints: [entry],
     outfile,
@@ -35,5 +39,7 @@ export async function buildCss(options: any) {
     }
   });
 
-  spinner.succeed(`build css success`);
+  if(showSpinner) {
+    spinner.succeed(`build css success`);
+  }
 }
diff --git a/packages/cli/src/commands/build.ts b/packages/cli/src/commands/build.ts
index dc48e6dadfbc70c448f385a73da25a2129aec1a4..3d70bc4765bc99011f3e4e1a4b8b2dac5d6bcb59 100644
--- a/packages/cli/src/commands/build.ts
+++ b/packages/cli/src/commands/build.ts
@@ -3,23 +3,24 @@ import { getViteConfig } from '../common/get-vite-config.js';
 
 export type BuildCommonOptions = {
   configFile?: string;
+  viteConfigFile?: string;
   config?: Record<string, any>;
   type: 'lib' | 'app' | 'component';
 };
 
 export async function buildCommon(options: BuildCommonOptions, loadFile = true) {
-  const { configFile, config = {}, type } = options;
+  const { configFile, viteConfigFile, config = {}, type } = options;
 
   if(!loadFile) {
     await build(config);
     return config;
   }
 
-  const viteConfig = await loadConfigFromFile({command: 'build', mode: 'production'}, configFile);
+  const viteConfig = await loadConfigFromFile({command: 'build', mode: 'production'}, viteConfigFile);
 
-  const defaultConfig = await getViteConfig(type);
+  const defaultConfig = await getViteConfig(type, configFile);
 
-  const libConfig =mergeConfig(mergeConfig(defaultConfig, viteConfig ? viteConfig.config : {}), config);
+  const libConfig =mergeConfig(mergeConfig(defaultConfig, viteConfigFile && viteConfig?.config ? viteConfig.config : {}), config);
 
   await build(libConfig);
 
diff --git a/packages/cli/src/common/get-farris-config.ts b/packages/cli/src/common/get-farris-config.ts
index 1b144471751f21d10d55ad23ff021d863964c397..68499a78b31a4d17e60249d385811ad751b3e33a 100644
--- a/packages/cli/src/common/get-farris-config.ts
+++ b/packages/cli/src/common/get-farris-config.ts
@@ -1,9 +1,9 @@
 import { pathToFileURL } from 'node:url';
 import { FAARIS_CONFIG_FILE } from './constant.js';
 
-async function getFarrisConfigAsync() {
+async function getFarrisConfigAsync(configFile= FAARIS_CONFIG_FILE) {
   try {
-    return (await import(pathToFileURL(FAARIS_CONFIG_FILE).href)).default;
+    return (await import(pathToFileURL(configFile).href)).default;
   } catch (err) {
     return {};
   }
diff --git a/packages/cli/src/common/get-vite-config.ts b/packages/cli/src/common/get-vite-config.ts
index 591bfe0c706557c5c32e4be23e01d1c5f73d97f4..e02b0b12a113ae8b296ad825d3ccede62d0d61c9 100644
--- a/packages/cli/src/common/get-vite-config.ts
+++ b/packages/cli/src/common/get-vite-config.ts
@@ -56,15 +56,15 @@ const formatFarrisConfig = (farrisConfig: FarrisConfig, type: string) => {
   return viteConfig;
 };
 
-const formatViteConfig = async (type: string) => {
-  const { viteConfig = {}, ...farrisConfig } = await getFarrisConfigAsync();
+const formatViteConfig = async (type: string, configFile?: string) => {
+  const { viteConfig = {}, ...farrisConfig } = await getFarrisConfigAsync(configFile);
   const customViteConfig = formatFarrisConfig(farrisConfig, type);
 
   return mergeConfig(customViteConfig, viteConfig);
 };
 
-const getViteConfig = async (type = 'app') => {
-  const viteConfig = await formatViteConfig(type);
+const getViteConfig = async (type = 'app', configFile?: string) => {
+  const viteConfig = await formatViteConfig(type, configFile);
   const { default: defaultViteConfig } = await import(`../config/vite-${type}.js`);
 
   return mergeConfig(defaultViteConfig, viteConfig);
diff --git a/packages/cli/src/config/vite-common.ts b/packages/cli/src/config/vite-common.ts
index 01ddabc1c877d48cf5a27787942c0c8ab65c6818..269ce83420c1679bc78755c19643c33d1a923a35 100644
--- a/packages/cli/src/config/vite-common.ts
+++ b/packages/cli/src/config/vite-common.ts
@@ -9,6 +9,7 @@ export default {
     vue(),
     vueJsx()
   ],
+  configFile: false,
   css: {
     preprocessorOptions: {
       scss: {
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index 8241e7be86eecc5f138176cf8874edbd5d482503..33ddb4d2c328cdfe11f8f3b4fa52fb203bd2ad79 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -10,6 +10,7 @@ program
   .command('build')
   .description('构建')
   .option('-c --configFile [configFile]', 'config file path')
+  .option('-vc --viteConfigFile [viteConfigFile]', 'vite config file path')
   .action(async (options) => {
     process.env.BUILD_TYPE = 'app';
     const { buildCommon } = await import('./commands/build.js');
@@ -20,6 +21,7 @@ program
   .command('build-lib')
   .description('构建')
   .option('-c --configFile [configFile]', 'config file path')
+  .option('-vc --viteConfigFile [viteConfigFile]', 'vite config file path')
   .option('-f --format [format]', 'lib format')
   .option('-d --dts', 'dts')
   .option('-ep --emitPackage', 'createPackage')
@@ -33,6 +35,7 @@ program
   .command('build-components')
   .description('构建')
   .option('-c --configFile [configFile]', 'config file path')
+  .option('-vc --viteConfigFile [viteConfigFile]', 'vite config file path')
   .action(async (options) => {
     process.env.BUILD_TYPE = 'components';
     const { buildComponents } = await import('./commands/build-components.js');
diff --git a/packages/command-services/lib/render-engine.service.ts b/packages/command-services/lib/render-engine.service.ts
index 38da94dce4d7733038da6f18c78f8ab1db94d7be..07a32cb0e2fdfb203ddb5b229aea0999a9a6ee09 100644
--- a/packages/command-services/lib/render-engine.service.ts
+++ b/packages/command-services/lib/render-engine.service.ts
@@ -28,4 +28,20 @@ export class RenderEngineService {
     public getProps(componentId: string) {
         return this.renderEngine.getProps(componentId);
     }
+    /**
+     * 更新组件schema
+     * @param componentId 
+     * @param schema 
+     */
+    public setSchema(componentId: string, schema: Record<string, any>) {
+        this.renderEngine.setSchema(componentId, schema);
+    }
+    /**
+     * 获取组件schema
+     * @param componentId 
+     * @returns 
+     */
+    public getSchema(componentId: string) {
+        return this.renderEngine.getSchema(componentId);
+    }
 }
\ No newline at end of file
diff --git a/packages/command-services/package.json b/packages/command-services/package.json
index e8ee6d80b97d82b3a2a1c78834b0ab9832059a4a..0b929a7d48317f0e89df050f2140a718d558267e 100644
--- a/packages/command-services/package.json
+++ b/packages/command-services/package.json
@@ -53,6 +53,6 @@
         "vite-plugin-dts": "^2.1.0",
         "vue-tsc": "^2.0.29"
     },
-    "typings": "package/types/index.d.ts",
+    "types": "package/types/index.d.ts",
     "module": "package/command-services-vue.esm.js"
 }
\ No newline at end of file
diff --git a/packages/command-services/scripts/commands/build.cjs b/packages/command-services/scripts/commands/build.cjs
index 9b7840039d64cac18d70520e679c2ea5479c59db..e7f1d9cbc709389b334c3beb1152f3b54bcaddbd 100644
--- a/packages/command-services/scripts/commands/build.cjs
+++ b/packages/command-services/scripts/commands/build.cjs
@@ -22,6 +22,7 @@ const createPackageJson = async (version) => {
     package.module = "./command-services-vue.esm.js";
     package.style = "./style.css";
     package.dependencies = omit(package.dependencies, "");
+    package.typings = "./types/index.d.ts";
     package.types = "./types/index.d.ts";
     package.private = false;
     const fileStr = JSON.stringify(
diff --git a/packages/devkit/lib/common/types.ts b/packages/devkit/lib/common/types.ts
index 8f9f9b91917305d2e9532635614c12cc0b1f6738..ca71f7c1a0c09b3f2a7631af0ba75270c985b3de 100644
--- a/packages/devkit/lib/common/types.ts
+++ b/packages/devkit/lib/common/types.ts
@@ -17,17 +17,6 @@ export interface RenderEngine {
      * @param schema
      */
     getComponentById(id: string);
-    /**
-     * 更新组件schema
-     * @param id 
-     * @param schema 
-     */
-    setSchema(id: string, schema: any);
-    /**
-     * 获取组件schema
-     * @param id
-     */
-    getSchema(id: string);
     /**
      * 调用组件方法
      * @param id
@@ -51,4 +40,15 @@ export interface RenderEngine {
      * @param componentId
      */
     getProps(componentId: string);
+    /**
+     * 更新组件schema
+     * @param id 
+     * @param schema 
+     */
+    setSchema(componentId: string, schema: Record<string, any>);
+    /**
+     * 获取组件schema
+     * @param componentId 
+     */
+    getSchema(componentId: string): Record<string,any>;
 }
diff --git a/packages/devkit/package.json b/packages/devkit/package.json
index 8de11829979ef4ab6193b506a383b727b9ebd80e..0cf4fb655e613e8c2b0890ffb5fffb5220c7312c 100644
--- a/packages/devkit/package.json
+++ b/packages/devkit/package.json
@@ -82,6 +82,6 @@
         "vitest": "^0.29.2",
         "vue-tsc": "^1.2.0"
     },
-    "typings": "package/types/index.d.ts",
+    "types": "package/types/index.d.ts",
     "module": "package/devkit-vue.esm.js"
 }
\ No newline at end of file
diff --git a/packages/devkit/scripts/commands/create-package.cjs b/packages/devkit/scripts/commands/create-package.cjs
index bdb8abecc57c9888513d28d8460f777910fc5c4b..7d97cfec78c9adee878011f34217ec5c10d78165 100644
--- a/packages/devkit/scripts/commands/create-package.cjs
+++ b/packages/devkit/scripts/commands/create-package.cjs
@@ -24,6 +24,7 @@ const createPackageJson = async (version) => {
     package.main = "./devkit-vue.umd.js";
     package.module = "./devkit-vue.esm.js";
     package.dependencies = omit(package.dependencies, "");
+    package.typings = "./types/index.d.ts";
     package.types = "./types/index.d.ts";
     package.private = false;
     const fileStr = JSON.stringify(
diff --git a/packages/mobile-ui-vue/package.json b/packages/mobile-ui-vue/package.json
index f651924dfe74abf18de7fc4768b2aa3dce1bb117..042a2ef17cd9ddac8be54f57122a0eb7d70d9ada 100644
--- a/packages/mobile-ui-vue/package.json
+++ b/packages/mobile-ui-vue/package.json
@@ -6,7 +6,7 @@
     "dev": "farris-cli dev",
     "prod": "farris-cli build",
     "preview": "farris-cli preview",
-    "build": "npm run build:lib && npm run build:components && npm run build:css",
+    "build": "npm run build:lib && npm run build:css && npm run build:components",
     "build:lib": "farris-cli build-lib -ep",
     "build:components": "farris-cli build-components",
     "build:css": "farris-cli build-css -e ./components/index.scss -o ./package/index.css --minify",
diff --git a/packages/renderer/src/render-engine/render-engine-impl.ts b/packages/renderer/src/render-engine/render-engine-impl.ts
index bef32623e97e402b638b22611d71da29d3cf4461..1f88e19af90c5200939c75000a292d3a0ffd3aad 100644
--- a/packages/renderer/src/render-engine/render-engine-impl.ts
+++ b/packages/renderer/src/render-engine/render-engine-impl.ts
@@ -1,4 +1,4 @@
- import { Injector, RenderEngine } from "@farris/devkit-vue";
+import { Injector, RenderEngine } from "@farris/devkit-vue";
 import { Ref } from "vue";
 import { RENDER_TOKEN } from "../tokens";
 
@@ -22,14 +22,6 @@ export class RenderEngineImpl implements RenderEngine {
         return this.renderer.value.componentManager.get(componentId);
     }
 
-    public setSchema(componentId: string, schema: Record<string, any>) {
-        this.renderer.value.setSchema(componentId, schema);
-    }
-
-    public getSchema(componentId: string) {
-        return this.renderer.value.getSchema(componentId);
-    }
-
     public setProps(componentId: string, props: Record<string, any>) {
         return this.renderer.value.setProps(componentId, props);
     }
@@ -41,4 +33,12 @@ export class RenderEngineImpl implements RenderEngine {
     public invokeMethod(componentId: string, methodName: string, ...args: any[]) {
         this.renderer.value.invoke(componentId, methodName, ...args);
     }
+
+    public getSchema(componentId: string) {
+        return this.renderer.value.getSchema(componentId);
+    }
+
+    public setSchema(componentId: string, schema: Record<string, any>) {
+        this.renderer.value.setSchema(componentId, schema);
+    }
 }
diff --git a/packages/ui-vue/components/binding-selector/src/binding-selector.component.tsx b/packages/ui-vue/components/binding-selector/src/binding-selector.component.tsx
index bc21823acf0716ddc0275ba7b171637901abf506..97cb0c5ba75da26b6c9e1033f0be77c3f4e07dcf 100644
--- a/packages/ui-vue/components/binding-selector/src/binding-selector.component.tsx
+++ b/packages/ui-vue/components/binding-selector/src/binding-selector.component.tsx
@@ -95,7 +95,7 @@ export default defineComponent({
                     }
                 }
             ],
-            reiszeable: false,
+            resizeable: false,
             draggable: true
         };
 
diff --git a/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-component.ts b/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-component.ts
index fe7cd6300d123116c0ed82cef295d18318452840..c29f2b26914f14f5b4639e4f7d8368c14d7f1dd9 100644
--- a/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-component.ts
+++ b/packages/ui-vue/components/designer-canvas/src/composition/function/use-designer-component.ts
@@ -169,10 +169,15 @@ export function useDesignerComponent(
                 if (content.type === 'component-ref') {
                     contentSchemaId = content.component;
                 }
-                const contentElement: any = elementRef.value.querySelector(`#${contentSchemaId}-design-item`);
-                if (contentElement?.componentInstance?.value.onRemoveComponent) {
-                    contentElement.componentInstance.value.onRemoveComponent();
+                const contentElements: any = elementRef.value.querySelectorAll(`#${contentSchemaId}-design-item`);
+                if (contentElements?.length) {
+                    Array.from(contentElements).map((contentElement: any) => {
+                        if (contentElement?.componentInstance?.value.onRemoveComponent) {
+                            contentElement.componentInstance.value.onRemoveComponent();
+                        }
+                    });
                 }
+
             });
         }
     }
diff --git a/packages/ui-vue/components/dynamic-view/src/dynamic-view.component.tsx b/packages/ui-vue/components/dynamic-view/src/dynamic-view.component.tsx
index 2bf3634cc82fbd275af322d40dac5e68d1c9069e..c9554dffc517c8ab7b99cf53a18778288020540e 100644
--- a/packages/ui-vue/components/dynamic-view/src/dynamic-view.component.tsx
+++ b/packages/ui-vue/components/dynamic-view/src/dynamic-view.component.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-function-type */
 /* eslint-disable no-use-before-define */
-import { SetupContext, defineComponent, ref, watch, inject, createVNode, VNode } from 'vue';
+import { SetupContext, defineComponent, ref, watch, inject, createVNode, VNode, reactive, Reactive } from 'vue';
 import { merge } from 'lodash-es';
 import { dynamicViewProps, DynamicViewProps } from './dynamic-view.props';
 import { componentMap, componentPropsConverter, loadRegister, resolverMap } from './components/maps';
@@ -26,6 +26,7 @@ const FDynamicView = defineComponent({
         const bindingData = useBindingData(modelValue, setupContext);
         const entityState = useEntityState(schema.value);
         entityState.setup();
+        const componentState = new Map<string, Reactive<any>>();
 
         function resolveModels(viewSchema: Record<string, any>) {
             const componentType = viewSchema.type;
@@ -179,12 +180,14 @@ const FDynamicView = defineComponent({
                     return createVNode(componentType, { ...props }, null);
                 }
             };
+            componentState.set(viewSchema.id, reactive({ props }));
+            const reactivedProps = componentState.get(viewSchema.id).props;
             if (viewSchema.contents && viewSchema.contents.length > 0) {
-                return createNode(Component, props, [renderChildren()]);
+                return createNode(Component, reactivedProps, [renderChildren()]);
             } else if (viewSchema.slots) {
-                return createNode(Component, props, [...Object.values(renderSlots(viewSchema.slots))]);
+                return createNode(Component, reactivedProps, [...Object.values(renderSlots(viewSchema.slots))]);
             } else {
-                return createNode(Component, props);
+                return createNode(Component, reactivedProps);
             }
         }
 
@@ -223,16 +226,8 @@ const FDynamicView = defineComponent({
         }
 
         function setProps(id: string, props: Record<string, any>) {
-            const componentInstance = componentManager.get(id);
-            if (!componentInstance) {
-                return;
-            }
-            const elementSchema = schemaMap.get(id);
-            if (!elementSchema) {
-                return;
-            }
-            merge(elementSchema, props);
-            rerender(componentInstance);
+            const currentProps = componentState.get(id);
+            merge(currentProps.props, props);
         }
 
         function invoke(id: string, method: string, ...args: any[]): any {
diff --git a/packages/ui-vue/components/dynamic-view/src/event-dispatcher.ts b/packages/ui-vue/components/dynamic-view/src/event-dispatcher.ts
index 37b0c47fa498048f63507c5f9cdd0789fb49a7b5..058df419d88c6dc02af972896f9be7ab7b7dcbf7 100644
--- a/packages/ui-vue/components/dynamic-view/src/event-dispatcher.ts
+++ b/packages/ui-vue/components/dynamic-view/src/event-dispatcher.ts
@@ -1,14 +1,10 @@
- 
+
 import { SetupContext } from "vue";
-import { createEventHandlerResolver, EventDispatcher } from "../../dynamic-resolver";
-import { resolverMap } from "./components/maps";
+import { EventDispatcher } from "../../dynamic-resolver";
 
 export function createEventDispatcher(context: SetupContext, schema: Record<string, any>): EventDispatcher {
     function dispatch(token: string, eventName: string, type: string, payloads: any[]) {
-        const resolver = resolverMap[type];
-        const eventHandlerResolver = resolver && resolver.eventHandlerResolver ? resolver.eventHandlerResolver : createEventHandlerResolver();
-        const eventHandler = eventHandlerResolver.resolve(schema, { token, name: eventName, type, payloads });
-        context.emit('event', { token, name: eventName, type, payloads, handler: eventHandler, schema });
+        context.emit('event', { token, name: eventName, type, payloads, schema });
     }
     return {
         dispatch
diff --git a/packages/ui-vue/components/event-parameter/src/event-parameter.component.tsx b/packages/ui-vue/components/event-parameter/src/event-parameter.component.tsx
index 0f0323cd7b71c710e9504a45d5a15719969b2934..6a75b37e0516081a5672d9069cf7192e168f2190 100644
--- a/packages/ui-vue/components/event-parameter/src/event-parameter.component.tsx
+++ b/packages/ui-vue/components/event-parameter/src/event-parameter.component.tsx
@@ -48,12 +48,14 @@ export default defineComponent({
         });
         const rowOption: Ref<Partial<RowOptions>> = ref({
             customRowStatus: (visualData: VisualData) => {
+               if(visualData.collapse === undefined){
                 if (!visualData.raw.parent || !visualData.raw.parentId) {
                     visualData.collapse = false;
                 }
                 if (visualData.raw.data?.$type === 'ComplexField') {
                     visualData.collapse = true;
                 }
+               }
                 if (visualData.raw.hasChildren) {
                     visualData.disabled = true;
                 }
diff --git a/packages/ui-vue/components/field-selector/src/field-selector.component.tsx b/packages/ui-vue/components/field-selector/src/field-selector.component.tsx
index 02c80bcf31e3c6b9b76384afe6f69c2369e5e3ed..d2e3ecc2d14ae4a4c07bf61c059bca011ceb2499 100644
--- a/packages/ui-vue/components/field-selector/src/field-selector.component.tsx
+++ b/packages/ui-vue/components/field-selector/src/field-selector.component.tsx
@@ -110,7 +110,7 @@ export default defineComponent({
                     }
                 }
             ],
-            reiszeable: true,
+            resizeable: true,
             draggable: true
         };
 
diff --git a/packages/ui-vue/components/lookup/src/composition/use-dialog.ts b/packages/ui-vue/components/lookup/src/composition/use-dialog.ts
index e96ce2acba982349291100cf40d7af4bdd414022..e93a0fec1177e8c98681e0bc2a5c1451ce0e7b6b 100644
--- a/packages/ui-vue/components/lookup/src/composition/use-dialog.ts
+++ b/packages/ui-vue/components/lookup/src/composition/use-dialog.ts
@@ -168,7 +168,7 @@ export function useDialog(
         minHeight,
         showMaxButton: dialogOptions.value?.showMaxButton == null ? true : dialogOptions.value?.showMaxButton,
         showCloseButton: dialogOptions.value?.showCloseButton == null ? true : dialogOptions.value?.showCloseButton,
-        reiszeable: true,
+        resizeable: true,
         draggable: true,
         closedCallback: ($event: Event, closeFrom: string) => {
             const emitParams: any = { type: dialogCloseType.value, button: $event?.target };
diff --git a/packages/ui-vue/components/mapping-editor/src/mapping-editor.component.tsx b/packages/ui-vue/components/mapping-editor/src/mapping-editor.component.tsx
index 93e9f3fecc323ccb75f3787ea738fed982fd1a88..cd7792c34387dc918b1423d3c40d4a8d3945d389 100644
--- a/packages/ui-vue/components/mapping-editor/src/mapping-editor.component.tsx
+++ b/packages/ui-vue/components/mapping-editor/src/mapping-editor.component.tsx
@@ -173,7 +173,7 @@ export default defineComponent({
                     }
                 }
             ],
-            reiszeable: true,
+            resizeable: true,
             draggable: true,
             closedCallback: ($event, from) => {
                 if ($event.target.name === 'cancel' || from === 'icon' || from === 'esc') {
diff --git a/packages/ui-vue/components/modal/src/modal.component.tsx b/packages/ui-vue/components/modal/src/modal.component.tsx
index 9ed03716fea38144ae14a50dc7b414c339a0a536..2f385c7a4b22c6caf0bbb69b1a90c1d4174dc91a 100644
--- a/packages/ui-vue/components/modal/src/modal.component.tsx
+++ b/packages/ui-vue/components/modal/src/modal.component.tsx
@@ -43,7 +43,7 @@ export default defineComponent({
         const buttonAlignment = ref('');
         const showButtons = ref(props.showButtons);
         const title = ref(props.title);
-        const resizeable = ref(props.reiszeable);
+        const resizeable = ref(props.resizeable);
         const containment = ref<HTMLElement | null>(props.containment || null);
         const modalContainerRef = ref();
 
diff --git a/packages/ui-vue/components/modal/src/modal.props.ts b/packages/ui-vue/components/modal/src/modal.props.ts
index 92220d4d0937f72e52564f41e258492ba30aa940..aa3f111fb018a1beb0a03a5806a95cf60a2a932c 100644
--- a/packages/ui-vue/components/modal/src/modal.props.ts
+++ b/packages/ui-vue/components/modal/src/modal.props.ts
@@ -68,7 +68,7 @@ export const modalProps = {
     minWidth: {type: Number},
     maxWidth: {type: Number},
     containment: {type: Object as PropType<HTMLElement>, default: null},
-    reiszeable: { type: Boolean, default: false },
+    resizeable: { type: Boolean, default: false },
     draggable: { type: Boolean, default: false},
     dragHandle: { type: Object as PropType<DragHandleType>, default: null},
     closedCallback: { type: Function, default: null},
diff --git a/packages/ui-vue/components/schema-selector/src/schema-selector-editor.component.tsx b/packages/ui-vue/components/schema-selector/src/schema-selector-editor.component.tsx
index 4e08d87b1c6a32b0320e33c74abeaa02d14aee8b..07184a4763873ef866f23752fd28aba44539cd1c 100644
--- a/packages/ui-vue/components/schema-selector/src/schema-selector-editor.component.tsx
+++ b/packages/ui-vue/components/schema-selector/src/schema-selector-editor.component.tsx
@@ -94,7 +94,7 @@ export default defineComponent({
                     }
                 }
             ],
-            reiszeable: false,
+            resizeable: false,
             draggable: true
         };
 
diff --git a/packages/ui-vue/components/tree-view/src/components/data/tree-area.component.tsx b/packages/ui-vue/components/tree-view/src/components/data/tree-area.component.tsx
index d9d78eb9d6c9b9e7233748280291d97f82de7a30..129e73e0c910941653872e9d2bd7020714da84c1 100644
--- a/packages/ui-vue/components/tree-view/src/components/data/tree-area.component.tsx
+++ b/packages/ui-vue/components/tree-view/src/components/data/tree-area.component.tsx
@@ -18,6 +18,7 @@ export default function (
     useVirtualScrollComposition: UseVirtualScroll,
     useVisualDataComposition: UseVisualData,
     useVisualDataBoundComposition: UseVisualDataBound,
+    primaryGridContentRef: Ref<any>
 ) {
     const { calculateCellPositionInRow } = useCellPositionComposition;
     const { columnContext } = useColumnComposition;
@@ -38,9 +39,13 @@ export default function (
     /** 渲染树状视图的整个区域，包括数据区域 */
     function renderTreeArea() {
         return (
-            <div class="fv-tree-data" style={gridDataStyle.value}>
-                {renderTreeData()}
+            // <div class="fv-tree-data" style={gridDataStyle.value}>
+            <div ref={primaryGridContentRef} class="fv-grid-content-primary">
+                <div class="fv-grid-data" style={gridDataStyle.value}>
+                    {renderTreeData()}
+                </div>
             </div>
+            // </div>
         );
     }
 
diff --git a/packages/ui-vue/components/tree-view/src/designer/tree-view.design.component.tsx b/packages/ui-vue/components/tree-view/src/designer/tree-view.design.component.tsx
index c4bd0fcb5eea7a9838cc36827c4655004734d837..4c46587dd5cb875141519f79d988c97d24965cac 100644
--- a/packages/ui-vue/components/tree-view/src/designer/tree-view.design.component.tsx
+++ b/packages/ui-vue/components/tree-view/src/designer/tree-view.design.component.tsx
@@ -18,7 +18,7 @@ export default defineComponent({
         const elementRef = ref();
         const designItemContext = inject<DesignerItemContext>('design-item-context') as DesignerItemContext;
         const componentInstance = useDesignerComponent(elementRef, designItemContext);
-
+        const primaryGridContentRef = ref<any>();
         const idField = ref(props.idField);
         const treeContentRef = ref<any>();
         const mouseInContent = ref(false);
@@ -115,7 +115,9 @@ export default defineComponent({
         );
 
         /** 渲染树状区域 */
-        const { renderTreeArea } = getTreeArea(props, context, visibleDatas, useCellPositionComposition, useColumnComposition, treeDataView, useEditComposition, useHierarchyCompostion, useRowComposition, useSelectionComposition, useSelectHierarchyItemComposition, useVirtualScrollComposition, useVisualDataComposition, useVisualDataBoundComposition);
+        const { renderTreeArea } = getTreeArea(props, context, visibleDatas, useCellPositionComposition, useColumnComposition, 
+            treeDataView, useEditComposition, useHierarchyCompostion, useRowComposition, useSelectionComposition, useSelectHierarchyItemComposition, 
+            useVirtualScrollComposition, useVisualDataComposition, useVisualDataBoundComposition,primaryGridContentRef);
 
         function getSelectedRowVisualIndex() {
             const currentSelectionRow = useSelectionComposition.getSelectionRow();
diff --git a/packages/ui-vue/components/tree-view/src/tree-view.component.tsx b/packages/ui-vue/components/tree-view/src/tree-view.component.tsx
index e5e06b8bebc66a48ecd016c66d6ff84fedea8d2c..4e88db141638c2f016c923da651eb62e9251dc18 100644
--- a/packages/ui-vue/components/tree-view/src/tree-view.component.tsx
+++ b/packages/ui-vue/components/tree-view/src/tree-view.component.tsx
@@ -1,23 +1,27 @@
 
 
-import { SetupContext, computed, defineComponent, ref, watch } from 'vue';
+import { SetupContext, computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { TreeViewProps, treeViewProps } from './tree-view.props';
 import {
-    DataViewOptions, UseCellEditor, VisualData, useCellPosition, useColumn,
+    DataViewOptions, UseCellEditor, VisualData, getHorizontalScrollbar, getVerticalScrollbar, useCellPosition, useColumn,
     useDataView, useDataViewContainerStyle, useEdit, useFilter, useHierarchy, useIdentify, useRow, useSelection, useVirtualScroll, useVisualData, useVisualDataBound,
     useVisualDataCell, useVisualDataRow
 } from '../../data-view';
 import getTreeArea from './components/data/tree-area.component';
 import getContentHeader from './components/header/content-header.component';
 import { useSelectHierarchyItem } from '../../data-view/composition/hierarchy/use-select-hierarchy-item';
-
+import { useResizeObserver } from '@vueuse/core';
+import './tree-view.css';
 export default defineComponent({
     name: 'FTreeView',
     props: treeViewProps,
     emits: ['outputValue', 'currentEvent', 'selectionChange','expandNode'] as (string[]) | undefined,
     setup(props: TreeViewProps, context: SetupContext) {
+        const rowHeight = props.rowOption?.height || 28;
         const treeContentRef = ref<any>();
         const mouseInContent = ref(false);
+        const primaryGridContentRef = ref<any>();
+        const defaultVisibleCapacity = ref(20);
         const visibleDatas = ref<VisualData[]>([]);
         const useFilterComposition = useFilter();
         const useIdentifyComposition = useIdentify(props as DataViewOptions);
@@ -29,39 +33,43 @@ export default defineComponent({
 
         const treeClass = computed(() => {
             const classObject = {
-                'fv-tree': true
+                // 'fv-tree': true
+                'fv-grid': true,
             } as Record<string, boolean>;
             return classObject;
         });
 
         const treeContentClass = computed(() => {
             const classObject = {
-                'fv-tree-content': true
+                // 'fv-tree-content': true
+                'fv-grid-content': true,
+                'fv-grid-content-hover': mouseInContent.value,
             } as Record<string, boolean>;
             return classObject;
         });
         const { containerStyleObject } = useDataViewContainerStyle(props as DataViewOptions);
 
         /** 处理鼠标滚轮事件 */
-        function onWheel(e: MouseEvent) { }
+        // function onWheel(e: MouseEvent) { }
 
-        /** 渲染水平滚动条 */
-        function renderHorizontalScrollbar() {
-            return [];
-        }
+        // /** 渲染水平滚动条 */
+        // function renderHorizontalScrollbar() {
+        //     return [];
+        // }
 
-        /** 渲染垂直滚动条 */
-        function renderVerticalScrollbar() {
-            return [];
-        }
+        // /** 渲染垂直滚动条 */
+        // function renderVerticalScrollbar() {
+        //     return [];
+        // }
         const columns = ref(props.columns);
         const useColumnComposition = useColumn(props as DataViewOptions);
         const { columnContext } = useColumnComposition;
 
         const preloadCount = 0;
-        const defaultVisibleCapacity = 100;
+        // const defaultVisibleCapacity = 100;
         const visibleCapacity = computed(() => {
-            return treeDataView.dataView.value.length;
+            // return treeDataView.dataView.value.length;
+            return props.virtualized ? Math.min(treeDataView.dataView.value.length, defaultVisibleCapacity.value) : treeDataView.dataView.value.length;
         });
 
         const useRowComposition = useRow(props as DataViewOptions, context, useSelectionComposition, useIdentifyComposition);
@@ -95,7 +103,7 @@ export default defineComponent({
 
         const useCellPositionComposition = useCellPosition(props as DataViewOptions, columnContext);
 
-        visibleDatas.value = getVisualData(0, visibleCapacity.value + preloadCount - 1);
+        // visibleDatas.value = getVisualData(0, visibleCapacity.value + preloadCount - 1);
 
         const useVirtualScrollComposition = useVirtualScroll(
             props as DataViewOptions,
@@ -107,6 +115,9 @@ export default defineComponent({
             preloadCount,
             ref(0)
         );
+        const { onWheel, dataGridWidth, viewPortHeight, viewPortWidth, resetScroll, updateVisibleRowsOnLatestVisibleScope } = useVirtualScrollComposition;
+        const { renderVerticalScrollbar } = getVerticalScrollbar(props as DataViewOptions, treeContentRef, useVirtualScrollComposition);
+        const { renderHorizontalScrollbar } = getHorizontalScrollbar(props as DataViewOptions, treeContentRef, useVirtualScrollComposition);
 
 
         function getHeaderFactory() {
@@ -121,13 +132,47 @@ export default defineComponent({
         const { renderHeader } = headerFactroy(props, context);
 
         /** 渲染树状区域 */
-        const { renderTreeArea } = getTreeArea(props, context, visibleDatas, useCellPositionComposition, useColumnComposition, treeDataView, useEditComposition, useHierarchyCompostion, useRowComposition, useSelectionComposition, useSelectHierarchyItemComposition, useVirtualScrollComposition, useVisualDataComposition, useVisualDataBoundComposition);
+        const { renderTreeArea } = getTreeArea(
+            props, context, visibleDatas,
+            useCellPositionComposition, useColumnComposition, treeDataView,
+            useEditComposition, useHierarchyCompostion, useRowComposition,
+            useSelectionComposition, useSelectHierarchyItemComposition,
+            useVirtualScrollComposition, useVisualDataComposition, useVisualDataBoundComposition,
+            primaryGridContentRef
+        );
 
         function getSelectedRowVisualIndex() {
             const currentSelectionRow = useSelectionComposition.getSelectionRow();
             const visualIndex = currentSelectionRow ? currentSelectionRow.dataIndex - 1 : -1;
             return visualIndex;
         }
+        function onGridContentResize() {
+            const newVisibleCapacity = Math.ceil(treeContentRef.value.clientHeight / rowHeight);
+            if (newVisibleCapacity > defaultVisibleCapacity.value) {
+                defaultVisibleCapacity.value = newVisibleCapacity;
+                updateVisibleRowsOnLatestVisibleScope();
+            }
+            viewPortHeight.value = primaryGridContentRef.value?.clientHeight || 0;
+            dataGridWidth.value = treeContentRef.value?.clientWidth || 0;
+        }
+        onMounted(() => {
+            if (treeContentRef.value) {
+                defaultVisibleCapacity.value = Math.max(Math.ceil(treeContentRef.value.clientHeight / rowHeight),
+                    defaultVisibleCapacity.value);
+                visibleDatas.value = getVisualData(0, visibleCapacity.value + preloadCount - 1);
+                useResizeObserver(treeContentRef.value, onGridContentResize);
+                // calculateColumnsSize();
+                nextTick(() => {
+                    if (treeContentRef.value) {
+                        dataGridWidth.value = treeContentRef.value.clientWidth;
+                    }
+                    if (primaryGridContentRef.value) {
+                        viewPortWidth.value = primaryGridContentRef.value.clientWidth;
+                        viewPortHeight.value = primaryGridContentRef.value.clientHeight;
+                    }
+                });
+            }
+        });
 
         /** 新增树节点 */
         function addNewDataItem() {
@@ -184,8 +229,8 @@ export default defineComponent({
 
                 // 刷新树结构并重绘
                 treeDataView.load(newData);
-                visibleDatas.value = getVisualData(0, visibleCapacity.value + preloadCount - 1);
-
+                // visibleDatas.value = getVisualData(0, visibleCapacity.value + preloadCount - 1);
+                resetScroll();
                 // 重新定位选中行
                 if (currentSelectionRow && currentSelectionRow.raw && currentSelectionRow.raw.originalId) {
                     const selectTreeNodeIndex = newData.findIndex((data: any) => data.originalId === currentSelectionRow.raw.originalId);
@@ -215,32 +260,32 @@ export default defineComponent({
             selectItemById
         });
 
-        watch(
-            () => [props.data],
-            ([newValue]) => {
-                const currentSelectionRow = useSelectionComposition.getSelectionRow();
-
-                // 刷新树结构并重绘
-                treeDataView.load(newValue);
-                visibleDatas.value = getVisualData(0, visibleCapacity.value + preloadCount - 1);
-
-                // 重新定位选中行
-                if (currentSelectionRow && currentSelectionRow.raw && currentSelectionRow.raw.originalId) {
-                    const selectTreeNodeIndex = newValue.findIndex((data: any) => data.originalId === currentSelectionRow.raw.originalId);
-                    if (selectTreeNodeIndex > -1) {
-                        selectItem(selectTreeNodeIndex);
-                    }
-                }
-            }
-        );
+        // watch(
+        //     () => [props.data],
+        //     ([newValue]) => {
+        //         const currentSelectionRow = useSelectionComposition.getSelectionRow();
+
+        //         // 刷新树结构并重绘
+        //         treeDataView.load(newValue);
+        //         visibleDatas.value = getVisualData(0, visibleCapacity.value + preloadCount - 1);
+
+        //         // 重新定位选中行
+        //         if (currentSelectionRow && currentSelectionRow.raw && currentSelectionRow.raw.originalId) {
+        //             const selectTreeNodeIndex = newValue.findIndex((data: any) => data.originalId === currentSelectionRow.raw.originalId);
+        //             if (selectTreeNodeIndex > -1) {
+        //                 selectItem(selectTreeNodeIndex);
+        //             }
+        //         }
+        //     }
+        // );
         return () => {
             return (
                 <div class={treeClass.value} style={containerStyleObject.value} onWheel={onWheel}>
                     {renderHeader()}
                     <div ref={treeContentRef} class={treeContentClass.value} onMouseover={() => { mouseInContent.value = true; }} onMouseleave={() => { mouseInContent.value = false; }}>
                         {renderTreeArea()}
-                        {renderHorizontalScrollbar()}
-                        {renderVerticalScrollbar()}
+                        {treeContentRef.value && renderHorizontalScrollbar()}
+                        {treeContentRef.value && renderVerticalScrollbar()}
                     </div>
                 </div>
             );
diff --git a/packages/ui-vue/components/tree-view/src/tree-view.css b/packages/ui-vue/components/tree-view/src/tree-view.css
new file mode 100644
index 0000000000000000000000000000000000000000..ae2ed6c113ec3b62f5c985d40647f57139a70d21
--- /dev/null
+++ b/packages/ui-vue/components/tree-view/src/tree-view.css
@@ -0,0 +1,3 @@
+.fv-grid .fv-grid-hierarchy-cell {
+    border:none;
+}
\ No newline at end of file