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

refactor: 1.11.0
refactor: 1.11.0
refactor: 1.11.0
refactor: 1.11.0
refactor: ts化
refactor: ts化
feat: 全面TS化
perf: 全面ts化
refactor: 继续优化ts
perf: ts定义优化
fix: 修复wangeditor无法上传视频的bug

packages/ui/certd-client/src/views/crud/advanced/big-data/api.ts

@@ -1,7 +1,8 @@
 import { requestForMock } from "/src/api/service";
+
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedBigData";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +10,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +18,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +26,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +34,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",

packages/ui/certd-client/src/views/crud/advanced/big-data/crud.tsx

@@ -1,19 +1,19 @@
 import * as api from "./api";
-import { message } from "ant-design-vue";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
@@ -41,7 +41,6 @@ export default function ({ expose }) {
       columns: {
         id: {
           title: "ID",
-          key: "id",
           type: "number",
           column: {
             width: 50

packages/ui/certd-client/src/views/crud/advanced/big-data/index.vue

@@ -7,30 +7,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+
 export default defineComponent({
   name: "AdvancedBigData",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, output } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose, output } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {

packages/ui/certd-client/src/views/crud/advanced/big-data/mock.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedBigData",
   idGenerator: 0,
   copyTimes: 1000

packages/ui/certd-client/src/views/crud/advanced/from-backend/api.ts

@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedFromBackend";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",

packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue

@@ -1,11 +1,20 @@
 <template>
-  <fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding" />
+  <fs-page>
+    <template #header>
+      <div class="title">CrudOptions从后台加载</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/use.html#usefsasync">文档</a>
+      </div>
+    </template>
+    <fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, Ref } from "vue";
-import { useCrud, dict, useExpose, useFs, UseFsProps, CrudBinding, CreateCrudOptionsRet, useFsAsync } from "@fast-crud/fast-crud";
+import { defineComponent, onMounted, ref, Ref } from "vue";
+import { CrudBinding, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
+
 export default defineComponent({
   name: "AdvancedFromBackend",
   setup() {

packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/api.ts

@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedInDialog";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",

packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx

@@ -1,19 +1,22 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, dict } from "@fast-crud/fast-crud";
+import { SearchOutlined } from "@ant-design/icons-vue";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
@@ -68,23 +71,16 @@ export default function ({ expose }) {
         },
         render: {
           title: "复杂输入(render)",
+          type: "text",
           form: {
             title: "复杂输入",
             component: {
-              render(context) {
+              render(context: any) {
                 console.log("context scope", context);
                 return (
                   <a-input-group compact>
-                    <a-input
-                      placeholder={"render1 input"}
-                      style="width: 50%"
-                      v-model={[context.form.render, "value"]}
-                    />
-                    <a-input
-                      placeholder={"render2 input"}
-                      style="width: 50%"
-                      v-model={[context.form.render2, "value"]}
-                    />
+                    <a-input placeholder={"render1 input"} style="width: 50%" v-model={[context.form.render, "value"]} />
+                    <a-input placeholder={"render2 input"} style="width: 50%" v-model={[context.form.render2, "value"]} />
                   </a-input-group>
                 );
               }
@@ -93,6 +89,7 @@ export default function ({ expose }) {
         },
         render2: {
           title: "我的值是由复杂输入列输入的",
+          type: "text",
           column: {
             width: "300px"
           },

packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/index.vue

@@ -4,31 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
-  name: "fs-in-dialog",
+  name: "FsInDialog",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {

packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/mock.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedInDialog",
   idGenerator: 0
 };

packages/ui/certd-client/src/views/crud/advanced/in-dialog/index.vue

@@ -1,32 +1,30 @@
 <template>
   <fs-page>
     <template #header>
-      <div class="title">
-        对话框中显示crud
-      </div>
+      <div class="title">对话框中显示crud</div>
     </template>
-    <div style="padding:50px">
+    <div style="padding: 50px">
       <a-button type="primary" @click="openDialog">打开对话框</a-button>
     </div>
 
     <a-modal v-model:visible="dialogShow" width="80%" title="fs-crud in dialog">
-      <div style="height: 400px;position: relative">
-        <fs-in-dialog ></fs-in-dialog>
+      <div style="height: 400px; position: relative">
+        <fs-in-dialog></fs-in-dialog>
       </div>
     </a-modal>
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from "vue";
-import FsInDialog from './crud/index.vue'
+import FsInDialog from "./crud/index.vue";
 export default defineComponent({
   name: "InDialog",
-  components:{FsInDialog},
+  components: { FsInDialog },
   setup() {
-    const dialogShow = ref(false)
-    function openDialog(){
-      dialogShow.value=true
+    const dialogShow = ref(false);
+    function openDialog() {
+      dialogShow.value = true;
     }
     return {
       dialogShow,

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 ({ expose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
@@ -30,7 +30,6 @@ export default function ({ expose }: CreateCrudOptionsProps): CreateCrudOptionsR
       columns: {
         id: {
           title: "ID",
-          key: "id",
           type: "number",
           column: {
             width: 50
@@ -51,7 +50,7 @@ export default function ({ expose }: CreateCrudOptionsProps): CreateCrudOptionsR
             cache: true
           }),
           form: {
-            valueChange({ form, value, getComponentRef }: ScopeContext) {
+            valueChange({ form, value, getComponentRef }) {
               form.city = undefined; // 将“city”的值置空
               form.county = undefined; // 将“county”的值置空
               if (value) {

packages/ui/certd-client/src/views/crud/advanced/local-pagination/api.ts

@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedLocalPagination";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",

packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.tsx

@@ -1,14 +1,16 @@
-import * as api from "./api";
+import * as api from "./api.js";
 import _ from "lodash-es";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose, localDataRef }) {
-  const pageRequest = async ({ page, query }) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose, localDataRef }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    const { page } = query;
     //总数据
     let data = localDataRef.value;
     //获取请求参数
     const limit = page.limit;
-    let offset = page.offset;
-    data = data.filter((item) => {
+    const offset = page.offset;
+    data = data.filter((item: any) => {
       // 根据你的业务，编写你的本地查询逻辑
       // text改成你的查询字段
       if (query.status && item.status !== query.status) {
@@ -33,7 +35,7 @@ export default function ({ expose, localDataRef }) {
       records
     };
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     await api.UpdateObj(form);
     //更新本地数据
@@ -45,7 +47,7 @@ export default function ({ expose, localDataRef }) {
     }
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     const id = await api.AddObj(form);
     //本地添加
     form.id = id;
@@ -53,7 +55,7 @@ export default function ({ expose, localDataRef }) {
     return id;
   };
 
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     await api.DelObj(row.id);
     //本地删除那一条记录
     const tableData = localDataRef.value;

packages/ui/certd-client/src/views/crud/advanced/local-pagination/index.vue

@@ -11,9 +11,9 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
+import { useCrud, useExpose, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import { GetList } from "./api";
 
@@ -36,16 +36,10 @@ export default defineComponent({
       const ret = await GetList({ page: { offset: 0, limit: 99999999 }, query: {}, sort: {} });
       localDataRef.value = ret.records;
 
-      //然后再初始化crud
-      // 暴露的方法
-      const { expose } = useExpose({ crudRef, crudBinding });
-      // 你的crud配置
-      const { crudOptions } = createCrudOptions({ expose, localDataRef });
-      // 初始化crud配置
-      useCrud({ expose, crudOptions });
+      const { crudExpose } = useFs({ crudBinding, crudRef, createCrudOptions, localDataRef });
 
       // 页面打开后获取列表数据
-      await expose.doRefresh();
+      await crudExpose.doRefresh();
     });
 
     return {

packages/ui/certd-client/src/views/crud/advanced/local-pagination/mock.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedLocalPagination",
   idGenerator: 0
 };

packages/ui/certd-client/src/views/crud/advanced/nest/api.ts

@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedNest";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any[]) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",

packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/api.ts

@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedAside";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any[]) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",

packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.tsx

@@ -1,14 +1,19 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const editRequest = async ({ form, row }) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
-  const addRequest = async ({ form }) => {
+
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 

packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/index.vue

@@ -6,37 +6,26 @@
   </fs-crud>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import createCrudOptions from "./crud.js";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "AsideTable",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedIds } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
       crudRef,
-      setSearchFormData: expose.setSearchFormData,
-      doRefresh: expose.doRefresh
+      setSearchFormData: crudExpose.setSearchFormData,
+      doRefresh: crudExpose.doRefresh
     };
   }
 });

packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/mock.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedAside",
   idGenerator: 0
 };

packages/ui/certd-client/src/views/crud/advanced/nest/crud.tsx

@@ -1,21 +1,27 @@
 import * as api from "./api";
 import { ref, shallowRef } from "vue";
 import SubTable from "./sub-table/index.vue";
-import { compute } from "@fast-crud/fast-crud";
-export default function ({ expose, asideTableRef }) {
-  const editRequest = async ({ form, row }) => {
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose, asideTableRef }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
-  const addRequest = async ({ form }) => {
+
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   const currentRow = ref();
 
-  const onCurrentRowChange = (id) => {
+  const onCurrentRowChange = (id: number) => {
     currentRow.value = id;
     asideTableRef.value.setSearchFormData({ form: { gradeId: id } });
     asideTableRef.value.doRefresh();
@@ -23,7 +29,7 @@ export default function ({ expose, asideTableRef }) {
   return {
     crudOptions: {
       table: {
-        customRow(record, index) {
+        customRow(record: any, index: number) {
           const clazz = record.id === currentRow.value ? "fs-current-row" : "";
           return {
             onClick() {

packages/ui/certd-client/src/views/crud/advanced/nest/index.vue

@@ -13,34 +13,24 @@
   </a-row>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+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";
+
 export default defineComponent({
   name: "FeatureNest",
   // eslint-disable-next-line vue/no-unused-components
   components: { AsideTable },
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
     const asideTableRef = ref();
-    const { crudOptions } = createCrudOptions({ expose, asideTableRef });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, asideTableRef });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {

packages/ui/certd-client/src/views/crud/advanced/nest/mock.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedNest",
   idGenerator: 0
 };

packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/api.ts

@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedSubTable";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any[]) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",

packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/crud.tsx

@@ -1,20 +1,26 @@
 import * as api from "./api";
-export default function ({ expose, props, ctx }) {
-  const editRequest = async ({ form, row }) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose, props, ctx }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
-  const addRequest = async ({ form }) => {
+
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
   return {
     crudOptions: {
       table: {
-        customRow(record, index) {
+        customRow(record: any, index: number) {
           const clazz = record.id === props.modelValue ? "fs-current-row" : "";
           return {
             onClick() {

packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue

@@ -7,10 +7,11 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted, watch } from "vue";
+<script lang="ts">
+import { defineComponent, onMounted, watch } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "SubTable",
   props: {
@@ -19,23 +20,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, ctx) {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose, props, ctx });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, props, ctx });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     //你的业务代码

packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/mock.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedSubTable",
   idGenerator: 0
 };