diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
index 38947bd5..bac2bcc1 100644
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@@ -89,9 +89,7 @@ export { default as MSelect } from './fields/Select.vue';
 export { default as MCascader } from './fields/Cascader.vue';
 export { default as MDynamicField } from './fields/DynamicField.vue';
 
-export const createForm = function (config: FormConfig) {
-  return config;
-};
+export const createForm = <T extends [] = []>(config: FormConfig | T) => config;
 
 export interface InstallOptions {
   [key: string]: any;
diff --git a/packages/form/src/schema.ts b/packages/form/src/schema.ts
index c57cd675..42741e50 100644
--- a/packages/form/src/schema.ts
+++ b/packages/form/src/schema.ts
@@ -122,6 +122,7 @@ export interface Rule {
   type?: string;
   /** 是否必填 */
   required?: boolean;
+  trigger?: string;
   /** 自定义验证器 */
   validator?: (
     options: {
diff --git a/playground/src/configs/formDsl.ts b/playground/src/configs/formDsl.ts
index c87cbcab..e0eb8615 100644
--- a/playground/src/configs/formDsl.ts
+++ b/playground/src/configs/formDsl.ts
@@ -1,4 +1,6 @@
-export default [
+import { createForm } from '@tmagic/form';
+
+export default createForm([
   {
     text: '文本',
     name: 'text',
@@ -173,7 +175,7 @@ export default [
     legend: '分组',
     extra: 'extra',
     checkbox: true,
-    expand: 'checkbox',
+    expand: true,
     // schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
     items: [
       {
@@ -263,4 +265,4 @@ export default [
       },
     ],
   },
-];
+]);
diff --git a/playground/src/main.ts b/playground/src/main.ts
index 48a2d8c5..e8683dd9 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -17,8 +17,6 @@
  */
 
 import { createApp } from 'vue';
-import ElementPlus from 'element-plus';
-import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import * as monaco from 'monaco-editor';
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
@@ -30,7 +28,6 @@ import TMagicDesign from '@tmagic/design';
 import MagicEditor from '@tmagic/editor';
 import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
 import MagicForm from '@tmagic/form';
-import MagicTable from '@tmagic/table';
 
 import App from './App.vue';
 import router from './route';
@@ -61,11 +58,7 @@ monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
 
 const app = createApp(App);
 app.use(router);
-app.use(ElementPlus, {
-  locale: zhCn,
-});
 app.use(TMagicDesign, MagicElementPlusAdapter);
 app.use(MagicEditor);
 app.use(MagicForm);
-app.use(MagicTable);
 app.mount('#app');
diff --git a/playground/src/pages/Table.vue b/playground/src/pages/Table.vue
index 65bec30b..30e5649e 100644
--- a/playground/src/pages/Table.vue
+++ b/playground/src/pages/Table.vue
@@ -1,16 +1,16 @@
 <template>
   <div style="width: 100%">
-    <nav-menu :data="menu"></nav-menu>
+    <NavMenu :data="menu"></NavMenu>
     <div class="table-content">
-      <m-table class="left-panel" :columns="columns" :data="data" :show-header="true"></m-table>
-      <el-tabs class="right-panel" modelValue="columns">
-        <el-tab-pane label="columns" name="columns">
-          <magic-code-editor class="code-editor-content" :init-values="columns" @save="change"></magic-code-editor>
-        </el-tab-pane>
-        <el-tab-pane label="data" name="data">
-          <magic-code-editor class="code-editor-content" :init-values="data" @save="changeData"></magic-code-editor>
-        </el-tab-pane>
-      </el-tabs>
+      <MagicTable class="left-panel" :columns="columns" :data="data" :show-header="true"></MagicTable>
+      <TMagicTabs class="right-panel" modelValue="columns">
+        <TMagicTabPane label="columns" name="columns">
+          <TMagicCodeEditor class="code-editor-content" :init-values="columns" @save="change"></TMagicCodeEditor>
+        </TMagicTabPane>
+        <TMagicTabPane label="data" name="data">
+          <TMagicCodeEditor class="code-editor-content" :init-values="data" @save="changeData"></TMagicCodeEditor>
+        </TMagicTabPane>
+      </TMagicTabs>
     </div>
   </div>
 </template>
@@ -19,14 +19,15 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { tMagicMessage } from '@tmagic/design';
-import { MenuButton } from '@tmagic/editor';
+import { tMagicMessage, TMagicTabPane, TMagicTabs } from '@tmagic/design';
+import { MenuButton, TMagicCodeEditor } from '@tmagic/editor';
+import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import NavMenu from '../components/NavMenu.vue';
 
 const router = useRouter();
 
-const columns = ref([
+const columns = ref<ColumnConfig[]>([
   {
     type: 'expand',
     prop: 'b',