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

perf: 完善文档，完善部分types
perf: 优化d.ts类型
perf: 日期增加week、month、year、quarter类型
feat: resetCrudOptions 示例
feat: tabs快捷查询组件
fix: 行编辑支持多级表头

https://github.com/fast-crud/fast-crud/issues/143
perf: antdv 增加自定义表头示例

https://github.com/fast-crud/fast-crud/issues/141
perf: 表单下方按钮支持context

https://github.com/fast-crud/fast-crud/issues/142

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

@@ -1,5 +1,5 @@
 export const crudOptions = `
- ({expose,dict}) => {
+ ({crudExpose,dict}) => {
   return {
       columns: {
         id: {

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

@@ -1,27 +0,0 @@
-import * as api from "./api";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
-    return await api.GetList(query);
-  };
-  const editRequest = async ({ form, row }) => {
-    form.id = row.id;
-    return await api.UpdateObj(form);
-  };
-  const delRequest = async ({ row }) => {
-    return await api.DelObj(row.id);
-  };
-
-  const addRequest = async ({ form }) => {
-    return await api.AddObj(form);
-  };
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      }
-    }
-  };
-}

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

@@ -0,0 +1,49 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, dict } from "@fast-crud/fast-crud";
+import { GetCrud } from "./api";
+import _ from "lodash-es";
+
+/**
+ * 异步创建options
+ * @param props
+ */
+export default async function (props: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
+  const { crudExpose } = props;
+  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 }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  const localCrudOptions = {
+    request: {
+      pageRequest,
+      addRequest,
+      editRequest,
+      delRequest
+    }
+  };
+  // 上面是本地crudOptions
+
+  // 下面从后台获取crudOptions
+  const ret = await GetCrud();
+  // 编译
+  const crudBackend = eval(ret);
+  // 本示例返回的是一个方法字符串，所以要先执行这个方法，获取options
+  const remoteCrudOptions = crudBackend({ crudExpose, dict });
+  // 与本地options合并
+  const crudOptions = _.merge(localCrudOptions, remoteCrudOptions);
+
+  return {
+    crudOptions
+  };
+}

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

@@ -2,38 +2,27 @@
   <fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding" />
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, dict, useExpose } from "@fast-crud/fast-crud";
+<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 createCrudOptions from "./crud";
-import { GetCrud } from "./api";
-import _ from "lodash-es";
 export default defineComponent({
   name: "AdvancedFromBackend",
   setup() {
     // crud组件的ref
-    const crudRef = ref();
+    const crudRef: Ref = ref();
     // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
+    const crudBinding: Ref<CrudBinding> = ref();
+
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数
+
     // 初始化crud配置
     // 页面打开后获取列表数据
     onMounted(async () => {
-      // 从后台获取crud配置
-      const ret = await GetCrud();
-      // 编译
-      const crudBackend = eval(ret);
-      // 本示例返回的是一个方法字符串，所以要先执行这个方法，获取options
-      const crudOptionsFromBackend = crudBackend({ expose, dict });
-      // 与本地options合并
-      _.merge(crudOptions, crudOptionsFromBackend);
-      // useCrud
-      useCrud({ expose, crudOptions });
+      const customValue = {};
+      const { crudExpose, extraExport } = await useFsAsync({ crudRef, crudBinding, createCrudOptions, customValue });
       // 刷新数据
-      expose.doRefresh();
+      await crudExpose.doRefresh();
     });
 
     return {

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

@@ -1,6 +1,7 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
 import { crudOptions } from "./crud-backend";
-const options = {
+const options: any = {
   name: "AdvancedFromBackend",
   idGenerator: 0
 };
@@ -23,7 +24,7 @@ const mock = mockUtil.buildMock(options);
 mock.push({
   path: "/AdvancedFromBackend/crud",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     return {
       code: 0,
       msg: "success",

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

@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormLinkage";
-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/linkage/crud.tsx

@@ -1,18 +1,18 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, ScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+export default function ({ expose }: 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);
   };
 
@@ -51,7 +51,7 @@ export default function ({ expose }) {
             cache: true
           }),
           form: {
-            valueChange({ form, value, getComponentRef }) {
+            valueChange({ form, value, getComponentRef }: ScopeContext) {
               form.city = undefined; // 将“city”的值置空
               form.county = undefined; // 将“county”的值置空
               if (value) {
@@ -70,7 +70,7 @@ export default function ({ expose }) {
             cache: true,
             prototype: true,
             // url() 改成构建url，返回一个url
-            url({ form }) {
+            url({ form }: any) {
               if (form && form.province != null) {
                 // 本数据字典的url是通过前一个select的选项决定的
                 return `/mock/linkage/city?province=${form.province}`;
@@ -81,7 +81,7 @@ export default function ({ expose }) {
           }),
           form: {
             // 注释同上
-            valueChange({ value, form, getComponentRef }) {
+            valueChange({ value, form, getComponentRef }: ScopeContext) {
               if (value) {
                 form.county = undefined; // 将county的value置空
                 const countySelect = getComponentRef("county");
@@ -104,7 +104,7 @@ export default function ({ expose }) {
             value: "id",
             cache: true,
             prototype: true,
-            url({ form }) {
+            url({ form }: any) {
               if (form && form.province != null && form.city != null) {
                 return `/mock/linkage/county?province=${form.province} &city=${form.city}`;
               }

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

@@ -2,31 +2,20 @@
   <fs-crud ref="crudRef" v-bind="crudBinding" />
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-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: "FormLinkage",
   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 customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {

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

@@ -1,6 +1,7 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
 import _ from "lodash-es";
-const options = {
+const options: any = {
   name: "FormLinkage",
   idGenerator: 0
 };
@@ -64,12 +65,12 @@ const tree = [
 ];
 
 options.list = list;
-options.copyTimes = 1000;
+options.copyTimes = 100;
 const mock = mockUtil.buildMock(options);
 
-function omitChildren(orignalListt) {
-  const list = [];
-  orignalListt.forEach((item) => {
+function omitChildren(originalList: any) {
+  const list: any = [];
+  originalList.forEach((item: any) => {
     list.push(_.omit(item, "children"));
   });
   return list;
@@ -90,7 +91,7 @@ mock.push({
 mock.push({
   path: "/mock/linkage/city",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     const province = parseInt(req.params.province);
     const a = tree.filter((item) => {
       return item.id === province;
@@ -107,7 +108,7 @@ mock.push({
 mock.push({
   path: "/mock/linkage/county",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     const province = parseInt(req.params.province);
     const a = tree.filter((item) => {
       return item.id === province;

packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/api.ts

@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/BasisColumnMergePlugin";
-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/basis/column-merge-plugin/crud.tsx

@@ -1,19 +1,19 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+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);
   };
 

packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/index.vue

@@ -12,14 +12,15 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFs, UseFsProps } from "@fast-crud/fast-crud";
 export default defineComponent({
   name: "BasisColumnMergePlugin",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
     // 页面打开后获取列表数据
     onMounted(() => {
       crudExpose.doRefresh();

packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/mock.ts

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

packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue

@@ -1,8 +1,14 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">列设置</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/toolbar.html#columnsfilter-mode">文档</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert class="ml-1" type="warning" message="列设置可以禁用或者隐藏某字段勾选" />
+        <a-alert class="ml-1" type="warning" message="列设置可以禁用或者隐藏某字段勾选 ，-------> 点击右侧最后一个按钮查看效果" />
         <a-button @click="columnsSetToggleMode()"> 切换简单模式 </a-button>
       </template>
     </fs-crud>
@@ -37,9 +43,8 @@ export default defineComponent({
     });
 
     function columnsSetToggleMode() {
-      crudBinding.value.toolbar.columnsFilter.mode =
-        crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
-      message.info("当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
+      crudBinding.value.toolbar.columnsFilter.mode = crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
+      message.info("点击列设置按钮查看效果，当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
     }
 
     return {

packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue

@@ -2,6 +2,9 @@
   <fs-page>
     <template #header>
       <div class="title">动态计算-更多测试</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">文档</a>
+      </div>
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>

packages/ui/certd-client/src/views/crud/basis/compute/crud.jsx

@@ -177,9 +177,7 @@ export default function ({ expose }) {
                 },
                 async asyncFn(watchValue) {
                   message.info("监听switch,触发远程获取options");
-                  const url = watchValue
-                    ? "/mock/dicts/OpenStatusEnum?remote"
-                    : "/mock/dicts/moreOpenStatusEnum?remote";
+                  const url = watchValue ? "/mock/dicts/OpenStatusEnum?remote" : "/mock/dicts/moreOpenStatusEnum?remote";
                   return await requestForMock({ url });
                 }
               })

packages/ui/certd-client/src/views/crud/basis/compute/index.vue

@@ -6,7 +6,7 @@
         <fs-icon icon="ion:apps-sharp" :spin="true" />
       </div>
       <div class="more">
-        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">帮助说明</a>
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">文档</a>
       </div>
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">

packages/ui/certd-client/src/views/crud/basis/first/api.ts

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

packages/ui/certd-client/src/views/crud/basis/first/crud.ts

@@ -0,0 +1,54 @@
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import * as api from "./api";
+export default function ({ crudExpose, customValue }: 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 }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    //自定义变量返回
+    customExport: {},
+    crudOptions: {
+      // 自定义crudOptions配置
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      //两个字段
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text",
+          search: { show: true },
+          column: {
+            resizable: true,
+            width: 200
+          }
+        },
+        type: {
+          title: "类型",
+          type: "dict-select",
+          dict: dict({
+            data: [
+              { value: 1, label: "开始", color: "green" },
+              { value: 0, label: "停止", color: "red" }
+            ]
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/basis/first/index.vue

@@ -1,105 +1,46 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">第一个crud</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/first.html">文档</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding" />
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { dict, useCrud } from "@fast-crud/fast-crud";
-import { useExpose } from "@fast-crud/fast-crud";
-import _ from "lodash-es";
-
-//此处为crudOptions配置
-const createCrudOptions = function ({ expose }) {
-  //本地模拟后台crud接口方法 ----开始
-  const records = [{ id: 1, name: "Hello World", type: 1 }];
-  const pageRequest = async (query) => {
-    return {
-      records,
-      currentPage: 1,
-      pageSize: 20,
-      total: records.length
-    };
-  };
-  const editRequest = async ({ form, row }) => {
-    const target = _.find(records, (item) => {
-      return row.id === item.id;
-    });
-    _.merge(target, form);
-    return target;
-  };
-  const delRequest = async ({ row }) => {
-    _.remove(records, (item) => {
-      return item.id === row.id;
-    });
-  };
-  const addRequest = async ({ form }) => {
-    const maxRecord = _.maxBy(records, (item) => {
-      return item.id;
-    });
-    form.id = (maxRecord?.id || 0) + 1;
-    records.push(form);
-    return form;
-  };
-  //本地模拟后台crud接口方法 -----结束
-
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      },
-      columns: {
-        name: {
-          title: "姓名",
-          type: "text",
-          search: { show: true },
-          column: {
-            resizable: true,
-            width: 200
-          }
-        },
-        type: {
-          title: "类型",
-          type: "dict-select",
-          dict: dict({
-            data: [
-              { value: 1, label: "开始" },
-              { value: 0, label: "停止" }
-            ]
-          })
-        }
-      }
-    }
-  };
-};
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
 
 //此处为组件定义
 export default defineComponent({
   name: "FsCrudFirst",
   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)
+    // 演示自定义变量传递, 将会传递给createCrudOptions
+    const customValue: any = {};
+
+    // // 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 });
+
+    //  =======以上为fs的初始化代码=========
+    //  =======你可以简写为下面这一行========
+    const { crudRef, crudBinding, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
-
     return {
       crudBinding,
       crudRef

packages/ui/certd-client/src/views/crud/basis/first/mock.ts

@@ -0,0 +1,22 @@
+// @ts-ignore
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "FsCrudFirst",
+  idGenerator: 0
+};
+const list = [
+  {
+    name: "张三",
+    type: 1
+  },
+  {
+    name: "李四",
+    type: 0
+  },
+  {
+    name: "王五"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/basis/helloworld/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">HelloWorld</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/integration.html">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from "vue";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useCrud, useFs, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import _ from "lodash-es";
+
+//此处为crudOptions配置
+const createCrudOptions = function ({ crudOptions, customValue }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  //本地模拟后台crud接口方法 ----开始
+  const records = [{ id: 1, name: "Hello World", type: 1 }];
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return {
+      records,
+      currentPage: 1,
+      pageSize: 20,
+      total: records.length
+    };
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    const target = _.find(records, (item) => {
+      return row.id === item.id;
+    });
+    _.merge(target, form);
+    return target;
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    _.remove(records, (item) => {
+      return item.id === row.id;
+    });
+  };
+  const addRequest = async ({ form }: AddReq) => {
+    const maxRecord = _.maxBy(records, (item) => {
+      return item.id;
+    });
+    form.id = (maxRecord?.id || 0) + 1;
+    records.push(form);
+    return form;
+  };
+  //本地模拟后台crud接口方法 -----结束
+
+  return {
+    //自定义变量返回
+    customExport: {},
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text",
+          search: { show: true },
+          column: {
+            resizable: true,
+            width: 200
+          }
+        },
+        type: {
+          title: "类型",
+          type: "dict-select",
+          dict: dict({
+            data: [
+              { value: 1, label: "开始" },
+              { value: 0, label: "停止" }
+            ]
+          })
+        }
+      }
+    }
+  };
+};
+
+//此处为组件定义
+export default defineComponent({
+  name: "FsCrudHelloWorld",
+  setup() {
+    // 演示自定义变量传递, 将会传递给createCrudOptions
+    const customValue: any = {};
+
+    // // 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 });
+
+    //  =======以上为fs的初始化代码=========
+    //  =======你可以简写为下面这一行========
+    const { crudRef, crudBinding, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/basis/i18n/index.vue

@@ -2,7 +2,9 @@
   <fs-page>
     <template #header>
       <div class="title">CRUD示例【国际化】</div>
-      <div class="more"><a-button @click="showDemo">更多</a-button></div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/i18n.html">文档</a>
+      </div>
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
@@ -40,13 +42,9 @@ export default defineComponent({
       expose.doRefresh();
     });
 
-    function showDemo() {
-      message("演示按钮");
-    }
     return {
       crudBinding,
-      crudRef,
-      showDemo
+      crudRef
     };
   }
 });

packages/ui/certd-client/src/views/crud/basis/layout-card/crud.jsx

@@ -1,5 +1,7 @@
 import * as api from "./api";
 import { dict } from "@fast-crud/fast-crud";
+import { computed } from "vue";
+
 export default function ({ crudExpose }) {
   const pageRequest = async (query) => {
     return await api.GetList(query);
@@ -15,6 +17,17 @@ export default function ({ crudExpose }) {
   const addRequest = async ({ form }) => {
     return await api.AddObj(form);
   };
+  let cityDictRef = dict({
+    value: "id",
+    label: "text",
+    data: [
+      { id: "sz", text: "深圳", color: "success" },
+      { id: "gz", text: "广州", color: "blue" },
+      { id: "bj", text: "北京" },
+      { id: "wh", text: "武汉" },
+      { id: "sh", text: "上海" }
+    ]
+  });
   return {
     crudOptions: {
       container: {
@@ -26,6 +39,16 @@ export default function ({ crudExpose }) {
         editRequest,
         delRequest
       },
+      tabs: {
+        name: "city",
+        show: true,
+        type: "card",
+        value: "id",
+        label: "text",
+        options: computed(() => {
+          return cityDictRef.data;
+        })
+      },
       columns: {
         id: {
           title: "ID",
@@ -47,17 +70,7 @@ export default function ({ crudExpose }) {
           title: "城市",
           type: "dict-select",
           search: { show: true },
-          dict: dict({
-            value: "id",
-            label: "text",
-            data: [
-              { id: "sz", text: "深圳", color: "success" },
-              { id: "gz", text: "广州", color: "blue" },
-              { id: "bj", text: "北京" },
-              { id: "wh", text: "武汉" },
-              { id: "sh", text: "上海" }
-            ]
-          })
+          dict: cityDictRef
         },
         radio: {
           title: "单选",

packages/ui/certd-client/src/views/crud/basis/layout-card/index.vue

@@ -1,5 +1,11 @@
 <template>
   <fs-page class="page-layout-card">
+    <template #header>
+      <div class="title">Card布局</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/layout.html">文档</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
@@ -42,5 +48,9 @@ export default defineComponent({
 <style lang="less">
 .page-layout-card {
   background-color: #eee;
+
+  .fs-page-header {
+    background-color: #fff;
+  }
 }
 </style>

packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.jsx

@@ -22,6 +22,11 @@ export default function ({ crudExpose }) {
       container: {
         is: shallowRef(CustomLayout) //可以将自定义布局组件全局注册，这里只需要配置name即可
       },
+      tabs: {
+        show: true,
+        name: "city",
+        type: "card"
+      },
       request: {
         pageRequest,
         addRequest,
@@ -48,7 +53,7 @@ export default function ({ crudExpose }) {
         city: {
           title: "城市",
           type: "dict-select",
-          search: { show: false },
+          search: { show: true },
           dict: dict({
             value: "id",
             label: "text",

packages/ui/certd-client/src/views/crud/basis/layout-custom/custom-layout.vue

@@ -9,6 +9,8 @@
     <div class="layout-top">
       <!-- ↓↓↓↓↓  关键插槽：动作条  ↓↓↓↓ -->
       <slot name="actionbar"></slot>
+
+      <slot name="tabs"></slot>
       <!-- ↓↓↓↓↓  上翻页条  ↓↓↓↓ -->
       <slot name="pagination"></slot>
     </div>
@@ -70,5 +72,10 @@ export default defineComponent({
     text-align: right;
     padding: 5px 10px 5px 10px;
   }
+
+  .fs-tabs-filter {
+    flex: 1;
+    margin-left: 10px;
+  }
 }
 </style>

packages/ui/certd-client/src/views/crud/basis/layout-custom/index.vue

@@ -1,17 +1,15 @@
 <template>
   <fs-page class="page-layout-custom">
     <template #header>
-      <div class="title">自定义布局</div>
+      <div class="title">
+        自定义布局
+        <span class="sub">通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/layout.html">文档</a>
+      </div>
     </template>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="info"
-          message="通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条 -------->"
-        />
-      </template>
-    </fs-crud>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 

packages/ui/certd-client/src/views/crud/basis/reset/api.ts

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

packages/ui/certd-client/src/views/crud/basis/reset/crud.tsx

@@ -0,0 +1,54 @@
+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 {
+  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 }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    output: {},
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        switch: {
+          title: "开关",
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { value: true, label: "开启" },
+              { value: false, label: "关闭" }
+            ]
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/basis/reset/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        重置CrudOptions
+        <span class="sub">重置CrudOptions,演示2秒后追加一个字段</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/use.html">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs, UseFsProps } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+import _ from "lodash-es";
+export default defineComponent({
+  name: "BasisReset",
+  setup() {
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport, crudOptions, resetCrudOptions, appendBindingOptions } = useFs({ createCrudOptions, customValue } as UseFsProps);
+
+    setTimeout(() => {
+      //合并新的crudOptions
+      const newOptions = _.merge(crudOptions, {
+        columns: {
+          text: {
+            title: "追加字段",
+            type: "text"
+          }
+        }
+      });
+      //重置crudBinding
+      resetCrudOptions(newOptions);
+      crudExpose.doRefresh();
+    }, 2000);
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/basis/reset/mock.ts

@@ -0,0 +1,23 @@
+// @ts-ignore
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "BasisValueChange",
+  idGenerator: 0
+};
+const list = [
+  {
+    switch: true,
+    text: "1111"
+  },
+  {
+    switch: true,
+    text: "2222"
+  },
+  {
+    switch: true,
+    text: "3333"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/basis/value-change/index.vue

@@ -2,6 +2,9 @@
   <fs-page>
     <template #header>
       <div class="title">ValueChange</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#valuebuilder与valueresolve">文档</a>
+      </div>
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>

packages/ui/certd-client/src/views/crud/component/date/crud.jsx

@@ -27,7 +27,7 @@ export default function ({ expose }) {
         delRequest
       },
       table: {
-        scroll: { x: 2000 }
+        scroll: { x: 3000 }
       },
       rowHandle: { fixed: "right" },
       columns: {
@@ -71,6 +71,17 @@ export default function ({ expose }) {
                 largest: 2
               }
             }
+          },
+          valueBuilder({ value, row, key }) {
+            console.log("value builder:", key, value, row);
+            if (value != null) {
+              row[key] = dayjs(value);
+            }
+          },
+          valueResolve({ value, row, key }) {
+            if (value != null) {
+              row[key] = value.unix();
+            }
           }
         },
         datetime: {
@@ -122,6 +133,42 @@ export default function ({ expose }) {
             }
           }
         },
+        month: {
+          title: "月份",
+          type: "month",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
+            }
+          }
+        },
+        week: {
+          title: "星期",
+          type: "week",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
+            }
+          }
+        },
+        quarter: {
+          title: "季度",
+          type: "quarter",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
+            }
+          }
+        },
+        year: {
+          title: "年份",
+          type: "year",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
+            }
+          }
+        },
         disabledDate: {
           title: "禁用日期",
           type: "date",

packages/ui/certd-client/src/views/crud/component/date/mock.js

@@ -12,6 +12,10 @@ const list = [
     date: "2019-09-02 11:11:11",
     format: "2019-09-21 11:11:11",
     time: "2019-09-22 12:11:11",
+    month: "2019-09-22 12:11:11",
+    week: "2019-09-22 12:11:11",
+    quarter: "2019-09-22 12:11:11",
+    year: "2019-09-22 12:11:11",
     daterangeStart: "2019-09-23 11:11:11",
     daterangeEnd: "2019-09-24 11:11:11",
     datetimerangeStart: "2019-09-25 11:11:11",

packages/ui/certd-client/src/views/crud/dict/cloneable/index.vue

@@ -1,12 +1,17 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">
+        分发时复制Dict
+        <span class="sub">如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/dict.html">文档</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="warning"
-          message="如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制；----点击switch看效果----↓↓↓↓↓↓"
-        />
+        <a-alert class="ml-1" type="warning" message="如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制；----点击switch看效果----↓↓↓↓↓↓" />
       </template>
     </fs-crud>
   </fs-page>

packages/ui/certd-client/src/views/crud/dict/prototype/index.vue

@@ -1,12 +1,17 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">
+        原型复制Dict
+        <span class="sub">dict配置作为原型，任何用到的地方都会clone一个新的实例例（同一个字段每一行的dict都是不一样的）</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/dict.html">文档</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="warning"
-          message="dict配置作为原型，任何用到的地方都会clone一个新的实例例（同一个字段每一行的dict都是不一样的）------点击switch看效果-------↓↓↓↓↓↓↓↓"
-        />
+        <a-alert class="ml-1" type="warning" message="------点击switch看效果-------↓↓↓↓↓↓↓↓" />
       </template>
     </fs-crud>
   </fs-page>

packages/ui/certd-client/src/views/crud/dict/shared/manager/api.ts

@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/DictSharedManager";
-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/dict/shared/manager/crud.tsx

@@ -1,18 +1,19 @@
-import * as api from "./api";
+import * as api from "./api.js";
 import { statusDict } from "../shared-dict";
-export default function ({ crudExpose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, 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);
   };
 

packages/ui/certd-client/src/views/crud/dict/shared/manager/index.vue

@@ -1,14 +1,16 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-alert class="ml-1" type="warning" message="管理共享字典，此处添加和修改字典，在使用时实时变化" />
-      </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">
+        管理共享字典
+        <span class="sub">此处添加和修改字典，在使用时实时变化</span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
@@ -16,8 +18,8 @@ import createCrudOptions from "./crud";
 export default defineComponent({
   name: "DictSharedManager",
   setup() {
-    // crud组件的ref
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
 
     // 页面打开后获取列表数据
     onMounted(() => {

packages/ui/certd-client/src/views/crud/dict/shared/manager/mock.ts

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

packages/ui/certd-client/src/views/crud/dict/shared/shared-dict.ts

@@ -1,5 +1,5 @@
 import { dict, utils } from "@fast-crud/fast-crud";
-import * as api from "./manager/api";
+import * as api from "./manager/api.js";
 export const statusDict = dict({
   value: "name",
   async getData() {

packages/ui/certd-client/src/views/crud/dict/shared/use/api.ts

@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/DictSharedUse";
-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/dict/shared/use/crud.tsx

@@ -1,18 +1,20 @@
-import * as api from "./api";
+import * as api from "./api.js";
 import { statusDict } from "../shared-dict";
-export default function ({ crudExpose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, 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);
   };
 

packages/ui/certd-client/src/views/crud/dict/shared/use/index.vue

@@ -1,23 +1,26 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-alert class="ml-1" type="warning" message="共享字典的使用" />
-      </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">
+        共享字典的使用
+        <span class="sub">在管理共享字典页面添加字典后，使用时会自动增加字典选项</span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import { useFs } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
+import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "DictSharedUse",
   setup() {
     // crud组件的ref
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
 
     // 页面打开后获取列表数据
     onMounted(() => {

packages/ui/certd-client/src/views/crud/dict/shared/use/mock.ts

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

packages/ui/certd-client/src/views/crud/dict/single/index.vue

@@ -1,8 +1,17 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">
+        单例Dict
+        <span class="sub">修改一个，影响全部组件</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/dict.html">文档</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert class="ml-1" type="warning" message="单例dict，修改一个，影响全部组件，----------点击switch看效果----------↓↓↓↓↓↓↓↓↓↓↓↓↓↓" />
+        <a-alert class="ml-1" type="warning" message="----------点击switch看效果----------↓↓↓↓↓↓↓↓↓↓↓↓↓↓" />
       </template>
     </fs-crud>
   </fs-page>

packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue

@@ -1,8 +1,15 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" style="position: relative" v-bind="crudBinding">
-      <template #actionbar-right> 列头可以调整宽度 </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">
+        列宽调整
+        <span class="sub">列头可以调整宽度</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/table.html#对应ui库的table组件的参数">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" style="position: relative" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 

packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue

@@ -1,12 +1,18 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">
+        字段列排序
+        <span class="sub">表格列和表单字段可以单独配置顺序，配置order即可控制字段的顺序，数字越小越靠前，默认为1，（配置0或负数排前面，配置2以上排后面）</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#key-column-order">列顺序配置</a> /
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#key-form-order">表单字段顺序配置</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="info"
-          message="配置order即可控制字段的顺序，数字越小越靠前，默认为1，（配置0或负数排前面，配置2以上排后面）"
-        />
+        <a-alert class="ml-1" type="info" message="" />
       </template>
     </fs-crud>
   </fs-page>

packages/ui/certd-client/src/views/crud/feature/columns-set/index.vue

@@ -1,12 +1,12 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">列设置（简化模式）</div>
+      <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/toolbar.html#columnsfilter-mode">文档</a></div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert
-            class="ml-1"
-            type="warning"
-            message="列设置支持简化模式"
-        />
+        <a-alert class="ml-1" type="warning" message="列设置支持简化模式 ------> 点击最右侧按钮查看效果" />
       </template>
     </fs-crud>
   </fs-page>
@@ -42,7 +42,7 @@ export default defineComponent({
 
     return {
       crudBinding,
-      crudRef,
+      crudRef
     };
   }
 });

packages/ui/certd-client/src/views/crud/feature/editable-row/crud.jsx

@@ -66,21 +66,31 @@ export default function ({ expose }) {
           title: "姓名",
           type: "text"
         },
-        province: {
-          title: "省份",
-          search: { show: true },
-          type: "dict-select",
-          dict: dict({
-            value: "id",
-            label: "text",
-            data: [
-              { id: "sz", text: "深圳", color: "success" },
-              { id: "gz", text: "广州", color: "primary" },
-              { id: "bj", text: "北京" },
-              { id: "wh", text: "武汉" },
-              { id: "sh", text: "上海" }
-            ]
-          })
+        address: {
+          title: "地址",
+          children: {
+            province: {
+              title: "省份",
+              search: { show: true },
+              type: "text"
+            },
+            city: {
+              title: "城市",
+              search: { show: true },
+              type: "dict-select",
+              dict: dict({
+                value: "id",
+                label: "text",
+                data: [
+                  { id: "sz", text: "深圳", color: "success" },
+                  { id: "gz", text: "广州", color: "primary" },
+                  { id: "bj", text: "北京" },
+                  { id: "wh", text: "武汉" },
+                  { id: "sh", text: "上海" }
+                ]
+              })
+            }
+          }
         }
       }
     }

packages/ui/certd-client/src/views/crud/feature/editable-row/index.vue

@@ -1,5 +1,9 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">行编辑模式</div>
+      <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/expose.html">文档</a></div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding" />
   </fs-page>
 </template>

packages/ui/certd-client/src/views/crud/feature/editable/crud.jsx

@@ -83,21 +83,31 @@ export default function ({ expose }) {
           title: "姓名",
           type: "text"
         },
-        province: {
-          title: "省份",
-          search: { show: true },
-          type: "dict-select",
-          dict: dict({
-            value: "id",
-            label: "text",
-            data: [
-              { id: "sz", text: "深圳", color: "success" },
-              { id: "gz", text: "广州", color: "primary" },
-              { id: "bj", text: "北京" },
-              { id: "wh", text: "武汉" },
-              { id: "sh", text: "上海" }
-            ]
-          })
+        address: {
+          title: "地址",
+          children: {
+            province: {
+              title: "省份",
+              search: { show: true },
+              type: "text"
+            },
+            city: {
+              title: "城市",
+              search: { show: true },
+              type: "dict-select",
+              dict: dict({
+                value: "id",
+                label: "text",
+                data: [
+                  { id: "sz", text: "深圳", color: "success" },
+                  { id: "gz", text: "广州", color: "primary" },
+                  { id: "bj", text: "北京" },
+                  { id: "wh", text: "武汉" },
+                  { id: "sh", text: "上海" }
+                ]
+              })
+            }
+          }
         }
       }
     }

packages/ui/certd-client/src/views/crud/feature/editable/index.vue

@@ -1,5 +1,9 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">可编辑</div>
+      <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/expose.html">文档</a></div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
         <!--      <fs-button class="ml-1" @click="addRow">添加行</fs-button>-->

packages/ui/certd-client/src/views/crud/feature/expand/crud.jsx

@@ -26,7 +26,7 @@ export default function ({ expose }) {
       },
       table: {
         //默认展开第一行
-        defaultExpandedRowKeys:[1],
+        defaultExpandedRowKeys: [1],
         slots: {
           expandedRowRender: (scope) => {
             return (

packages/ui/certd-client/src/views/crud/feature/expand/index.vue

@@ -1,12 +1,10 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #pagination-left>
-        <a-tooltip title="批量删除">
-          <fs-button icon="DeleteOutlined" @click="handleBatchDelete"></fs-button>
-        </a-tooltip>
-      </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">行展开</div>
+      <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/table.html#对应ui库的table组件的参数">文档</a></div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
@@ -38,27 +36,9 @@ export default defineComponent({
       expose.doRefresh();
     });
 
-    const handleBatchDelete = () => {
-      if (selectedRowKeys.value?.length > 0) {
-        Modal.confirm({
-          title: "确认",
-          content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
-          async onOk() {
-            await BatchDelete(selectedRowKeys.value);
-            message.info("删除成功");
-            expose.doRefresh();
-            selectedRowKeys.value = [];
-          }
-        });
-      } else {
-        message.error("请先勾选记录");
-      }
-    };
-
     return {
       crudBinding,
-      crudRef,
-      handleBatchDelete
+      crudRef
     };
   }
 });

packages/ui/certd-client/src/views/crud/feature/header/api.ts

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

packages/ui/certd-client/src/views/crud/feature/header/crud.tsx

@@ -0,0 +1,48 @@
+import * as api from "./api.js";
+import { CreateCrudOptionsProps, dict, CreateCrudOptionsRet, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest: api.GetList,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      table: {
+        slots: {
+          headerCell({ column }: any) {
+            if (column.key === "text") {
+              return (
+                <span class={"flex "}>
+                  Text
+                  <a-tooltip title={"tooltip 提示"}>
+                    <fs-icon class={"ml-5"} icon={"ion:alert-circle-outline"}></fs-icon>
+                  </a-tooltip>
+                </span>
+              );
+            }
+          }
+        }
+      },
+      columns: {
+        text: {
+          title: "text",
+          type: "text",
+          search: { show: true }
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/header/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        <span>自定义header</span>
+        <span class="sub">通过配置a-table的headerCell插槽实现</span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import createCrudOptions from "./crud.js";
+import { useFs, UseFsProps } from "@fast-crud/fast-crud";
+defineOptions({
+  name: "FeatureHeader"
+});
+const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue } as UseFsProps);
+
+// 页面打开后获取列表数据
+onMounted(() => {
+  crudExpose.doRefresh();
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/header/mock.ts

@@ -0,0 +1,14 @@
+// @ts-ignore
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "FeatureHeader",
+  idGenerator: 0
+};
+const list = [
+  {
+    text: "上面自定义表头"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/feature/search/crud.jsx

@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { dict } from "@fast-crud/fast-crud";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 export default function ({ expose }) {
   const pageRequest = async (query) => {
     return await api.GetList(query);
@@ -16,6 +16,9 @@ export default function ({ expose }) {
   const addRequest = async ({ form }) => {
     return await api.AddObj(form);
   };
+  let statusRef = dict({
+    url: "/mock/dicts/OpenStatusEnum?single"
+  });
   return {
     crudOptions: {
       request: {
@@ -24,15 +27,9 @@ export default function ({ expose }) {
         editRequest,
         delRequest
       },
-      table: {
-        // 表头过滤改变事件
-        onFilterChange(e) {
-          console.log("onFilterChange", e);
-        }
-      },
       search: {
         initialForm: {
-          radio: "0"
+          radio: null
         },
         buttons: {
           custom: {
@@ -51,6 +48,14 @@ export default function ({ expose }) {
           }
         }
       },
+      tabs: {
+        name: "radio",
+        show: true,
+        type: "card",
+        options: computed(() => {
+          return statusRef.data;
+        })
+      },
       columns: {
         id: {
           title: "ID",
@@ -67,23 +72,7 @@ export default function ({ expose }) {
           title: "状态",
           search: { show: true },
           type: "dict-radio",
-          dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?single"
-          }),
-          column: {
-            filters: [
-              { text: "开", value: "1" },
-              { text: "关", value: "0" },
-              { text: "停", value: "2" }
-            ],
-            // specify the condition of filtering result
-            // here is that finding the name started with `value`
-            onFilter: (value, record) => {
-              return record.radio === value;
-            },
-            sorter: (a, b) => a.radio - b.radio,
-            sortDirections: ["descend"]
-          }
+          dict: statusRef
         }
       }
     }

packages/ui/certd-client/src/views/crud/feature/search/index.vue

@@ -46,10 +46,10 @@ export default defineComponent({
         message.info(`searchForm:${JSON.stringify(form)}`);
       },
       setSearchFormData() {
-        expose.setSearchFormData({ form: { radio: "1", test: 2 }, mergeForm: true });
+        expose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
       },
       clearSearchForm() {
-        expose.setSearchFormData({ form: {}, mergeForm: false });
+        expose.setSearchFormData({ form: { radio: null }, mergeForm: false });
       }
     };
   }

packages/ui/certd-client/src/views/crud/feature/tabs/api.ts

@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FeatureTabs";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: number) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: number) {
+  return request({
+    url: apiPrefix + "/info",
+    method: "get",
+    params: { id }
+  });
+}

packages/ui/certd-client/src/views/crud/feature/tabs/crud.tsx

@@ -0,0 +1,85 @@
+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 {
+  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 }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+  const statusRef = dict({
+    url: "/mock/dicts/OpenStatusEnum?single"
+  });
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      search: {
+        initialForm: {
+          radio: null
+        },
+        buttons: {
+          custom: {
+            text: "自定义",
+            show: true,
+            order: 3,
+            icon: {
+              icon: "ant-design:search",
+              style: {
+                "font-size": "16px"
+              }
+            },
+            click() {
+              console.log("点击了自定义按钮");
+            }
+          }
+        }
+      },
+      tabs: {
+        name: "radio",
+        show: true
+        //type: 'card', //tabs类型
+        // defaultOptions: { //第一个tab页签显示
+        //   show: true,
+        //   value: null, //点击第一个页签，查询值
+        //   label: '全部', // 第一个页签的名称
+        // },
+        // options: computed(() => { //选项，默认从name字段的dict里面获取
+        //   return statusRef.data;
+        // })
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: statusRef
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/tabs/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        Tabs快捷查询
+        <span class="sub">表格顶部显示tabs，点击tabs快捷查询</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/tabs.html">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import { useExpose } from "@fast-crud/fast-crud";
+import { message } from "ant-design-vue";
+export default defineComponent({
+  name: "FeatureTabs",
+  setup() {
+    // 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)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef,
+      getSearchFormData() {
+        const form = expose.getSearchFormData();
+        message.info(`searchForm:${JSON.stringify(form)}`);
+      },
+      setSearchFormData() {
+        expose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
+      },
+      clearSearchForm() {
+        expose.setSearchFormData({ form: { radio: null }, mergeForm: false });
+      }
+    };
+  }
+});
+</script>

packages/ui/certd-client/src/views/crud/feature/tabs/mock.ts

@@ -0,0 +1,20 @@
+// @ts-ignore
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "FeatureTabs",
+  idGenerator: 0
+};
+const list = [
+  {
+    radio: "1"
+  },
+  {
+    radio: "2"
+  },
+  {
+    radio: "0"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;

packages/ui/certd-client/src/views/crud/form/base/crud.jsx

@@ -1,4 +1,6 @@
 import * as api from "./api";
+import { message } from "ant-design-vue";
+import { utils } from "@fast-crud/fast-crud";
 export default function ({ crudExpose }) {
   const pageRequest = async (query) => {
     return await api.GetList(query);
@@ -27,6 +29,15 @@ export default function ({ crudExpose }) {
           buttons: {
             ok: {
               text: "保存"
+            },
+            custom: {
+              text: "自定义按钮",
+              click: async (context) => {
+                utils.logger.info("btn context", context);
+                message.info({ content: "通过自定义按钮，触发保存" });
+                await context.submit();
+                message.info({ content: "保存成功" });
+              }
             }
           }
         }

packages/ui/certd-client/src/views/crud/form/base/index.vue

@@ -10,12 +10,13 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted, nextTick } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import {useFs, UseFsProps} from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.jsx";
 export default defineComponent({
   name: "FormBase",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue } as UseFsProps);
 
     // 页面打开后获取列表数据
     onMounted(async () => {

packages/ui/certd-client/src/views/crud/form/single-column/index.vue

@@ -10,12 +10,13 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted, nextTick } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFs, UseFsProps } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 export default defineComponent({
   name: "FormSingleColumn",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue } as UseFsProps);
 
     // 页面打开后获取列表数据
     onMounted(async () => {

packages/ui/certd-client/src/views/sys/authority/permission/api.ts

@@ -1,6 +1,6 @@
 import { request } from "/src/api/service";
 const apiPrefix = "/sys/authority/permission";
-export async function GetList(query) {
+export async function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "post",
@@ -15,7 +15,7 @@ export async function GetTree() {
   });
 }
 
-export async function AddObj(obj) {
+export async function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -23,7 +23,7 @@ export async function AddObj(obj) {
   });
 }
 
-export async function UpdateObj(obj) {
+export async function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -31,7 +31,7 @@ export async function UpdateObj(obj) {
   });
 }
 
-export async function DelObj(id) {
+export async function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -39,7 +39,7 @@ export async function DelObj(id) {
   });
 }
 
-export async function GetObj(id) {
+export async function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "post",

packages/ui/certd-client/src/views/sys/authority/permission/crud.tsx

@@ -1,9 +1,9 @@
-import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
+import * as api from "./api.js";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
-    const list = await api.GetTree(query);
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    const list = await api.GetTree();
 
     return {
       current: 1,
@@ -16,29 +16,29 @@ export default function ({ expose }) {
   async function afterChange() {
     await permissionTreeDict.reloadDict();
   }
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     const ret = await api.UpdateObj(form);
     await afterChange();
     return ret;
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     const ret = await api.DelObj(row.id);
     await afterChange();
     return ret;
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     const ret = await api.AddObj(form);
     await afterChange();
     return ret;
   };
-  let permissionTreeDict = dict({
+  const permissionTreeDict = dict({
     url: "/sys/authority/permission/tree",
     isTree: true,
     value: "id",
     label: "title",
-    async onReady({ dict }) {
+    async onReady({ dict }: any) {
       dict.setData([{ id: -1, title: "根节点", children: dict.data }]);
     }
   });

packages/ui/certd-client/src/views/sys/authority/permission/index.vue

@@ -8,15 +8,7 @@
         <fs-icon :icon="$fsui.icons.add"></fs-icon>
         添加</a-button
       >
-      <fs-permission-tree
-        class="permission-tree"
-        :tree="crudBinding.data"
-        :checkable="false"
-        :actions="permission"
-        @add="addHandle"
-        @edit="editHandle"
-        @remove="removeHandle"
-      ></fs-permission-tree>
+      <fs-permission-tree class="permission-tree" :tree="crudBinding.data" :checkable="false" :actions="permission" @add="addHandle" @edit="editHandle" @remove="removeHandle"></fs-permission-tree>
     </fs-crud>
   </fs-page>
 </template>
@@ -24,7 +16,7 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import { useCrud, useExpose, CrudExpose, useUi } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
+import createCrudOptions from "./crud.js";
 import FsPermissionTree from "./fs-permission-tree.vue";
 import { usePermission } from "/src/plugin/permission";
 export default defineComponent({
@@ -36,21 +28,20 @@ export default defineComponent({
     // crud 配置的ref
     const crudBinding = ref();
     // 暴露的方法
-    const exposeRet: { expose: CrudExpose } = useExpose({ crudRef, crudBinding });
-    const expose: CrudExpose = exposeRet.expose;
+    const { crudExpose } = useExpose({ crudRef, crudBinding });
     // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
+    const { crudOptions } = createCrudOptions({ crudExpose });
     // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
     // 初始化crud配置
     // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
     // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
-    const { resetCrudOptions } = useCrud({ expose, crudOptions, permission: "sys:auth:per" });
+    const { resetCrudOptions } = useCrud({ crudExpose, crudOptions, permission: "sys:auth:per" });
     // 你可以调用此方法，重新初始化crud配置
     // resetCrudOptions(options)
 
     // 页面打开后获取列表数据
     onMounted(async () => {
-      await expose.doRefresh();
+      await crudExpose.doRefresh();
     });
 
     //用户业务代码