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

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

packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.jsx

@@ -1,32 +0,0 @@
-import { uiContext } from "@fast-crud/fast-crud";
-
-export default function ({ expose }) {
-  return {
-    crudOptions: {
-      mode:{
-        name:'local',
-        isMergeWhenUpdate:true,
-        isAppendWhenAdd:true
-      },
-      search: {
-        show: false
-      },
-      toolbar:{
-        show:false,
-      },
-      pagination:{
-        show:false
-      },
-      columns: {
-        name: {
-          type: "text",
-          title: "联系人姓名"
-        },
-        mobile: {
-          type: "text",
-          title: "联系人手机号码"
-        }
-      }
-    }
-  };
-}

packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.tsx

@@ -0,0 +1,32 @@
+import { CreateCrudOptionsProps, CreateCrudOptionsRet, uiContext } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  return {
+    crudOptions: {
+      mode: {
+        name: "local",
+        isMergeWhenUpdate: true,
+        isAppendWhenAdd: true
+      },
+      search: {
+        show: false
+      },
+      toolbar: {
+        show: false
+      },
+      pagination: {
+        show: false
+      },
+      columns: {
+        name: {
+          type: "text",
+          title: "联系人姓名"
+        },
+        mobile: {
+          type: "text",
+          title: "联系人手机号码"
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/local-v-model/index.vue

@@ -1,51 +1,47 @@
 <template>
   <fs-page>
     <template #header>
-      <div class="title">
-        将本地crud当做v-model,编辑好之后一并提交，你还可以使用行编辑模式，效果更好
-      </div>
+      <div class="title">将本地crud当做v-model,编辑好之后一并提交，你还可以使用行编辑模式，效果更好</div>
     </template>
-    <div style="padding:30px">
+    <div style="padding: 30px">
       <a-form ref="formRef" :model="form" laba-width="120px">
         <a-form-item label="姓名">
           <a-input v-model:value="form.name"></a-input>
         </a-form-item>
         <a-form-item label="表格">
           <div style="min-height: 300px">
-            <FeatureLocalModelValueInput v-model="form.data"/>
+            <FeatureLocalModelValueInput v-model="form.data" />
           </div>
         </a-form-item>
-        <a-form-item >
+        <a-form-item>
           <a-button @click="submit">提交</a-button>
         </a-form-item>
       </a-form>
-
     </div>
-
   </fs-page>
 </template>
 
-<script>
-import {defineComponent, reactive} from 'vue';
-import {message} from 'ant-design-vue'
-import FeatureLocalModelValueInput from './local.vue'
+<script lang="ts">
+import { defineComponent, reactive } from "vue";
+import { message } from "ant-design-vue";
+import FeatureLocalModelValueInput from "./local.vue";
 export default defineComponent({
-  name: 'FeatureLocalVModel',
-  components:{FeatureLocalModelValueInput},
+  name: "FeatureLocalVModel",
+  components: { FeatureLocalModelValueInput },
   setup() {
     const form = reactive({
-      name:'test',
-      data: [{name:'初始数据'}],
-    })
+      name: "test",
+      data: [{ name: "初始数据" }]
+    });
 
-    function submit(){
-      message.info("submit:"+JSON.stringify(form))
-      console.log('submit:',form)
+    function submit() {
+      message.info("submit:" + JSON.stringify(form));
+      console.log("submit:", form);
     }
     return {
       form,
       submit
     };
-  },
+  }
 });
 </script>

packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue

@@ -1,63 +1,48 @@
 <template>
-  <fs-crud ref="crudRef" v-bind="crudBinding"/>
+  <fs-crud ref="crudRef" v-bind="crudBinding" />
 </template>
 
-<script>
-import {defineComponent, ref, onMounted, watch} from 'vue';
-import createCrudOptions from './crud';
-import {useExpose, useCrud} from '@fast-crud/fast-crud';
+<script lang="ts">
+import { defineComponent, watch } from "vue";
+import createCrudOptions from "./crud";
+import { useFs } from "@fast-crud/fast-crud";
 
 export default defineComponent({
-  name: 'FeatureLocalModelValueInput',
+  name: "FeatureLocalModelValueInput",
   props: {
     modelValue: {
       default() {
-        return []
+        return [];
       }
     }
   },
   setup(props) {
-    // 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();
-    // });
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     //通过导出modelValue, 可以导出成为一个input组件
-    watch(() => {
-      return props.modelValue
-    }, (value = []) => {
-      crudBinding.value.data = value
-    }, {
-      immediate: true
-    })
-
+    watch(
+      () => {
+        return props.modelValue;
+      },
+      (value = []) => {
+        crudBinding.value.data = value;
+      },
+      {
+        immediate: true
+      }
+    );
 
     // 通过crudBinding.value.data 可以获取表格实时数据
     function showData() {
-      console.log('data:', crudBinding.value.data)
+      console.log("data:", crudBinding.value.data);
     }
 
-
     return {
       crudBinding,
       crudRef,
-      showData,
+      showData
     };
-  },
+  }
 });
 </script>
 <style lang="less">