🔱: [client] sync upgrade with 4 commits [trident-sync]

feat: 示例全面改成useFsAsync
chore:
perf: 示例改成useFsAsync

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);
   };

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
     };
   }
 });

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();
     });

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

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 {

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初始化完成

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>

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);
   };

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 {

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();
     });
 

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);
   };

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 {

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 {

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();
     });
 
     //你的业务代码

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);
   };

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>

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);

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() {

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);
   };

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
     };
   }
 });

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);
   };

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 {

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);
   };

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
     };
   }
 });

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: {

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>

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
+  };
+}

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>

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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
     };
   }
 });

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 {

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: {

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,

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);
   };

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
     };
   }
 });

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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);

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";

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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);

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();
 

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
     };
   }
 });

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);
   };

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 {

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);
   };

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);

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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 {

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);
   };

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() {

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);

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 {

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);

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 {

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;
+            //     }
+            //   });
+            // }
           }
         }
       },