From 575416a16d11ba2f3cda653aab65ffbaba939bde Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <xiaojunnuo@qq.com>
Date: Wed, 6 Nov 2024 19:26:07 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=B1:=20[client]=20sync=20upgrade=20wit?=
 =?UTF-8?q?h=204=20commits=20[trident-sync]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat: 示例全面改成useFsAsync
chore:
perf: 示例改成useFsAsync
---
 .../src/views/crud/advanced/big-data/crud.tsx |  2 +-
 .../views/crud/advanced/big-data/index.vue    | 12 +--
 .../crud/advanced/from-backend/index.vue      | 12 +--
 .../crud/advanced/in-dialog/crud/crud.tsx     | 16 +---
 .../crud/advanced/in-dialog/crud/index.vue    | 10 +-
 .../in-drawer/drawer-class-time/index.vue     |  5 +-
 .../views/crud/advanced/in-drawer/index.vue   | 14 ++-
 .../src/views/crud/advanced/linkage/crud.tsx  |  2 +-
 .../src/views/crud/advanced/linkage/index.vue | 11 ++-
 .../crud/advanced/local-pagination/index.vue  | 14 +--
 .../crud/advanced/nest/aside-table/crud.tsx   |  2 +-
 .../crud/advanced/nest/aside-table/index.vue  | 10 +-
 .../src/views/crud/advanced/nest/index.vue    | 11 ++-
 .../crud/advanced/nest/sub-table/index.vue    | 11 ++-
 .../crud/basis/column-merge-plugin/crud.tsx   |  2 +-
 .../crud/basis/column-merge-plugin/index.vue  | 27 ++----
 .../src/views/crud/basis/columns-set/crud.tsx |  2 +-
 .../views/crud/basis/columns-set/index.vue    |  9 +-
 .../views/crud/basis/compute-more/crud.tsx    |  2 +-
 .../views/crud/basis/compute-more/index.vue   | 13 ++-
 .../src/views/crud/basis/compute/crud.tsx     |  2 +-
 .../src/views/crud/basis/compute/index.vue    | 10 +-
 .../src/views/crud/basis/custom/crud.tsx      |  2 +-
 .../src/views/crud/basis/custom/index.vue     | 14 +--
 .../src/views/crud/basis/first/crud.ts        |  4 +-
 .../src/views/crud/basis/first/index.vue      | 95 +++----------------
 .../src/views/crud/basis/first/use-tour.ts    | 50 ++++++++++
 .../src/views/crud/basis/helloworld/index.vue | 41 +++-----
 .../src/views/crud/basis/i18n/crud.tsx        |  2 +-
 .../src/views/crud/basis/i18n/index.vue       |  9 +-
 .../src/views/crud/basis/layout-card/crud.tsx |  2 +-
 .../views/crud/basis/layout-card/index.vue    | 10 +-
 .../views/crud/basis/layout-custom/crud.tsx   |  2 +-
 .../views/crud/basis/layout-custom/index.vue  |  9 +-
 .../src/views/crud/basis/plugin/crud.tsx      |  4 +-
 .../src/views/crud/basis/plugin/index.vue     | 50 +++++-----
 .../src/views/crud/basis/reset/index.vue      |  6 +-
 .../src/views/crud/basis/ts/crud.ts           |  2 +-
 .../src/views/crud/basis/ts/index.vue         | 26 ++---
 .../views/crud/basis/value-change/crud.tsx    | 15 +--
 .../views/crud/basis/value-change/index.vue   | 11 ++-
 .../src/views/crud/component/button/crud.tsx  |  2 +-
 .../src/views/crud/component/button/index.vue |  9 +-
 .../views/crud/component/cascader/crud.tsx    |  2 +-
 .../views/crud/component/cascader/index.vue   |  9 +-
 .../views/crud/component/checkbox/crud.tsx    |  2 +-
 .../views/crud/component/checkbox/index.vue   | 10 +-
 .../src/views/crud/component/date/crud.tsx    |  2 +-
 .../src/views/crud/component/date/index.vue   | 10 +-
 .../src/views/crud/component/editor/crud.tsx  |  2 +-
 .../src/views/crud/component/editor/index.vue |  9 +-
 .../src/views/crud/component/icon/crud.tsx    |  2 +-
 .../src/views/crud/component/icon/index.vue   |  9 +-
 .../crud/component/independent/index.vue      |  2 +-
 .../src/views/crud/component/json/crud.tsx    |  2 +-
 .../src/views/crud/component/json/index.vue   | 10 +-
 .../src/views/crud/component/number/crud.tsx  |  2 +-
 .../src/views/crud/component/number/index.vue |  9 +-
 .../src/views/crud/component/phone/crud.tsx   |  2 +-
 .../src/views/crud/component/phone/index.vue  |  9 +-
 .../src/views/crud/component/radio/crud.tsx   |  2 +-
 .../src/views/crud/component/radio/index.vue  |  9 +-
 .../src/views/crud/component/select/crud.tsx  |  3 +-
 .../src/views/crud/component/select/index.vue | 15 +--
 .../src/views/crud/component/switch/crud.tsx  |  2 +-
 .../src/views/crud/component/switch/index.vue | 10 +-
 .../crud/component/table-select/crud.tsx      |  2 +-
 .../crud/component/table-select/index.vue     | 10 +-
 .../src/views/crud/component/text/index.vue   |  9 +-
 .../src/views/crud/component/tree/crud.tsx    |  2 +-
 .../src/views/crud/component/tree/index.vue   |  9 +-
 .../crud/component/uploader/alioss/crud.tsx   |  2 +-
 .../crud/component/uploader/alioss/index.vue  |  9 +-
 .../crud/component/uploader/cos/crud.tsx      |  2 +-
 .../crud/component/uploader/cos/index.vue     | 10 +-
 .../crud/component/uploader/cropper/crud.tsx  |  2 +-
 .../crud/component/uploader/cropper/index.vue | 10 +-
 .../crud/component/uploader/form/crud.tsx     |  2 +-
 .../crud/component/uploader/form/index.vue    |  9 +-
 .../crud/component/uploader/qiniu/crud.tsx    |  2 +-
 .../crud/component/uploader/qiniu/index.vue   | 10 +-
 .../views/crud/component/uploader/s3/crud.tsx |  2 +-
 .../crud/component/uploader/s3/index.vue      | 10 +-
 .../src/views/crud/debug/crud.tsx             |  2 +-
 .../src/views/crud/debug/index.vue            |  9 +-
 .../src/views/crud/dict/cloneable/crud.tsx    |  2 +-
 .../src/views/crud/dict/cloneable/index.vue   |  9 +-
 .../src/views/crud/dict/prototype/crud.tsx    |  2 +-
 .../src/views/crud/dict/prototype/index.vue   |  9 +-
 .../views/crud/dict/shared/manager/crud.tsx   |  2 +-
 .../views/crud/dict/shared/manager/index.vue  | 11 ++-
 .../src/views/crud/dict/shared/use/crud.tsx   |  2 +-
 .../src/views/crud/dict/shared/use/index.vue  | 11 ++-
 .../src/views/crud/dict/single/crud.tsx       |  2 +-
 .../src/views/crud/dict/single/index.vue      |  9 +-
 .../src/views/crud/editable/cell/crud.tsx     |  2 +-
 .../src/views/crud/editable/cell/index.vue    | 11 ++-
 .../src/views/crud/editable/free/crud.tsx     |  2 +-
 .../src/views/crud/editable/free/index.vue    | 16 ++--
 .../src/views/crud/editable/menus/crud.tsx    | 30 +++---
 .../src/views/crud/editable/menus/index.vue   |  8 +-
 .../src/views/crud/editable/row/crud.tsx      |  2 +-
 .../src/views/crud/editable/row/index.vue     | 10 +-
 .../src/views/crud/editable/sub-crud/crud.tsx |  2 +-
 .../views/crud/editable/sub-crud/index.vue    | 10 +-
 .../views/crud/editable/sub-crud/row/crud.tsx |  2 +-
 .../crud/editable/sub-crud/row/index.vue      | 19 +++-
 .../views/crud/editable/vmodel/free/crud.tsx  |  2 +-
 .../views/crud/editable/vmodel/free/index.vue | 10 +-
 .../src/views/crud/editable/vmodel/index.vue  | 11 ++-
 .../views/crud/feature/column-resize/crud.tsx |  2 +-
 .../crud/feature/column-resize/index.vue      | 10 +-
 .../views/crud/feature/column-sort/crud.tsx   |  2 +-
 .../views/crud/feature/column-sort/index.vue  | 10 +-
 .../views/crud/feature/columns-set/crud.tsx   |  2 +-
 .../views/crud/feature/columns-set/index.vue  | 10 +-
 .../views/crud/feature/editable-row/crud.tsx  |  2 +-
 .../views/crud/feature/editable-row/index.vue | 11 ++-
 .../src/views/crud/feature/editable/crud.tsx  |  2 +-
 .../src/views/crud/feature/editable/index.vue | 12 ++-
 .../src/views/crud/feature/expand/crud.tsx    | 14 +--
 .../src/views/crud/feature/expand/index.vue   |  9 +-
 .../src/views/crud/feature/export/crud.tsx    |  2 +-
 .../src/views/crud/feature/export/index.vue   |  9 +-
 .../src/views/crud/feature/filter/crud.tsx    |  2 +-
 .../src/views/crud/feature/filter/index.vue   | 10 +-
 .../src/views/crud/feature/fixed/crud.tsx     |  2 +-
 .../src/views/crud/feature/fixed/index.vue    | 10 +-
 .../views/crud/feature/header-group/crud.tsx  |  2 +-
 .../views/crud/feature/header-group/index.vue |  9 +-
 .../src/views/crud/feature/header/crud.tsx    |  2 +-
 .../src/views/crud/feature/header/index.vue   | 13 ++-
 .../src/views/crud/feature/height/crud.tsx    |  2 +-
 .../src/views/crud/feature/height/index.vue   | 10 +-
 .../src/views/crud/feature/hide/crud.tsx      |  2 +-
 .../src/views/crud/feature/hide/index.vue     | 12 ++-
 .../src/views/crud/feature/index/crud.tsx     |  4 +-
 .../src/views/crud/feature/index/index.vue    | 10 +-
 .../views/crud/feature/local-import/crud.tsx  |  2 +-
 .../views/crud/feature/local-import/index.vue |  5 +-
 .../views/crud/feature/local-import/local.vue | 14 ++-
 .../views/crud/feature/local-v-model/crud.tsx | 19 +++-
 .../crud/feature/local-v-model/index.vue      |  2 +-
 .../crud/feature/local-v-model/local.vue      | 13 ++-
 .../src/views/crud/feature/local/crud.tsx     |  2 +-
 .../src/views/crud/feature/local/index.vue    | 17 ++--
 .../src/views/crud/feature/merge/crud.tsx     |  2 +-
 .../src/views/crud/feature/merge/index.vue    | 10 +-
 .../src/views/crud/feature/remove/crud.tsx    |  2 +-
 .../src/views/crud/feature/remove/index.vue   | 10 +-
 .../views/crud/feature/search-multi/crud.tsx  |  2 +-
 .../views/crud/feature/search-multi/index.vue | 10 +-
 .../src/views/crud/feature/search/crud.tsx    |  2 +-
 .../src/views/crud/feature/search/index.vue   | 11 ++-
 .../crud/feature/selection-radio/crud.tsx     |  2 +-
 .../crud/feature/selection-radio/index.vue    |  9 +-
 .../src/views/crud/feature/selection/crud.tsx | 12 +--
 .../views/crud/feature/selection/index.vue    | 10 +-
 .../src/views/crud/feature/sortable/crud.tsx  |  2 +-
 .../src/views/crud/feature/sortable/index.vue | 10 +-
 .../src/views/crud/feature/tabs/crud.tsx      |  2 +-
 .../src/views/crud/feature/tabs/index.vue     | 11 ++-
 .../src/views/crud/feature/tree/crud.tsx      | 16 +---
 .../src/views/crud/feature/tree/index.vue     | 11 ++-
 .../views/crud/feature/value-builder/crud.tsx |  2 +-
 .../crud/feature/value-builder/index.vue      | 10 +-
 .../src/views/crud/form/base/crud.tsx         |  2 +-
 .../src/views/crud/form/base/index.vue        |  8 +-
 .../src/views/crud/form/custom-form/crud.tsx  | 17 +---
 .../src/views/crud/form/custom-form/index.vue |  9 +-
 .../src/views/crud/form/drawer/crud.tsx       |  2 +-
 .../src/views/crud/form/drawer/index.vue      |  9 +-
 .../src/views/crud/form/group-tabs/crud.tsx   |  2 +-
 .../src/views/crud/form/group-tabs/index.vue  | 10 +-
 .../src/views/crud/form/group/crud.tsx        |  2 +-
 .../src/views/crud/form/group/index.vue       | 10 +-
 .../src/views/crud/form/helper/crud.tsx       |  2 +-
 .../src/views/crud/form/helper/index.vue      | 10 +-
 .../src/views/crud/form/initial/index.vue     | 10 +-
 .../src/views/crud/form/inner/area/crud.tsx   |  2 +-
 .../src/views/crud/form/inner/area/index.vue  |  9 +-
 .../src/views/crud/form/inner/crud.tsx        |  2 +-
 .../src/views/crud/form/inner/index.vue       | 10 +-
 .../src/views/crud/form/layout-flex/crud.tsx  |  2 +-
 .../src/views/crud/form/layout-flex/index.vue | 11 ++-
 .../src/views/crud/form/layout-grid/crud.tsx  |  2 +-
 .../src/views/crud/form/layout-grid/index.vue | 10 +-
 .../src/views/crud/form/layout/crud.tsx       |  2 +-
 .../src/views/crud/form/layout/index.vue      | 10 +-
 .../src/views/crud/form/nest/crud.tsx         |  2 +-
 .../src/views/crud/form/nest/index.vue        | 11 ++-
 .../src/views/crud/form/new-page/crud.tsx     |  2 +-
 .../src/views/crud/form/new-page/edit.vue     | 10 +-
 .../src/views/crud/form/new-page/index.vue    | 10 +-
 .../src/views/crud/form/render/crud.tsx       |  2 +-
 .../src/views/crud/form/render/index.vue      | 10 +-
 .../src/views/crud/form/reset/crud.tsx        |  2 +-
 .../src/views/crud/form/reset/index.vue       | 10 +-
 .../views/crud/form/single-column/crud.tsx    |  2 +-
 .../views/crud/form/single-column/index.vue   | 11 ++-
 .../src/views/crud/form/validation/crud.tsx   | 14 +--
 .../src/views/crud/form/validation/index.vue  | 10 +-
 .../src/views/crud/form/view/index.vue        | 10 +-
 .../src/views/crud/form/watch/crud.tsx        |  2 +-
 .../src/views/crud/form/watch/index.vue       | 10 +-
 .../views/crud/row-handle/dropdown/crud.tsx   |  2 +-
 .../views/crud/row-handle/dropdown/index.vue  | 10 +-
 .../views/crud/row-handle/tooltip/crud.tsx    |  2 +-
 .../views/crud/row-handle/tooltip/index.vue   |  9 +-
 .../src/views/crud/slots/cell/crud.tsx        |  4 +-
 .../src/views/crud/slots/cell/index.vue       | 14 +--
 .../src/views/crud/slots/form-item/crud.tsx   |  2 +-
 .../src/views/crud/slots/form-item/index.vue  | 13 ++-
 .../src/views/crud/slots/form/crud.tsx        |  2 +-
 .../src/views/crud/slots/form/index.vue       | 10 +-
 .../src/views/crud/slots/layout/crud.tsx      |  2 +-
 .../src/views/crud/slots/layout/index.vue     | 10 +-
 .../src/views/crud/slots/search/crud.tsx      |  2 +-
 .../src/views/crud/slots/search/index.vue     | 10 +-
 219 files changed, 910 insertions(+), 867 deletions(-)
 create mode 100644 packages/ui/certd-client/src/views/crud/basis/first/use-tour.ts

diff --git a/packages/ui/certd-client/src/views/crud/advanced/big-data/crud.tsx b/packages/ui/certd-client/src/views/crud/advanced/big-data/crud.tsx
index 48ba09cd2..0c0cc9f83 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/big-data/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/big-data/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/advanced/big-data/index.vue b/packages/ui/certd-client/src/views/crud/advanced/big-data/index.vue
index 3c3e8846b..35534726f 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/big-data/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/big-data/index.vue
@@ -9,22 +9,22 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "AdvancedBigData",
   setup() {
-    const { crudBinding, crudRef, crudExpose, output } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudRef, crudBinding, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
-      crudRef,
-      ...output
+      crudRef
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue b/packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue
index 84a294430..cfbe96afe 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue
@@ -12,25 +12,19 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, Ref } from "vue";
-import { CrudBinding, useFsAsync } from "@fast-crud/fast-crud";
+import { CrudBinding, useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "AdvancedFromBackend",
   setup() {
-    // crud组件的ref
-    const crudRef: Ref = ref();
-    // crud 配置的ref
-    const crudBinding: Ref<CrudBinding> = ref();
-
-    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 初始化crud配置
     // 页面打开后获取列表数据
     onMounted(async () => {
-      const customValue = {};
       //异步初始化fs，createCrudOptions为异步方法
-      const { crudExpose, context } = await useFsAsync({ crudRef, crudBinding, createCrudOptions, context: customValue });
+      await useFsAsync({ crudRef, crudBinding, crudExpose, context, createCrudOptions });
       // 刷新数据
       await crudExpose.doRefresh();
     });
diff --git a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx
index 4fb27f8ef..873f1da3c 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx
@@ -1,17 +1,7 @@
 import * as api from "./api";
-import {
-  AddReq,
-  CreateCrudOptionsProps,
-  CreateCrudOptionsRet,
-  DelReq,
-  EditReq,
-  UserPageQuery,
-  UserPageRes,
-  dict,
-  utils
-} from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, dict, utils } from "@fast-crud/fast-crud";
 import { SearchOutlined } from "@ant-design/icons-vue";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
@@ -103,7 +93,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
           title: "我的值是由复杂输入列输入的",
           type: "text",
           column: {
-            width: "300px"
+            width: 300
           },
           form: {
             show: false
diff --git a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/index.vue b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/index.vue
index 3359b7a00..1e1d56279 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/index.vue
@@ -6,17 +6,19 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FsInDialog",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/in-drawer/drawer-class-time/index.vue b/packages/ui/certd-client/src/views/crud/advanced/in-drawer/drawer-class-time/index.vue
index 90201d700..7922d8826 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/in-drawer/drawer-class-time/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/in-drawer/drawer-class-time/index.vue
@@ -5,9 +5,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick } from "vue";
+import { nextTick, ref } from "vue";
 import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
+
 const textbookRef = ref();
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { textbookRef } });
 
@@ -18,7 +19,7 @@ defineOptions({
 const drawerOpened = ref(false);
 
 //定义抽屉打开方法
-const open = async ({ textbook }) => {
+const open = async ({ textbook }: any) => {
   textbookRef.value = textbook;
   drawerOpened.value = true;
   await nextTick(); //等待crud初始化完成
diff --git a/packages/ui/certd-client/src/views/crud/advanced/in-drawer/index.vue b/packages/ui/certd-client/src/views/crud/advanced/in-drawer/index.vue
index 22ed6af09..ff29d81ed 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/in-drawer/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/in-drawer/index.vue
@@ -7,20 +7,24 @@
 
 <script lang="ts" setup>
 import { defineComponent, onMounted, ref } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import AdvancedInDrawerClassTime from "./drawer-class-time/index.vue";
 //保留子组件的ref引用
 const drawerClassTimeRef = ref();
-//通过context传递到crud.tsx中
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { drawerClassTimeRef } });
 
+const { crudRef, crudBinding, crudExpose } = useFsRef();
+const context = {
+  drawerClassTimeRef
+};
 defineOptions({
   name: "AdvancedInDrawer"
 });
 
 // 页面打开后获取列表数据
-onMounted(() => {
-  crudExpose.doRefresh();
+onMounted(async () => {
+  await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+  await crudExpose.doRefresh();
 });
 </script>
diff --git a/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx b/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx
index d7cd5bc9d..4b4470b8d 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, ScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/advanced/linkage/index.vue b/packages/ui/certd-client/src/views/crud/advanced/linkage/index.vue
index da5f66208..bbd063b5c 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/linkage/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/linkage/index.vue
@@ -4,18 +4,19 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "FormLinkage",
   setup() {
-    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
-    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions, context: customValue });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/index.vue b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/index.vue
index f4a8a19b4..fc15de263 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/index.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose, useFs } from "@fast-crud/fast-crud";
+import { useCrud, useExpose, useFs, useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import { GetList } from "./api";
 
@@ -24,21 +24,17 @@ import { GetList } from "./api";
 export default defineComponent({
   name: "AdvanceLocalPagination",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-
+    const { crudRef, crudBinding, crudExpose } = useFsRef();
     const localDataRef = ref();
-
+    const context = { localDataRef };
+    // 页面打开后获取列表数据
     onMounted(async () => {
       //先加载后台数据
       const ret = await GetList({ page: { offset: 0, limit: 99999999 }, query: {}, sort: {} });
       localDataRef.value = ret.records;
 
-      const { crudExpose } = useFs({ crudBinding, crudRef, createCrudOptions, context: { localDataRef } });
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
 
-      // 页面打开后获取列表数据
       await crudExpose.doRefresh();
     });
 
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.tsx b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.tsx
index ddbccd599..a1aa45367 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/index.vue b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/index.vue
index fdba51d2b..899567c54 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/index.vue
@@ -9,16 +9,18 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud.js";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "AsideTable",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/index.vue b/packages/ui/certd-client/src/views/crud/advanced/nest/index.vue
index 53c5c6c01..b04c54be9 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/index.vue
@@ -17,7 +17,7 @@
 import { defineComponent, onMounted, ref } from "vue";
 import createCrudOptions from "./crud.js";
 import AsideTable from "./aside-table/index.vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureNest",
@@ -26,11 +26,14 @@ export default defineComponent({
   setup() {
     const asideTableRef = ref();
 
-    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions, context: { asideTableRef } });
+    let context = { asideTableRef };
+    const { crudRef, crudBinding, crudExpose } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue
index 65a833f80..9310b4640 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue
@@ -10,7 +10,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, watch } from "vue";
 import createCrudOptions from "./crud";
-import {useFs, utils} from "@fast-crud/fast-crud";
+import { useFs, useFsAsync, useFsRef, utils } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "SubTable",
@@ -20,11 +20,14 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, ctx) {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { props, ctx } });
+    const context = { props, ctx };
+    const { crudRef, crudBinding, crudExpose } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     //你的业务代码
diff --git a/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.tsx
index ad9dc9be5..01b33ccc3 100644
--- a/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/index.vue b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/index.vue
index 38336f41b..9a97c1ed2 100644
--- a/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/index.vue
@@ -12,24 +12,17 @@
   </fs-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
+<script lang="ts" setup>
+import { onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs, UseFsProps } from "@fast-crud/fast-crud";
-export default defineComponent({
-  name: "BasisColumnMergePlugin",
-  setup() {
-    const context: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
-    // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
-    });
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
-    return {
-      crudBinding,
-      crudRef
-    };
-  }
+const context: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+
+const { crudRef, crudBinding } = useFsRef();
+// 页面打开后获取列表数据
+onMounted(async () => {
+  const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions, context });
+  await crudExpose.doRefresh();
 });
 </script>
diff --git a/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx
index 2316f74e1..1be0cfec5 100644
--- a/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api.js";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
 import { computed } from "vue";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const { crudBinding } = crudExpose;
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
diff --git a/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue b/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue
index 8fda6906b..ecfb59063 100644
--- a/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue
@@ -16,17 +16,18 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
 
 export default defineComponent({
   name: "BasisColumnsSet",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudRef, crudBinding, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     function columnsSetToggleMode() {
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute-more/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/compute-more/crud.tsx
index 6fec4dbdc..89b35e90e 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute-more/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/compute-more/crud.tsx
@@ -3,7 +3,7 @@ import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq,
 import { computed, ref, shallowRef } from "vue";
 import ShallowComponent from "/@/views/crud/basis/compute-more/shallow-component.vue";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue b/packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue
index 8e806baa9..491eb6fa1 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue
@@ -12,23 +12,22 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFs, useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "BasisComputeMore",
   setup() {
-    const { crudBinding, crudRef, crudExpose, output } = useFs({ createCrudOptions });
-
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions, context });
+      await crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
-      crudRef,
-      ...output
+      crudRef
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx
index a0e408540..1848d260d 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx
@@ -5,7 +5,7 @@ import { message } from "ant-design-vue";
 import { computed } from "vue";
 
 const { asyncCompute, compute } = useCompute();
-export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose, context }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute/index.vue b/packages/ui/certd-client/src/views/crud/basis/compute/index.vue
index d8907267c..03d666c28 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/compute/index.vue
@@ -27,7 +27,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFs, useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
@@ -53,13 +53,15 @@ export default defineComponent({
       columnComponentShowComputed
     };
 
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
+    const { crudRef, crudBinding } = useFsRef();
+
     function columnsMapSetShow() {
       crudBinding.value.table.columnsMap["id"].show = !crudBinding.value.table.columnsMap["id"].show;
     }
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions, context });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx
index 4845265bf..727dd4acb 100644
--- a/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx
@@ -4,7 +4,7 @@ import { shallowRef } from "vue";
 import VmodelCounter from "./vmodel-counter.vue";
 import { message } from "ant-design-vue";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/index.vue b/packages/ui/certd-client/src/views/crud/basis/custom/index.vue
index 461dfbcc3..847f6211c 100644
--- a/packages/ui/certd-client/src/views/crud/basis/custom/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/custom/index.vue
@@ -9,23 +9,23 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud.js";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "BasisCustom",
   setup() {
-    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudRef, crudBinding, createCrudOptions, context });
+      await crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
-      crudRef,
-      ...context
+      crudRef
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/basis/first/crud.ts b/packages/ui/certd-client/src/views/crud/basis/first/crud.ts
index 3f8e5c297..bfd3f7951 100644
--- a/packages/ui/certd-client/src/views/crud/basis/first/crud.ts
+++ b/packages/ui/certd-client/src/views/crud/basis/first/crud.ts
@@ -1,4 +1,4 @@
-import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery } from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery } from "@fast-crud/fast-crud";
 import * as api from "./api";
 import { FirstRow } from "./api";
 
@@ -8,7 +8,7 @@ import { FirstRow } from "./api";
 export type FirstContext = {
   test?: number;
 };
-export default function ({ crudExpose, context }: CreateCrudOptionsProps<FirstRow, FirstContext>): CreateCrudOptionsRet<FirstRow> {
+export default async function ({ crudExpose, context }: CreateCrudOptionsProps<FirstRow, FirstContext>): Promise<CreateCrudOptionsRet<FirstRow>> {
   context.test = 111;
   return {
     crudOptions: {
diff --git a/packages/ui/certd-client/src/views/crud/basis/first/index.vue b/packages/ui/certd-client/src/views/crud/basis/first/index.vue
index 2bb18446f..838f9b17d 100644
--- a/packages/ui/certd-client/src/views/crud/basis/first/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/first/index.vue
@@ -12,92 +12,23 @@
   </fs-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
-import { useFs, utils } from "@fast-crud/fast-crud";
+<script lang="ts" setup>
+import { nextTick, onMounted } from "vue";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions, { FirstContext } from "./crud";
-import { TourProps } from "ant-design-vue";
 import { FirstRow } from "./api";
+import { useTour } from "./use-tour";
 
-//此处为组件定义
-export default defineComponent({
-  name: "FsCrudFirst",
-  setup() {
-    // // crud组件的ref
-    // const crudRef: Ref = ref();
-    // // crud 配置的ref
-    // const crudBinding: Ref<CrudBinding> = ref();
-    // // 暴露的方法
-    // const { crudExpose } = useExpose({ crudRef, crudBinding });
-    // // 你的crud配置
-    // const { crudOptions, customExport } = createCrudOptions({ crudExpose, customValue });
-    // // 初始化crud配置
-    // const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
+const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
-    //  =======以上为fs的初始化代码=========
-    //  =======你可以简写为下面这一行========
-    const { crudRef, crudBinding, crudExpose, context } = useFs<FirstRow, FirstContext>({ createCrudOptions, context: {} });
+const { open, current, steps, handleOpen } = useTour();
 
-    utils.logger.info("test", context.test);
-
-    function useTour() {
-      const open = ref<boolean>(false);
-      const current = ref(0);
-      //帮助向导
-      const steps: TourProps["steps"] = [
-        {
-          title: "查询",
-          description: "查询数据.",
-          target: () => {
-            return document.querySelector(".page-first .fs-search-btn-search") as HTMLElement;
-          }
-        },
-        {
-          title: "重置",
-          description: "重置查询条件.",
-          target: () => {
-            return document.querySelector(".page-first .fs-search-btn-reset") as HTMLElement;
-          }
-        },
-        {
-          title: "添加",
-          description: "打开添加对话框",
-          target: () => {
-            return document.querySelector(".page-first .fs-actionbar-btn-add") as HTMLElement;
-          }
-        },
-        {
-          title: "刷新列表",
-          description: "刷新列表",
-          target: () => {
-            return document.querySelector(".page-first .fs-toolbar-btn-refresh") as HTMLElement;
-          }
-        }
-      ];
-
-      const handleOpen = (val: boolean): void => {
-        open.value = val;
-      };
-
-      return {
-        open,
-        current,
-        steps,
-        handleOpen
-      };
-    }
-    const tour = useTour();
-
-    // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
-      tour.handleOpen(true);
-    });
-    return {
-      crudBinding,
-      crudRef,
-      ...tour
-    };
-  }
+// 页面打开后获取列表数据
+onMounted(async () => {
+  const { crudExpose } = await useFsAsync<FirstRow, FirstContext>({ crudRef, crudBinding, createCrudOptions, context });
+  await crudExpose.doRefresh();
+  await nextTick();
+  await nextTick();
+  handleOpen(true);
 });
 </script>
diff --git a/packages/ui/certd-client/src/views/crud/basis/first/use-tour.ts b/packages/ui/certd-client/src/views/crud/basis/first/use-tour.ts
new file mode 100644
index 000000000..1ed412980
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/first/use-tour.ts
@@ -0,0 +1,50 @@
+import { ref, Ref } from "vue";
+import { TourProps } from "ant-design-vue";
+
+export function useTour() {
+  const open = ref<boolean>(false);
+  const current = ref(0);
+  //帮助向导
+  const steps: Ref<TourProps["steps"]> = ref([]);
+
+  const handleOpen = (val: boolean): void => {
+    open.value = val;
+    steps.value = [
+      {
+        title: "查询",
+        description: "查询数据.",
+        target: () => {
+          return document.querySelector(".page-first .fs-search-btn-search") as HTMLElement;
+        }
+      },
+      {
+        title: "重置",
+        description: "重置查询条件.",
+        target: () => {
+          return document.querySelector(".page-first .fs-search-btn-reset") as HTMLElement;
+        }
+      },
+      {
+        title: "添加",
+        description: "打开添加对话框",
+        target: () => {
+          return document.querySelector(".page-first .fs-actionbar-btn-add") as HTMLElement;
+        }
+      },
+      {
+        title: "刷新列表",
+        description: "刷新列表",
+        target: () => {
+          return document.querySelector(".page-first .fs-toolbar-btn-refresh") as HTMLElement;
+        }
+      }
+    ];
+  };
+
+  return {
+    open,
+    current,
+    steps,
+    handleOpen
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/basis/helloworld/index.vue b/packages/ui/certd-client/src/views/crud/basis/helloworld/index.vue
index 2345430b4..602b48327 100644
--- a/packages/ui/certd-client/src/views/crud/basis/helloworld/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/helloworld/index.vue
@@ -10,13 +10,13 @@
   </fs-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, onMounted, reactive } from "vue";
-import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useCrud, useFs, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useFsAsync, useFsRef, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import _ from "lodash-es";
 
 //此处为crudOptions配置
-const createCrudOptions = function ({}: CreateCrudOptionsProps): CreateCrudOptionsRet {
+const createCrudOptions = async function ({}: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   //本地模拟后台crud接口方法 ----开始
   const records = [{ id: 1, name: "Hello World", type: 1 }];
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
@@ -85,32 +85,13 @@ const createCrudOptions = function ({}: CreateCrudOptionsProps): CreateCrudOptio
 };
 
 //此处为组件定义
-export default defineComponent({
-  name: "FsCrudHelloWorld",
-  setup() {
-    // // crud组件的ref
-    // const crudRef: Ref = ref();
-    // // crud 配置的ref
-    // const crudBinding: Ref<CrudBinding> = ref();
-    // // 暴露的方法
-    // const { crudExpose } = useExpose({ crudRef, crudBinding });
-    // // 你的crud配置
-    // const { crudOptions, customExport } = createCrudOptions({ crudExpose, context });
-    // // 初始化crud配置
-    // const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
+const { crudRef, crudBinding } = useFsRef();
+// 自定义变量上下文, 将会传递给createCrudOptions, 比如直接把props,和ctx直接传过去使用
+const context: any = {};
 
-    //  =======以上为fs的初始化代码=========
-    //  =======你可以简写为下面这一行========
-    const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: {} });
-
-    // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
-    });
-    return {
-      crudBinding,
-      crudRef
-    };
-  }
+// 页面打开后获取列表数据
+onMounted(async () => {
+  const { crudExpose } = await useFsAsync({ crudRef, crudBinding, createCrudOptions, context });
+  await crudExpose.doRefresh();
 });
 </script>
diff --git a/packages/ui/certd-client/src/views/crud/basis/i18n/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/i18n/crud.tsx
index 1cc13c447..821c12dd8 100644
--- a/packages/ui/certd-client/src/views/crud/basis/i18n/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/i18n/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { useI18n } from "vue-i18n";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/basis/i18n/index.vue b/packages/ui/certd-client/src/views/crud/basis/i18n/index.vue
index 9a53a5b2a..bb06ce373 100644
--- a/packages/ui/certd-client/src/views/crud/basis/i18n/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/i18n/index.vue
@@ -17,16 +17,17 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud.js";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "BasisI18n",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = useFsAsync({ crudBinding, crudRef, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.tsx
index 7beac6106..5fc4cb480 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { computed } from "vue";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-card/index.vue b/packages/ui/certd-client/src/views/crud/basis/layout-card/index.vue
index 1c69a31d1..a27387f7e 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-card/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-card/index.vue
@@ -17,16 +17,18 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "BasisLayoutCard",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.tsx
index 29fbe63f3..13a7d9cc8 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import CustomLayout from "./custom-layout.vue";
 import { shallowRef } from "vue";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-custom/index.vue b/packages/ui/certd-client/src/views/crud/basis/layout-custom/index.vue
index 0f2e1ab28..1731a7a56 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-custom/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-custom/index.vue
@@ -15,17 +15,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "BasisLayoutCustom",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/basis/plugin/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/plugin/crud.tsx
index 56c837de0..6728a0803 100644
--- a/packages/ui/certd-client/src/views/crud/basis/plugin/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/plugin/crud.tsx
@@ -1,8 +1,8 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
-import { ref } from "vue";
+import { ref, Ref } from "vue";
 
-export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose, context }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/basis/plugin/index.vue b/packages/ui/certd-client/src/views/crud/basis/plugin/index.vue
index 0aadb6fed..0474729b5 100644
--- a/packages/ui/certd-client/src/views/crud/basis/plugin/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/plugin/index.vue
@@ -12,7 +12,7 @@
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #pagination-left>
         <a-tooltip title="批量删除">
-          <fs-button icon="DeleteOutlined" @click="handleBatchDelete"></fs-button>
+          <fs-button icon="DeleteOutlined" @click="context.handleBatchDelete"></fs-button>
         </a-tooltip>
       </template>
     </fs-crud>
@@ -22,41 +22,43 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import { message, Modal } from "ant-design-vue";
 import { BatchDelete } from "./api";
 
 export default defineComponent({
   name: "BasisPlugin",
   setup() {
-    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
-    const selectedRowKeys = context.selectedRowKeys;
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
-    });
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
 
-    const handleBatchDelete = () => {
-      if (selectedRowKeys.value?.length > 0) {
-        Modal.confirm({
-          title: "确认",
-          content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
-          async onOk() {
-            await BatchDelete(selectedRowKeys.value);
-            message.info("删除成功");
-            crudExpose.doRefresh();
-            selectedRowKeys.value = [];
-          }
-        });
-      } else {
-        message.error("请先勾选记录");
-      }
-    };
+      context.handleBatchDelete = () => {
+        const { selectedRowKeys } = context;
+        if (selectedRowKeys.value?.length > 0) {
+          Modal.confirm({
+            title: "确认",
+            content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
+            async onOk() {
+              await BatchDelete(selectedRowKeys.value);
+              message.info("删除成功");
+              await crudExpose.doRefresh();
+              selectedRowKeys.value = [];
+            }
+          });
+        } else {
+          message.error("请先勾选记录");
+        }
+      };
+
+      await crudExpose.doRefresh();
+    });
 
     return {
       crudBinding,
       crudRef,
-      handleBatchDelete
+      context
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/basis/reset/index.vue b/packages/ui/certd-client/src/views/crud/basis/reset/index.vue
index 6da58da6c..8c05f18e4 100644
--- a/packages/ui/certd-client/src/views/crud/basis/reset/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/reset/index.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { CrudOptions, DynamicType, useFs, UseFsProps } from "@fast-crud/fast-crud";
+import { CrudOptions, DynamicType, useFs, UseFsProps, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 import _ from "lodash-es";
 export default defineComponent({
@@ -39,8 +39,8 @@ export default defineComponent({
     }, 2000);
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/basis/ts/crud.ts b/packages/ui/certd-client/src/views/crud/basis/ts/crud.ts
index 92bd155ee..578c1e85a 100644
--- a/packages/ui/certd-client/src/views/crud/basis/ts/crud.ts
+++ b/packages/ui/certd-client/src/views/crud/basis/ts/crud.ts
@@ -8,7 +8,7 @@ import { TsTestRow } from "./api";
 export type TsTestContext = {
   test?: number;
 };
-export default function ({ crudExpose, context }: CreateCrudOptionsProps<TsTestRow, TsTestContext>): CreateCrudOptionsRet<TsTestRow> {
+export default async function ({ crudExpose, context }: CreateCrudOptionsProps<TsTestRow, TsTestContext>): Promise<CreateCrudOptionsRet<TsTestRow>> {
   context.test = 111;
   return {
     crudOptions: {
diff --git a/packages/ui/certd-client/src/views/crud/basis/ts/index.vue b/packages/ui/certd-client/src/views/crud/basis/ts/index.vue
index e1a8dd286..75541b963 100644
--- a/packages/ui/certd-client/src/views/crud/basis/ts/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/ts/index.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
-import { useFs, utils } from "@fast-crud/fast-crud";
+import { defineComponent, onMounted } from "vue";
+import { useFsAsync, useFsRef, utils } from "@fast-crud/fast-crud";
 import createCrudOptions, { TsTestContext } from "./crud";
 import { TsTestRow } from "./api";
 
@@ -18,25 +18,13 @@ import { TsTestRow } from "./api";
 export default defineComponent({
   name: "FsCrudTsTest",
   setup() {
-    // // crud组件的ref
-    // const crudRef: Ref = ref();
-    // // crud 配置的ref
-    // const crudBinding: Ref<CrudBinding> = ref();
-    // // 暴露的方法
-    // const { crudExpose } = useExpose({ crudRef, crudBinding });
-    // // 你的crud配置
-    // const { crudOptions, customExport } = createCrudOptions({ crudExpose, customValue });
-    // // 初始化crud配置
-    // const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
-    //  =======以上为fs的初始化代码=========
-    //  =======你可以简写为下面这一行========
-    const { crudRef, crudBinding, crudExpose, context } = useFs<TsTestRow, TsTestContext>({ createCrudOptions, context: {} });
-
-    utils.logger.info("test", context.test);
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync<TsTestRow, TsTestContext>({ crudRef, crudBinding, createCrudOptions, context });
+      utils.logger.info("test", context.test);
+      await crudExpose.doRefresh();
     });
     return {
       crudBinding,
diff --git a/packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx
index abafc4e26..0b1d9527d 100644
--- a/packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx
@@ -1,19 +1,8 @@
 import * as api from "./api";
 import { message } from "ant-design-vue";
-import {
-  AddReq,
-  CreateCrudOptionsProps,
-  CreateCrudOptionsRet,
-  DelReq,
-  dict,
-  EditReq,
-  UserPageQuery,
-  UserPageRes,
-  utils,
-  ValueChangeContext
-} from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils, ValueChangeContext } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/basis/value-change/index.vue b/packages/ui/certd-client/src/views/crud/basis/value-change/index.vue
index 642e59734..f073f2992 100644
--- a/packages/ui/certd-client/src/views/crud/basis/value-change/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/value-change/index.vue
@@ -12,23 +12,24 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "BasisValueChange",
   setup() {
-    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudRef, crudBinding, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
       crudRef,
-      ...context
+      context
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/component/button/crud.tsx b/packages/ui/certd-client/src/views/crud/component/button/crud.tsx
index 3178c64de..bc05bf3c0 100644
--- a/packages/ui/certd-client/src/views/crud/component/button/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/button/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/button/index.vue b/packages/ui/certd-client/src/views/crud/component/button/index.vue
index 2e9490d33..110204136 100644
--- a/packages/ui/certd-client/src/views/crud/component/button/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/button/index.vue
@@ -7,17 +7,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "ComponentButton",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx b/packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx
index a81e1f07d..0b4c47ddb 100644
--- a/packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { requestForMock } from "/src/api/service";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils, useUi } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/cascader/index.vue b/packages/ui/certd-client/src/views/crud/component/cascader/index.vue
index 21364b10c..3e52376ed 100644
--- a/packages/ui/certd-client/src/views/crud/component/cascader/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/cascader/index.vue
@@ -7,16 +7,17 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud.js";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "ComponentCascader",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx b/packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx
index bc8bb5446..b297fde92 100644
--- a/packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils, useUi } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/checkbox/index.vue b/packages/ui/certd-client/src/views/crud/component/checkbox/index.vue
index afb6bdd5c..d7c0df8ee 100644
--- a/packages/ui/certd-client/src/views/crud/component/checkbox/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/checkbox/index.vue
@@ -6,17 +6,19 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "ComponentCheckbox",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/date/crud.tsx b/packages/ui/certd-client/src/views/crud/component/date/crud.tsx
index fc42e76a7..3fd06a44b 100644
--- a/packages/ui/certd-client/src/views/crud/component/date/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/date/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, ScopeContext, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
 import dayjs from "dayjs";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/date/index.vue b/packages/ui/certd-client/src/views/crud/component/date/index.vue
index be5473bc7..0e81c3fb6 100644
--- a/packages/ui/certd-client/src/views/crud/component/date/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/date/index.vue
@@ -11,16 +11,16 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud.js";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "ComponentDate",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
-
+    const { crudRef, crudBinding } = useFsRef();
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/editor/crud.tsx b/packages/ui/certd-client/src/views/crud/component/editor/crud.tsx
index 5b0b7d224..e3975b86f 100644
--- a/packages/ui/certd-client/src/views/crud/component/editor/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/editor/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { utils, dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq, ScopeContext } from "@fast-crud/fast-crud";
 import { FsUploaderFormOptions } from "@fast-crud/fast-extends";
 import "./editor.css";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/editor/index.vue b/packages/ui/certd-client/src/views/crud/component/editor/index.vue
index e35c9adc9..5438b8b4a 100644
--- a/packages/ui/certd-client/src/views/crud/component/editor/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/editor/index.vue
@@ -10,17 +10,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "ComponentEditor",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/icon/crud.tsx b/packages/ui/certd-client/src/views/crud/component/icon/crud.tsx
index 2ede7c46b..9fd339706 100644
--- a/packages/ui/certd-client/src/views/crud/component/icon/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/icon/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/icon/index.vue b/packages/ui/certd-client/src/views/crud/component/icon/index.vue
index 1b6be1c81..6c12bfc9f 100644
--- a/packages/ui/certd-client/src/views/crud/component/icon/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/icon/index.vue
@@ -7,16 +7,17 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref } from "vue";
 import createCrudOptions from "./crud.js";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "ComponentIcon",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     const value = ref(null);
diff --git a/packages/ui/certd-client/src/views/crud/component/independent/index.vue b/packages/ui/certd-client/src/views/crud/component/independent/index.vue
index e829e4612..9bcc9ea5b 100644
--- a/packages/ui/certd-client/src/views/crud/component/independent/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/independent/index.vue
@@ -46,7 +46,7 @@
 <script lang="ts" setup>
 import { reactive, ref } from "vue";
 import { message } from "ant-design-vue";
-import {dict, useUi, utils} from "@fast-crud/fast-crud";
+import { dict, useUi, utils } from "@fast-crud/fast-crud";
 import dayjs from "dayjs";
 import { FsUploaderS3, loadUploader, useUploader } from "@fast-crud/fast-extends";
 import createCrudOptionsText from "/@/views/crud/component/text/crud";
diff --git a/packages/ui/certd-client/src/views/crud/component/json/crud.tsx b/packages/ui/certd-client/src/views/crud/component/json/crud.tsx
index b57abafb1..0d5779831 100644
--- a/packages/ui/certd-client/src/views/crud/component/json/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/json/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, ValueBuilderContext, ValueResolveContext } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/json/index.vue b/packages/ui/certd-client/src/views/crud/component/json/index.vue
index 1d854ac31..4ef32cd03 100644
--- a/packages/ui/certd-client/src/views/crud/component/json/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/json/index.vue
@@ -6,17 +6,19 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "ComponentJson",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/number/crud.tsx b/packages/ui/certd-client/src/views/crud/component/number/crud.tsx
index a72f88bc3..3b66ba9e1 100644
--- a/packages/ui/certd-client/src/views/crud/component/number/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/number/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/number/index.vue b/packages/ui/certd-client/src/views/crud/component/number/index.vue
index 5453d792c..9630de02b 100644
--- a/packages/ui/certd-client/src/views/crud/component/number/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/number/index.vue
@@ -7,16 +7,17 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud.js";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "ComponentNumber",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/phone/crud.tsx b/packages/ui/certd-client/src/views/crud/component/phone/crud.tsx
index 61ce91311..0564da418 100644
--- a/packages/ui/certd-client/src/views/crud/component/phone/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/phone/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, ScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { SearchOutlined } from "@ant-design/icons-vue";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/phone/index.vue b/packages/ui/certd-client/src/views/crud/component/phone/index.vue
index 26ad7545b..181b80830 100644
--- a/packages/ui/certd-client/src/views/crud/component/phone/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/phone/index.vue
@@ -15,17 +15,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "ComponentPhone",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/radio/crud.tsx b/packages/ui/certd-client/src/views/crud/component/radio/crud.tsx
index a1dcab438..0644bc7f0 100644
--- a/packages/ui/certd-client/src/views/crud/component/radio/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/radio/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, useUi, utils } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/radio/index.vue b/packages/ui/certd-client/src/views/crud/component/radio/index.vue
index 61eb616e9..0c40b982f 100644
--- a/packages/ui/certd-client/src/views/crud/component/radio/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/radio/index.vue
@@ -7,16 +7,17 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref } from "vue";
 import createCrudOptions from "./crud.js";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "ComponentRadio",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     const value = ref(null);
diff --git a/packages/ui/certd-client/src/views/crud/component/select/crud.tsx b/packages/ui/certd-client/src/views/crud/component/select/crud.tsx
index 2a286bfe9..2c226fed2 100644
--- a/packages/ui/certd-client/src/views/crud/component/select/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/select/crud.tsx
@@ -41,7 +41,7 @@ function useSearchRemote() {
     searchState: state
   };
 }
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose, context }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
@@ -75,6 +75,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
     dictRef.data.push({ id: "xg", text: "香港" });
     //dictRef.toMap();
   }
+  context.dynamicUpdateDictOptions = dynamicUpdateDictOptions;
 
   const { ui } = useUi();
 
diff --git a/packages/ui/certd-client/src/views/crud/component/select/index.vue b/packages/ui/certd-client/src/views/crud/component/select/index.vue
index d778ca0a2..797916885 100644
--- a/packages/ui/certd-client/src/views/crud/component/select/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/select/index.vue
@@ -2,31 +2,32 @@
   <fs-page>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-button @click="dynamicUpdateDictOptions">动态增加选项</a-button>
+        <a-button @click="context.dynamicUpdateDictOptions">动态增加选项</a-button>
       </template>
     </fs-crud>
   </fs-page>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { defineComponent, onMounted, ref } from "vue";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "ComponentSelect",
   setup() {
-    const { crudBinding, crudRef, crudExpose, dynamicUpdateDictOptions } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions, context });
+      await crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
       crudRef,
-      dynamicUpdateDictOptions
+      context
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/component/switch/crud.tsx b/packages/ui/certd-client/src/views/crud/component/switch/crud.tsx
index 73430ce0c..c06332886 100644
--- a/packages/ui/certd-client/src/views/crud/component/switch/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/switch/crud.tsx
@@ -11,7 +11,7 @@ import {
   AddReq,
   utils
 } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/switch/index.vue b/packages/ui/certd-client/src/views/crud/component/switch/index.vue
index 67f85dac4..cc7d5a3d7 100644
--- a/packages/ui/certd-client/src/views/crud/component/switch/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/switch/index.vue
@@ -6,17 +6,19 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "ComponentSwitch",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/table-select/crud.tsx b/packages/ui/certd-client/src/views/crud/component/table-select/crud.tsx
index 730640d37..d52400cef 100644
--- a/packages/ui/certd-client/src/views/crud/component/table-select/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/table-select/crud.tsx
@@ -3,7 +3,7 @@ import * as textTableApi from "../text/api";
 import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, useUi } from "@fast-crud/fast-crud";
 import createCrudOptionsText from "../text/crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/table-select/index.vue b/packages/ui/certd-client/src/views/crud/component/table-select/index.vue
index 3e83e4e97..09a8a67d9 100644
--- a/packages/ui/certd-client/src/views/crud/component/table-select/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/table-select/index.vue
@@ -26,17 +26,19 @@
 import createCrudOptionsText from "../text/crud";
 import { defineComponent, onMounted, ref } from "vue";
 import createCrudOptions from "./crud.js";
-import { dict, useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef, dict } from "@fast-crud/fast-crud";
 import * as textTableApi from "/@/views/crud/component/text/api";
 
 export default defineComponent({
   name: "ComponentTableSelect",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     const value = ref(null);
diff --git a/packages/ui/certd-client/src/views/crud/component/text/index.vue b/packages/ui/certd-client/src/views/crud/component/text/index.vue
index 698daef5b..9ab988c43 100644
--- a/packages/ui/certd-client/src/views/crud/component/text/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/text/index.vue
@@ -15,17 +15,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "ComponentText",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/tree/crud.tsx b/packages/ui/certd-client/src/views/crud/component/tree/crud.tsx
index 385b9d6e1..49c980a2c 100644
--- a/packages/ui/certd-client/src/views/crud/component/tree/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/tree/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, useUi, utils } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/tree/index.vue b/packages/ui/certd-client/src/views/crud/component/tree/index.vue
index 41c63c5f3..b9e1c42fe 100644
--- a/packages/ui/certd-client/src/views/crud/component/tree/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/tree/index.vue
@@ -6,17 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "ComponentTree",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/crud.tsx b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/crud.tsx
index 3cdb301e7..7a1906218 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/index.vue
index f1343b874..7c51b9c3e 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/index.vue
@@ -6,17 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "AliossUploader",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cos/crud.tsx b/packages/ui/certd-client/src/views/crud/component/uploader/cos/crud.tsx
index 0edcd5105..c42bee6af 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cos/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cos/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { requestForMock } from "/src/api/service";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cos/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/cos/index.vue
index 1411fbc0a..c45cbc09c 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cos/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cos/index.vue
@@ -6,17 +6,19 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "CosUploader",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/crud.tsx b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/crud.tsx
index 36b3c7217..56008fb36 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/index.vue
index 3a569cb72..0a3f7e0f2 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/index.vue
@@ -6,17 +6,19 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "CropperUploader",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/form/crud.tsx b/packages/ui/certd-client/src/views/crud/component/uploader/form/crud.tsx
index f477097b4..244ee033e 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/form/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/form/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
 import { createUploaderRules } from "@fast-crud/fast-extends";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/form/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/form/index.vue
index 87ac316d5..734c6e6bb 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/form/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/form/index.vue
@@ -6,17 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "ComponentUploader",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/crud.tsx b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/crud.tsx
index cd758fe09..57e3d490b 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/index.vue
index 3413275f1..46168a732 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/index.vue
@@ -6,17 +6,19 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "QiniuUploader",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/s3/crud.tsx b/packages/ui/certd-client/src/views/crud/component/uploader/s3/crud.tsx
index 936c99d27..3acb4c8ea 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/s3/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { GetSignedUrl } from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/s3/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/s3/index.vue
index af1cf4f08..152c184e6 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/s3/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/index.vue
@@ -15,16 +15,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "S3Uploader",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/debug/crud.tsx b/packages/ui/certd-client/src/views/crud/debug/crud.tsx
index cc5abc458..dfa6d5773 100644
--- a/packages/ui/certd-client/src/views/crud/debug/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/debug/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
 import { computed, Ref, ref } from "vue";
 import dayjs from "dayjs";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/debug/index.vue b/packages/ui/certd-client/src/views/crud/debug/index.vue
index 352388525..cc7f38994 100644
--- a/packages/ui/certd-client/src/views/crud/debug/index.vue
+++ b/packages/ui/certd-client/src/views/crud/debug/index.vue
@@ -6,17 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "DebugSelect",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/dict/cloneable/crud.tsx b/packages/ui/certd-client/src/views/crud/dict/cloneable/crud.tsx
index b60884f15..cf7dfc507 100644
--- a/packages/ui/certd-client/src/views/crud/dict/cloneable/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/dict/cloneable/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, ValueChangeContext } from "@fast-crud/fast-crud";
-export default function createCrudOptions({}: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function createCrudOptions({}: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/dict/cloneable/index.vue b/packages/ui/certd-client/src/views/crud/dict/cloneable/index.vue
index 89ce6c7ac..ea5b4a857 100644
--- a/packages/ui/certd-client/src/views/crud/dict/cloneable/index.vue
+++ b/packages/ui/certd-client/src/views/crud/dict/cloneable/index.vue
@@ -19,17 +19,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "DictCloneable",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/dict/prototype/crud.tsx b/packages/ui/certd-client/src/views/crud/dict/prototype/crud.tsx
index 0be5c66f7..2c663590e 100644
--- a/packages/ui/certd-client/src/views/crud/dict/prototype/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/dict/prototype/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
 import { requestForMock } from "../../../../api/service";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/dict/prototype/index.vue b/packages/ui/certd-client/src/views/crud/dict/prototype/index.vue
index f714e9a99..3f23ffdd4 100644
--- a/packages/ui/certd-client/src/views/crud/dict/prototype/index.vue
+++ b/packages/ui/certd-client/src/views/crud/dict/prototype/index.vue
@@ -19,17 +19,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "DictPrototype",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/manager/crud.tsx b/packages/ui/certd-client/src/views/crud/dict/shared/manager/crud.tsx
index d813167e4..2e6889c29 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/manager/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/manager/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api.js";
 import { statusDict } from "../shared-dict";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/manager/index.vue b/packages/ui/certd-client/src/views/crud/dict/shared/manager/index.vue
index 27c76e73b..732b73991 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/manager/index.vue
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/manager/index.vue
@@ -12,18 +12,19 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "DictSharedManager",
   setup() {
-    const context: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions, context });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/use/crud.tsx b/packages/ui/certd-client/src/views/crud/dict/shared/use/crud.tsx
index 9f46452ef..958c7a557 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/use/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/use/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api.js";
 import { statusDict } from "../shared-dict";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/use/index.vue b/packages/ui/certd-client/src/views/crud/dict/shared/use/index.vue
index 951446181..27b4638c4 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/use/index.vue
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/use/index.vue
@@ -12,19 +12,20 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "DictSharedUse",
   setup() {
     // crud组件的ref
-    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
-    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions, context: customValue });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions, context });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/dict/single/crud.tsx b/packages/ui/certd-client/src/views/crud/dict/single/crud.tsx
index 47aea7f11..f6a4e0e2e 100644
--- a/packages/ui/certd-client/src/views/crud/dict/single/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/dict/single/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/dict/single/index.vue b/packages/ui/certd-client/src/views/crud/dict/single/index.vue
index 332669c46..30655b5da 100644
--- a/packages/ui/certd-client/src/views/crud/dict/single/index.vue
+++ b/packages/ui/certd-client/src/views/crud/dict/single/index.vue
@@ -19,17 +19,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import {useFs, utils} from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync, utils } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "DictSingle",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     function onClick() {
diff --git a/packages/ui/certd-client/src/views/crud/editable/cell/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/cell/crud.tsx
index 2be88ec65..42c3be221 100644
--- a/packages/ui/certd-client/src/views/crud/editable/cell/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/editable/cell/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditableEachCellsOpts, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { reactive, ref } from "vue";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const { crudBinding } = crudExpose;
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
diff --git a/packages/ui/certd-client/src/views/crud/editable/cell/index.vue b/packages/ui/certd-client/src/views/crud/editable/cell/index.vue
index aee84e26c..c638dd5f2 100644
--- a/packages/ui/certd-client/src/views/crud/editable/cell/index.vue
+++ b/packages/ui/certd-client/src/views/crud/editable/cell/index.vue
@@ -41,19 +41,20 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs, utils } from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync, utils } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
 
 export default defineComponent({
   name: "EditableCell",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
       //默认启用编辑
-      crudExpose.editable.enable({});
+      await crudExpose.editable.enable({});
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/editable/free/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/free/crud.tsx
index 42935db02..c100e4ec8 100644
--- a/packages/ui/certd-client/src/views/crud/editable/free/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/editable/free/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const { crudBinding } = crudExpose;
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
diff --git a/packages/ui/certd-client/src/views/crud/editable/free/index.vue b/packages/ui/certd-client/src/views/crud/editable/free/index.vue
index 5cda40bf0..8ac84e63f 100644
--- a/packages/ui/certd-client/src/views/crud/editable/free/index.vue
+++ b/packages/ui/certd-client/src/views/crud/editable/free/index.vue
@@ -5,7 +5,7 @@
       <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/table.html#editable">文档</a></div>
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
+      <template v-if="crudBinding" #actionbar-right>
         <!--      <fs-button class="ml-1" @click="addRow">添加行</fs-button>-->
         <a-radio-group v-model:value="crudBinding.table.editable.enabled" class="ml-5">
           <a-radio-button :value="true">启用编辑</a-radio-button>
@@ -29,20 +29,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs, utils } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef, utils } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
 
 export default defineComponent({
   name: "EditableFree",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
-      crudExpose.editable.enable({ mode: "free" });
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
+      await crudExpose.editable.enable({ mode: "free" });
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/editable/menus/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/menus/crud.tsx
index 0d33a0a9c..be6adcbd5 100644
--- a/packages/ui/certd-client/src/views/crud/editable/menus/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/editable/menus/crud.tsx
@@ -1,7 +1,7 @@
-import * as api from "./api";
-import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
-import { nextTick, ref } from "vue";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+import { CreateCrudOptionsProps, CreateCrudOptionsRet } from "@fast-crud/fast-crud";
+import { ref } from "vue";
+
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   let idGen = 1;
   function nextId() {
     return idGen++;
@@ -15,17 +15,17 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
         buttons: {
           add: { show: false },
           addRow: {
-            show: true,
-            click: async () => {
-              crudExpose.editable.addRow({
-                active: true,
-                addRowFunc: () => {
-                  const row = { id: nextId() };
-                  crudBinding.value.data.push(row);
-                  return row;
-                }
-              });
-            }
+            show: true
+            // click: async () => {
+            //   crudExpose.editable.addRow({
+            //     active: true,
+            //     addRowFunc: () => {
+            //       const row = { id: nextId() };
+            //       crudBinding.value.data.push(row);
+            //       return row;
+            //     }
+            //   });
+            // }
           }
         }
       },
diff --git a/packages/ui/certd-client/src/views/crud/editable/menus/index.vue b/packages/ui/certd-client/src/views/crud/editable/menus/index.vue
index b0a4f29c8..826aacc4b 100644
--- a/packages/ui/certd-client/src/views/crud/editable/menus/index.vue
+++ b/packages/ui/certd-client/src/views/crud/editable/menus/index.vue
@@ -16,15 +16,17 @@
 <script lang="ts" setup>
 import { onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 defineOptions({
   name: "EditableRowVModel"
 });
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
 // 页面打开后获取列表数据
-onMounted(() => {
+onMounted(async () => {
+  await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
   // crudExpose.doRefresh();
   crudExpose.crudBinding.value.data = [];
   // crudExpose.editable.enable({});
diff --git a/packages/ui/certd-client/src/views/crud/editable/row/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/row/crud.tsx
index bb6de1dab..2a5c748f8 100644
--- a/packages/ui/certd-client/src/views/crud/editable/row/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/editable/row/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/editable/row/index.vue b/packages/ui/certd-client/src/views/crud/editable/row/index.vue
index c8f1f87f3..5c12dcf2d 100644
--- a/packages/ui/certd-client/src/views/crud/editable/row/index.vue
+++ b/packages/ui/certd-client/src/views/crud/editable/row/index.vue
@@ -18,16 +18,18 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import {useFs, utils} from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync, utils } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "EditableRow",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
       // crudExpose.editable.enable({});
     });
 
diff --git a/packages/ui/certd-client/src/views/crud/editable/sub-crud/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/sub-crud/crud.tsx
index ae225a8f3..2fe977036 100644
--- a/packages/ui/certd-client/src/views/crud/editable/sub-crud/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/editable/sub-crud/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
 import EditableRowSub from "/@/views/crud/editable/sub-crud/row/index.vue";
-export default function (props: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function (props: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const { crudBinding, crudRef } = props.crudExpose;
   const { crudExpose } = props;
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
diff --git a/packages/ui/certd-client/src/views/crud/editable/sub-crud/index.vue b/packages/ui/certd-client/src/views/crud/editable/sub-crud/index.vue
index 3d4594d98..020eee74f 100644
--- a/packages/ui/certd-client/src/views/crud/editable/sub-crud/index.vue
+++ b/packages/ui/certd-client/src/views/crud/editable/sub-crud/index.vue
@@ -18,17 +18,17 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs, utils } from "@fast-crud/fast-crud";
-import { message } from "ant-design-vue";
+import { useFsAsync, useFsRef, utils } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "EditableSubCrud",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/editable/sub-crud/row/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/sub-crud/row/crud.tsx
index 02833b9dd..8e02d6e74 100644
--- a/packages/ui/certd-client/src/views/crud/editable/sub-crud/row/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/editable/sub-crud/row/crud.tsx
@@ -1,6 +1,6 @@
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import * as api from "./api";
-export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose, context }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const { crudBinding } = crudExpose;
   const { parentIdRef } = context;
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
diff --git a/packages/ui/certd-client/src/views/crud/editable/sub-crud/row/index.vue b/packages/ui/certd-client/src/views/crud/editable/sub-crud/row/index.vue
index 5acc0d1cf..4c0fe622e 100644
--- a/packages/ui/certd-client/src/views/crud/editable/sub-crud/row/index.vue
+++ b/packages/ui/certd-client/src/views/crud/editable/sub-crud/row/index.vue
@@ -10,7 +10,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, watch, ref } from "vue";
 import createCrudOptions from "./crud";
-import { useFs, useUi, utils } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef, useUi, utils } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "EditableSubCrudTarget",
@@ -35,7 +35,9 @@ export default defineComponent({
   setup(props, ctx) {
     // eslint-disable-next-line vue/no-setup-props-destructure
     const parentIdRef = ref(props.id);
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { parentIdRef } });
+
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     const { ui } = useUi();
 
     let formItemContext = ui.formItem.injectFormItemContext();
@@ -55,7 +57,7 @@ export default defineComponent({
         return props.id;
       },
       (value: any) => {
-        if (value > 0) {
+        if (value > 0 && crudBinding.value) {
           crudExpose.setSearchFormData({
             form: { parentId: value },
             mergeForm: true,
@@ -70,13 +72,20 @@ export default defineComponent({
     );
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, createCrudOptions, context: { parentIdRef } });
+      if (props.id > 0) {
+        await crudExpose.doRefresh();
+      }
+
       watch(
         () => {
           return props.disabled || props.readonly;
         },
         (value) => {
+          if (!crudBinding.value) {
+            return;
+          }
           if (value) {
             crudBinding.value.table.editable.readonly = true;
             crudBinding.value.actionbar.buttons.addRow.show = false;
diff --git a/packages/ui/certd-client/src/views/crud/editable/vmodel/free/crud.tsx b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/crud.tsx
index 8d948c42a..e311980df 100644
--- a/packages/ui/certd-client/src/views/crud/editable/vmodel/free/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/crud.tsx
@@ -2,7 +2,7 @@ import { compute, CreateCrudOptionsProps, CreateCrudOptionsRet, dict } from "@fa
 import createCrudOptionsText from "/@/views/crud/component/text/crud";
 import * as textTableApi from "/@/views/crud/component/text/api";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const { crudBinding } = crudExpose;
 
   return {
diff --git a/packages/ui/certd-client/src/views/crud/editable/vmodel/free/index.vue b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/index.vue
index d70b613f3..3f2170bf0 100644
--- a/packages/ui/certd-client/src/views/crud/editable/vmodel/free/index.vue
+++ b/packages/ui/certd-client/src/views/crud/editable/vmodel/free/index.vue
@@ -7,8 +7,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, watch } from "vue";
 import createCrudOptions from "./crud";
-import { useFs, useUi, utils } from "@fast-crud/fast-crud";
-import { message } from "ant-design-vue";
+import { useFsRef, useFsAsync, useUi, utils } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "EditableFreeSub",
@@ -30,7 +29,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, ctx) {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     const { ui } = useUi();
     let formItemContext = ui.formItem.injectFormItemContext();
 
@@ -42,9 +42,9 @@ export default defineComponent({
     }
 
     // 页面打开后获取列表数据
-    onMounted(() => {
+    onMounted(async () => {
       // crudExpose.doRefresh();
-
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
       watch(
         () => {
           return props.modelValue;
diff --git a/packages/ui/certd-client/src/views/crud/editable/vmodel/index.vue b/packages/ui/certd-client/src/views/crud/editable/vmodel/index.vue
index f2ea9f59e..40953990c 100644
--- a/packages/ui/certd-client/src/views/crud/editable/vmodel/index.vue
+++ b/packages/ui/certd-client/src/views/crud/editable/vmodel/index.vue
@@ -18,17 +18,18 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import {useFs, utils} from "@fast-crud/fast-crud";
-import { message } from "ant-design-vue";
+import { useFsAsync, useFsRef, utils } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "EditableVModel",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-resize/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/column-resize/crud.tsx
index 6e4b47369..4bbd6535c 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-resize/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/column-resize/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue b/packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue
index fcdf42dcf..4d8fce170 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue
@@ -15,17 +15,19 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FeatureColumnResize",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-sort/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/column-sort/crud.tsx
index df885b767..fb0dadbac 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-sort/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/column-sort/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue b/packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue
index be635fc04..56b129904 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue
@@ -17,16 +17,18 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureColumnSort",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/columns-set/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/columns-set/crud.tsx
index 5a38700db..6ec0dd22a 100644
--- a/packages/ui/certd-client/src/views/crud/feature/columns-set/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/columns-set/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { ref } from "vue";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/columns-set/index.vue b/packages/ui/certd-client/src/views/crud/feature/columns-set/index.vue
index 78f141e66..e334e0651 100644
--- a/packages/ui/certd-client/src/views/crud/feature/columns-set/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/columns-set/index.vue
@@ -15,16 +15,18 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureColumnsSet",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, context, crudExpose } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, context, crudExpose, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.tsx
index 9804f887d..75e2087ea 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable-row/index.vue b/packages/ui/certd-client/src/views/crud/feature/editable-row/index.vue
index 90c35332f..de3dc4972 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable-row/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/editable-row/index.vue
@@ -14,17 +14,18 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureEditableRow",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
-      crudExpose.editable.enable({ mode: "row" });
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
+      await crudExpose.editable.enable({ mode: "row" });
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/editable/crud.tsx
index 22105d59f..dfc057427 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/editable/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const { crudBinding } = crudExpose;
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable/index.vue b/packages/ui/certd-client/src/views/crud/feature/editable/index.vue
index 13ea58558..584bc74ab 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/editable/index.vue
@@ -33,18 +33,20 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import {useFs, utils} from "@fast-crud/fast-crud";
+import { useFsRef, utils, useFsAsync } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
 
 export default defineComponent({
   name: "FeatureEditable",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, context, crudExpose } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
-      crudExpose.editable.enable({ mode: "free" });
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, context, crudExpose, createCrudOptions });
+
+      await crudExpose.doRefresh();
+      await crudExpose.editable.enable({ mode: "free" });
     });
 
     function enable() {
diff --git a/packages/ui/certd-client/src/views/crud/feature/expand/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/expand/crud.tsx
index d65e8e5df..8f7ba98bf 100644
--- a/packages/ui/certd-client/src/views/crud/feature/expand/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/expand/crud.tsx
@@ -1,18 +1,8 @@
 import * as api from "./api.js";
-import {
-  AddReq,
-  CreateCrudOptionsProps,
-  CreateCrudOptionsRet,
-  DelReq,
-  dict,
-  EditReq,
-  UserPageQuery,
-  UserPageRes,
-  utils
-} from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
 import { ref } from "vue";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/expand/index.vue b/packages/ui/certd-client/src/views/crud/feature/expand/index.vue
index 094961aba..56b4206aa 100644
--- a/packages/ui/certd-client/src/views/crud/feature/expand/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/expand/index.vue
@@ -11,16 +11,17 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureExpand",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/export/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/export/crud.tsx
index bf876ed4f..0721b3c8e 100644
--- a/packages/ui/certd-client/src/views/crud/feature/export/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/export/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import dayjs from "dayjs";
 
-export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose, context }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/export/index.vue b/packages/ui/certd-client/src/views/crud/feature/export/index.vue
index f5d482561..5b91e103e 100644
--- a/packages/ui/certd-client/src/views/crud/feature/export/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/export/index.vue
@@ -33,7 +33,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, watch } from "vue";
-import { useFs, UserPageQuery, useUi } from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync, UserPageQuery, useUi } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
@@ -48,10 +48,11 @@ export default defineComponent({
       exportType
     };
 
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
+    const { crudBinding, crudRef, crudExpose } = useFsRef();
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, createCrudOptions, context });
+      await crudExpose.doRefresh();
     });
     const { ui } = useUi();
     watch(
diff --git a/packages/ui/certd-client/src/views/crud/feature/filter/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/filter/crud.tsx
index 76db14e63..944619249 100644
--- a/packages/ui/certd-client/src/views/crud/feature/filter/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/filter/crud.tsx
@@ -11,7 +11,7 @@ import {
   utils
 } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/filter/index.vue b/packages/ui/certd-client/src/views/crud/feature/filter/index.vue
index 81a2eabdc..c72d9c519 100644
--- a/packages/ui/certd-client/src/views/crud/feature/filter/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/filter/index.vue
@@ -6,16 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FeatureFilter",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/fixed/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/fixed/crud.tsx
index 777b1b6b2..5d68e9c7c 100644
--- a/packages/ui/certd-client/src/views/crud/feature/fixed/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/fixed/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/fixed/index.vue b/packages/ui/certd-client/src/views/crud/feature/fixed/index.vue
index cc7436667..9348102fe 100644
--- a/packages/ui/certd-client/src/views/crud/feature/fixed/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/fixed/index.vue
@@ -5,16 +5,18 @@
 </template>
 
 <script lang="ts">
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import { defineComponent, ref, onMounted } from "vue";
 import createCrudOptions from "./crud";
 export default defineComponent({
   name: "FeatureFixed",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/header-group/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/header-group/crud.tsx
index a6417be8f..e7f0ea281 100644
--- a/packages/ui/certd-client/src/views/crud/feature/header-group/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/header-group/crud.tsx
@@ -12,7 +12,7 @@ import {
   ValueChangeContext
 } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/header-group/index.vue b/packages/ui/certd-client/src/views/crud/feature/header-group/index.vue
index 932b7b5a1..370a133d7 100644
--- a/packages/ui/certd-client/src/views/crud/feature/header-group/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/header-group/index.vue
@@ -8,16 +8,17 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FeatureHeaderGroup",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/header/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/header/crud.tsx
index ab2934119..1728c7f3a 100644
--- a/packages/ui/certd-client/src/views/crud/feature/header/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/header/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api.js";
 import { CreateCrudOptionsProps, dict, CreateCrudOptionsRet, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const editRequest = async ({ form, row }: EditReq) => {
     if (form.id == null) {
       form.id = row.id;
diff --git a/packages/ui/certd-client/src/views/crud/feature/header/index.vue b/packages/ui/certd-client/src/views/crud/feature/header/index.vue
index ba07c6f38..98a834dd0 100644
--- a/packages/ui/certd-client/src/views/crud/feature/header/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/header/index.vue
@@ -13,15 +13,14 @@
 <script lang="ts" setup>
 import { onMounted } from "vue";
 import createCrudOptions from "./crud.js";
-import { useFs, UseFsProps } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
+
 defineOptions({
   name: "FeatureHeader"
 });
-const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
-const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue } as UseFsProps);
-
-// 页面打开后获取列表数据
-onMounted(() => {
-  crudExpose.doRefresh();
+const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+onMounted(async () => {
+  await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+  await crudExpose.doRefresh();
 });
 </script>
diff --git a/packages/ui/certd-client/src/views/crud/feature/height/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/height/crud.tsx
index b2d4c4c03..e8ebf7e76 100644
--- a/packages/ui/certd-client/src/views/crud/feature/height/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/height/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/height/index.vue b/packages/ui/certd-client/src/views/crud/feature/height/index.vue
index 01c59c98b..95640403b 100644
--- a/packages/ui/certd-client/src/views/crud/feature/height/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/height/index.vue
@@ -6,16 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "ComponentHeight",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     const value = ref(null);
diff --git a/packages/ui/certd-client/src/views/crud/feature/hide/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/hide/crud.tsx
index 8dcf894ae..41865ea69 100644
--- a/packages/ui/certd-client/src/views/crud/feature/hide/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/hide/crud.tsx
@@ -11,7 +11,7 @@ import {
   utils
 } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/hide/index.vue b/packages/ui/certd-client/src/views/crud/feature/hide/index.vue
index 806c98b8a..9f0f5aba7 100644
--- a/packages/ui/certd-client/src/views/crud/feature/hide/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/hide/index.vue
@@ -2,7 +2,7 @@
   <fs-page>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #header-top>
-        <a-card title="部件显隐控制" style="margin-bottom: 20px">
+        <a-card v-if="crudBinding" title="部件显隐控制" style="margin-bottom: 20px">
           <div style="max-width: 900px">
             <a-row>
               <a-col :span="2"> 搜索框： </a-col>
@@ -93,16 +93,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FeatureHide",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/index/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/index/crud.tsx
index 23c180a6a..f26fe8f4b 100644
--- a/packages/ui/certd-client/src/views/crud/feature/index/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/index/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
@@ -36,7 +36,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
           column: {
             // type: "index",
             align: "center",
-            width: "55px",
+            width: 100,
             columnSetDisabled: true, //禁止在列设置中选择
             formatter: (context) => {
               //计算序号,你可以自定义计算规则，此处为翻页累加
diff --git a/packages/ui/certd-client/src/views/crud/feature/index/index.vue b/packages/ui/certd-client/src/views/crud/feature/index/index.vue
index bc932a5bb..82c6ee2ce 100644
--- a/packages/ui/certd-client/src/views/crud/feature/index/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/index/index.vue
@@ -7,15 +7,17 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureIndex",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/local-import/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/local-import/crud.tsx
index 8f629a2c0..366ba0a42 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local-import/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/local-import/crud.tsx
@@ -1,7 +1,7 @@
 import { CreateCrudOptionsProps, CreateCrudOptionsRet, importTable } from "@fast-crud/fast-crud";
 import { Modal, notification } from "ant-design-vue";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const crudBinding = crudExpose.crudBinding;
   return {
     crudOptions: {
diff --git a/packages/ui/certd-client/src/views/crud/feature/local-import/index.vue b/packages/ui/certd-client/src/views/crud/feature/local-import/index.vue
index 311196724..343fb1074 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local-import/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/local-import/index.vue
@@ -22,10 +22,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive } from "vue";
+import { defineComponent, reactive } from "vue";
 import { message } from "ant-design-vue";
 import FeatureLocalImportValueInput from "./local.vue";
-import {utils} from "@fast-crud/fast-crud";
+import { utils } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureLocalImport",
   components: { FeatureLocalImportValueInput },
diff --git a/packages/ui/certd-client/src/views/crud/feature/local-import/local.vue b/packages/ui/certd-client/src/views/crud/feature/local-import/local.vue
index f9477bcbe..15ba2c5d2 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local-import/local.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/local-import/local.vue
@@ -5,7 +5,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, watch } from "vue";
 import createCrudOptions from "./crud";
-import {useFs, utils} from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync, utils } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureLocalImportValueInput",
@@ -17,11 +17,13 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
-    onMounted(() => {
+    onMounted(async () => {
       //启用行编辑模式
-      crudExpose.editable.enable({ mode: "row" });
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      crudBinding.value.data = props.modelValue || [];
+      await crudExpose.editable.enable({ mode: "row" });
     });
 
     //通过导出modelValue, 可以导出成为一个input组件
@@ -30,7 +32,9 @@ export default defineComponent({
         return props.modelValue;
       },
       (value = []) => {
-        crudBinding.value.data = value;
+        if (crudBinding.value) {
+          crudBinding.value.data = value;
+        }
       },
       {
         immediate: true
diff --git a/packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.tsx
index afc6e8bb8..baa35e674 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.tsx
@@ -1,6 +1,11 @@
 import { CreateCrudOptionsProps, CreateCrudOptionsRet, uiContext } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
+  const { crudBinding } = crudExpose;
+  let idGen = 0;
+  function nextId() {
+    return --idGen;
+  }
   return {
     crudOptions: {
       mode: {
@@ -9,7 +14,14 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
         isAppendWhenAdd: true
       },
       //启用addRow按钮
-      actionbar: { buttons: { add: { show: false }, addRow: { show: true } } },
+      actionbar: {
+        buttons: {
+          add: { show: false },
+          addRow: {
+            show: true
+          }
+        }
+      },
       table: {
         remove: {
           //删除数据后不请求后台
@@ -18,7 +30,8 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
         editable: {
           enabled: true,
           mode: "row",
-          activeTrigger: false
+          activeTrigger: false,
+          activeDefault: false
         }
       },
       search: {
diff --git a/packages/ui/certd-client/src/views/crud/feature/local-v-model/index.vue b/packages/ui/certd-client/src/views/crud/feature/local-v-model/index.vue
index 446391542..d91b9c44c 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local-v-model/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/local-v-model/index.vue
@@ -25,7 +25,7 @@
 import { defineComponent, reactive } from "vue";
 import { message } from "ant-design-vue";
 import FeatureLocalModelValueInput from "./local.vue";
-import {utils} from "@fast-crud/fast-crud";
+import { utils } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureLocalVModel",
diff --git a/packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue b/packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue
index a85430041..f8b7719de 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue
@@ -5,7 +5,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, watch } from "vue";
 import createCrudOptions from "./crud";
-import {useFs, utils} from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync, utils } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureLocalModelValueInput",
@@ -17,11 +17,13 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
-    onMounted(() => {
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      crudBinding.value.data = props.modelValue || [];
       //启用行编辑模式
-      crudExpose.editable.enable({ mode: "row" });
+      await crudExpose.editable.enable({ mode: "row" });
     });
 
     //通过导出modelValue, 可以导出成为一个input组件
@@ -31,9 +33,6 @@ export default defineComponent({
       },
       (value = []) => {
         crudBinding.value.data = value;
-      },
-      {
-        immediate: true
       }
     );
 
diff --git a/packages/ui/certd-client/src/views/crud/feature/local/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/local/crud.tsx
index eea51ede1..7458910c0 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/local/crud.tsx
@@ -1,6 +1,6 @@
 import { CreateCrudOptionsProps, CreateCrudOptionsRet } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   return {
     crudOptions: {
       mode: {
diff --git a/packages/ui/certd-client/src/views/crud/feature/local/index.vue b/packages/ui/certd-client/src/views/crud/feature/local/index.vue
index a30ecd944..637c9a4c5 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/local/index.vue
@@ -12,9 +12,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import {useExpose, useCrud, useFs, utils} from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef, utils } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureLocal",
@@ -22,19 +22,20 @@ export default defineComponent({
     modelValue: {}
   },
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      //初始化本地数据示例
+      crudBinding.value.data = [{ name: "test" }];
+      await crudExpose.doRefresh();
     });
     // 通过crudBinding.value.data 可以获取表格实时数据
     function showData() {
       utils.logger.info("data:", crudBinding.value.data);
     }
 
-    //初始化本地数据示例
-    crudBinding.value.data = [{ name: "test" }];
-
     //启用行编辑
     function enabledRowEdit() {
       crudExpose.editable.enable({
diff --git a/packages/ui/certd-client/src/views/crud/feature/merge/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/merge/crud.tsx
index e21820773..5beb398ef 100644
--- a/packages/ui/certd-client/src/views/crud/feature/merge/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/merge/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/merge/index.vue b/packages/ui/certd-client/src/views/crud/feature/merge/index.vue
index 2b7012561..99d81eaa3 100644
--- a/packages/ui/certd-client/src/views/crud/feature/merge/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/merge/index.vue
@@ -7,16 +7,18 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureMerge",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/remove/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/remove/crud.tsx
index 00438c8fc..5fb2c716f 100644
--- a/packages/ui/certd-client/src/views/crud/feature/remove/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/remove/crud.tsx
@@ -11,7 +11,7 @@ import {
   utils
 } from "@fast-crud/fast-crud";
 import { Modal } from "ant-design-vue";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/remove/index.vue b/packages/ui/certd-client/src/views/crud/feature/remove/index.vue
index 6eb3bc894..5f340c04a 100644
--- a/packages/ui/certd-client/src/views/crud/feature/remove/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/remove/index.vue
@@ -6,16 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FeatureRemove",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/search-multi/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/search-multi/crud.tsx
index f85fd9e07..73861bbda 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search-multi/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/search-multi/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/search-multi/index.vue b/packages/ui/certd-client/src/views/crud/feature/search-multi/index.vue
index d328a4e8b..b39a27e26 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search-multi/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/search-multi/index.vue
@@ -6,16 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FeatureSearchMulti",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/search/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/search/crud.tsx
index cb7098bea..150c95795 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/search/crud.tsx
@@ -3,7 +3,7 @@ import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, Edi
 import { computed, ref } from "vue";
 import { message } from "ant-design-vue";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/search/index.vue b/packages/ui/certd-client/src/views/crud/feature/search/index.vue
index 653a29f3b..fe0aaa26b 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/search/index.vue
@@ -12,17 +12,18 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useFs } from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
 export default defineComponent({
   name: "FeatureSearch",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection-radio/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/selection-radio/crud.tsx
index ca0b41ccc..301b15a31 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection-radio/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/selection-radio/crud.tsx
@@ -11,7 +11,7 @@ import {
   utils
 } from "@fast-crud/fast-crud";
 import { ref } from "vue";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection-radio/index.vue b/packages/ui/certd-client/src/views/crud/feature/selection-radio/index.vue
index 6bf449bf8..735c43d78 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection-radio/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/selection-radio/index.vue
@@ -11,15 +11,16 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureSelectionRadio",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/selection/crud.tsx
index bba7743c6..765482918 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/selection/crud.tsx
@@ -1,15 +1,5 @@
 import * as api from "./api";
-import {
-  AddReq,
-  CreateCrudOptionsProps,
-  CreateCrudOptionsRet,
-  DelReq,
-  dict,
-  EditReq,
-  UserPageQuery,
-  UserPageRes,
-  utils
-} from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
 import { ref } from "vue";
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection/index.vue b/packages/ui/certd-client/src/views/crud/feature/selection/index.vue
index d8da838b4..f5a9e6d7c 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/selection/index.vue
@@ -16,18 +16,20 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import { message, Modal } from "ant-design-vue";
 import { BatchDelete } from "./api";
 
 export default defineComponent({
   name: "FeatureSelection",
   setup() {
-    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     const selectedRowKeys = context.selectedRowKeys;
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     const handleBatchDelete = () => {
diff --git a/packages/ui/certd-client/src/views/crud/feature/sortable/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/sortable/crud.tsx
index 5a0b0a11d..243b98659 100644
--- a/packages/ui/certd-client/src/views/crud/feature/sortable/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/sortable/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/sortable/index.vue b/packages/ui/certd-client/src/views/crud/feature/sortable/index.vue
index bb48f61fb..1a3a03f39 100644
--- a/packages/ui/certd-client/src/views/crud/feature/sortable/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/sortable/index.vue
@@ -5,17 +5,19 @@
 </template>
 
 <script lang="ts">
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FeatureSortable",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/tabs/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/tabs/crud.tsx
index a070d7874..b39f2d847 100644
--- a/packages/ui/certd-client/src/views/crud/feature/tabs/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/tabs/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/tabs/index.vue b/packages/ui/certd-client/src/views/crud/feature/tabs/index.vue
index fb515994b..83286828c 100644
--- a/packages/ui/certd-client/src/views/crud/feature/tabs/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/tabs/index.vue
@@ -15,17 +15,18 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useFs } from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
 export default defineComponent({
   name: "FeatureTabs",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/tree/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/tree/crud.tsx
index 946847f92..04eebb24e 100644
--- a/packages/ui/certd-client/src/views/crud/feature/tree/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/tree/crud.tsx
@@ -1,19 +1,9 @@
 import * as api from "./api";
-import {
-  AddReq,
-  CreateCrudOptionsProps,
-  CreateCrudOptionsRet,
-  DelReq,
-  dict,
-  EditReq,
-  UserPageQuery,
-  UserPageRes,
-  utils
-} from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
 import { ref } from "vue";
 import dayjs from "dayjs";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose, context }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
@@ -32,7 +22,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
   };
 
   const selectedRowKeys = ref([]);
-
+  context.selectedRowKeys = selectedRowKeys;
   const onSelectChange = (changed: any) => {
     utils.logger.info("selection", changed);
     selectedRowKeys.value = changed;
diff --git a/packages/ui/certd-client/src/views/crud/feature/tree/index.vue b/packages/ui/certd-client/src/views/crud/feature/tree/index.vue
index 95e505393..66d365c9e 100644
--- a/packages/ui/certd-client/src/views/crud/feature/tree/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/tree/index.vue
@@ -13,19 +13,22 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud, useFs } from "@fast-crud/fast-crud";
+import { useExpose, useCrud, useFs, useFsRef, useFsAsync } from "@fast-crud/fast-crud";
 import { message, Modal } from "ant-design-vue";
 import { BatchDelete } from "./api";
 export default defineComponent({
   name: "FeatureTree",
   setup() {
-    const { crudBinding, crudRef, crudExpose, selectedRowKeys } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     const handleBatchDelete = () => {
+      const selectedRowKeys = context.selectedRowKeys;
       if (selectedRowKeys.value?.length > 0) {
         Modal.confirm({
           title: "确认",
diff --git a/packages/ui/certd-client/src/views/crud/feature/value-builder/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/value-builder/crud.tsx
index 6c739f945..6bbdd2144 100644
--- a/packages/ui/certd-client/src/views/crud/feature/value-builder/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/feature/value-builder/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/feature/value-builder/index.vue b/packages/ui/certd-client/src/views/crud/feature/value-builder/index.vue
index aad6fd5a9..349a36518 100644
--- a/packages/ui/certd-client/src/views/crud/feature/value-builder/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/value-builder/index.vue
@@ -21,15 +21,17 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureValueBuilder",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/base/crud.tsx b/packages/ui/certd-client/src/views/crud/form/base/crud.tsx
index 7e30c5184..9c50eb987 100644
--- a/packages/ui/certd-client/src/views/crud/form/base/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/base/crud.tsx
@@ -3,7 +3,7 @@ import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq,
 import { computed } from "vue";
 import { message } from "ant-design-vue";
 
-export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose, context }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/base/index.vue b/packages/ui/certd-client/src/views/crud/form/base/index.vue
index e0efa7cee..b159eeab5 100644
--- a/packages/ui/certd-client/src/views/crud/form/base/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/base/index.vue
@@ -34,7 +34,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.jsx";
 
 export default defineComponent({
@@ -46,11 +46,13 @@ export default defineComponent({
       labelWidthRef,
       labelLayoutRef
     };
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
 
+    const { crudRef, crudBinding, crudExpose } = useFsRef();
     // 页面打开后获取列表数据
     onMounted(async () => {
-      crudExpose.doRefresh();
+      await useFsAsync({ crudRef, crudBinding, crudExpose, createCrudOptions, context });
+
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx b/packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx
index 99a90c9f0..877ae860c 100644
--- a/packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx
@@ -1,18 +1,5 @@
 import * as api from "./api.js";
-import {
-  AddReq,
-  CreateCrudOptionsProps,
-  CreateCrudOptionsRet,
-  CrudExpose,
-  CrudOptions,
-  DelReq,
-  dict,
-  EditReq,
-  useColumns,
-  UserPageQuery,
-  UserPageRes,
-  utils
-} from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, CrudExpose, CrudOptions, DelReq, dict, EditReq, useColumns, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
 import { useFormWrapper } from "@fast-crud/fast-crud";
 
@@ -94,7 +81,7 @@ function useCustomFormWrapperDemo(crudExpose: CrudExpose) {
     openCustomFormByExpose
   };
 }
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const { openCustomForm, openCustomFormByExpose } = useCustomFormWrapperDemo(crudExpose);
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue b/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue
index b32f9062d..69c9f4083 100644
--- a/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue
@@ -12,17 +12,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs, UseFsProps } from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "FormCustomForm",
   setup(props, ctx) {
     // 页面打开后获取列表数据
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/drawer/crud.tsx b/packages/ui/certd-client/src/views/crud/form/drawer/crud.tsx
index 38caeaeab..04c056eca 100644
--- a/packages/ui/certd-client/src/views/crud/form/drawer/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/drawer/crud.tsx
@@ -9,7 +9,7 @@ import {
   UserPageRes,
   utils
 } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/drawer/index.vue b/packages/ui/certd-client/src/views/crud/form/drawer/index.vue
index 47fa1b607..994181f7f 100644
--- a/packages/ui/certd-client/src/views/crud/form/drawer/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/drawer/index.vue
@@ -7,16 +7,17 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FormText",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/group-tabs/crud.tsx b/packages/ui/certd-client/src/views/crud/form/group-tabs/crud.tsx
index c828fbd37..b5c73f342 100644
--- a/packages/ui/certd-client/src/views/crud/form/group-tabs/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/group-tabs/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/group-tabs/index.vue b/packages/ui/certd-client/src/views/crud/form/group-tabs/index.vue
index b4335f0a2..cb0d68987 100644
--- a/packages/ui/certd-client/src/views/crud/form/group-tabs/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/group-tabs/index.vue
@@ -7,15 +7,17 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FormGroupTabs",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/group/crud.tsx b/packages/ui/certd-client/src/views/crud/form/group/crud.tsx
index e8caae81c..7c9d69d12 100644
--- a/packages/ui/certd-client/src/views/crud/form/group/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/group/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { CheckOutlined } from "@ant-design/icons-vue";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/group/index.vue b/packages/ui/certd-client/src/views/crud/form/group/index.vue
index 93497a2c9..9c09ed0fe 100644
--- a/packages/ui/certd-client/src/views/crud/form/group/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/group/index.vue
@@ -11,15 +11,17 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FormGroup",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/helper/crud.tsx b/packages/ui/certd-client/src/views/crud/form/helper/crud.tsx
index 63eddf4f8..7fa200d0b 100644
--- a/packages/ui/certd-client/src/views/crud/form/helper/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/helper/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/helper/index.vue b/packages/ui/certd-client/src/views/crud/form/helper/index.vue
index f6f59dc3c..252e69d71 100644
--- a/packages/ui/certd-client/src/views/crud/form/helper/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/helper/index.vue
@@ -10,16 +10,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormValidation",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/initial/index.vue b/packages/ui/certd-client/src/views/crud/form/initial/index.vue
index b5c379e4e..2893cf4c9 100644
--- a/packages/ui/certd-client/src/views/crud/form/initial/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/initial/index.vue
@@ -12,16 +12,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormInitial",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/area/crud.tsx b/packages/ui/certd-client/src/views/crud/form/inner/area/crud.tsx
index 12cca1816..2613096cb 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/area/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/inner/area/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/area/index.vue b/packages/ui/certd-client/src/views/crud/form/inner/area/index.vue
index 07e8fc83d..9d3673453 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/area/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/inner/area/index.vue
@@ -6,16 +6,17 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync,useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormInner",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+await useFsAsync({ crudBinding, crudRef, crudExpose, context,createCrudOptions });
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/crud.tsx b/packages/ui/certd-client/src/views/crud/form/inner/crud.tsx
index a812370b8..ba6b3322c 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/inner/crud.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "vue-router";
 import { message } from "ant-design-vue";
 import { SyncOutlined } from "@ant-design/icons-vue";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/index.vue b/packages/ui/certd-client/src/views/crud/form/inner/index.vue
index 07e8fc83d..e8dd76d51 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/inner/index.vue
@@ -6,16 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormInner",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-flex/crud.tsx b/packages/ui/certd-client/src/views/crud/form/layout-flex/crud.tsx
index 1350554d5..e4233512d 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-flex/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/layout-flex/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-flex/index.vue b/packages/ui/certd-client/src/views/crud/form/layout-flex/index.vue
index 843bcf17c..1c42b598f 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-flex/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/layout-flex/index.vue
@@ -9,16 +9,17 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
 export default defineComponent({
   name: "FormLayoutFlex",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-grid/crud.tsx b/packages/ui/certd-client/src/views/crud/form/layout-grid/crud.tsx
index 1903196f5..887345fea 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-grid/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/layout-grid/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue b/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue
index b73fbd765..a133b4a60 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue
@@ -9,16 +9,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormLayoutGrid",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/layout/crud.tsx b/packages/ui/certd-client/src/views/crud/form/layout/crud.tsx
index 250e323d0..1d4ec99ad 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/layout/crud.tsx
@@ -12,7 +12,7 @@ import {
   utils
 } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/layout/index.vue b/packages/ui/certd-client/src/views/crud/form/layout/index.vue
index 424515b2c..d1063847e 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/layout/index.vue
@@ -9,16 +9,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormLayout",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/nest/crud.tsx b/packages/ui/certd-client/src/views/crud/form/nest/crud.tsx
index a8d24c609..d22cf105b 100644
--- a/packages/ui/certd-client/src/views/crud/form/nest/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/nest/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/nest/index.vue b/packages/ui/certd-client/src/views/crud/form/nest/index.vue
index b81c902d6..d75c36a5b 100644
--- a/packages/ui/certd-client/src/views/crud/form/nest/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/nest/index.vue
@@ -10,16 +10,17 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
 export default defineComponent({
   name: "FormNest",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/new-page/crud.tsx b/packages/ui/certd-client/src/views/crud/form/new-page/crud.tsx
index 308cfe724..b75d17bac 100644
--- a/packages/ui/certd-client/src/views/crud/form/new-page/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/new-page/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { useRouter } from "vue-router";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue b/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue
index 085c09bde..257cfda52 100644
--- a/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue
+++ b/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue
@@ -15,7 +15,7 @@
 <script lang="ts">
 import { useRoute } from "vue-router";
 import { defineComponent, onMounted, ref } from "vue";
-import {useFs, utils} from "@fast-crud/fast-crud";
+import { useFsRef, utils, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import * as api from "./api";
 import { message } from "ant-design-vue";
@@ -24,10 +24,12 @@ import { usePageStore } from "/@/store/modules/page";
 export default defineComponent({
   name: "FormNewPageEdit",
   setup(props, ctx) {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     const formRef = ref();
diff --git a/packages/ui/certd-client/src/views/crud/form/new-page/index.vue b/packages/ui/certd-client/src/views/crud/form/new-page/index.vue
index 92380ef01..4b5b76bc1 100644
--- a/packages/ui/certd-client/src/views/crud/form/new-page/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/new-page/index.vue
@@ -8,16 +8,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormNewPage",
   setup(props, ctx) {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/render/crud.tsx b/packages/ui/certd-client/src/views/crud/form/render/crud.tsx
index 1759d1274..49cdf42bf 100644
--- a/packages/ui/certd-client/src/views/crud/form/render/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/render/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, useUi } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/render/index.vue b/packages/ui/certd-client/src/views/crud/form/render/index.vue
index 04c96794c..517a01d96 100644
--- a/packages/ui/certd-client/src/views/crud/form/render/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/render/index.vue
@@ -12,16 +12,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormRender",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/reset/crud.tsx b/packages/ui/certd-client/src/views/crud/form/reset/crud.tsx
index 159b599fa..e5c16320c 100644
--- a/packages/ui/certd-client/src/views/crud/form/reset/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/reset/crud.tsx
@@ -9,7 +9,7 @@ import {
   UserPageRes,
   utils
 } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/reset/index.vue b/packages/ui/certd-client/src/views/crud/form/reset/index.vue
index 3266819ed..3dd3a1ed8 100644
--- a/packages/ui/certd-client/src/views/crud/form/reset/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/reset/index.vue
@@ -6,16 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormReset",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
     return {
       crudBinding,
diff --git a/packages/ui/certd-client/src/views/crud/form/single-column/crud.tsx b/packages/ui/certd-client/src/views/crud/form/single-column/crud.tsx
index 73c30ea63..03f6049a2 100644
--- a/packages/ui/certd-client/src/views/crud/form/single-column/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/single-column/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/single-column/index.vue b/packages/ui/certd-client/src/views/crud/form/single-column/index.vue
index 040b1085f..75f6347f4 100644
--- a/packages/ui/certd-client/src/views/crud/form/single-column/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/single-column/index.vue
@@ -9,18 +9,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, nextTick } from "vue";
-import { useFs, UseFsProps } from "@fast-crud/fast-crud";
+import { defineComponent, onMounted } from "vue";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
+
 export default defineComponent({
   name: "FormSingleColumn",
   setup() {
-    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: customValue });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
 
     // 页面打开后获取列表数据
     onMounted(async () => {
-      crudExpose.doRefresh();
+      const { crudExpose } = await useFsAsync({ crudBinding, crudRef, createCrudOptions, context });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/validation/crud.tsx b/packages/ui/certd-client/src/views/crud/form/validation/crud.tsx
index c97ea0e5d..bd6adf716 100644
--- a/packages/ui/certd-client/src/views/crud/form/validation/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/validation/crud.tsx
@@ -1,17 +1,7 @@
 import * as api from "./api";
-import {
-  AddReq,
-  CreateCrudOptionsProps,
-  CreateCrudOptionsRet,
-  DelReq,
-  dict,
-  EditReq,
-  UserPageQuery,
-  UserPageRes,
-  utils
-} from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
 
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/validation/index.vue b/packages/ui/certd-client/src/views/crud/form/validation/index.vue
index ebd506338..5f2766fa8 100644
--- a/packages/ui/certd-client/src/views/crud/form/validation/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/validation/index.vue
@@ -6,16 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormValidation",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/view/index.vue b/packages/ui/certd-client/src/views/crud/form/view/index.vue
index 4a42334ba..76ec2549d 100644
--- a/packages/ui/certd-client/src/views/crud/form/view/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/view/index.vue
@@ -12,16 +12,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormView",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/watch/crud.tsx b/packages/ui/certd-client/src/views/crud/form/watch/crud.tsx
index 52e4c0f81..83becda06 100644
--- a/packages/ui/certd-client/src/views/crud/form/watch/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/form/watch/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsRet, DelReq, dict, EditReq, FormScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function (): CreateCrudOptionsRet {
+export default async function (): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/form/watch/index.vue b/packages/ui/certd-client/src/views/crud/form/watch/index.vue
index 0cd67f61f..6a133f32f 100644
--- a/packages/ui/certd-client/src/views/crud/form/watch/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/watch/index.vue
@@ -12,16 +12,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FormWatch",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/crud.tsx b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/crud.tsx
index 3aaeba5f4..928a4caae 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { dict, compute, utils } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/index.vue b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/index.vue
index dc0cf68e2..555240d10 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/index.vue
+++ b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/index.vue
@@ -6,16 +6,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "FeatureDropdown",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef,crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/crud.tsx b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/crud.tsx
index d5b73d086..02d989cd1 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import {dict, utils} from "@fast-crud/fast-crud";
 import { ref } from "vue";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/index.vue b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/index.vue
index 05e192c2b..d70f7f8b3 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/index.vue
+++ b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/index.vue
@@ -12,15 +12,16 @@
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud.jsx";
 import { message } from "ant-design-vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsRef, useFsAsync } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "RowHandleTooltip",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     function columnsSetToggleMode() {
diff --git a/packages/ui/certd-client/src/views/crud/slots/cell/crud.tsx b/packages/ui/certd-client/src/views/crud/slots/cell/crud.tsx
index 623a2ad8c..2d28a5ef4 100644
--- a/packages/ui/certd-client/src/views/crud/slots/cell/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/slots/cell/crud.tsx
@@ -2,7 +2,7 @@ import * as api from "./api";
 import { dict } from "@fast-crud/fast-crud";
 import dayjs from "dayjs";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose, context }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
@@ -23,8 +23,8 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
   const radioDict = dict({
     url: "/mock/dicts/OpenStatusEnum?single"
   });
+  context.radioDict = radioDict;
   return {
-    radioDict,
     crudOptions: {
       request: {
         pageRequest,
diff --git a/packages/ui/certd-client/src/views/crud/slots/cell/index.vue b/packages/ui/certd-client/src/views/crud/slots/cell/index.vue
index 32b9cbc5f..e604d66c8 100644
--- a/packages/ui/certd-client/src/views/crud/slots/cell/index.vue
+++ b/packages/ui/certd-client/src/views/crud/slots/cell/index.vue
@@ -34,17 +34,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
-import {useCrud, useExpose, useFs, utils} from "@fast-crud/fast-crud";
+import { defineComponent, onMounted } from "vue";
+import { useFsAsync, useFsRef, utils } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import dayjs from "dayjs";
+
 export default defineComponent({
   name: "SlotsCell",
   setup() {
-    const { crudBinding, crudRef, crudExpose, radioDict } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudRef, crudBinding, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     function dateFormat(time: any, formatter = "YYYY-MM-DD") {
@@ -57,7 +59,7 @@ export default defineComponent({
     return {
       crudBinding,
       crudRef,
-      radioDict,
+      radioDict: context.radioDict,
       dateFormat,
       showScope
     };
diff --git a/packages/ui/certd-client/src/views/crud/slots/form-item/crud.tsx b/packages/ui/certd-client/src/views/crud/slots/form-item/crud.tsx
index 0064a216f..15792128d 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form-item/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/slots/form-item/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/slots/form-item/index.vue b/packages/ui/certd-client/src/views/crud/slots/form-item/index.vue
index 992d35eca..60c714a3c 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form-item/index.vue
+++ b/packages/ui/certd-client/src/views/crud/slots/form-item/index.vue
@@ -20,16 +20,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose, useFs } from "@fast-crud/fast-crud";
+import { defineComponent, onMounted } from "vue";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
+
 export default defineComponent({
   name: "SlotsForm",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     function addTopic(form: any, key: string) {
diff --git a/packages/ui/certd-client/src/views/crud/slots/form/crud.tsx b/packages/ui/certd-client/src/views/crud/slots/form/crud.tsx
index c4665fd27..92d888070 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/slots/form/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { dict } from "@fast-crud/fast-crud";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/slots/form/index.vue b/packages/ui/certd-client/src/views/crud/slots/form/index.vue
index 0bf170714..04f39d436 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form/index.vue
+++ b/packages/ui/certd-client/src/views/crud/slots/form/index.vue
@@ -44,15 +44,17 @@
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "SlotsForm",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/slots/layout/crud.tsx b/packages/ui/certd-client/src/views/crud/slots/layout/crud.tsx
index 1b77f1090..9fe6e603e 100644
--- a/packages/ui/certd-client/src/views/crud/slots/layout/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/slots/layout/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { dict } from "@fast-crud/fast-crud";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/slots/layout/index.vue b/packages/ui/certd-client/src/views/crud/slots/layout/index.vue
index 2039ec5b4..207cacedc 100644
--- a/packages/ui/certd-client/src/views/crud/slots/layout/index.vue
+++ b/packages/ui/certd-client/src/views/crud/slots/layout/index.vue
@@ -43,16 +43,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "SlotsLayout",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/slots/search/crud.tsx b/packages/ui/certd-client/src/views/crud/slots/search/crud.tsx
index 3018e225d..8cdbee481 100644
--- a/packages/ui/certd-client/src/views/crud/slots/search/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/slots/search/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { dict } from "@fast-crud/fast-crud";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default async function ({ crudExpose }: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/slots/search/index.vue b/packages/ui/certd-client/src/views/crud/slots/search/index.vue
index e4c1bfea5..765aec238 100644
--- a/packages/ui/certd-client/src/views/crud/slots/search/index.vue
+++ b/packages/ui/certd-client/src/views/crud/slots/search/index.vue
@@ -18,16 +18,18 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFsAsync, useFsRef } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 export default defineComponent({
   name: "SlotsSearch",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudRef, crudBinding, crudExpose, context } = useFsRef();
+
     // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
+    onMounted(async () => {
+      await useFsAsync({ crudBinding, crudRef, crudExpose, context, createCrudOptions });
+      await crudExpose.doRefresh();
     });
 
     return {