perf: first示例增加行数据模型

docs/zh/api/use.md

@@ -4,25 +4,38 @@
 
 ### useFs
 * 说明: 初始化crud
-* 类型： `(props:UseFsProps):UseFsRet`
+* 类型： `(props:UseFsProps<R,C>):UseFsRet<R>`
 * 参数说明：
     * props.crudExposeRef :  crudExpose创建好之后，会填充进此ref，可以让你在useFs之前创建使用crudExpose的方法(要在useFs之后才能调用)
     * props.context: 上下文容器，可以放入任何东西
     * ret.context: props传入的上下文容器，如果没传则会自动创建一个
+    * R: 行数据模型，默认为any
+    * C: 上下文模型，默认为any
 * 示例：
 
-```js
+```ts
 //index.vue
+
+type ContextModel = {
+    props:any;
+    ctx:any;
+}
+type RowModel = {
+    id?:number;
+    name?:string;
+    //...
+}; //行数据模型
 export default {
     setup(props:any,ctx:any){
-        const context: any = {
+        const context: ContextModel = {
             props,ctx
         }; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，传任意参数）
         const crudExposeRef:Ref<CrudExpose> = ref() //crudExpose创建好之后，会填充进此ref，可以在useFs之前创建使用crudExpose的方法
         const customAdd = ()=>{
             crudExposeRef.value.openAdd({row:{}})
         }
-        const { crudBinding, crudRef, crudExpose, resetCrudOptions } = useFs({ createCrudOptions, context, crudExposeRef});
+
+        const { crudBinding, crudRef, crudExpose, resetCrudOptions } = useFs<RowModel,ContextModel>({ createCrudOptions, context, crudExposeRef});
         return {
             crudBinding,
             crudRef,

docs/zh/guide/start/first.md

@@ -28,23 +28,37 @@ crud配置，每个crud最大的不同就在于此文件。
 import { CreateCrudOptionsProps, CreateCrudOptionsRet, dict } from "@fast-crud/fast-crud";
 import { addRequest, delRequest, editRequest, pageRequest } from "./api";
 
-export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+
+/**
+ * 定义行数据模型
+ * 如果你嫌定义数据模型麻烦，可以删掉此处，把下面出现的FirstRow用any代替即可
+ */
+export type FirstRow = {
+    id?: number;
+    name?: string;
+    type?: number;
+};
+
+/**
+ * 定义一个CrudOptions生成器方法
+ */
+export default function ({ crudExpose, context }: CreateCrudOptionsProps<FirstRow>): CreateCrudOptionsRet<FirstRow> {
   return {
     crudOptions: {
-      // 自定义crudOptions配置
+      // 在这里自定义你的crudOptions配置
       request: {
         pageRequest,
         addRequest,
         editRequest,
         delRequest
       },
-      //两个字段
+      //这里定义两个字段
       columns: {
         name: {
           title: "姓名",
-          type: "text",
+          type: "text", //字段类型，fs会根据字段类型，生成出一些默认配置
           search: { show: true },
-          column: {
+          column: { //表格列的一些配置
             resizable: true,
             width: 200
           }
@@ -87,6 +101,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
     import { defineComponent, onMounted } from "vue";
     import { useFs ,OnExposeContext } from "@fast-crud/fast-crud";
     import createCrudOptions from "./crud";
+    import {FirstRow} from "./crud";
 
     //此处为组件定义
     export default defineComponent({
@@ -107,7 +122,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             //  =======你可以简写为下面这一行========
             const context: any = {props,ctx}; // 自定义变量, 将会传递给createCrudOptions, 比如直接把props,和ctx直接传过去使用
             function onExpose(e:OnExposeContext){} //将在createOptions之前触发，可以获取到crudExpose,和context
-            const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions, onExpose, context});
+            const { crudRef, crudBinding, crudExpose } = useFs<FirstRow>({ createCrudOptions, onExpose, context});
             
             // 页面打开后获取列表数据
             onMounted(() => {

packages/fast-crud/src/components/crud/editable/fs-editable-cell.tsx

@@ -104,7 +104,12 @@ export default defineComponent({
             inputComponent = <fs-render render-func={computedForm.value.render} scope={scopeFunc()} {...ctx.attrs} />;
           } else {
             inputComponent = (
-              <fs-component-render ref={"targetInputRef"} {...computedForm.value.component} {...ctx.attrs} />
+              <fs-component-render
+                ref={"targetInputRef"}
+                {...computedForm.value.component}
+                {...ctx.attrs}
+                scope={props.scope}
+              />
             );
           }
         }