diff --git a/src/cool/modules/demo/views/crud.vue b/src/cool/modules/demo/views/crud.vue
new file mode 100644
index 0000000..db820a2
--- /dev/null
+++ b/src/cool/modules/demo/views/crud.vue
@@ -0,0 +1,78 @@
+<template>
+	<div class="demo">
+		<cl-crud @load="onLoad">
+			<el-row>
+				<cl-refresh-btn />
+				<cl-add-btn />
+				<cl-multi-delete-btn />
+				<demo-dialog />
+				<demo-context-menu />
+				<demo-form />
+				<demo-query />
+				<cl-flex1 />
+				<cl-search-key
+					field="name"
+					:field-list="[
+						{ label: '姓名', value: 'name' },
+						{ label: '年龄', value: 'age' }
+					]"
+				/>
+				<demo-adv-search />
+			</el-row>
+			<el-row>
+				<demo-table />
+			</el-row>
+			<el-row>
+				<cl-flex1 />
+				<cl-pagination />
+			</el-row>
+			<demo-upsert />
+		</cl-crud>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import { TestService } from "../utils/service";
+import Dialog from "../components/crud/dialog.vue";
+import ContextMenu from "../components/crud/context-menu.vue";
+import Query from "../components/crud/query.vue";
+import AdvSearch from "../components/crud/adv-search.vue";
+import Table from "../components/crud/table.vue";
+import Upsert from "../components/crud/upsert.vue";
+import Form from "../components/crud/form.vue";
+import { CrudLoad } from "@cool-vue/crud/types";
+export default defineComponent({
+	name: "crud",
+	components: {
+		"demo-dialog": Dialog,
+		"demo-context-menu": ContextMenu,
+		"demo-query": Query,
+		"demo-adv-search": AdvSearch,
+		"demo-table": Table,
+		"demo-upsert": Upsert,
+		"demo-form": Form
+	},
+	setup() {
+		function onLoad({ ctx, app }: CrudLoad) {
+			ctx.service(TestService).done();
+			app.refresh();
+		}
+		return {
+			onLoad
+		};
+	}
+});
+</script>
+<style lang="scss">
+html,
+body,
+#app,
+.demo {
+	height: 100%;
+	overflow: hidden;
+}
+* {
+	padding: 0;
+	margin: 0;
+}
+</style>