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

perf: 优化antdv4 示例授权页面tree的样式 build: publish success chore: 1 chore: 1 chore: 1 fix: getFileName支持item参数 https://github.com/fast-crud/fast-crud/issues/385 fix: fs-form独立使用支持插槽 https://github.com/fast-crud/fast-crud/issues/389 fix: 修复三级以上路由页面无法缓存的问题 https://github.com/fast-crud/fast-crud/issues/394 perf: form.wrapper.buttons支持compute动态计算 feat: 表单支持变更关闭前提醒保存，form.wrapper支持beforeClose事件 fix: 修复图片裁剪按钮上下和左右相反的bug https://github.com/fast-crud/fast-crud/issues/402 perf: alioss getAuthorization接口支持后台返回key https://github.com/fast-crud/fast-crud/issues/405 perf: alioss getAuthorization接口支持后台返回key https://github.com/fast-crud/fast-crud/issues/405 perf: fs-dict-tree支持插槽 https://github.com/fast-crud/fast-crud/issues/407 perf: 单选、多选、select、tree-select、table-select 都提供selected-change事件，可以获取选中的dict选项 feat: table-select 支持查看模式 https://github.com/fast-crud/fast-crud/issues/413 perf: 优化fs-admin可以在手机上操作 chore: pnpm workspace问题优化 docs: 1 chore: antdv4 支持主题色选择 ...
2026-05-16 05:07:32 +08:00 · 2024-06-15 18:32:36 +00:00
parent 9caa4cd1d4
commit ad360e81cb
173 changed files with 3386 additions and 1108 deletions
@@ -1,6 +1,7 @@
 import * as api from "./api.js";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
+import { computed } from "vue";
 export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const { crudBinding } = crudExpose;
  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
@@ -29,7 +30,10 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
      },
      toolbar: {
        columnsFilter: {
-          mode: "default"
+          mode: "default",
+          container: {
+            width: "500px"
+          }
        }
      },
      actionbar: {
@@ -78,7 +82,12 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
          type: "dict-radio",
          dict: dict({
            url: "/mock/dicts/OpenStatusEnum?single"
-          })
+          }),
+          column: {
+            show: computed(() => {
+              return true;
+            })
+          }
        },
        disabled: {
          title: "列设置禁用",
@@ -1,6 +1,7 @@
 import * as api from "./api";
-import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-import { computed, ref } from "vue";
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { computed, ref, shallowRef } from "vue";
+import ShallowComponent from "/@/views/crud/basis/compute-more/shallow-component.vue";

 export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
@@ -22,13 +23,9 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti

  //普通的ref引用，可以动态切换配置
  const defValueRef = ref("我是动态的默认值");
-  const defValueComputed = computed(() => {
-    return defValueRef.value;
-  });
  return {
    output: {
-      defValueRef,
-      defValueComputed
+      defValueRef
    },
    crudOptions: {
      request: {
@@ -67,11 +64,39 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
          type: "text",
          search: { show: true, value: null },
          form: {
-            // form.value不支持asyncCompute
-            // 假如你的默认值异步获取的，那么你自己必须保证先异步计算完成之后，才能打开对话框。
-            // 因为在打开对话框时，默认值就必须得设置好。
+            // form.value不支持asyncCompute/Compute, 因为上下文动态计算要先有上下文，上下文需要先有form数据
            value: defValueRef
          }
+        },
+        switch: {
+          title: "切换动态组件",
+          type: "dict-radio",
+          dict: dict({
+            data: [
+              { value: "radio", label: "radio" },
+              { value: "select", label: "select" },
+              { value: "shallow", label: "shallowComponent" }
+            ]
+          })
+        },
+        componentName: {
+          title: "动态组件",
+          type: "dict-select",
+          search: { show: true, value: null },
+          dict: dict({
+            data: [
+              { value: "1", label: "开启" },
+              { value: "2", label: "关闭" }
+            ]
+          }),
+          form: {
+            component: {
+              value: "2",
+              name: compute(({ form }) => {
+                return form.switch === "select" ? "fs-dict-select" : form.switch === "radio" ? "fs-dict-radio" : ShallowComponent;
+              })
+            }
+          }
        }
      }
    }
@@ -0,0 +1,14 @@
+<template>
+  <component :is="ui.tag.name" type="red">value : {{ modelValue || value }}</component>
+</template>
+
+<script setup lang="ts">
+import { useUi } from "@fast-crud/ui-interface";
+
+type ScProps = {
+  modelValue?: string;
+  value?: string;
+};
+const props = defineProps<ScProps>();
+const { ui } = useUi();
+</script>
@@ -33,6 +33,9 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
        editRequest,
        delRequest
      },
+      toolbar: {
+        compact: false
+      },
      table: {
        scroll: {
          x: 1500
@@ -184,6 +187,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
          search: { show: false },
          type: "text",
          column: {
+            order: 1000,
            fixed: "right",
            component: {
              name: "a-switch",
@@ -48,7 +48,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
          column: {
            component: {
              //引用自定义组件
-              name: shallowRef(VmodelCounter),
+              name: VmodelCounter,
              color: "blue",
              slots: {
                //插槽示例
@@ -68,7 +68,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
            //form表单
            component: {
              //引用自定义组件
-              name: shallowRef(VmodelCounter),
+              name: VmodelCounter,
              vModel: "modelValue",
              color: "red",
              on: {
@@ -1,7 +1,17 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FsCrudFirst";
-export function GetList(query: any) {
+
+/**
+ * 定义行数据模型
+ */
+export type FirstRow = {
+  id?: number;
+  name?: string;
+  type?: number;
+};
+
+export function GetList(query: FirstRow) {
  return request({
    url: apiPrefix + "/page",
    method: "get",
@@ -9,7 +19,7 @@ export function GetList(query: any) {
  });
 }

-export function AddObj(obj: any) {
+export function AddObj(obj: FirstRow) {
  return request({
    url: apiPrefix + "/add",
    method: "post",
@@ -17,7 +27,7 @@ export function AddObj(obj: any) {
  });
 }

-export function UpdateObj(obj: any) {
+export function UpdateObj(obj: FirstRow) {
  return request({
    url: apiPrefix + "/update",
    method: "post",
@@ -1,31 +1,34 @@
-import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery } from "@fast-crud/fast-crud";
 import * as api from "./api";
-export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
-  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
-    return await api.GetList(query);
-  };
-  const editRequest = async ({ form, row }: EditReq) => {
-    if (form.id == null) {
-      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);
-  };
+import { FirstRow } from "./api";

+/**
+ * 定义context参数类型
+ */
+export type FirstContext = {
+  test?: number;
+};
+export default function ({ crudExpose, context }: CreateCrudOptionsProps<FirstRow, FirstContext>): CreateCrudOptionsRet<FirstRow> {
+  context.test = 111;
  return {
    crudOptions: {
      // 自定义crudOptions配置
      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
+        pageRequest: async (query: UserPageQuery<FirstRow>) => {
+          return await api.GetList(query);
+        },
+        addRequest: async ({ form }: AddReq) => {
+          return await api.AddObj(form);
+        },
+        editRequest: async ({ form, row }: EditReq) => {
+          if (form.id == null) {
+            form.id = row.id;
+          }
+          return await api.UpdateObj(form);
+        },
+        delRequest: async ({ row }: DelReq) => {
+          return await api.DelObj(row.id);
+        }
      },
      //两个字段
      columns: {
@@ -1,5 +1,5 @@
 <template>
-  <fs-page>
+  <fs-page class="page-first">
    <template #header>
      <div class="title">第一个crud</div>
      <div class="more">
@@ -7,13 +7,17 @@
      </div>
    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding" />
+
+    <a-tour v-model:current="current" :open="open" :steps="steps" @close="handleOpen(false)" />
  </fs-page>
 </template>

 <script lang="ts">
-import { defineComponent, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
+import { defineComponent, onMounted, ref } from "vue";
+import { useFs, utils } from "@fast-crud/fast-crud";
+import createCrudOptions, { FirstContext } from "./crud";
+import { TourProps } from "ant-design-vue";
+import { FirstRow } from "./api";

 //此处为组件定义
 export default defineComponent({
@@ -32,15 +36,67 @@ export default defineComponent({

    //  =======以上为fs的初始化代码=========
    //  =======你可以简写为下面这一行========
-    const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: {} });
+    const { crudRef, crudBinding, crudExpose, context } = useFs<FirstRow, FirstContext>({ createCrudOptions, context: {} });
+
+    utils.logger.info("test", context.test);
+
+    function useTour() {
+      const open = ref<boolean>(false);
+      const current = ref(0);
+      //帮助向导
+      const steps: TourProps["steps"] = [
+        {
+          title: "查询",
+          description: "查询数据.",
+          target: () => {
+            return document.querySelector(".page-first .fs-search-btn-search") as HTMLElement;
+          }
+        },
+        {
+          title: "重置",
+          description: "重置查询条件.",
+          target: () => {
+            return document.querySelector(".page-first .fs-search-btn-reset") as HTMLElement;
+          }
+        },
+        {
+          title: "添加",
+          description: "打开添加对话框",
+          target: () => {
+            return document.querySelector(".page-first .fs-actionbar-btn-add") as HTMLElement;
+          }
+        },
+        {
+          title: "刷新列表",
+          description: "刷新列表",
+          target: () => {
+            return document.querySelector(".page-first .fs-toolbar-btn-refresh") as HTMLElement;
+          }
+        }
+      ];
+
+      const handleOpen = (val: boolean): void => {
+        open.value = val;
+      };
+
+      return {
+        open,
+        current,
+        steps,
+        handleOpen
+      };
+    }
+    const tour = useTour();

    // 页面打开后获取列表数据
    onMounted(() => {
      crudExpose.doRefresh();
+      tour.handleOpen(true);
    });
    return {
      crudBinding,
-      crudRef
+      crudRef,
+      ...tour
    };
  }
 });
@@ -18,10 +18,10 @@ import _ from "lodash-es";
 //此处为crudOptions配置
 const createCrudOptions = function ({}: CreateCrudOptionsProps): CreateCrudOptionsRet {
  //本地模拟后台crud接口方法 ----开始
-  const records = reactive([{ id: 1, name: "Hello World", type: 1 }]);
+  const records = [{ id: 1, name: "Hello World", type: 1 }];
  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
    return {
-      records,
+      records: _.cloneDeep(records),
      offset: 0, //后续transformRes会计算为currentPage
      limit: 20, //后续transformRes会计算为pageSize
      total: records.length
@@ -100,6 +100,26 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
          dict: dict({
            url: "/mock/dicts/OpenStatusEnum?single"
          })
+        },
+        text: {
+          title: "text",
+          type: "text",
+          search: { show: true }
+        },
+        text2: {
+          title: "text2",
+          type: "text",
+          search: { show: true }
+        },
+        text3: {
+          title: "text3",
+          type: "text",
+          search: { show: true }
+        },
+        text4: {
+          title: "text4",
+          type: "text",
+          search: { show: true }
        }
      }
    }
@@ -6,7 +6,11 @@
        <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-crud ref="crudRef" v-bind="crudBinding">
+      <template #actionbar-right>
+        <a-button type="danger">actionbar-right插槽</a-button>
+      </template>
+    </fs-crud>
  </fs-page>
 </template>

@@ -0,0 +1,50 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/BasisPlugin";
+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 + "/get",
+    method: "get",
+    params: { id }
+  });
+}
+
+export function BatchDelete(ids: any) {
+  return request({
+    url: apiPrefix + "/batchDelete",
+    method: "post",
+    data: { ids }
+  });
+}
@@ -0,0 +1,72 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
+import { ref } from "vue";
+
+export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    if (form.id == null) {
+      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 selectedRowKeys: Ref<any[]> = ref([]);
+  context.selectedRowKeys = selectedRowKeys;
+
+  return {
+    crudOptions: {
+      settings: {
+        plugins: {
+          //这里使用行选择插件，生成行选择crudOptions配置，最终会与crudOptions合并
+          rowSelection: {
+            enabled: true,
+            order: -2,
+            before: true,
+            // handle: (pluginProps,useCrudProps)=>CrudOptions,
+            props: {
+              multiple: true,
+              crossPage: true,
+              selectedRowKeys,
+              onSelectedChanged(selected) {
+                utils.logger.info("已选择变化：", selected);
+              }
+            }
+          }
+        }
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        text: {
+          title: "Text",
+          type: "text",
+          search: { show: true }
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,63 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        CrudOptionsPlugin
+        <span class="sub">用于合并CrudOptions，做一些可配置化的公共参数；此处演示使用rowSelectionPlugin生成行选择配置,支持跨页选择</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/settings.html#plugins">文档</a>
+      </div>
+    </template>
+    <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>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useFs } from "@fast-crud/fast-crud";
+import { message, Modal } from "ant-design-vue";
+import { BatchDelete } from "./api";
+
+export default defineComponent({
+  name: "BasisPlugin",
+  setup() {
+    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
+    const selectedRowKeys = context.selectedRowKeys;
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    const handleBatchDelete = () => {
+      if (selectedRowKeys.value?.length > 0) {
+        Modal.confirm({
+          title: "确认",
+          content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
+          async onOk() {
+            await BatchDelete(selectedRowKeys.value);
+            message.info("删除成功");
+            crudExpose.doRefresh();
+            selectedRowKeys.value = [];
+          }
+        });
+      } else {
+        message.error("请先勾选记录");
+      }
+    };
+
+    return {
+      crudBinding,
+      crudRef,
+      handleBatchDelete
+    };
+  }
+});
+</script>
@@ -0,0 +1,22 @@
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "BasisPlugin",
+  idGenerator: 0
+};
+const list = [
+  {
+    text: "张三",
+    radio: "1"
+  },
+  {
+    text: "李四",
+    radio: "2"
+  },
+  {
+    text: "王五",
+    radio: "0"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
@@ -1,6 +1,6 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
-const apiPrefix = "/mock/BasisReset";
+const apiPrefix = "/mock/BasisValueChange";
 export function GetList(query: any) {
  return request({
    url: apiPrefix + "/page",
@@ -15,14 +15,13 @@

 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { CrudOptions, DynamicType, useFs } from "@fast-crud/fast-crud";
+import { CrudOptions, DynamicType, useFs, UseFsProps } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.js";
 import _ from "lodash-es";
-
 export default defineComponent({
  name: "BasisReset",
  setup() {
-    const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions, appendBindingOptions } = useFs({ createCrudOptions, context: {} });
+    const { crudBinding, crudRef, crudExpose, context, crudOptions, resetCrudOptions, appendBindingOptions } = useFs({ createCrudOptions, context: { text: 111 } });

    setTimeout(() => {
      //合并新的crudOptions
@@ -1,7 +1,7 @@
 // @ts-ignore
 import mockUtil from "/src/mock/base";
 const options: any = {
-  name: "BasisReset",
+  name: "BasisValueChange",
  idGenerator: 0
 };
 const list = [
@@ -0,0 +1,54 @@
+//@ts-ignore
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FsCrudFirst";
+
+/**
+ * 定义行数据模型
+ */
+export type TsTestRow = {
+  id?: number;
+  name?: string;
+  type?: number;
+  compute?: string;
+};
+
+export function GetList(query: TsTestRow) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: TsTestRow) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: TsTestRow) {
+  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 + "/get",
+    method: "get",
+    params: { id }
+  });
+}
@@ -0,0 +1,79 @@
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery } from "@fast-crud/fast-crud";
+import * as api from "./api";
+import { TsTestRow } from "./api";
+
+/**
+ * 定义context参数类型
+ */
+export type TsTestContext = {
+  test?: number;
+};
+export default function ({ crudExpose, context }: CreateCrudOptionsProps<TsTestRow, TsTestContext>): CreateCrudOptionsRet<TsTestRow> {
+  context.test = 111;
+  return {
+    crudOptions: {
+      // 自定义crudOptions配置
+      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" }
+            ]
+          }),
+          valueResolve: ({ form }) => {
+            console.log("valueResolve", form.type);
+          },
+          valueBuilder: ({ row }) => {
+            console.log("valueBuilder", row.type);
+          }
+        },
+        compute: {
+          title: "compute",
+          type: "text",
+          form: {
+            component: {
+              show: compute(({ form }) => {
+                //自动带form ts提示
+                return form.type === 1;
+              }),
+              disabled: compute<boolean, TsTestRow>(({ form }) => {
+                //disabled属性 不在component配置的定义中，所有不带row、form的ts提示, 需要手动指定类型
+                return form.type === 1;
+              })
+            }
+          }
+        }
+      },
+      //两个字段
+      request: {
+        pageRequest: async (query: UserPageQuery) => {
+          return await api.GetList(query);
+        },
+        addRequest: async ({ form }: AddReq) => {
+          return await api.AddObj(form);
+        },
+        editRequest: async ({ form, row }: EditReq) => {
+          if (form.id == null) {
+            form.id = row.id;
+          }
+          return await api.UpdateObj(form);
+        },
+        delRequest: async ({ row }: DelReq) => {
+          return await api.DelObj(row.id);
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,47 @@
+<template>
+  <fs-page class="page-first">
+    <template #header>
+      <div class="title">Ts定义测试</div>
+      <div class="more"></div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from "vue";
+import { useFs, utils } from "@fast-crud/fast-crud";
+import createCrudOptions, { TsTestContext } from "./crud";
+import { TsTestRow } from "./api";
+
+//此处为组件定义
+export default defineComponent({
+  name: "FsCrudTsTest",
+  setup() {
+    // // crud组件的ref
+    // const crudRef: Ref = ref();
+    // // crud 配置的ref
+    // const crudBinding: Ref<CrudBinding> = ref();
+    // // 暴露的方法
+    // const { crudExpose } = useExpose({ crudRef, crudBinding });
+    // // 你的crud配置
+    // const { crudOptions, customExport } = createCrudOptions({ crudExpose, customValue });
+    // // 初始化crud配置
+    // const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
+
+    //  =======以上为fs的初始化代码=========
+    //  =======你可以简写为下面这一行========
+    const { crudRef, crudBinding, crudExpose, context } = useFs<TsTestRow, TsTestContext>({ createCrudOptions, context: {} });
+
+    utils.logger.info("test", context.test);
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
@@ -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;
@@ -1,6 +1,17 @@
 import * as api from "./api";
 import { message } from "ant-design-vue";
-import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, ValueChangeContext } from "@fast-crud/fast-crud";
+import {
+  AddReq,
+  CreateCrudOptionsProps,
+  CreateCrudOptionsRet,
+  DelReq,
+  dict,
+  EditReq,
+  UserPageQuery,
+  UserPageRes,
+  utils,
+  ValueChangeContext
+} from "@fast-crud/fast-crud";

 export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
@@ -55,12 +66,12 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
              vModel: "checked"
            },
            valueChange(context: ValueChangeContext) {
-              console.log("column value changed:", context);
+              utils.logger.info("column value changed:", context);
            }
          },
          form: {
            valueChange({ value, key, form }: ValueChangeContext) {
-              console.log("valueChanged,", key, value, form);
+              utils.logger.info("valueChanged,", key, value, form);
              message.info(`valueChanged:${key}=${value}`);
            }
          }
@@ -70,7 +81,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
          type: "text",
          form: {
            valueChange({ value, key, form }: ValueChangeContext) {
-              console.log("valueChanged,", key, value, form);
+              utils.logger.info("valueChanged,", key, value, form);
              message.info(`valueChanged:${key}=${value}`);
            }
          }
@@ -84,7 +95,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
          form: {
            valueChange: {
              handle({ value, key, form, immediate }: ValueChangeContext) {
-                console.log("valueChange,", key, value, "isImmediate=", immediate);
+                utils.logger.info("valueChange,", key, value, "isImmediate=", immediate);
                message.info(`valueChanged:${key}=${value},isImmediate=${immediate}`);
              },
              immediate: true