diff --git a/.vscode/crud.code-snippets b/.vscode/crud.code-snippets
index a86c776..02b0de6 100644
--- a/.vscode/crud.code-snippets
+++ b/.vscode/crud.code-snippets
@@ -1,9 +1,9 @@
 {
 	"cl-crud": {
-		"prefix": "cl-crud",
+		"prefix": "cl-crud-ts",
 		"body": [
 			"<template>",
-			"    <cl-crud ref=\"crud\" @load=\"onLoad\">",
+			"    <cl-crud :ref=\"setRefs('crud')\" @load=\"onLoad\">",
 			"        <el-row type=\"flex\" align=\"middle\">",
 			"            <!-- 刷新按钮 -->",
 			"            <cl-refresh-btn />",
@@ -18,7 +18,7 @@
 			"",
 			"        <el-row>",
 			"            <!-- 数据表格 -->",
-			"            <cl-table v-bind=\"table\"></cl-table>",
+			"            <cl-table :ref=\"setRefs('table')\" v-bind=\"table\"></cl-table>",
 			"        </el-row>",
 			"",
 			"        <el-row type=\"flex\">",
@@ -28,31 +28,47 @@
 			"        </el-row>",
 			"",
 			"        <!-- 新增、编辑 -->",
-			"        <cl-upsert ref=\"upsert\" v-bind=\"upsert\"></cl-upsert>",
+			"        <cl-upsert :ref=\"setRefs('upsert')\" v-bind=\"upsert\"></cl-upsert>",
 			"    </cl-crud>",
 			"</template>",
 			"",
-			"<script>",
-			"export default {",
-			"    data() {",
-			"        return {",
-			"            // 新增、编辑配置",
-			"            upsert: {",
-			"                items: []",
-			"            },",
-			"            // 表格配置",
-			"            table: {",
-			"                columns: []",
-			"            }",
-			"        };",
-			"    },",
-			"    methods: {",
-			"        onLoad({ ctx, app }) {",
-			"            ctx.service(${1}).done();",
+			"<script lang=\"ts\">",
+			"import { defineComponent, inject, reactive } from \"vue\";",
+			"import { CrudLoad, Upsert, Table } from \"@/crud/types\";",
+			"import { useRefs } from \"@/core\";",
+			"",
+			"export default defineComponent({",
+			"    setup() {",
+			"        const { refs, setRefs } = useRefs();",
+			"        // 请求服务",
+			"        const service = inject<any>(\"service\");",
+			"",
+			"        // 新增、编辑配置",
+			"        const upsert = reactive<Upsert>({",
+			"            items: []",
+			"        });",
+			"",
+			"        // 表格配置",
+			"        const table = reactive<Table>({",
+			"            columns: []",
+			"        });",
+			"",
+			"        // crud 加载",
+			"        function onLoad({ ctx, app }: CrudLoad) {",
+			"            // 绑定 service",
+			"            ctx.service(service.xx).done();",
 			"            app.refresh();",
 			"        }",
+			"",
+			"        return {",
+			"            refs,",
+			"            setRefs,",
+			"            upsert,",
+			"            table,",
+			"            onLoad",
+			"        };",
 			"    }",
-			"};",
+			"});",
 			"</script>",
 			""
 		],