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

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

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