diff --git a/packages/ui/certd-client/CHANGELOG.md b/packages/ui/certd-client/CHANGELOG.md
index 4d5310c65..070af577a 100644
--- a/packages/ui/certd-client/CHANGELOG.md
+++ b/packages/ui/certd-client/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0](https://github.com/fast-crud/fast-crud/compare/v1.10.0...v1.11.0) (2023-03-16)
+
+
+### Bug Fixes
+
+* 修复wangeditor无法上传视频的bug ([53ee51e](https://github.com/fast-crud/fast-crud/commit/53ee51e901956da9596600235632545bcf98746e))
+
+
+### Performance Improvements
+
+* 全面ts化 ([168d3a2](https://github.com/fast-crud/fast-crud/commit/168d3a240eb67548195c31a5fa4cb5aedb8a410c))
+
+
+
+
+
 # [1.10.0](https://github.com/fast-crud/fast-crud/compare/v1.9.2...v1.10.0) (2023-03-11)
 
 
diff --git a/packages/ui/certd-client/package.json b/packages/ui/certd-client/package.json
index 199b9cb45..8e8cd71ca 100644
--- a/packages/ui/certd-client/package.json
+++ b/packages/ui/certd-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fast-crud/fs-admin-antdv",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -9,7 +9,7 @@
     "debug": "vite --mode debug",
     "debug:pm": "vite --mode debugpm",
     "debug:force": "vite --force --mode debug",
-    "build": "vite build ",
+    "build": "npm run tsc && vite build ",
     "serve": "vite preview",
     "preview": "vite preview",
     "pretty-quick": "pretty-quick",
@@ -22,13 +22,13 @@
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
     "@ant-design/icons-vue": "^6.1.0",
-    "@aws-sdk/client-s3": "^3.288.0",
-    "@aws-sdk/s3-request-presigner": "^3.288.0",
-    "@fast-crud/fast-crud": "^1.10.0",
-    "@fast-crud/fast-extends": "^1.10.0",
-    "@fast-crud/ui-antdv": "^1.10.0",
+    "@aws-sdk/client-s3": "^3.292.0",
+    "@aws-sdk/s3-request-presigner": "^3.292.0",
+    "@fast-crud/fast-crud": "^1.11.0",
+    "@fast-crud/fast-extends": "^1.11.0",
+    "@fast-crud/ui-antdv": "^1.11.0",
     "@iconify/iconify": "^3.1.0",
-    "@iconify/json": "^2.2.32",
+    "@iconify/json": "^2.2.35",
     "@purge-icons/generated": "^0.9.0",
     "@soerenmartius/vue3-clipboard": "^0.1.2",
     "ant-design-vue": "^3.2.15",
@@ -37,11 +37,10 @@
     "base64-js": "^1.5.1",
     "better-scroll": "^2.5.0",
     "china-division": "^2.6.0",
-    "core-js": "^3.29.0",
+    "core-js": "^3.29.1",
     "cos-js-sdk-v5": "^1.4.16",
     "cropperjs": "^1.5.13",
     "dayjs": "^1.11.7",
-    "deepdash-es": "5.3.5",
     "highlight.js": "^11.7.0",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
@@ -60,22 +59,22 @@
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@types/chai": "^4.3.4",
-    "@types/lodash-es": "^4.17.6",
+    "@types/lodash-es": "^4.17.7",
     "@types/mocha": "^10.0.1",
-    "@types/node": "^18.14.6",
+    "@types/node": "^18.15.3",
     "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
-    "@vitejs/plugin-legacy": "^4.0.1",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
+    "@vitejs/plugin-legacy": "^4.0.2",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/compiler-sfc": "^3.2.47",
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/test-utils": "^2.3.1",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.14",
     "caller-path": "^4.0.0",
     "chai": "^4.3.7",
-    "eslint": "8.35.0",
+    "eslint": "8.36.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-node": "^11.1.0",
@@ -86,21 +85,22 @@
     "husky": "^8.0.3",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
-    "lint-staged": "^13.1.2",
+    "lint-staged": "^13.2.0",
     "postcss": "^8.4.21",
     "prettier": "2.8.4",
     "pretty-quick": "^3.1.3",
     "rimraf": "^4.4.0",
-    "rollup": "^3.18.0",
+    "rollup": "^3.19.1",
     "rollup-plugin-visualizer": "^5.9.0",
     "stylelint": "^15.2.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-order": "^6.0.3",
     "tailwindcss": "^3.2.7",
+    "terser": "^5.16.6",
     "ts-node": "^10.9.1",
     "typescript": "4.9.5",
-    "unplugin-vue-define-options": "^1.2.3",
-    "vite": "^4.1.4",
+    "unplugin-vue-define-options": "^1.2.4",
+    "vite": "^4.2.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-optimize-persist": "^0.1.2",
     "vite-plugin-package-config": "^0.1.1",
diff --git a/packages/ui/certd-client/src/App.vue b/packages/ui/certd-client/src/App.vue
index 414d50815..f35b60cba 100644
--- a/packages/ui/certd-client/src/App.vue
+++ b/packages/ui/certd-client/src/App.vue
@@ -4,7 +4,7 @@
   </a-config-provider>
 </template>
 
-<script>
+<script lang="ts">
 import zhCN from "ant-design-vue/es/locale/zh_CN";
 import enUS from "ant-design-vue/es/locale/en_US";
 import { provide, ref, nextTick } from "vue";
@@ -25,7 +25,7 @@ export default {
       await nextTick();
       routerEnabled.value = true;
     }
-    function localeChanged(value) {
+    function localeChanged(value: any) {
       console.log("locale changed:", value);
       if (value === "zh-cn") {
         locale.value = zhCN;
diff --git a/packages/ui/certd-client/src/api/service.ts b/packages/ui/certd-client/src/api/service.ts
index cd8da796f..9b3097cad 100644
--- a/packages/ui/certd-client/src/api/service.ts
+++ b/packages/ui/certd-client/src/api/service.ts
@@ -106,8 +106,8 @@ function createService() {
  * @description 创建请求方法
  * @param {Object} service axios 实例
  */
-function createRequestFunction(service) {
-  return function (config) {
+function createRequestFunction(service: any) {
+  return function (config: any) {
     const configDefault = {
       headers: {
         "Content-Type": get(config, "headers.Content-Type", "application/json")
diff --git a/packages/ui/certd-client/src/api/tools.ts b/packages/ui/certd-client/src/api/tools.ts
index 80fa784bf..4e6181880 100644
--- a/packages/ui/certd-client/src/api/tools.ts
+++ b/packages/ui/certd-client/src/api/tools.ts
@@ -48,7 +48,7 @@ export function responseError(data = {}, msg = "请求失败", code = 500) {
  * @description 记录和显示错误
  * @param {Error} error 错误对象
  */
-export function errorLog(error) {
+export function errorLog(error: any) {
   // 打印到控制台
   console.error(error);
   // 显示提示
@@ -59,7 +59,7 @@ export function errorLog(error) {
  * @description 创建一个错误
  * @param {String} msg 错误信息
  */
-export function errorCreate(msg) {
+export function errorCreate(msg: any) {
   const error = new Error(msg);
   errorLog(error);
   throw error;
diff --git a/packages/ui/certd-client/src/components/highlight/index.vue b/packages/ui/certd-client/src/components/highlight/index.vue
index 67388235d..ba826d259 100644
--- a/packages/ui/certd-client/src/components/highlight/index.vue
+++ b/packages/ui/certd-client/src/components/highlight/index.vue
@@ -1,15 +1,18 @@
 <template>
-  <pre class="fs-highlight hljs" v-html="highlightHTML"></pre>
+  <pre class="fs-highlight hljs" v-html="highlightHTMLRef"></pre>
 </template>
 
-<script>
+<script lang="ts">
 // 相关文档
 // https://highlightjs.org/usage/
 // http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
 import highlight from "highlight.js";
+import { ref, watch } from "vue";
+import { defineComponent, Ref } from "vue";
 import "../highlight-styles/github-gist.css";
-import htmlFormat from "./libs/htmlFormat";
-export default {
+//@ts-ignore
+import htmlFormat from "./libs/htmlFormat.js";
+export default defineComponent({
   name: "FsHighlight",
   props: {
     code: {
@@ -28,34 +31,31 @@ export default {
       default: ""
     }
   },
-  data() {
+  setup(props: any, ctx: any) {
+    const highlightHTMLRef: Ref = ref("");
+
+    watch(
+      () => {
+        return props.code;
+      },
+      () => {
+        doHighlight();
+      },
+      {
+        immediate: true
+      }
+    );
+
+    function doHighlight() {
+      const code = props.formatHtml ? htmlFormat(props.code) : props.code;
+      highlightHTMLRef.value = (highlight as any).highlightAuto(code, [props.lang, "html", "javascript", "json", "css", "scss", "less"]).value;
+    }
     return {
-      highlightHTML: ""
+      highlightHTMLRef,
+      doHighlight
     };
-  },
-  watch: {
-    code() {
-      this.highlight();
-    }
-  },
-  mounted() {
-    this.highlight();
-  },
-  methods: {
-    highlight() {
-      const code = this.formatHtml ? htmlFormat(this.code) : this.code;
-      this.highlightHTML = highlight.highlightAuto(code, [
-        this.lang,
-        "html",
-        "javascript",
-        "json",
-        "css",
-        "scss",
-        "less"
-      ]).value;
-    }
   }
-};
+});
 </script>
 
 <style lang="less">
diff --git a/packages/ui/certd-client/src/components/index.ts b/packages/ui/certd-client/src/components/index.ts
index 408edf284..79c3f0c19 100644
--- a/packages/ui/certd-client/src/components/index.ts
+++ b/packages/ui/certd-client/src/components/index.ts
@@ -1,7 +1,7 @@
 import { defineAsyncComponent } from "vue";
 const AsyncHighLight = defineAsyncComponent(() => import("./highlight/index.vue"));
 export default {
-  install(app) {
+  install(app: any) {
     app.component("FsHighlight", AsyncHighLight);
   }
 };
diff --git a/packages/ui/certd-client/src/i18n/index.ts b/packages/ui/certd-client/src/i18n/index.ts
index 015c35458..76146d299 100644
--- a/packages/ui/certd-client/src/i18n/index.ts
+++ b/packages/ui/certd-client/src/i18n/index.ts
@@ -1,6 +1,7 @@
 import { createI18n } from "vue-i18n";
-//
+//@ts-ignore
 import enFsLocale from "@fast-crud/fast-crud/dist/locale/lang/en.js";
+//@ts-ignore
 import zhFsLocale from "@fast-crud/fast-crud/dist/locale/lang/zh-cn.js";
 import en from "./locale/en";
 import zh from "./locale/zh_CN";
diff --git a/packages/ui/certd-client/src/layout/components/contextmenu/components/contentmenuList/index.vue b/packages/ui/certd-client/src/layout/components/contextmenu/components/contentmenuList/index.vue
deleted file mode 100644
index 6e3866f7a..000000000
--- a/packages/ui/certd-client/src/layout/components/contextmenu/components/contentmenuList/index.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <div class="fs-contentmenu-list" @click="rowClick">
-    <div
-      v-for="item in menulist"
-      :key="item.value"
-      :data-value="item.value"
-      class="fs-contentmenu-item"
-      flex="cross:center main:center"
-    >
-      <d2-icon v-if="item.icon" :name="item.icon" />
-      <div class="fs-contentmenu-item-title" flex-box="1">
-        {{ item.title }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "FsContextmenuList",
-  props: {
-    menulist: {
-      type: Array,
-      default: () => []
-    }
-  },
-  methods: {
-    rowClick(event) {
-      let target = event.target;
-      while (!target.dataset.value) {
-        target = target.parentNode;
-      }
-      this.$emit("rowClick", target.dataset.value);
-    }
-  }
-};
-</script>
-
-<style lang="less">
-.fs-contentmenu-list {
-  .fs-contentmenu-item {
-    padding: 8px 20px 8px 15px;
-    margin: 0;
-    font-size: 14px;
-    color: #606266;
-    cursor: pointer;
-    &:hover {
-      background: #ecf5ff;
-      color: #66b1ff;
-    }
-    .fs-contentmenu-item-title {
-      margin-left: 10px;
-    }
-  }
-}
-</style>
diff --git a/packages/ui/certd-client/src/layout/components/contextmenu/index.vue b/packages/ui/certd-client/src/layout/components/contextmenu/index.vue
deleted file mode 100644
index 664f41328..000000000
--- a/packages/ui/certd-client/src/layout/components/contextmenu/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div v-show="flag" class="fs-contextmenu" :style="style">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "FsContextmenu",
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    x: {
-      type: Number,
-      default: 0
-    },
-    y: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {
-    flag: {
-      get() {
-        if (this.visible) {
-          // 注册全局监听事件 [ 目前只考虑鼠标解除触发 ]
-          window.addEventListener("mousedown", this.watchContextmenu);
-        }
-        return this.visible;
-      },
-      set(newVal) {
-        this.$emit("update:visible", newVal);
-      }
-    },
-    style() {
-      return {
-        left: this.x + "px",
-        top: this.y + "px",
-        display: this.visible ? "block" : "none "
-      };
-    }
-  },
-  mounted() {
-    // 将菜单放置到body下
-    document.querySelector("body").appendChild(this.$el);
-  },
-  methods: {
-    watchContextmenu(event) {
-      if (!this.$el.contains(event.target) || event.button !== 0) this.flag = false;
-      window.removeEventListener("mousedown", this.watchContextmenu);
-    }
-  }
-};
-</script>
-
-<style>
-.fs-contextmenu {
-  position: absolute;
-  padding: 5px 0;
-  z-index: 2018;
-  background: #fff;
-  border: 1px solid #cfd7e5;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-</style>
diff --git a/packages/ui/certd-client/src/layout/components/locale/index.vue b/packages/ui/certd-client/src/layout/components/locale/index.vue
index 87f8d92ac..dd179b91e 100644
--- a/packages/ui/certd-client/src/layout/components/locale/index.vue
+++ b/packages/ui/certd-client/src/layout/components/locale/index.vue
@@ -19,7 +19,7 @@
   </a-dropdown>
 </template>
 
-<script>
+<script lang="ts">
 import i18n from "../../../i18n";
 import { computed, inject } from "vue";
 import _ from "lodash-es";
@@ -27,8 +27,8 @@ export default {
   name: "FsLocale",
   setup() {
     const languages = computed(() => {
-      const map = i18n.global.messages?.value || {};
-      const list = [];
+      const map: any = i18n.global.messages?.value || {};
+      const list: any = [];
       _.forEach(map, (item, key) => {
         list.push({
           key,
@@ -41,12 +41,12 @@ export default {
       return i18n.global.locale.value;
     });
 
-    const routerReload = inject("fn:router.reload");
-    const localeChanged = inject("fn:locale.changed");
-    const changeLocale = (change) => {
+    const routerReload: any = inject("fn:router.reload");
+    const localeChanged: any = inject("fn:locale.changed");
+    const changeLocale = (change: any) => {
       i18n.global.locale.value = change.key;
       routerReload();
-      localeChanged(change.key)
+      localeChanged(change.key);
     };
     return {
       languages,
diff --git a/packages/ui/certd-client/src/layout/components/menu/index.jsx b/packages/ui/certd-client/src/layout/components/menu/index.tsx
similarity index 87%
rename from packages/ui/certd-client/src/layout/components/menu/index.jsx
rename to packages/ui/certd-client/src/layout/components/menu/index.tsx
index cb2cb58dd..ecb21df34 100644
--- a/packages/ui/certd-client/src/layout/components/menu/index.jsx
+++ b/packages/ui/certd-client/src/layout/components/menu/index.tsx
@@ -1,14 +1,13 @@
 import { useRoute, useRouter } from "vue-router";
 import { ref, watch, onMounted, onUnmounted, resolveComponent, nextTick, defineComponent } from "vue";
-import getEachDeep from "deepdash-es/getEachDeep";
 import _ from "lodash-es";
 import BScroll from "better-scroll";
 import "./index.less";
-const eachDeep = getEachDeep(_);
+import { utils } from "@fast-crud/fast-crud";
 
 function useBetterScroll(enabled = true) {
-  let bsRef = ref(null);
-  let asideMenuRef = ref();
+  const bsRef = ref(null);
+  const asideMenuRef = ref();
 
   let onOpenChange = () => {};
   if (enabled) {
@@ -71,7 +70,7 @@ export default defineComponent({
     scroll: {}
   },
   setup(props, ctx) {
-    async function open(path) {
+    async function open(path: any) {
       if (path == null) {
         return;
       }
@@ -90,23 +89,24 @@ export default defineComponent({
         console.error("导航失败", e);
       }
     }
-    function onSelect(item) {
+    function onSelect(item: any) {
       open(item.key);
     }
 
-    const FsIcon = resolveComponent("FsIcon");
+    const fsIcon = resolveComponent("FsIcon");
 
-    const buildMenus = (children) => {
-      const slots = [];
+    const buildMenus = (children: any) => {
+      const slots: any = [];
       if (children == null) {
         return slots;
       }
-      for (let sub of children) {
-        const title = () => {
+      for (const sub of children) {
+        const title: any = () => {
           if (sub?.meta?.icon) {
+            // @ts-ignore
             return (
               <div class={"menu-item-title"}>
-                <FsIcon class={"anticon"} icon={sub.meta.icon} />
+                <fsIcon class={"anticon"} icon={sub.meta.icon} />
                 <span>{sub.title}</span>
               </div>
             );
@@ -147,16 +147,16 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
 
-    function openSelectedParents(fullPath) {
+    function openSelectedParents(fullPath: any) {
       if (!props.expandSelected) {
         return;
       }
       if (props.menus == null) {
         return;
       }
-      const keys = [];
+      const keys: any = [];
       let changed = false;
-      eachDeep(props.menus, (value, key, parent, context) => {
+      utils.deepdash.forEachDeep(props.menus, (value: any, key: any, parent: any, context: any) => {
         if (value == null) {
           return;
         }
@@ -170,7 +170,7 @@ export default defineComponent({
         }
       });
       if (keys.length > 0) {
-        for (let key of keys) {
+        for (const key of keys) {
           if (openKeys.value.indexOf(key) === -1) {
             openKeys.value.push(key);
             changed = true;
@@ -180,7 +180,7 @@ export default defineComponent({
       return changed;
     }
 
-    const { asideMenuRef, onOpenChange } = useBetterScroll(props.scroll);
+    const { asideMenuRef, onOpenChange } = useBetterScroll(props.scroll as any);
 
     watch(
       () => {
diff --git a/packages/ui/certd-client/src/layout/components/source-link/index.vue b/packages/ui/certd-client/src/layout/components/source-link/index.vue
index 9d16a5021..0daefde17 100644
--- a/packages/ui/certd-client/src/layout/components/source-link/index.vue
+++ b/packages/ui/certd-client/src/layout/components/source-link/index.vue
@@ -5,7 +5,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 export default defineComponent({
@@ -23,7 +23,7 @@ export default defineComponent({
       { immediate: true }
     );
     const middle = "/fast-crud/fs-admin-antdv/tree/main/src/views";
-    function goSource(prefix) {
+    function goSource(prefix: any) {
       const path = router.currentRoute.value.fullPath;
       window.open(prefix + middle + path + "/index.vue");
     }
diff --git a/packages/ui/certd-client/src/layout/components/tabs/index.vue b/packages/ui/certd-client/src/layout/components/tabs/index.vue
index 21ddddb8c..5d378442a 100644
--- a/packages/ui/certd-client/src/layout/components/tabs/index.vue
+++ b/packages/ui/certd-client/src/layout/components/tabs/index.vue
@@ -2,22 +2,8 @@
   <div class="fs-multiple-page-control-group">
     <div class="fs-multiple-page-control-content">
       <div class="fs-multiple-page-control-content-inner">
-        <a-tabs
-          class="fs-multiple-page-control fs-multiple-page-sort"
-          :active-key="page.getCurrent"
-          type="editable-card"
-          hide-add
-          @tabClick="handleClick"
-          @edit="handleTabEdit"
-          @contextmenu="handleContextmenu"
-        >
-          <a-tab-pane
-            v-for="item in page.getOpened"
-            :key="item.fullPath"
-            :tab="item.meta?.title || '未命名'"
-            :name="item.fullPath"
-            :closable="isTabClosable(item)"
-          />
+        <a-tabs class="fs-multiple-page-control fs-multiple-page-sort" :active-key="page.getCurrent" type="editable-card" hide-add @tabClick="handleClick" @edit="handleTabEdit">
+          <a-tab-pane v-for="item in page.getOpened" :key="item.fullPath" :tab="item.meta?.title || '未命名'" :name="item.fullPath" :closable="isTabClosable(item)" />
         </a-tabs>
         <!--        <fs-contextmenu v-model:visible="contextmenuFlag" :x="contentmenuX" :y="contentmenuY">-->
         <!--          <fs-contextmenu-list-->
@@ -33,7 +19,7 @@
         <span class="iconify" data-icon="ion:close-circle" data-inline="false"></span>
         <template #icon><DownOutlined /></template>
         <template #overlay>
-          <a-menu @click="(command) => handleControlItemClick(command)">
+          <a-menu @click="(command:any) => handleControlItemClick(command)">
             <a-menu-item key="left">
               <fs-icon name="arrow-left" class="fs-mr-10" />
               关闭左侧
@@ -57,8 +43,7 @@
   </div>
 </template>
 
-<script>
-import Sortable from "sortablejs";
+<script lang="ts">
 import { usePageStore } from "../../../store/modules/page";
 import { computed } from "vue";
 export default {
@@ -119,14 +104,14 @@ export default {
      * @description 计算某个标签页是否可关闭
      * @param {Object} page 其中一个标签页
      */
-    isTabClosable(page) {
+    isTabClosable(page: any) {
       return page.name !== "index";
     },
     /**
      * @description 右键菜单功能点击
      * @param {Object} event 事件
      */
-    handleContextmenu(event) {
+    handleContextmenu(event: any) {
       let target = event.target;
       // fix https://github.com/fs-projects/fs-admin/issues/54
       let flag = false;
@@ -148,7 +133,7 @@ export default {
      * @description 右键菜单的 row-click 事件
      * @param {String} command 事件类型
      */
-    contextmenuClick(command) {
+    contextmenuClick(command: any) {
       this.handleControlItemClick(command, this.tagName);
     },
     /**
@@ -156,7 +141,7 @@ export default {
      * @param {String} command 事件类型
      * @param {String} tagName tab 名称
      */
-    handleControlItemClick(command, tagName = null) {
+    handleControlItemClick(command: any, tagName: any = null) {
       //if (tagName) this.contextmenuFlag = false;
       const params = { pageSelect: tagName };
       switch (command.key) {
@@ -182,9 +167,9 @@ export default {
      * @param {object} tab 标签
      * @param {object} event 事件
      */
-    handleClick(tab) {
+    handleClick(tab: any) {
       // 找到点击的页面在 tag 列表里是哪个
-      const page = this.page.getOpened.find((page) => page.fullPath === tab);
+      const page = this.page.getOpened.find((page: any) => page.fullPath === tab);
       if (page) {
         const { name, params, query } = page;
         this.$router.push({ name, params, query });
@@ -194,12 +179,12 @@ export default {
      * @description 点击 tab 上的删除按钮触发这里
      * @param {String} tagName tab 名称
      */
-    handleTabEdit(tagName, action) {
+    handleTabEdit(tagName: any, action: any) {
       if (action === "remove") {
         this.close({ tagName });
       }
     }
-  }
+  } as any
 };
 </script>
 <style lang="less">
diff --git a/packages/ui/certd-client/src/layout/components/theme/color-picker.vue b/packages/ui/certd-client/src/layout/components/theme/color-picker.vue
index 599baf34e..f44368f2a 100644
--- a/packages/ui/certd-client/src/layout/components/theme/color-picker.vue
+++ b/packages/ui/certd-client/src/layout/components/theme/color-picker.vue
@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from "vue";
 const colorListDefine = [
   {
@@ -60,7 +60,7 @@ export default defineComponent({
   emits: ["change"],
   setup(props, ctx) {
     const colorList = ref(colorListDefine);
-    function changeColor(color) {
+    function changeColor(color: any) {
       ctx.emit("change", color);
     }
     return {
diff --git a/packages/ui/certd-client/src/layout/components/theme/index.vue b/packages/ui/certd-client/src/layout/components/theme/index.vue
index bc8a92c05..4f0e6e345 100644
--- a/packages/ui/certd-client/src/layout/components/theme/index.vue
+++ b/packages/ui/certd-client/src/layout/components/theme/index.vue
@@ -1,23 +1,13 @@
 <template>
   <div class="fs-theme" @click="show()">
     <fs-iconify icon="ion:sparkles-outline" />
-    <a-drawer
-      v-model:visible="visible"
-      title="主题设置"
-      placement="right"
-      width="350px"
-      :closable="false"
-      @after-visible-change="afterVisibleChange"
-    >
-      <fs-theme-color-picker
-        :primary-color="setting.getTheme.primaryColor"
-        @change="setting.setPrimaryColor"
-      ></fs-theme-color-picker>
+    <a-drawer v-model:visible="visible" title="主题设置" placement="right" width="350px" :closable="false" @after-visible-change="afterVisibleChange">
+      <fs-theme-color-picker :primary-color="setting.getTheme.primaryColor" @change="setting.setPrimaryColor"></fs-theme-color-picker>
     </a-drawer>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { ref, defineComponent } from "vue";
 import FsThemeColorPicker from "./color-picker.vue";
 import { useSettingStore } from "/@/store/modules/settings";
diff --git a/packages/ui/certd-client/src/layout/components/user-info/index.vue b/packages/ui/certd-client/src/layout/components/user-info/index.vue
index 24af19850..be8aef970 100644
--- a/packages/ui/certd-client/src/layout/components/user-info/index.vue
+++ b/packages/ui/certd-client/src/layout/components/user-info/index.vue
@@ -10,7 +10,7 @@
     </template>
   </a-dropdown>
 </template>
-<script>
+<script lang="ts">
 import { defineComponent } from "vue";
 import { useUserStore } from "/src/store/modules/user";
 import { Modal } from "ant-design-vue";
diff --git a/packages/ui/certd-client/src/layout/layout-framework.vue b/packages/ui/certd-client/src/layout/layout-framework.vue
index 2592d62e7..82224408d 100644
--- a/packages/ui/certd-client/src/layout/layout-framework.vue
+++ b/packages/ui/certd-client/src/layout/layout-framework.vue
@@ -58,7 +58,7 @@
   </a-layout>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, onErrorCaptured, ref } from "vue";
 import FsMenu from "./components/menu/index.jsx";
 import FsLocale from "./components/locale/index.vue";
diff --git a/packages/ui/certd-client/src/layout/layout-outside.vue b/packages/ui/certd-client/src/layout/layout-outside.vue
index a35b8c5e1..a0f817fa2 100644
--- a/packages/ui/certd-client/src/layout/layout-outside.vue
+++ b/packages/ui/certd-client/src/layout/layout-outside.vue
@@ -25,7 +25,7 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 export default {
   name: "LayoutOutside"
 };
diff --git a/packages/ui/certd-client/src/mock/base.js b/packages/ui/certd-client/src/mock/base.ts
similarity index 91%
rename from packages/ui/certd-client/src/mock/base.js
rename to packages/ui/certd-client/src/mock/base.ts
index 1cacbac71..14534b220 100644
--- a/packages/ui/certd-client/src/mock/base.js
+++ b/packages/ui/certd-client/src/mock/base.ts
@@ -1,5 +1,5 @@
 import _ from "lodash-es";
-function copyList(originList, newList, options, parentId) {
+function copyList(originList: any, newList: any, options: any, parentId?: any) {
   for (const item of originList) {
     const newItem = { ...item, parentId };
     newItem.id = ++options.idGenerator;
@@ -11,7 +11,7 @@ function copyList(originList, newList, options, parentId) {
   }
 }
 
-function delById(req, list) {
+function delById(req: any, list: any) {
   for (let i = 0; i < list.length; i++) {
     const item = list[i];
     console.log("remove i", i, req, req.params.id, item.id);
@@ -26,27 +26,27 @@ function delById(req, list) {
   }
 }
 
-function findById(id, list) {
+function findById(id: any, list: any) {
   for (const item of list) {
     if (item.id === id) {
       return item;
     }
     if (item.children != null && item.children.length > 0) {
-      const sub = findById(id, item.children);
+      const sub: any = findById(id, item.children);
       if (sub != null) {
         return sub;
       }
     }
   }
 }
-export default {
+const mockUtil: any = {
   findById,
-  buildMock(options) {
+  buildMock(options: any) {
     const name = options.name;
     if (options.copyTimes == null) {
       options.copyTimes = 29;
     }
-    const list = [];
+    const list: any = [];
     for (let i = 0; i < options.copyTimes; i++) {
       copyList(options.list, list, options);
     }
@@ -55,7 +55,7 @@ export default {
       {
         path: "/mock/" + name + "/page",
         method: "get",
-        handle(req) {
+        handle(req: any) {
           let data = [...list];
           let limit = 20;
           let offset = 0;
@@ -65,7 +65,7 @@ export default {
               item.lazy = false;
             }
           }
-          let orderProp, orderAsc;
+          let orderProp: any, orderAsc: any;
           if (req && req.body) {
             const { page, query, sort } = req.body;
             if (page.limit != null) {
@@ -78,7 +78,7 @@ export default {
             orderAsc = sort.asc;
 
             if (Object.keys(query).length > 0) {
-              data = list.filter((item) => {
+              data = list.filter((item: any) => {
                 let allFound = true; // 是否所有条件都符合
                 for (const key in query) {
                   // 判定某一个条件
@@ -169,7 +169,7 @@ export default {
       {
         path: "/mock/" + name + "/get",
         method: "get",
-        handle(req) {
+        handle(req: any) {
           let id = req.params.id;
           id = parseInt(id);
           let current = null;
@@ -189,7 +189,7 @@ export default {
       {
         path: "/mock/" + name + "/add",
         method: "post",
-        handle(req) {
+        handle(req: any) {
           req.body.id = ++options.idGenerator;
           list.unshift(req.body);
           return {
@@ -202,7 +202,7 @@ export default {
       {
         path: "/mock/" + name + "/update",
         method: "post",
-        handle(req) {
+        handle(req: any): any {
           const item = findById(req.body.id, list);
           if (item) {
             _.mergeWith(item, req.body, (objValue, srcValue) => {
@@ -225,7 +225,7 @@ export default {
       {
         path: "/mock/" + name + "/delete",
         method: "post",
-        handle(req) {
+        handle(req: any): any {
           delById(req, list);
           return {
             code: 0,
@@ -237,7 +237,7 @@ export default {
       {
         path: "/mock/" + name + "/batchDelete",
         method: "post",
-        handle(req) {
+        handle(req: any): any {
           const ids = req.body.ids;
           for (let i = list.length - 1; i >= 0; i--) {
             const item = list[i];
@@ -255,7 +255,7 @@ export default {
       {
         path: "/mock/" + name + "/delete",
         method: "post",
-        handle(req) {
+        handle(req: any): any {
           delById(req, list);
           return {
             code: 0,
@@ -267,7 +267,7 @@ export default {
       {
         path: "/mock/" + name + "/all",
         method: "post",
-        handle(req) {
+        handle(req: any): any {
           return {
             code: 0,
             msg: "success",
@@ -278,3 +278,5 @@ export default {
     ];
   }
 };
+
+export default mockUtil;
diff --git a/packages/ui/certd-client/src/mock/common/cascader-data.js b/packages/ui/certd-client/src/mock/common/cascader-data.ts
similarity index 100%
rename from packages/ui/certd-client/src/mock/common/cascader-data.js
rename to packages/ui/certd-client/src/mock/common/cascader-data.ts
diff --git a/packages/ui/certd-client/src/mock/common/mock.dict.js b/packages/ui/certd-client/src/mock/common/mock.dict.ts
similarity index 86%
rename from packages/ui/certd-client/src/mock/common/mock.dict.js
rename to packages/ui/certd-client/src/mock/common/mock.dict.ts
index d758ddd4e..543bd99f2 100644
--- a/packages/ui/certd-client/src/mock/common/mock.dict.js
+++ b/packages/ui/certd-client/src/mock/common/mock.dict.ts
@@ -1,11 +1,13 @@
 import cascaderData from "./cascader-data";
+// @ts-ignore
 import pcaDataLittle from "./pca-data-little";
+// @ts-ignore
 import { TreeNodesLazyLoader, getPcaData } from "./pcas-data";
 
 const openStatus = [
-  { value: "1", label: "打开", color: "success",icon:"ion:radio-button-on" },
+  { value: "1", label: "打开", color: "success", icon: "ion:radio-button-on" },
   { value: "2", label: "停止", color: "cyan" },
-  { value: "0", label: "关闭", color: "red",icon:"ion:radio-button-off" }
+  { value: "0", label: "关闭", color: "red", icon: "ion:radio-button-off" }
 ];
 
 const moreOpenStatus = [
@@ -20,11 +22,11 @@ const textStatus = [
   { id: "0", text: "关闭", color: "red" }
 ];
 
-export function GetTreeChildrenByParentId(parentId) {
+export function GetTreeChildrenByParentId(parentId: any) {
   return TreeNodesLazyLoader.getChildren(parentId);
 }
 
-export function GetNodesByValues(values) {
+export function GetNodesByValues(values: any) {
   return TreeNodesLazyLoader.getNodesByValues(values);
 }
 
@@ -99,7 +101,7 @@ export default [
   {
     path: "/mock/tree/GetTreeChildrenByParentId",
     method: "get",
-    async handle({ params }) {
+    async handle({ params }: any) {
       const list = await GetTreeChildrenByParentId(params.parentId);
       return {
         code: 0,
@@ -111,7 +113,7 @@ export default [
   {
     path: "/mock/tree/GetNodesByValues",
     method: "get",
-    async handle({ params }) {
+    async handle({ params }: any) {
       const list = await GetNodesByValues(params.values);
       return {
         code: 0,
diff --git a/packages/ui/certd-client/src/mock/common/pca-data-little.js b/packages/ui/certd-client/src/mock/common/pca-data-little.ts
similarity index 100%
rename from packages/ui/certd-client/src/mock/common/pca-data-little.js
rename to packages/ui/certd-client/src/mock/common/pca-data-little.ts
diff --git a/packages/ui/certd-client/src/mock/common/pcas-data.js b/packages/ui/certd-client/src/mock/common/pcas-data.ts
similarity index 83%
rename from packages/ui/certd-client/src/mock/common/pcas-data.js
rename to packages/ui/certd-client/src/mock/common/pcas-data.ts
index c1bbb64a7..aa35ab97d 100644
--- a/packages/ui/certd-client/src/mock/common/pcas-data.js
+++ b/packages/ui/certd-client/src/mock/common/pcas-data.ts
@@ -1,16 +1,18 @@
 import _ from "lodash-es";
 export async function getPcasData() {
+  // @ts-ignore
   const pcasData = () => import("china-division/dist/pcas-code.json");
   const ret = await pcasData();
   return ret.default;
 }
 export async function getPcaData() {
+  // @ts-ignore
   const pcaData = () => import("china-division/dist/pca-code.json");
   const ret = await pcaData();
   return ret.default;
 }
 export const TreeNodesLazyLoader = {
-  getNodesByValues(values) {
+  getNodesByValues(values: any) {
     console.log("getNodesByValues", values);
     if (!(values instanceof Array)) {
       values = [values];
@@ -28,20 +30,20 @@ export const TreeNodesLazyLoader = {
       return nodes;
     });
   },
-  getNode(list, value) {
+  getNode(list: any, value: any) {
     for (const item of list) {
       if (item.code === value) {
         return item;
       }
       if (item.children && item.children.length > 0) {
-        const found = this.getNode(item.children, value);
+        const found: any = this.getNode(item.children, value);
         if (found) {
           return found;
         }
       }
     }
   },
-  getChildren(parent) {
+  getChildren(parent: any) {
     return getPcasData().then((data) => {
       const list = this.getChildrenByParent(parent, data);
       if (list == null) {
@@ -50,7 +52,7 @@ export const TreeNodesLazyLoader = {
       return this.cloneAndDeleteChildren(list);
     });
   },
-  getChildrenByParent(parentId, tree) {
+  getChildrenByParent(parentId: any, tree: any) {
     if (!parentId) {
       // 取第一级
       return tree;
@@ -61,7 +63,7 @@ export const TreeNodesLazyLoader = {
         }
         if (node.children && node.children.length > 0) {
           // 递归查找
-          const list = this.getChildrenByParent(parentId, node.children);
+          const list: any = this.getChildrenByParent(parentId, node.children);
           if (list) {
             return list;
           }
@@ -69,10 +71,10 @@ export const TreeNodesLazyLoader = {
       }
     }
   },
-  cloneAndDeleteChildren(list) {
+  cloneAndDeleteChildren(list: any) {
     const newList = [];
     for (const node of list) {
-      const newNode = {};
+      const newNode: any = {};
       Object.assign(newNode, node);
       if (newNode.children == null || newNode.children.length === 0) {
         newNode.isLeaf = true;
diff --git a/packages/ui/certd-client/src/mock/index.js b/packages/ui/certd-client/src/mock/index.ts
similarity index 76%
rename from packages/ui/certd-client/src/mock/index.js
rename to packages/ui/certd-client/src/mock/index.ts
index c3a222b29..cc29140bf 100644
--- a/packages/ui/certd-client/src/mock/index.js
+++ b/packages/ui/certd-client/src/mock/index.ts
@@ -1,12 +1,15 @@
 import { mock } from "../api/service";
 import * as tools from "../api/tools";
 import _ from "lodash-es";
-const commonMocks = import.meta.glob("./common/mock.*.[j|t]s", { eager: true });
-const apiMocks = import.meta.glob("../api/modules/*.mock.ts", { eager: true });
-const viewMocks = import.meta.glob("../views/**/mock.[j|t]s", { eager: true });
+// @ts-ignore
+const commonMocks: any = import.meta.glob("./common/mock.*.[j|t]s", { eager: true });
+// @ts-ignore
+const apiMocks: any = import.meta.glob("../api/modules/*.mock.ts", { eager: true });
+// @ts-ignore
+const viewMocks: any = import.meta.glob("../views/**/mock.[j|t]s", { eager: true });
 
-const list = [];
-_.forEach(commonMocks, (value) => {
+const list: any = [];
+_.forEach(commonMocks, (value: any) => {
   list.push(value.default);
 });
 _.forEach(apiMocks, (value) => {
@@ -16,7 +19,7 @@ _.forEach(viewMocks, (value) => {
   list.push(value.default);
 });
 
-list.forEach((apiFile) => {
+list.forEach((apiFile: any) => {
   for (const item of apiFile) {
     mock.onAny(new RegExp(item.path)).reply(async (config) => {
       console.log("------------fake request start -------------");
diff --git a/packages/ui/certd-client/src/plugin/fast-crud/index.tsx b/packages/ui/certd-client/src/plugin/fast-crud/index.tsx
index 0374810e7..edc80d1fd 100644
--- a/packages/ui/certd-client/src/plugin/fast-crud/index.tsx
+++ b/packages/ui/certd-client/src/plugin/fast-crud/index.tsx
@@ -1,13 +1,12 @@
 import { request, requestForMock } from "/src/api/service";
 import "/src/mock";
-import { FastCrud, UseCrudProps, useTypes, setLogger, useColumns, ColumnCompositionProps, MergeColumnPlugin, CrudOptions, TransformQuery, PageQuery, UserPageQuery, UserPageRes, PageRes } from "@fast-crud/fast-crud";
+import { ColumnCompositionProps, CrudOptions, FastCrud, PageQuery, PageRes, setLogger, TransformResProps, useColumns, UseCrudProps, UserPageQuery, useTypes } from "@fast-crud/fast-crud";
 import "@fast-crud/fast-crud/dist/style.css";
-import { FsExtendsUploader, FsExtendsEditor, FsExtendsJson, FsExtendsCopyable, FsExtendsTime } from "@fast-crud/fast-extends";
+import { FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExtendsUploader } from "@fast-crud/fast-extends";
 import "@fast-crud/fast-extends/dist/style.css";
 import UiAntdv from "@fast-crud/ui-antdv";
 import _ from "lodash-es";
 import { useCrudPermission } from "../permission";
-import { TransformResProps } from "@fast-crud/fast-crud";
 import { GetSignedUrl } from "/@/views/crud/component/uploader/s3/api";
 
 function install(app: any, options: any = {}) {
@@ -230,7 +229,12 @@ function install(app: any, options: any = {}) {
   //安装editor
   app.use(FsExtendsEditor, {
     //编辑器的公共配置
-    wangEditor: {}
+    wangEditor: {
+      editorConfig: {
+        MENU_CONF: {}
+      },
+      toolbarConfig: {}
+    }
   });
   app.use(FsExtendsJson);
   app.use(FsExtendsTime);
diff --git a/packages/ui/certd-client/src/plugin/permission/use-crud-permission.ts b/packages/ui/certd-client/src/plugin/permission/use-crud-permission.ts
index 3804887d0..69a0ed1f6 100644
--- a/packages/ui/certd-client/src/plugin/permission/use-crud-permission.ts
+++ b/packages/ui/certd-client/src/plugin/permission/use-crud-permission.ts
@@ -1,13 +1,17 @@
 import { usePermission } from "/@/plugin/permission";
 import _ from "lodash-es";
 
+export type UseCrudPermissionExtraProps = {
+  hasActionPermission: (action: string) => boolean;
+};
+export type UseCrudPermissionExtra = (props: UseCrudPermissionExtraProps) => any;
+export type UseCrudPermissionCompProps = {
+  prefix: string;
+  extra?: UseCrudPermissionExtra;
+  [key: string]: any;
+};
 export type UseCrudPermissionProps = {
-  permission:
-    | string
-    | {
-        prefix: string;
-        [key: string]: any;
-      };
+  permission: string | UseCrudPermissionCompProps;
 };
 /**
  * 设置按钮动作权限
diff --git a/packages/ui/certd-client/src/router/index.ts b/packages/ui/certd-client/src/router/index.ts
index 72d1aac68..c57cf102c 100644
--- a/packages/ui/certd-client/src/router/index.ts
+++ b/packages/ui/certd-client/src/router/index.ts
@@ -49,7 +49,7 @@ router.beforeEach(async (to, from, next) => {
   }
 });
 
-router.afterEach((to) => {
+router.afterEach((to: any) => {
   // 进度条
   NProgress.done();
   // 多页控制 打开新的页面
diff --git a/packages/ui/certd-client/src/router/resolve.ts b/packages/ui/certd-client/src/router/resolve.ts
index 39cbd9980..55b9ca237 100644
--- a/packages/ui/certd-client/src/router/resolve.ts
+++ b/packages/ui/certd-client/src/router/resolve.ts
@@ -3,11 +3,10 @@ import _ from "lodash-es";
 import { outsideResource } from "./source/outside";
 import { headerResource } from "./source/header";
 import { frameworkResource } from "./source/framework";
-// @ts-ignore
 const modules = import.meta.glob("/src/views/**/*.vue");
 
 let index = 0;
-function transformOneResource(resource) {
+function transformOneResource(resource: any) {
   let menu: any = null;
   if (resource.meta == null) {
     resource.meta = {};
@@ -46,7 +45,7 @@ function transformOneResource(resource) {
   };
 }
 
-export const buildMenusAndRouters = (resources) => {
+export const buildMenusAndRouters = (resources: any) => {
   const routes: Array<any> = [];
   const menus: Array<any> = [];
   for (const item of resources) {
@@ -84,7 +83,7 @@ export const buildMenusAndRouters = (resources) => {
   };
 };
 
-function setIndex(menus) {
+function setIndex(menus: any) {
   for (const menu of menus) {
     menu.index = "index_" + index;
     index++;
@@ -94,7 +93,7 @@ function setIndex(menus) {
   }
 }
 
-function findMenus(menus, condition) {
+function findMenus(menus: any, condition: any) {
   const list: any = [];
   for (const menu of menus) {
     if (condition(menu)) {
@@ -110,8 +109,8 @@ function findMenus(menus, condition) {
   return list;
 }
 
-function filterMenus(menus, condition) {
-  const list = menus.filter((item) => {
+function filterMenus(menus: any, condition: any) {
+  const list = menus.filter((item: any) => {
     return condition(item);
   });
 
@@ -123,7 +122,7 @@ function filterMenus(menus, condition) {
   return list;
 }
 
-function flatChildren(list, children) {
+function flatChildren(list: any, children: any) {
   for (const child of children) {
     list.push(child);
     if (child.children && child.children.length > 0) {
@@ -132,7 +131,7 @@ function flatChildren(list, children) {
     child.children = null;
   }
 }
-function flatSubRouters(routers) {
+function flatSubRouters(routers: any) {
   for (const router of routers) {
     const children: Array<any> = [];
     if (router.children && router.children.length > 0) {
diff --git a/packages/ui/certd-client/src/store/modules/page.ts b/packages/ui/certd-client/src/store/modules/page.ts
index f452712e7..435be28a0 100644
--- a/packages/ui/certd-client/src/store/modules/page.ts
+++ b/packages/ui/certd-client/src/store/modules/page.ts
@@ -403,7 +403,7 @@ export const usePageStore = defineStore({
      * @param {Object} state state
      * @param {Array} routes routes
      */
-    async init(routes: any) {
+    async init(routes?: any) {
       if (this.inited) {
         return;
       }
diff --git a/packages/ui/certd-client/src/views/crud/advanced/big-data/api.js b/packages/ui/certd-client/src/views/crud/advanced/big-data/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/advanced/big-data/api.js
rename to packages/ui/certd-client/src/views/crud/advanced/big-data/api.ts
index a2e187ae2..77ad4f4ea 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/big-data/api.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/big-data/api.ts
@@ -1,7 +1,8 @@
 import { requestForMock } from "/src/api/service";
+
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedBigData";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +10,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +18,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +26,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +34,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
diff --git a/packages/ui/certd-client/src/views/crud/advanced/big-data/crud.jsx b/packages/ui/certd-client/src/views/crud/advanced/big-data/crud.tsx
similarity index 88%
rename from packages/ui/certd-client/src/views/crud/advanced/big-data/crud.jsx
rename to packages/ui/certd-client/src/views/crud/advanced/big-data/crud.tsx
index d66f65d81..36cc426e3 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/big-data/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/big-data/crud.tsx
@@ -1,19 +1,19 @@
 import * as api from "./api";
-import { message } from "ant-design-vue";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
@@ -41,7 +41,6 @@ export default function ({ expose }) {
       columns: {
         id: {
           title: "ID",
-          key: "id",
           type: "number",
           column: {
             width: 50
diff --git a/packages/ui/certd-client/src/views/crud/advanced/big-data/index.vue b/packages/ui/certd-client/src/views/crud/advanced/big-data/index.vue
index 91a4914c0..3c3e8846b 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/big-data/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/big-data/index.vue
@@ -7,30 +7,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+
 export default defineComponent({
   name: "AdvancedBigData",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, output } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose, output } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/big-data/mock.js b/packages/ui/certd-client/src/views/crud/advanced/big-data/mock.ts
similarity index 98%
rename from packages/ui/certd-client/src/views/crud/advanced/big-data/mock.js
rename to packages/ui/certd-client/src/views/crud/advanced/big-data/mock.ts
index a166ac9d3..7656dba24 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/big-data/mock.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/big-data/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedBigData",
   idGenerator: 0,
   copyTimes: 1000
diff --git a/packages/ui/certd-client/src/views/crud/advanced/from-backend/api.ts b/packages/ui/certd-client/src/views/crud/advanced/from-backend/api.ts
index ae38d2931..924b5a7d2 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/from-backend/api.ts
+++ b/packages/ui/certd-client/src/views/crud/advanced/from-backend/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedFromBackend";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
diff --git a/packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue b/packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue
index f7fbf187c..23ceb0959 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue
@@ -1,11 +1,20 @@
 <template>
-  <fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding" />
+  <fs-page>
+    <template #header>
+      <div class="title">CrudOptions从后台加载</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/use.html#usefsasync">文档</a>
+      </div>
+    </template>
+    <fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, Ref } from "vue";
-import { useCrud, dict, useExpose, useFs, UseFsProps, CrudBinding, CreateCrudOptionsRet, useFsAsync } from "@fast-crud/fast-crud";
+import { defineComponent, onMounted, ref, Ref } from "vue";
+import { CrudBinding, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
+
 export default defineComponent({
   name: "AdvancedFromBackend",
   setup() {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/api.js b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/api.js
rename to packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/api.ts
index 236e922ac..4fb54badd 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/api.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedInDialog";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
diff --git a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.jsx b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx
similarity index 70%
rename from packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.jsx
rename to packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx
index cde2c0c2f..9788e26a8 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/crud.tsx
@@ -1,19 +1,22 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, dict } from "@fast-crud/fast-crud";
+import { SearchOutlined } from "@ant-design/icons-vue";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
@@ -68,23 +71,16 @@ export default function ({ expose }) {
         },
         render: {
           title: "复杂输入(render)",
+          type: "text",
           form: {
             title: "复杂输入",
             component: {
-              render(context) {
+              render(context: any) {
                 console.log("context scope", context);
                 return (
                   <a-input-group compact>
-                    <a-input
-                      placeholder={"render1 input"}
-                      style="width: 50%"
-                      v-model={[context.form.render, "value"]}
-                    />
-                    <a-input
-                      placeholder={"render2 input"}
-                      style="width: 50%"
-                      v-model={[context.form.render2, "value"]}
-                    />
+                    <a-input placeholder={"render1 input"} style="width: 50%" v-model={[context.form.render, "value"]} />
+                    <a-input placeholder={"render2 input"} style="width: 50%" v-model={[context.form.render2, "value"]} />
                   </a-input-group>
                 );
               }
@@ -93,6 +89,7 @@ export default function ({ expose }) {
         },
         render2: {
           title: "我的值是由复杂输入列输入的",
+          type: "text",
           column: {
             width: "300px"
           },
diff --git a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/index.vue b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/index.vue
index 5b3591efe..3359b7a00 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
-  name: "fs-in-dialog",
+  name: "FsInDialog",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/mock.js b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/mock.ts
similarity index 95%
rename from packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/mock.js
rename to packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/mock.ts
index 31a5c5618..2f50cb955 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/mock.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/crud/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedInDialog",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/index.vue b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/index.vue
index 64ac77137..b2053a0a4 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/in-dialog/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/in-dialog/index.vue
@@ -1,32 +1,30 @@
 <template>
   <fs-page>
     <template #header>
-      <div class="title">
-        对话框中显示crud
-      </div>
+      <div class="title">对话框中显示crud</div>
     </template>
-    <div style="padding:50px">
+    <div style="padding: 50px">
       <a-button type="primary" @click="openDialog">打开对话框</a-button>
     </div>
 
     <a-modal v-model:visible="dialogShow" width="80%" title="fs-crud in dialog">
-      <div style="height: 400px;position: relative">
-        <fs-in-dialog ></fs-in-dialog>
+      <div style="height: 400px; position: relative">
+        <fs-in-dialog></fs-in-dialog>
       </div>
     </a-modal>
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from "vue";
-import FsInDialog from './crud/index.vue'
+import FsInDialog from "./crud/index.vue";
 export default defineComponent({
   name: "InDialog",
-  components:{FsInDialog},
+  components: { FsInDialog },
   setup() {
-    const dialogShow = ref(false)
-    function openDialog(){
-      dialogShow.value=true
+    const dialogShow = ref(false);
+    function openDialog() {
+      dialogShow.value = true;
     }
     return {
       dialogShow,
diff --git a/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx b/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx
index 617e7855f..a18c8cdce 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, ScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ expose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
@@ -30,7 +30,6 @@ export default function ({ expose }: CreateCrudOptionsProps): CreateCrudOptionsR
       columns: {
         id: {
           title: "ID",
-          key: "id",
           type: "number",
           column: {
             width: 50
@@ -51,7 +50,7 @@ export default function ({ expose }: CreateCrudOptionsProps): CreateCrudOptionsR
             cache: true
           }),
           form: {
-            valueChange({ form, value, getComponentRef }: ScopeContext) {
+            valueChange({ form, value, getComponentRef }) {
               form.city = undefined; // 将“city”的值置空
               form.county = undefined; // 将“county”的值置空
               if (value) {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/api.js b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/api.ts
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/advanced/local-pagination/api.js
rename to packages/ui/certd-client/src/views/crud/advanced/local-pagination/api.ts
index 457dac6d8..c8f387364 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/api.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedLocalPagination";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
diff --git a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.jsx b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.tsx
similarity index 75%
rename from packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.jsx
rename to packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.tsx
index e4989bee1..f697f732a 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/crud.tsx
@@ -1,14 +1,16 @@
-import * as api from "./api";
+import * as api from "./api.js";
 import _ from "lodash-es";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose, localDataRef }) {
-  const pageRequest = async ({ page, query }) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose, localDataRef }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    const { page } = query;
     //总数据
     let data = localDataRef.value;
     //获取请求参数
     const limit = page.limit;
-    let offset = page.offset;
-    data = data.filter((item) => {
+    const offset = page.offset;
+    data = data.filter((item: any) => {
       // 根据你的业务，编写你的本地查询逻辑
       // text改成你的查询字段
       if (query.status && item.status !== query.status) {
@@ -33,7 +35,7 @@ export default function ({ expose, localDataRef }) {
       records
     };
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     await api.UpdateObj(form);
     //更新本地数据
@@ -45,7 +47,7 @@ export default function ({ expose, localDataRef }) {
     }
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     const id = await api.AddObj(form);
     //本地添加
     form.id = id;
@@ -53,7 +55,7 @@ export default function ({ expose, localDataRef }) {
     return id;
   };
 
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     await api.DelObj(row.id);
     //本地删除那一条记录
     const tableData = localDataRef.value;
diff --git a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/index.vue b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/index.vue
index d48a680ee..95281f56c 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/index.vue
@@ -11,9 +11,9 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
+import { useCrud, useExpose, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import { GetList } from "./api";
 
@@ -36,16 +36,10 @@ export default defineComponent({
       const ret = await GetList({ page: { offset: 0, limit: 99999999 }, query: {}, sort: {} });
       localDataRef.value = ret.records;
 
-      //然后再初始化crud
-      // 暴露的方法
-      const { expose } = useExpose({ crudRef, crudBinding });
-      // 你的crud配置
-      const { crudOptions } = createCrudOptions({ expose, localDataRef });
-      // 初始化crud配置
-      useCrud({ expose, crudOptions });
+      const { crudExpose } = useFs({ crudBinding, crudRef, createCrudOptions, localDataRef });
 
       // 页面打开后获取列表数据
-      await expose.doRefresh();
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/mock.js b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/mock.ts
similarity index 87%
rename from packages/ui/certd-client/src/views/crud/advanced/local-pagination/mock.js
rename to packages/ui/certd-client/src/views/crud/advanced/local-pagination/mock.ts
index 120c2a634..048a8eb75 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/local-pagination/mock.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/local-pagination/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedLocalPagination",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/api.js b/packages/ui/certd-client/src/views/crud/advanced/nest/api.ts
similarity index 75%
rename from packages/ui/certd-client/src/views/crud/advanced/nest/api.js
rename to packages/ui/certd-client/src/views/crud/advanced/nest/api.ts
index b18db901d..84aaae309 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/api.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedNest";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any[]) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/api.js b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/api.ts
similarity index 75%
rename from packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/api.js
rename to packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/api.ts
index 3a8a4a1b2..1f759d5dc 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/api.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedAside";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any[]) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.jsx b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.tsx
similarity index 65%
rename from packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.jsx
rename to packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.tsx
index 567715c65..dc8978da8 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/crud.tsx
@@ -1,14 +1,19 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const editRequest = async ({ form, row }) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
-  const addRequest = async ({ form }) => {
+
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/index.vue b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/index.vue
index 9a198b9e4..fdba51d2b 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/index.vue
@@ -6,37 +6,26 @@
   </fs-crud>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import createCrudOptions from "./crud.js";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "AsideTable",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedIds } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
       crudRef,
-      setSearchFormData: expose.setSearchFormData,
-      doRefresh: expose.doRefresh
+      setSearchFormData: crudExpose.setSearchFormData,
+      doRefresh: crudExpose.doRefresh
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/mock.js b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/mock.ts
similarity index 90%
rename from packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/mock.js
rename to packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/mock.ts
index 2d70c579f..c366a4613 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/mock.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/aside-table/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedAside",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/crud.jsx b/packages/ui/certd-client/src/views/crud/advanced/nest/crud.tsx
similarity index 78%
rename from packages/ui/certd-client/src/views/crud/advanced/nest/crud.jsx
rename to packages/ui/certd-client/src/views/crud/advanced/nest/crud.tsx
index b42ba5c82..47b6faa57 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/crud.tsx
@@ -1,21 +1,27 @@
 import * as api from "./api";
 import { ref, shallowRef } from "vue";
 import SubTable from "./sub-table/index.vue";
-import { compute } from "@fast-crud/fast-crud";
-export default function ({ expose, asideTableRef }) {
-  const editRequest = async ({ form, row }) => {
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose, asideTableRef }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
-  const addRequest = async ({ form }) => {
+
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   const currentRow = ref();
 
-  const onCurrentRowChange = (id) => {
+  const onCurrentRowChange = (id: number) => {
     currentRow.value = id;
     asideTableRef.value.setSearchFormData({ form: { gradeId: id } });
     asideTableRef.value.doRefresh();
@@ -23,7 +29,7 @@ export default function ({ expose, asideTableRef }) {
   return {
     crudOptions: {
       table: {
-        customRow(record, index) {
+        customRow(record: any, index: number) {
           const clazz = record.id === currentRow.value ? "fs-current-row" : "";
           return {
             onClick() {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/index.vue b/packages/ui/certd-client/src/views/crud/advanced/nest/index.vue
index 5fa4b445e..09e35c822 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/index.vue
@@ -13,34 +13,24 @@
   </a-row>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted, ref } from "vue";
+import createCrudOptions from "./crud.js";
 import AsideTable from "./aside-table/index.vue";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureNest",
   // eslint-disable-next-line vue/no-unused-components
   components: { AsideTable },
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
     const asideTableRef = ref();
-    const { crudOptions } = createCrudOptions({ expose, asideTableRef });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, asideTableRef });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/mock.js b/packages/ui/certd-client/src/views/crud/advanced/nest/mock.ts
similarity index 89%
rename from packages/ui/certd-client/src/views/crud/advanced/nest/mock.js
rename to packages/ui/certd-client/src/views/crud/advanced/nest/mock.ts
index 709699d22..d24e3e6fa 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/mock.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedNest",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/api.js b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/api.js
rename to packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/api.ts
index 167a31de3..681972eb6 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/api.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AdvancedSubTable";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any[]) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/crud.jsx b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/crud.tsx
similarity index 66%
rename from packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/crud.jsx
rename to packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/crud.tsx
index ad5faa1e5..d6682ceda 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/crud.tsx
@@ -1,20 +1,26 @@
 import * as api from "./api";
-export default function ({ expose, props, ctx }) {
-  const editRequest = async ({ form, row }) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose, props, ctx }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
-  const addRequest = async ({ form }) => {
+
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
   return {
     crudOptions: {
       table: {
-        customRow(record, index) {
+        customRow(record: any, index: number) {
           const clazz = record.id === props.modelValue ? "fs-current-row" : "";
           return {
             onClick() {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue
index fb9284386..030095b32 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/index.vue
@@ -7,10 +7,11 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted, watch } from "vue";
+<script lang="ts">
+import { defineComponent, onMounted, watch } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "SubTable",
   props: {
@@ -19,23 +20,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, ctx) {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose, props, ctx });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, props, ctx });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     //你的业务代码
diff --git a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/mock.js b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/mock.ts
similarity index 88%
rename from packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/mock.js
rename to packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/mock.ts
index 726a628a8..e2aab6e1c 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/mock.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/nest/sub-table/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedSubTable",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx
index 140150206..4f873a8e5 100644
--- a/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api.js";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ expose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
diff --git a/packages/ui/certd-client/src/views/crud/basis/columns-set/mock.ts b/packages/ui/certd-client/src/views/crud/basis/columns-set/mock.ts
index 90154b73b..5c869f1cd 100644
--- a/packages/ui/certd-client/src/views/crud/basis/columns-set/mock.ts
+++ b/packages/ui/certd-client/src/views/crud/basis/columns-set/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "BasisColumnsSet",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute-more/api.ts b/packages/ui/certd-client/src/views/crud/basis/compute-more/api.ts
index 39c56ba12..2e82fd329 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute-more/api.ts
+++ b/packages/ui/certd-client/src/views/crud/basis/compute-more/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormComputeMore";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute-more/mock.ts b/packages/ui/certd-client/src/views/crud/basis/compute-more/mock.ts
index ee602acfa..63a51fbb1 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute-more/mock.ts
+++ b/packages/ui/certd-client/src/views/crud/basis/compute-more/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FormComputeMore",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx
index 33f36f397..0f6be78d9 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx
@@ -1,8 +1,9 @@
 import * as api from "./api";
 import { requestForMock } from "/src/api/service";
-import { AddReq, ButtonProps, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, RowHandleProps, useCompute, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, GetContextFn, ScopeContext, useCompute, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
-import { ref, computed } from "vue";
+import { computed, ref } from "vue";
+
 const { asyncCompute, compute } = useCompute();
 export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
@@ -59,7 +60,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
       rowHandle: {
         fixed: "right",
         show: computed(() => {
-          return false;
+          return true;
         }),
         buttons: {
           edit: {
@@ -71,13 +72,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
             show: compute(({ row }) => {
               return row.editable;
             })
-          },
-          custom: compute(({ row }) => {
-            return {
-              text: "动态按钮:" + row.id,
-              show: true
-            };
-          })
+          }
         }
       },
       columns: {
@@ -162,7 +157,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
               vModel: "value",
               placeholder: "异步计算远程获取options",
               options: asyncCompute({
-                async asyncFn(watchValue, context) {
+                async asyncFn(watchValue: any, context: GetContextFn) {
                   const url = "/mock/dicts/OpenStatusEnum?remote";
                   return await requestForMock({ url });
                 }
@@ -181,10 +176,10 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
               vModel: "value",
               placeholder: "异步计算远程获取options",
               options: asyncCompute({
-                watch({ form }: any) {
+                watch({ form }: ScopeContext) {
                   return form.compute;
                 },
-                async asyncFn(watchValue) {
+                async asyncFn(watchValue: string) {
                   message.info("监听switch,触发远程获取options");
                   const url = watchValue ? "/mock/dicts/OpenStatusEnum?remote" : "/mock/dicts/moreOpenStatusEnum?remote";
                   return await requestForMock({ url });
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute/mock.ts b/packages/ui/certd-client/src/views/crud/basis/compute/mock.ts
index b4c21d853..6bc6732fe 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute/mock.ts
+++ b/packages/ui/certd-client/src/views/crud/basis/compute/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FormCompute",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/basis/i18n/api.js b/packages/ui/certd-client/src/views/crud/basis/i18n/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/basis/i18n/api.js
rename to packages/ui/certd-client/src/views/crud/basis/i18n/api.ts
index d62b1b729..1a99bda10 100644
--- a/packages/ui/certd-client/src/views/crud/basis/i18n/api.js
+++ b/packages/ui/certd-client/src/views/crud/basis/i18n/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/BasisI18n";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/basis/i18n/crud.jsx b/packages/ui/certd-client/src/views/crud/basis/i18n/crud.tsx
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/basis/i18n/crud.jsx
rename to packages/ui/certd-client/src/views/crud/basis/i18n/crud.tsx
index e789ca3e4..48d9c48b6 100644
--- a/packages/ui/certd-client/src/views/crud/basis/i18n/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/basis/i18n/crud.tsx
@@ -1,22 +1,25 @@
 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";
 import { useI18n } from "vue-i18n";
-export default function ({ expose }) {
-  const { t } = useI18n();
-  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);
   };
+
+  const { t } = useI18n();
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/basis/i18n/index.vue b/packages/ui/certd-client/src/views/crud/basis/i18n/index.vue
index 6c4d13579..9a53a5b2a 100644
--- a/packages/ui/certd-client/src/views/crud/basis/i18n/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/i18n/index.vue
@@ -14,32 +14,19 @@
   </fs-page>
 </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";
-import { message } from "ant-design-vue";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import createCrudOptions from "./crud.js";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "BasisI18n",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/basis/i18n/mock.js b/packages/ui/certd-client/src/views/crud/basis/i18n/mock.ts
similarity index 94%
rename from packages/ui/certd-client/src/views/crud/basis/i18n/mock.js
rename to packages/ui/certd-client/src/views/crud/basis/i18n/mock.ts
index 4bbcc95b7..298354ac2 100644
--- a/packages/ui/certd-client/src/views/crud/basis/i18n/mock.js
+++ b/packages/ui/certd-client/src/views/crud/basis/i18n/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "BasisI18n",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-card/api.js b/packages/ui/certd-client/src/views/crud/basis/layout-card/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/basis/layout-card/api.js
rename to packages/ui/certd-client/src/views/crud/basis/layout-card/api.ts
index 1ee8f29fa..8cbb71974 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-card/api.js
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-card/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/BasisLayoutCard";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.jsx b/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.tsx
similarity index 75%
rename from packages/ui/certd-client/src/views/crud/basis/layout-card/crud.jsx
rename to packages/ui/certd-client/src/views/crud/basis/layout-card/crud.tsx
index ac6d1fb21..c62ed6f4f 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.tsx
@@ -1,23 +1,24 @@
 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";
 import { computed } from "vue";
 
-export default function ({ crudExpose }) {
-  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);
   };
-  let cityDictRef = dict({
+
+  const cityDictRef = dict({
     value: "id",
     label: "text",
     data: [
@@ -48,7 +49,7 @@ export default function ({ crudExpose }) {
         options: computed(() => {
           return cityDictRef.data;
         })
-      },
+      } as any,
       columns: {
         id: {
           title: "ID",
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-card/index.vue b/packages/ui/certd-client/src/views/crud/basis/layout-card/index.vue
index 4f31ef7ca..8788bc809 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-card/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-card/index.vue
@@ -10,27 +10,15 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "BasisLayoutCard",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { crudExpose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ crudExpose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-card/mock.js b/packages/ui/certd-client/src/views/crud/basis/layout-card/mock.ts
similarity index 94%
rename from packages/ui/certd-client/src/views/crud/basis/layout-card/mock.js
rename to packages/ui/certd-client/src/views/crud/basis/layout-card/mock.ts
index 417d9601f..d7c7bc48c 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-card/mock.js
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-card/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "BasisLayoutCard",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-custom/api.js b/packages/ui/certd-client/src/views/crud/basis/layout-custom/api.ts
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/basis/layout-custom/api.js
rename to packages/ui/certd-client/src/views/crud/basis/layout-custom/api.ts
index f243b4020..cf3bd2b70 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-custom/api.js
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-custom/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/BasisLayoutCustom";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.jsx b/packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.tsx
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.jsx
rename to packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.tsx
index 20df68fef..af9062dd6 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.tsx
@@ -1,22 +1,23 @@
 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";
 import CustomLayout from "./custom-layout.vue";
 import { shallowRef } from "vue";
-export default function ({ crudExpose }) {
-  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);
   };
+
   return {
     crudOptions: {
       container: {
@@ -26,7 +27,7 @@ export default function ({ crudExpose }) {
         show: true,
         name: "city",
         type: "card"
-      },
+      } as any,
       request: {
         pageRequest,
         addRequest,
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-custom/index.vue b/packages/ui/certd-client/src/views/crud/basis/layout-custom/index.vue
index 288cc3be4..0f2e1ab28 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-custom/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-custom/index.vue
@@ -13,27 +13,15 @@
   </fs-page>
 </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: "BasisLayoutCustom",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { crudExpose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ crudExpose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-custom/mock.js b/packages/ui/certd-client/src/views/crud/basis/layout-custom/mock.ts
similarity index 94%
rename from packages/ui/certd-client/src/views/crud/basis/layout-custom/mock.js
rename to packages/ui/certd-client/src/views/crud/basis/layout-custom/mock.ts
index d877b043e..4b8662d8c 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-custom/mock.js
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-custom/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "BasisLayoutCustom",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/basis/reset/index.vue b/packages/ui/certd-client/src/views/crud/basis/reset/index.vue
index 732bc4f48..53d3aa210 100644
--- a/packages/ui/certd-client/src/views/crud/basis/reset/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/reset/index.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
-import { useFs, UseFsProps } 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({
@@ -26,7 +26,7 @@ export default defineComponent({
 
     setTimeout(() => {
       //合并新的crudOptions
-      const newOptions = _.merge(crudOptions, {
+      const newOptions: DynamicType<CrudOptions> = _.merge(crudOptions, {
         columns: {
           text: {
             title: "追加字段",
diff --git a/packages/ui/certd-client/src/views/crud/basis/value-change/api.js b/packages/ui/certd-client/src/views/crud/basis/value-change/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/basis/value-change/api.js
rename to packages/ui/certd-client/src/views/crud/basis/value-change/api.ts
index 35fdfa0c1..f6e2f1050 100644
--- a/packages/ui/certd-client/src/views/crud/basis/value-change/api.js
+++ b/packages/ui/certd-client/src/views/crud/basis/value-change/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/BasisValueChange";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/basis/value-change/crud.jsx b/packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx
similarity index 72%
rename from packages/ui/certd-client/src/views/crud/basis/value-change/crud.jsx
rename to packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx
index 15dde4a4b..856cb4213 100644
--- a/packages/ui/certd-client/src/views/crud/basis/value-change/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/basis/value-change/crud.tsx
@@ -1,19 +1,20 @@
 import * as api from "./api";
 import { message } from "ant-design-vue";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, ValueChangeContext } 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);
   };
 
@@ -52,12 +53,12 @@ export default function ({ expose }) {
               name: "fs-dict-switch",
               vModel: "checked"
             },
-            valueChange(context) {
+            valueChange(context: ValueChangeContext) {
               console.log("column value changed:", context);
             }
           },
           form: {
-            valueChange({ value, key, form }) {
+            valueChange({ value, key, form }: ValueChangeContext) {
               console.log("valueChanged,", key, value, form);
               message.info(`valueChanged:${key}=${value}`);
             }
@@ -67,7 +68,7 @@ export default function ({ expose }) {
           title: "value-change",
           type: "text",
           form: {
-            valueChange({ value, key, form }) {
+            valueChange({ value, key, form }: ValueChangeContext) {
               console.log("valueChanged,", key, value, form);
               message.info(`valueChanged:${key}=${value}`);
             }
@@ -81,7 +82,7 @@ export default function ({ expose }) {
           },
           form: {
             valueChange: {
-              handle({ value, key, form, immediate }) {
+              handle({ value, key, form, immediate }: ValueChangeContext) {
                 console.log("valueChange,", key, value, "isImmediate=", immediate);
                 message.info(`valueChanged:${key}=${value},isImmediate=${immediate}`);
               },
diff --git a/packages/ui/certd-client/src/views/crud/basis/value-change/index.vue b/packages/ui/certd-client/src/views/crud/basis/value-change/index.vue
index ce07f728b..40c3f5a9c 100644
--- a/packages/ui/certd-client/src/views/crud/basis/value-change/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/value-change/index.vue
@@ -10,30 +10,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+
 export default defineComponent({
   name: "BasisValueChange",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, output } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose, output } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/basis/value-change/mock.js b/packages/ui/certd-client/src/views/crud/basis/value-change/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/basis/value-change/mock.js
rename to packages/ui/certd-client/src/views/crud/basis/value-change/mock.ts
index 2d16ebcc6..f2967377e 100644
--- a/packages/ui/certd-client/src/views/crud/basis/value-change/mock.js
+++ b/packages/ui/certd-client/src/views/crud/basis/value-change/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "BasisValueChange",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/button/api.js b/packages/ui/certd-client/src/views/crud/component/button/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/button/api.js
rename to packages/ui/certd-client/src/views/crud/component/button/api.ts
index 99ab67a8a..f158045bb 100644
--- a/packages/ui/certd-client/src/views/crud/component/button/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/button/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentButton";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/button/crud.jsx b/packages/ui/certd-client/src/views/crud/component/button/crud.tsx
similarity index 84%
rename from packages/ui/certd-client/src/views/crud/component/button/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/button/crud.tsx
index 4e10ee199..94385795b 100644
--- a/packages/ui/certd-client/src/views/crud/component/button/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/button/crud.tsx
@@ -1,22 +1,23 @@
 import * as api from "./api";
-import { requestForMock } from "/src/api/service";
-import { dict, compute } from "@fast-crud/fast-crud";
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
-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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/component/button/index.vue b/packages/ui/certd-client/src/views/crud/component/button/index.vue
index bf86cd95a..77c429586 100644
--- a/packages/ui/certd-client/src/views/crud/component/button/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/button/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </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: "ComponentButton",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/button/mock.js b/packages/ui/certd-client/src/views/crud/component/button/mock.ts
similarity index 94%
rename from packages/ui/certd-client/src/views/crud/component/button/mock.js
rename to packages/ui/certd-client/src/views/crud/component/button/mock.ts
index bddcce225..ac808811d 100644
--- a/packages/ui/certd-client/src/views/crud/component/button/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/button/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentButton",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/cascader/api.js b/packages/ui/certd-client/src/views/crud/component/cascader/api.ts
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/component/cascader/api.js
rename to packages/ui/certd-client/src/views/crud/component/cascader/api.ts
index 8e851ae50..659729473 100644
--- a/packages/ui/certd-client/src/views/crud/component/cascader/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/cascader/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentCascader";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/cascader/crud.jsx b/packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx
similarity index 81%
rename from packages/ui/certd-client/src/views/crud/component/cascader/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx
index 2b5206b7d..fa2aa0a25 100644
--- a/packages/ui/certd-client/src/views/crud/component/cascader/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/cascader/crud.tsx
@@ -1,19 +1,20 @@
 import * as api from "./api";
 import { requestForMock } from "/src/api/service";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ crudRef }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
   return {
@@ -47,7 +48,6 @@ export default function ({ crudRef }) {
           search: { show: true },
           type: "dict-cascader",
           dict: dict({
-            cloneable: false,
             isTree: true,
             url: "/mock/dicts/cascaderData?single"
           })
@@ -61,7 +61,7 @@ export default function ({ crudRef }) {
             label: "name",
             isTree: true,
             prototype: true,
-            getNodesByValues(values) {
+            getNodesByValues(values: any) {
               //给cell展示组件调用，根据value值获取节点，每行都会请求一次
               if (values == null) {
                 return [];
@@ -87,7 +87,7 @@ export default function ({ crudRef }) {
                   isLeaf: false
                 }
               ],
-              loadData: async (selectedOptions) => {
+              loadData: async (selectedOptions: any) => {
                 console.log("lazyLoad", selectedOptions);
                 const targetOption = selectedOptions[selectedOptions.length - 1];
                 targetOption.loading = true;
@@ -122,8 +122,8 @@ export default function ({ crudRef }) {
           form: {
             component: {
               showSearch: {
-                filter: (inputValue, path) => {
-                  return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+                filter: (inputValue: any, path: any) => {
+                  return path.some((option: any) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
                 }
               },
               "change-on-select": true
diff --git a/packages/ui/certd-client/src/views/crud/component/cascader/index.vue b/packages/ui/certd-client/src/views/crud/component/cascader/index.vue
index 58428ac78..21364b10c 100644
--- a/packages/ui/certd-client/src/views/crud/component/cascader/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/cascader/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </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 createCrudOptions from "./crud.js";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentCascader",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/cascader/mock.js b/packages/ui/certd-client/src/views/crud/component/cascader/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/component/cascader/mock.js
rename to packages/ui/certd-client/src/views/crud/component/cascader/mock.ts
index 01bc0582f..304c781cb 100644
--- a/packages/ui/certd-client/src/views/crud/component/cascader/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/cascader/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentCascader",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/checkbox/api.js b/packages/ui/certd-client/src/views/crud/component/checkbox/api.ts
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/component/checkbox/api.js
rename to packages/ui/certd-client/src/views/crud/component/checkbox/api.ts
index f1d4edba9..7820fd68a 100644
--- a/packages/ui/certd-client/src/views/crud/component/checkbox/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/checkbox/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentCheckbox";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/checkbox/crud.jsx b/packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx
similarity index 63%
rename from packages/ui/certd-client/src/views/crud/component/checkbox/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx
index ba55af1bc..a35838dd2 100644
--- a/packages/ui/certd-client/src/views/crud/component/checkbox/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/checkbox/crud.tsx
@@ -1,19 +1,19 @@
 import * as api from "./api";
-import { requestForMock } from "/src/api/service";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ crudRef }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
   return {
diff --git a/packages/ui/certd-client/src/views/crud/component/checkbox/index.vue b/packages/ui/certd-client/src/views/crud/component/checkbox/index.vue
index a1dd4729c..afb6bdd5c 100644
--- a/packages/ui/certd-client/src/views/crud/component/checkbox/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/checkbox/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentCheckbox",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/checkbox/mock.js b/packages/ui/certd-client/src/views/crud/component/checkbox/mock.ts
similarity index 92%
rename from packages/ui/certd-client/src/views/crud/component/checkbox/mock.js
rename to packages/ui/certd-client/src/views/crud/component/checkbox/mock.ts
index 1763e9bb6..5bc8deac4 100644
--- a/packages/ui/certd-client/src/views/crud/component/checkbox/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/checkbox/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentCheckbox",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/date/api.js b/packages/ui/certd-client/src/views/crud/component/date/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/date/api.js
rename to packages/ui/certd-client/src/views/crud/component/date/api.ts
index f6a0197f3..8f15ff62d 100644
--- a/packages/ui/certd-client/src/views/crud/component/date/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/date/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentDate";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/date/crud.jsx b/packages/ui/certd-client/src/views/crud/component/date/crud.tsx
similarity index 90%
rename from packages/ui/certd-client/src/views/crud/component/date/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/date/crud.tsx
index 09a2bfa22..3e241355f 100644
--- a/packages/ui/certd-client/src/views/crud/component/date/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/date/crud.tsx
@@ -1,23 +1,24 @@
 import * as api from "./api";
-import { utils } from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, ScopeContext, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
 import dayjs from "dayjs";
 
 console.log("utils", utils);
-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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -116,8 +117,8 @@ export default function ({ expose }) {
           form: {
             component: {
               valueFormat: "YYYY-MM-DD HH:mm:ss", //输入值的格式
-              events: {
-                onChange(context) {
+              on: {
+                onChange(context: ScopeContext) {
                   console.log("change", context);
                 }
               }
@@ -175,7 +176,7 @@ export default function ({ expose }) {
           form: {
             component: {
               valueFormat: "YYYY-MM-DD HH:mm:ss", //输入值的格式
-              disabledDate(current) {
+              disabledDate(current: any) {
                 return current && current < dayjs().endOf("day");
               }
             }
diff --git a/packages/ui/certd-client/src/views/crud/component/date/index.vue b/packages/ui/certd-client/src/views/crud/component/date/index.vue
index 8ec795284..be5473bc7 100644
--- a/packages/ui/certd-client/src/views/crud/component/date/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/date/index.vue
@@ -2,40 +2,25 @@
   <fs-page>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert
-          style="margin-left: 10px"
-          message="关于日期时间，建议前后端统一使用时间戳（long类型）进行交互，可以避免时区转化带来的问题"
-        />
+        <a-alert style="margin-left: 10px" message="关于日期时间，建议前后端统一使用时间戳（long类型）进行交互，可以避免时区转化带来的问题" />
       </template>
     </fs-crud>
   </fs-page>
 </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 createCrudOptions from "./crud.js";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentDate",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/date/mock.js b/packages/ui/certd-client/src/views/crud/component/date/mock.ts
similarity index 98%
rename from packages/ui/certd-client/src/views/crud/component/date/mock.js
rename to packages/ui/certd-client/src/views/crud/component/date/mock.ts
index 742b167e1..67db64146 100644
--- a/packages/ui/certd-client/src/views/crud/component/date/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/date/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "ComponentDate",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/editor/api.js b/packages/ui/certd-client/src/views/crud/component/editor/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/editor/api.js
rename to packages/ui/certd-client/src/views/crud/component/editor/api.ts
index 523cfb370..815ca0dec 100644
--- a/packages/ui/certd-client/src/views/crud/component/editor/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/editor/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentEditor";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/editor/crud.jsx b/packages/ui/certd-client/src/views/crud/component/editor/crud.tsx
similarity index 63%
rename from packages/ui/certd-client/src/views/crud/component/editor/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/editor/crud.tsx
index d32431b78..3bf280286 100644
--- a/packages/ui/certd-client/src/views/crud/component/editor/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/editor/crud.tsx
@@ -1,20 +1,23 @@
 import * as api from "./api";
-import { utils, dict, compute } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { utils, dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq, ScopeContext } from "@fast-crud/fast-crud";
+import { FsUploaderFormOptions } from "@fast-crud/fast-extends";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
@@ -26,7 +29,6 @@ export default function ({ expose }) {
       columns: {
         id: {
           title: "ID",
-          key: "id",
           type: "number",
           column: {
             width: 50
@@ -41,22 +43,19 @@ export default function ({ expose }) {
           column: {
             width: 400
           },
-          form:{
-            col: { span: 24 },
-          },
+          form: {
+            col: { span: 24 }
+          }
         },
         text: {
           title: "摘要",
           type: "textarea",
-          form:{
-            col: { span: 24 },
+          form: {
+            col: { span: 24 }
           },
           viewForm: {
-            component: {
-              name: null,
-              render(h, scope) {
-                return <div>{scope.value}</div>;
-              }
+            render(scope: ScopeContext) {
+              return <div>{scope.value}</div>;
             }
           }
         },
@@ -77,9 +76,9 @@ export default function ({ expose }) {
             width: 300,
             show: false
           },
-          type: ["editor-wang5"], // 富文本图片上传依赖file-uploader，请先配置好file-uploader
+          type: "editor-wang5", // 富文本图片上传依赖file-uploader，请先配置好file-uploader
           form: {
-            helper:"示例已升级到wangEditor5版本，原来的editor-wang目前仍然可以使用，后续fs升级可能会将其删除，请尽快升级到editor-wang5版本",
+            helper: "示例已升级到wangEditor5版本，原来的editor-wang目前仍然可以使用，后续fs升级可能会将其删除，请尽快升级到editor-wang5版本",
             col: { span: 24 },
             // 动态显隐字段
             // show: compute(({ form }) => {
@@ -94,10 +93,10 @@ export default function ({ expose }) {
               config: {},
               uploader: {
                 type: "form",
-                buildUrl(res) {
+                buildUrl(res: any) {
                   return res.url;
                 }
-              }
+              } as FsUploaderFormOptions
             }
           }
         }
diff --git a/packages/ui/certd-client/src/views/crud/component/editor/index.vue b/packages/ui/certd-client/src/views/crud/component/editor/index.vue
index 61e5e2033..e35c9adc9 100644
--- a/packages/ui/certd-client/src/views/crud/component/editor/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/editor/index.vue
@@ -8,31 +8,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentEditor",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/editor/mock.js b/packages/ui/certd-client/src/views/crud/component/editor/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/component/editor/mock.js
rename to packages/ui/certd-client/src/views/crud/component/editor/mock.ts
index 8351e0756..c43684f0b 100644
--- a/packages/ui/certd-client/src/views/crud/component/editor/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/editor/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "ComponentEditor",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/icon/api.js b/packages/ui/certd-client/src/views/crud/component/icon/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/icon/api.js
rename to packages/ui/certd-client/src/views/crud/component/icon/api.ts
index 4db9ed9ba..f9886a5ce 100644
--- a/packages/ui/certd-client/src/views/crud/component/icon/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/icon/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentIcon";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/icon/crud.jsx b/packages/ui/certd-client/src/views/crud/component/icon/crud.tsx
similarity index 75%
rename from packages/ui/certd-client/src/views/crud/component/icon/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/icon/crud.tsx
index ad9c38bed..c8b55f0de 100644
--- a/packages/ui/certd-client/src/views/crud/component/icon/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/icon/crud.tsx
@@ -1,19 +1,21 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/component/icon/index.vue b/packages/ui/certd-client/src/views/crud/component/icon/index.vue
index f8f1e9293..1b6be1c81 100644
--- a/packages/ui/certd-client/src/views/crud/component/icon/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/icon/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </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, ref } from "vue";
+import createCrudOptions from "./crud.js";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentIcon",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     const value = ref(null);
diff --git a/packages/ui/certd-client/src/views/crud/component/icon/mock.js b/packages/ui/certd-client/src/views/crud/component/icon/mock.ts
similarity index 74%
rename from packages/ui/certd-client/src/views/crud/component/icon/mock.js
rename to packages/ui/certd-client/src/views/crud/component/icon/mock.ts
index fe2de8ed2..ffe920b0d 100644
--- a/packages/ui/certd-client/src/views/crud/component/icon/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/icon/mock.ts
@@ -1,20 +1,20 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentIcon",
   idGenerator: 0
 };
 const list = [
   {
     icon: "ri:24-hours-fill",
-    svg:"svg:icon-compass"
+    svg: "svg:icon-compass"
   },
   {
     icon: "ion:add-circle-outline",
-    svg:"svg:icon-left-circle"
+    svg: "svg:icon-left-circle"
   },
   {
     icon: "ion:american-football-sharp",
-    svg:"svg:icon-Dollar"
+    svg: "svg:icon-Dollar"
   }
 ];
 options.list = list;
diff --git a/packages/ui/certd-client/src/views/crud/component/json/api.js b/packages/ui/certd-client/src/views/crud/component/json/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/json/api.js
rename to packages/ui/certd-client/src/views/crud/component/json/api.ts
index a62736e62..3e93d5eea 100644
--- a/packages/ui/certd-client/src/views/crud/component/json/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/json/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentJson";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/json/crud.jsx b/packages/ui/certd-client/src/views/crud/component/json/crud.tsx
similarity index 68%
rename from packages/ui/certd-client/src/views/crud/component/json/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/json/crud.tsx
index 898fb5d30..b2753af47 100644
--- a/packages/ui/certd-client/src/views/crud/component/json/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/json/crud.tsx
@@ -1,19 +1,21 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, ValueBuilderContext, ValueResolveContext } 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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -38,13 +40,13 @@ export default function ({ expose }) {
           title: "json",
           type: "json",
           form: {
-            valueBuilder({ form }) {
+            valueBuilder({ form }: ValueBuilderContext) {
               if (form.json == null) {
                 return;
               }
               form.json = JSON.parse(form.json);
             },
-            valueResolve({ form }) {
+            valueResolve({ form }: ValueResolveContext) {
               if (form.json == null) {
                 return;
               }
@@ -58,13 +60,13 @@ export default function ({ expose }) {
           form: {
             // 上面form.wrapper.onOpened里面配置了异步加载
             helper: "在onOpened里面配置异步加载json字符串",
-            valueBuilder({ form }) {
+            valueBuilder({ form }: ValueBuilderContext) {
               if (form.async == null) {
                 return;
               }
               form.async = JSON.parse(form.async);
             },
-            valueResolve({ form }) {
+            valueResolve({ form }: ValueResolveContext) {
               if (form.async == null) {
                 return;
               }
diff --git a/packages/ui/certd-client/src/views/crud/component/json/index.vue b/packages/ui/certd-client/src/views/crud/component/json/index.vue
index 34868881f..1d854ac31 100644
--- a/packages/ui/certd-client/src/views/crud/component/json/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/json/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </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: "ComponentJson",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/json/mock.js b/packages/ui/certd-client/src/views/crud/component/json/mock.ts
similarity index 86%
rename from packages/ui/certd-client/src/views/crud/component/json/mock.js
rename to packages/ui/certd-client/src/views/crud/component/json/mock.ts
index 727a17889..ed10e8133 100644
--- a/packages/ui/certd-client/src/views/crud/component/json/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/json/mock.ts
@@ -1,9 +1,9 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentJson",
   idGenerator: 0
 };
-const list = [
+const list: any = [
   {
     json: '{"a":1,"b":2}',
     async: null
diff --git a/packages/ui/certd-client/src/views/crud/component/number/api.js b/packages/ui/certd-client/src/views/crud/component/number/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/number/api.js
rename to packages/ui/certd-client/src/views/crud/component/number/api.ts
index 30c88fc3f..856e8fd84 100644
--- a/packages/ui/certd-client/src/views/crud/component/number/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/number/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentNumber";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/number/crud.jsx b/packages/ui/certd-client/src/views/crud/component/number/crud.tsx
similarity index 66%
rename from packages/ui/certd-client/src/views/crud/component/number/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/number/crud.tsx
index 057f7b18a..61c755bc5 100644
--- a/packages/ui/certd-client/src/views/crud/component/number/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/number/crud.tsx
@@ -1,21 +1,22 @@
 import * as api from "./api";
-import { requestForMock } from "/src/api/service";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -55,8 +56,8 @@ export default function ({ expose }) {
           type: "number",
           form: {
             component: {
-              formatter: (value) => `${value}%`,
-              parser: (value) => value.replace("%", "")
+              formatter: (value: any) => `${value}%`,
+              parser: (value: any) => value.replace("%", "")
             }
           },
           column: {
diff --git a/packages/ui/certd-client/src/views/crud/component/number/index.vue b/packages/ui/certd-client/src/views/crud/component/number/index.vue
index f6989e027..5453d792c 100644
--- a/packages/ui/certd-client/src/views/crud/component/number/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/number/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </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 createCrudOptions from "./crud.js";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentNumber",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/number/mock.js b/packages/ui/certd-client/src/views/crud/component/number/mock.ts
similarity index 93%
rename from packages/ui/certd-client/src/views/crud/component/number/mock.js
rename to packages/ui/certd-client/src/views/crud/component/number/mock.ts
index 6b8854a1c..968f562b6 100644
--- a/packages/ui/certd-client/src/views/crud/component/number/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/number/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentNumber",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/radio/api.js b/packages/ui/certd-client/src/views/crud/component/radio/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/radio/api.js
rename to packages/ui/certd-client/src/views/crud/component/radio/api.ts
index 761dae47f..eb066efcb 100644
--- a/packages/ui/certd-client/src/views/crud/component/radio/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/radio/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentRadio";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/radio/crud.jsx b/packages/ui/certd-client/src/views/crud/component/radio/crud.tsx
similarity index 75%
rename from packages/ui/certd-client/src/views/crud/component/radio/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/radio/crud.tsx
index cf7320196..a78acdbd0 100644
--- a/packages/ui/certd-client/src/views/crud/component/radio/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/radio/crud.tsx
@@ -1,20 +1,21 @@
 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, 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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/component/radio/index.vue b/packages/ui/certd-client/src/views/crud/component/radio/index.vue
index d851e5852..61eb616e9 100644
--- a/packages/ui/certd-client/src/views/crud/component/radio/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/radio/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </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, ref } from "vue";
+import createCrudOptions from "./crud.js";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentRadio",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     const value = ref(null);
diff --git a/packages/ui/certd-client/src/views/crud/component/radio/mock.js b/packages/ui/certd-client/src/views/crud/component/radio/mock.ts
similarity index 93%
rename from packages/ui/certd-client/src/views/crud/component/radio/mock.js
rename to packages/ui/certd-client/src/views/crud/component/radio/mock.ts
index 647514850..ba3efaf0f 100644
--- a/packages/ui/certd-client/src/views/crud/component/radio/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/radio/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentRadio",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/select/api.js b/packages/ui/certd-client/src/views/crud/component/select/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/select/api.js
rename to packages/ui/certd-client/src/views/crud/component/select/api.ts
index 6c9e2511d..9001a443e 100644
--- a/packages/ui/certd-client/src/views/crud/component/select/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/select/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentSelect";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/select/crud.jsx b/packages/ui/certd-client/src/views/crud/component/select/crud.tsx
similarity index 92%
rename from packages/ui/certd-client/src/views/crud/component/select/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/select/crud.tsx
index bead50f6a..a756a1a98 100644
--- a/packages/ui/certd-client/src/views/crud/component/select/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/select/crud.tsx
@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { requestForMock } from "/src/api/service";
-import { dict } from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, DictOnReadyContext, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { ref } from "vue";
 import _ from "lodash-es";
 function useSearchRemote() {
@@ -27,7 +27,7 @@ function useSearchRemote() {
           // for fetch callback order
           return;
         }
-        const data = body.results.map((user) => ({
+        const data = body.results.map((user: any) => ({
           text: `${user.name.first} ${user.name.last}`,
           value: user.login.username
         }));
@@ -41,19 +41,19 @@ function useSearchRemote() {
     searchState: state
   };
 }
-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);
   };
 
@@ -145,7 +145,7 @@ export default function ({ expose }) {
               showSearch: true,
               //默认的filterOption仅支持value的过滤，label并不会加入查询
               //所以需要自定义filterOption
-              filterOption(inputValue, option) {
+              filterOption(inputValue: any, option: any) {
                 return option.label.indexOf(inputValue) >= 0 || option.value.indexOf(inputValue) >= 0;
               }
             }
@@ -153,6 +153,7 @@ export default function ({ expose }) {
         },
         search: {
           title: "远程搜索",
+          type: "text",
           search: { show: true, component: { style: { width: "240px" } } },
           form: {
             component: {
@@ -165,7 +166,7 @@ export default function ({ expose }) {
               allowClear: true,
               placeholder: "输入远程搜索，数据仅供演示",
               options: searchState.data,
-              onSearch(value) {
+              onSearch(value: any) {
                 fetchUser(value);
               },
               children: {
@@ -206,10 +207,8 @@ export default function ({ expose }) {
         },
         disabledOptions: {
           title: "禁用某个选项",
-          key: "disabledOptions",
           type: "dict-select",
           dict: dict({
-            cloneable: true,
             url: "/mock/dicts/OpenStatusEnum?disabledOptions"
           }),
           form: {
@@ -217,7 +216,7 @@ export default function ({ expose }) {
               dict: {
                 // 此处dict配置会覆盖上面dict的属性
                 prototype: true, // form表单的dict设置为原型复制，每次初始化时都会重新loadDict
-                onReady({ dict }) {
+                onReady({ dict }: DictOnReadyContext) {
                   console.log("字典请求ready", dict);
                   dict.data[0].disabled = true; // 禁用某个选项， 还可以自己修改选项
                 }
@@ -233,13 +232,12 @@ export default function ({ expose }) {
           title: "默认值",
           type: "dict-select",
           dict: dict({
-            cloneable: true,
             url: "/mock/dicts/OpenStatusEnum?disabledOptions"
           }),
           form: {
             component: {
               //监听 dict-change事件
-              onDictChange({ dict, form, key }) {
+              onDictChange({ dict, form, key }: any) {
                 console.log("dict data changed", dict, key);
                 if (dict.data != null && form.firstDefault == null) {
                   form.firstDefault = dict.data[0].value;
@@ -311,6 +309,7 @@ export default function ({ expose }) {
         },
         statusSimple: {
           title: "普通选择",
+          type: "text",
           form: {
             component: {
               name: "a-select",
diff --git a/packages/ui/certd-client/src/views/crud/component/select/index.vue b/packages/ui/certd-client/src/views/crud/component/select/index.vue
index 8278b4564..d778ca0a2 100644
--- a/packages/ui/certd-client/src/views/crud/component/select/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/select/index.vue
@@ -8,31 +8,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentSelect",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, dynamicUpdateDictOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose, dynamicUpdateDictOptions } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/select/mock.js b/packages/ui/certd-client/src/views/crud/component/select/mock.ts
similarity index 97%
rename from packages/ui/certd-client/src/views/crud/component/select/mock.js
rename to packages/ui/certd-client/src/views/crud/component/select/mock.ts
index d74488775..d49561ca2 100644
--- a/packages/ui/certd-client/src/views/crud/component/select/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/select/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentSelect",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/switch/api.js b/packages/ui/certd-client/src/views/crud/component/switch/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/switch/api.js
rename to packages/ui/certd-client/src/views/crud/component/switch/api.ts
index f2e25bed5..87ad0c8f3 100644
--- a/packages/ui/certd-client/src/views/crud/component/switch/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/switch/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentSwitch";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/switch/crud.jsx b/packages/ui/certd-client/src/views/crud/component/switch/crud.tsx
similarity index 86%
rename from packages/ui/certd-client/src/views/crud/component/switch/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/switch/crud.tsx
index e2d751a75..278283fa8 100644
--- a/packages/ui/certd-client/src/views/crud/component/switch/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/switch/crud.tsx
@@ -1,20 +1,21 @@
 import * as api from "./api";
-import { dict, compute } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } 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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -94,7 +95,7 @@ export default function ({ expose }) {
             component: {
               name: "fs-dict-switch",
               vModel: "checked",
-              onChange: (value) => {
+              onChange: (value: any) => {
                 console.log("onChange", value);
               }
               // onChange: compute((context) => {
diff --git a/packages/ui/certd-client/src/views/crud/component/switch/index.vue b/packages/ui/certd-client/src/views/crud/component/switch/index.vue
index beb30f7df..67f85dac4 100644
--- a/packages/ui/certd-client/src/views/crud/component/switch/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/switch/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentSwitch",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/switch/mock.js b/packages/ui/certd-client/src/views/crud/component/switch/mock.ts
similarity index 95%
rename from packages/ui/certd-client/src/views/crud/component/switch/mock.js
rename to packages/ui/certd-client/src/views/crud/component/switch/mock.ts
index 42772b1f7..6ee543022 100644
--- a/packages/ui/certd-client/src/views/crud/component/switch/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/switch/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentSwitch",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/text/api.js b/packages/ui/certd-client/src/views/crud/component/text/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/text/api.js
rename to packages/ui/certd-client/src/views/crud/component/text/api.ts
index 2111f7724..dafb7ebe0 100644
--- a/packages/ui/certd-client/src/views/crud/component/text/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/text/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentText";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/text/crud.jsx b/packages/ui/certd-client/src/views/crud/component/text/crud.tsx
similarity index 75%
rename from packages/ui/certd-client/src/views/crud/component/text/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/text/crud.tsx
index 24850e9e5..84426c64c 100644
--- a/packages/ui/certd-client/src/views/crud/component/text/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/text/crud.tsx
@@ -1,22 +1,23 @@
 import * as api from "./api";
-import { compute } from "@fast-crud/fast-crud";
-import { resolveDirective, withDirectives } from "vue";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, ScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { SearchOutlined } from "@ant-design/icons-vue";
 
-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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -92,23 +93,16 @@ export default function ({ expose }) {
         },
         render: {
           title: "复杂输入(render)",
+          type: "text",
           form: {
             title: "复杂输入",
             component: {
-              render(context) {
+              render(context: ScopeContext) {
                 console.log("context scope", context);
                 return (
                   <a-input-group compact>
-                    <a-input
-                      placeholder={"render1 input"}
-                      style="width: 50%"
-                      v-model={[context.form.render, "value"]}
-                    />
-                    <a-input
-                      placeholder={"render2 input"}
-                      style="width: 50%"
-                      v-model={[context.form.render2, "value"]}
-                    />
+                    <a-input placeholder={"render1 input"} style="width: 50%" v-model={[context.form.render, "value"]} />
+                    <a-input placeholder={"render2 input"} style="width: 50%" v-model={[context.form.render2, "value"]} />
                   </a-input-group>
                 );
               }
@@ -117,6 +111,7 @@ export default function ({ expose }) {
         },
         render2: {
           title: "我的值是由复杂输入列输入的",
+          type: "text",
           column: {
             width: "300px"
           },
diff --git a/packages/ui/certd-client/src/views/crud/component/text/index.vue b/packages/ui/certd-client/src/views/crud/component/text/index.vue
index a97ef5519..27429b65d 100644
--- a/packages/ui/certd-client/src/views/crud/component/text/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/text/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentText",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/text/mock.js b/packages/ui/certd-client/src/views/crud/component/text/mock.ts
similarity index 97%
rename from packages/ui/certd-client/src/views/crud/component/text/mock.js
rename to packages/ui/certd-client/src/views/crud/component/text/mock.ts
index 4bc9df77c..fc53d49ed 100644
--- a/packages/ui/certd-client/src/views/crud/component/text/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/text/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentText",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/tree/api.js b/packages/ui/certd-client/src/views/crud/component/tree/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/tree/api.js
rename to packages/ui/certd-client/src/views/crud/component/tree/api.ts
index b9db03f12..d0aa63404 100644
--- a/packages/ui/certd-client/src/views/crud/component/tree/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/tree/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentTree";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/tree/crud.jsx b/packages/ui/certd-client/src/views/crud/component/tree/crud.tsx
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/component/tree/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/tree/crud.tsx
index 1d3ce5abf..8a3300ecd 100644
--- a/packages/ui/certd-client/src/views/crud/component/tree/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/tree/crud.tsx
@@ -1,20 +1,21 @@
 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, 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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -49,7 +50,6 @@ export default function ({ expose }) {
           search: { show: false },
           type: "dict-tree",
           dict: dict({
-            cloneable: false,
             isTree: true,
             url: "/mock/dicts/cascaderData?single"
           }),
diff --git a/packages/ui/certd-client/src/views/crud/component/tree/index.vue b/packages/ui/certd-client/src/views/crud/component/tree/index.vue
index b5c740739..41c63c5f3 100644
--- a/packages/ui/certd-client/src/views/crud/component/tree/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/tree/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentTree",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/tree/mock.js b/packages/ui/certd-client/src/views/crud/component/tree/mock.ts
similarity index 92%
rename from packages/ui/certd-client/src/views/crud/component/tree/mock.js
rename to packages/ui/certd-client/src/views/crud/component/tree/mock.ts
index ed3a1d394..66ec979d6 100644
--- a/packages/ui/certd-client/src/views/crud/component/tree/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/tree/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentTree",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/api.js b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/uploader/alioss/api.js
rename to packages/ui/certd-client/src/views/crud/component/uploader/alioss/api.ts
index c5871d5bf..d7f5a890d 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/AliossUploader";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/crud.jsx b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/crud.tsx
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/component/uploader/alioss/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/uploader/alioss/crud.tsx
index c5dd0c412..762f2156e 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/crud.tsx
@@ -1,21 +1,22 @@
 import * as api from "./api";
-import { requestForMock } from "/src/api/service";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/index.vue
index 0a305710c..f1343b874 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </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: "AliossUploader",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/mock.js b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/mock.ts
similarity index 97%
rename from packages/ui/certd-client/src/views/crud/component/uploader/alioss/mock.js
rename to packages/ui/certd-client/src/views/crud/component/uploader/alioss/mock.ts
index c3de48577..ebe8d758b 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/alioss/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/alioss/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AliossUploader",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cos/api.js b/packages/ui/certd-client/src/views/crud/component/uploader/cos/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/uploader/cos/api.js
rename to packages/ui/certd-client/src/views/crud/component/uploader/cos/api.ts
index 536456ea9..0a91d1ecb 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cos/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cos/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/CosUploader";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cos/crud.jsx b/packages/ui/certd-client/src/views/crud/component/uploader/cos/crud.tsx
similarity index 74%
rename from packages/ui/certd-client/src/views/crud/component/uploader/cos/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/uploader/cos/crud.tsx
index 05e54e162..bd20eb7d5 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cos/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cos/crud.tsx
@@ -1,21 +1,22 @@
 import * as api from "./api";
 import { requestForMock } from "/src/api/service";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cos/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/cos/index.vue
index 8b4bc1ef5..1411fbc0a 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cos/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cos/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "CosUploader",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cos/mock.js b/packages/ui/certd-client/src/views/crud/component/uploader/cos/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/component/uploader/cos/mock.js
rename to packages/ui/certd-client/src/views/crud/component/uploader/cos/mock.ts
index 5c608212f..721e514a1 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cos/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cos/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "CosUploader",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/api.js b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/uploader/cropper/api.js
rename to packages/ui/certd-client/src/views/crud/component/uploader/cropper/api.ts
index 5113d49c4..cce7621f1 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/CropperUploader";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/crud.jsx b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/crud.tsx
similarity index 81%
rename from packages/ui/certd-client/src/views/crud/component/uploader/cropper/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/uploader/cropper/crud.tsx
index 4d8e168c9..fe827fd4f 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/crud.tsx
@@ -1,21 +1,22 @@
 import * as api from "./api";
-import { requestForMock } from "/src/api/service";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/index.vue
index 3e6a98bf8..3a569cb72 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "CropperUploader",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/mock.js b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/mock.ts
similarity index 97%
rename from packages/ui/certd-client/src/views/crud/component/uploader/cropper/mock.js
rename to packages/ui/certd-client/src/views/crud/component/uploader/cropper/mock.ts
index 83108782a..8edd683b8 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/cropper/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/cropper/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "CropperUploader",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/form/api.js b/packages/ui/certd-client/src/views/crud/component/uploader/form/api.ts
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/component/uploader/form/api.js
rename to packages/ui/certd-client/src/views/crud/component/uploader/form/api.ts
index af8d42b4a..131340e34 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/form/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/form/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentUploader";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/form/crud.jsx b/packages/ui/certd-client/src/views/crud/component/uploader/form/crud.tsx
similarity index 71%
rename from packages/ui/certd-client/src/views/crud/component/uploader/form/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/uploader/form/crud.tsx
index ede816f84..9f5463113 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/form/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/form/crud.tsx
@@ -1,22 +1,23 @@
 import * as api from "./api";
 import { AllUploadSuccessValidator } from "@fast-crud/fast-extends";
-import { dict } from "@fast-crud/fast-crud";
-import { nextTick } from "vue";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -29,7 +30,7 @@ export default function ({ expose }) {
         wrapper: {
           async onOpened() {
             // 异步组件实例的获取
-            const componentRef = await expose.getFormComponentRef("file", true);
+            const componentRef = await crudExpose.getFormComponentRef("file", true);
             console.log("componentRef", componentRef);
           }
         }
@@ -62,7 +63,7 @@ export default function ({ expose }) {
               // 如果你后台返回的值不是一个完整的url，那么展示时就无法显示和点击
               // 需要你本地根据value构建文件的url。
               // 支持异步
-              async buildUrl(value) {
+              async buildUrl(value: any) {
                 return value;
               }
             }
@@ -82,7 +83,7 @@ export default function ({ expose }) {
           },
           column: {
             component: {
-              buildPreviewUrl({ url, index }) {
+              buildPreviewUrl({ url, index }: any) {
                 if (index === 0) {
                   return "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";
                 } else {
@@ -150,7 +151,7 @@ export default function ({ expose }) {
                 type: "form"
               },
               valueType: "key",
-              async buildUrl(value) {
+              async buildUrl(value: any) {
                 return new Promise((resolve) => {
                   const url = "http://www.docmirror.cn:7070/api/upload/form/download?key=" + value;
                   resolve(url);
@@ -160,7 +161,49 @@ export default function ({ expose }) {
           },
           column: {
             component: {
-              async buildUrl(value) {
+              async buildUrl(value: any) {
+                return new Promise((resolve) => {
+                  const url = "http://www.docmirror.cn:7070/api/upload/form/download?key=" + value;
+                  resolve(url);
+                });
+              }
+            }
+          }
+        },
+        anyValueType: {
+          title: "valueType=any",
+          type: "file-uploader",
+          form: {
+            component: {
+              uploader: {
+                type: "form",
+                successHandle(res: any) {
+                  // 模拟后台返回fileId
+                  const key = res.replace("/api/upload/form/download?key=", "");
+                  return {
+                    url: "http://www.docmirror.cn:7070" + res,
+                    key: key,
+                    fileId: key
+                  };
+                }
+              },
+              valueType: "fileId",
+              async buildUrls(value: any[]) {
+                //批量构建url
+                return new Promise((resolve) => {
+                  const urls: string[] = [];
+                  for (const item of value) {
+                    const url = "http://www.docmirror.cn:7070/api/upload/form/download?key=" + item;
+                    urls.push(url);
+                  }
+                  resolve(urls);
+                });
+              }
+            }
+          },
+          column: {
+            component: {
+              async buildUrl(value: any) {
                 return new Promise((resolve) => {
                   const url = "http://www.docmirror.cn:7070/api/upload/form/download?key=" + value;
                   resolve(url);
@@ -210,10 +253,11 @@ export default function ({ expose }) {
           type: "file-uploader",
           form: {
             rules: [
-              { required: true, message: "此项必传" },
+              { required: true, message: "此项必传", trigger: "input" },
               {
                 validator: AllUploadSuccessValidator(), //如果要自定义校验规则则需要手动配置这个
-                message: "还有文件正在上传，请稍候"
+                message: "还有文件正在上传，请稍候",
+                trigger: "input"
               }
             ],
             helper: "大小不能超过50M，文件未上传完成之前，阻止提交",
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/form/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/form/index.vue
index eaae1cac8..87ac316d5 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/form/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/form/index.vue
@@ -4,39 +4,24 @@
   </fs-page>
 </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: "ComponentUploader",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
-      crudRef,
-      uploadChange(a, b, c) {
-        console.log("upload change", a, b, c);
-      }
+      crudRef
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/form/mock.js b/packages/ui/certd-client/src/views/crud/component/uploader/form/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/component/uploader/form/mock.js
rename to packages/ui/certd-client/src/views/crud/component/uploader/form/mock.ts
index e4fda8db3..30deb1918 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/form/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/form/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentUploader",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/api.js b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/component/uploader/qiniu/api.js
rename to packages/ui/certd-client/src/views/crud/component/uploader/qiniu/api.ts
index 2d79f7b54..760427522 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/api.js
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/QiniuUploader";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/crud.jsx b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/crud.tsx
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/component/uploader/qiniu/crud.jsx
rename to packages/ui/certd-client/src/views/crud/component/uploader/qiniu/crud.tsx
index 89c787c3e..6e3d0f88c 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/crud.tsx
@@ -1,19 +1,21 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/index.vue
index c3f4efd74..3413275f1 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/index.vue
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "QiniuUploader",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/mock.js b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/component/uploader/qiniu/mock.js
rename to packages/ui/certd-client/src/views/crud/component/uploader/qiniu/mock.ts
index 45c796850..92c3407a2 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/mock.js
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/qiniu/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "QiniuUploader",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/s3/api.ts b/packages/ui/certd-client/src/views/crud/component/uploader/s3/api.ts
index c0db1ebf5..fa6df773c 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/s3/api.ts
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/api.ts
@@ -1,6 +1,6 @@
 import { requestForMock } from "/src/api/service";
 import { generateSignedUrl } from "/@/views/crud/component/uploader/s3/s3-server";
-import { SignedUrlType } from "@fast-crud/fast-extends";
+import { FsUploaderS3SignedUrlType } from "@fast-crud/fast-extends";
 const request = requestForMock;
 const apiPrefix = "/mock/S3Uploader";
 export function GetList(query: any) {
@@ -50,7 +50,7 @@ export function GetObj(id: any) {
  * @param type
  * @constructor
  */
-export async function GetSignedUrl(bucket: string, key: string, type: SignedUrlType) {
+export async function GetSignedUrl(bucket: string, key: string, type: FsUploaderS3SignedUrlType) {
   //此处模拟获取预签名url
   return await generateSignedUrl(bucket, key, type);
 }
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/s3/crud.tsx b/packages/ui/certd-client/src/views/crud/component/uploader/s3/crud.tsx
index e586d4580..e0f7be519 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/s3/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/crud.tsx
@@ -17,6 +17,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
   const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/s3/s3-server.ts b/packages/ui/certd-client/src/views/crud/component/uploader/s3/s3-server.ts
index ef16c92be..c7e4632f9 100644
--- a/packages/ui/certd-client/src/views/crud/component/uploader/s3/s3-server.ts
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/s3-server.ts
@@ -1,11 +1,12 @@
 // @ts-ignore
-import { S3Client, GetObjectCommand, PutObjectCommand } from "@aws-sdk/client-s3";
+import { S3Client, GetObjectCommand, PutObjectCommand, CreateBucketCommand } from "@aws-sdk/client-s3";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
 
+let bucketCreated = false;
 export async function generateSignedUrl(bucket: string, key: string, type: "put" | "get" = "get") {
   const client = new S3Client({
-    s3ForcePathStyle: true,
-    signatureVersion: "v4",
+    // s3ForcePathStyle: true,
+    // signatureVersion: "v4",
     region: "us-east-1",
     forcePathStyle: true,
     endpoint: "https://play.min.io",
@@ -14,6 +15,15 @@ export async function generateSignedUrl(bucket: string, key: string, type: "put"
       secretAccessKey: "zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG" //访问密码
     }
   });
+
+  try {
+    if (!bucketCreated) {
+      bucketCreated = true;
+      const createCmd = new CreateBucketCommand({ Bucket: bucket });
+      await client.send(createCmd);
+    }
+  } catch (e) {}
+
   const params = {
     Bucket: bucket,
     Key: key
@@ -25,6 +35,7 @@ export async function generateSignedUrl(bucket: string, key: string, type: "put"
   } else {
     cmd = new PutObjectCommand(params);
   }
+
   try {
     url = await getSignedUrl(client, cmd);
   } catch (err) {
diff --git a/packages/ui/certd-client/src/views/crud/debug/select/api.js b/packages/ui/certd-client/src/views/crud/debug/select/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/debug/select/api.js
rename to packages/ui/certd-client/src/views/crud/debug/select/api.ts
index 06a6bd3e5..c00368625 100644
--- a/packages/ui/certd-client/src/views/crud/debug/select/api.js
+++ b/packages/ui/certd-client/src/views/crud/debug/select/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/DebugSelect";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/debug/select/crud.jsx b/packages/ui/certd-client/src/views/crud/debug/select/crud.tsx
similarity index 80%
rename from packages/ui/certd-client/src/views/crud/debug/select/crud.jsx
rename to packages/ui/certd-client/src/views/crud/debug/select/crud.tsx
index d3bee6123..8fd48301b 100644
--- a/packages/ui/certd-client/src/views/crud/debug/select/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/debug/select/crud.tsx
@@ -1,19 +1,19 @@
 import * as api from "./api";
-import { requestForMock } from "/src/api/service";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
diff --git a/packages/ui/certd-client/src/views/crud/debug/select/index.vue b/packages/ui/certd-client/src/views/crud/debug/select/index.vue
index e7105c522..352388525 100644
--- a/packages/ui/certd-client/src/views/crud/debug/select/index.vue
+++ b/packages/ui/certd-client/src/views/crud/debug/select/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "DebugSelect",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/debug/select/mock.js b/packages/ui/certd-client/src/views/crud/debug/select/mock.ts
similarity index 78%
rename from packages/ui/certd-client/src/views/crud/debug/select/mock.js
rename to packages/ui/certd-client/src/views/crud/debug/select/mock.ts
index 2cb1e1750..766a8704a 100644
--- a/packages/ui/certd-client/src/views/crud/debug/select/mock.js
+++ b/packages/ui/certd-client/src/views/crud/debug/select/mock.ts
@@ -1,9 +1,9 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "DebugSelect",
   idGenerator: 0
 };
-const list = [];
+const list: any = [];
 options.list = list;
 const mock = mockUtil.buildMock(options);
 export default mock;
diff --git a/packages/ui/certd-client/src/views/crud/dict/cloneable/api.js b/packages/ui/certd-client/src/views/crud/dict/cloneable/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/dict/cloneable/api.js
rename to packages/ui/certd-client/src/views/crud/dict/cloneable/api.ts
index a6c63db5f..d70f9f729 100644
--- a/packages/ui/certd-client/src/views/crud/dict/cloneable/api.js
+++ b/packages/ui/certd-client/src/views/crud/dict/cloneable/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/DictCloneable";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/dict/cloneable/crud.jsx b/packages/ui/certd-client/src/views/crud/dict/cloneable/crud.tsx
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/dict/cloneable/crud.jsx
rename to packages/ui/certd-client/src/views/crud/dict/cloneable/crud.tsx
index 4ad17c789..23d89861b 100644
--- a/packages/ui/certd-client/src/views/crud/dict/cloneable/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/dict/cloneable/crud.tsx
@@ -1,23 +1,22 @@
 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, UserPageQuery, UserPageRes, ValueChangeContext } 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);
   };
 
   const remoteDict = dict({
-    cloneable: true,
     url: "/mock/dicts/OpenStatusEnum"
   });
 
@@ -60,7 +59,7 @@ export default function ({ expose }) {
               name: "a-switch",
               vModel: "checked"
             },
-            valueChange({ row, getComponentRef }) {
+            valueChange({ row, getComponentRef }: ValueChangeContext) {
               // 这里不能使用remoteDict,因为在分发时已经clone到form配置中了
               // 这里dict修改不会影响列里面的数据
               const targetDict = getComponentRef("remote").dict;
@@ -73,7 +72,7 @@ export default function ({ expose }) {
               name: "a-switch",
               vModel: "checked"
             },
-            valueChange({ form, getComponentRef }) {
+            valueChange({ form, getComponentRef }: ValueChangeContext) {
               // 这里不能使用remoteDict,因为在分发时已经clone到form配置中了
               // 这里dict修改不会影响列里面的数据
               const targetDict = getComponentRef("remote").dict;
diff --git a/packages/ui/certd-client/src/views/crud/dict/cloneable/index.vue b/packages/ui/certd-client/src/views/crud/dict/cloneable/index.vue
index 151d2c47a..89ce6c7ac 100644
--- a/packages/ui/certd-client/src/views/crud/dict/cloneable/index.vue
+++ b/packages/ui/certd-client/src/views/crud/dict/cloneable/index.vue
@@ -17,31 +17,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "DictCloneable",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/dict/cloneable/mock.js b/packages/ui/certd-client/src/views/crud/dict/cloneable/mock.ts
similarity index 92%
rename from packages/ui/certd-client/src/views/crud/dict/cloneable/mock.js
rename to packages/ui/certd-client/src/views/crud/dict/cloneable/mock.ts
index acb0f31b8..768095179 100644
--- a/packages/ui/certd-client/src/views/crud/dict/cloneable/mock.js
+++ b/packages/ui/certd-client/src/views/crud/dict/cloneable/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "DictCloneable",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/dict/prototype/api.js b/packages/ui/certd-client/src/views/crud/dict/prototype/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/dict/prototype/api.js
rename to packages/ui/certd-client/src/views/crud/dict/prototype/api.ts
index 08ab81955..a5ed03e46 100644
--- a/packages/ui/certd-client/src/views/crud/dict/prototype/api.js
+++ b/packages/ui/certd-client/src/views/crud/dict/prototype/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/DictPrototype";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/dict/prototype/crud.jsx b/packages/ui/certd-client/src/views/crud/dict/prototype/crud.tsx
similarity index 84%
rename from packages/ui/certd-client/src/views/crud/dict/prototype/crud.jsx
rename to packages/ui/certd-client/src/views/crud/dict/prototype/crud.tsx
index c40a2b070..e31ad7efa 100644
--- a/packages/ui/certd-client/src/views/crud/dict/prototype/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/dict/prototype/crud.tsx
@@ -1,20 +1,20 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, ValueChangeContext } from "@fast-crud/fast-crud";
 import { requestForMock } from "../../../../api/service";
 
-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);
   };
 
@@ -80,9 +80,7 @@ export default function ({ expose }) {
             valueChange({ form, value, getComponentRef }) {
               console.log("form", value);
               const targetDict = getComponentRef("remote").getDict();
-              targetDict.url = form.modifyDict
-                ? "/mock/dicts/moreOpenStatusEnum?remote"
-                : "/mock/dicts/OpenStatusEnum?remote";
+              targetDict.url = form.modifyDict ? "/mock/dicts/moreOpenStatusEnum?remote" : "/mock/dicts/OpenStatusEnum?remote";
               targetDict.reloadDict();
             }
           },
diff --git a/packages/ui/certd-client/src/views/crud/dict/prototype/index.vue b/packages/ui/certd-client/src/views/crud/dict/prototype/index.vue
index f85114301..f714e9a99 100644
--- a/packages/ui/certd-client/src/views/crud/dict/prototype/index.vue
+++ b/packages/ui/certd-client/src/views/crud/dict/prototype/index.vue
@@ -17,31 +17,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "DictPrototype",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/dict/prototype/mock.js b/packages/ui/certd-client/src/views/crud/dict/prototype/mock.ts
similarity index 95%
rename from packages/ui/certd-client/src/views/crud/dict/prototype/mock.js
rename to packages/ui/certd-client/src/views/crud/dict/prototype/mock.ts
index adc12b8a0..bc6eb283f 100644
--- a/packages/ui/certd-client/src/views/crud/dict/prototype/mock.js
+++ b/packages/ui/certd-client/src/views/crud/dict/prototype/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "DictPrototype",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/dict/single/api.js b/packages/ui/certd-client/src/views/crud/dict/single/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/dict/single/api.js
rename to packages/ui/certd-client/src/views/crud/dict/single/api.ts
index 971936543..f79a4aee9 100644
--- a/packages/ui/certd-client/src/views/crud/dict/single/api.js
+++ b/packages/ui/certd-client/src/views/crud/dict/single/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/DictSingle";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/dict/single/crud.jsx b/packages/ui/certd-client/src/views/crud/dict/single/crud.tsx
similarity index 74%
rename from packages/ui/certd-client/src/views/crud/dict/single/crud.jsx
rename to packages/ui/certd-client/src/views/crud/dict/single/crud.tsx
index aa161d64b..a0257edf0 100644
--- a/packages/ui/certd-client/src/views/crud/dict/single/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/dict/single/crud.tsx
@@ -1,22 +1,22 @@
 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, 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);
   };
+
   const statusDict = dict({
-    cloneable: false, // 关闭cloneable，任何情况下，都使用同一个dict
     data: [
       { value: "1", label: "开启", color: "success" },
       { value: "2", label: "停止", color: "blue" },
@@ -25,7 +25,6 @@ export default function ({ expose }) {
   });
 
   const remoteDict = dict({
-    cloneable: false, // 关闭cloneable，任何情况下，都使用同一个dict
     url: "/mock/dicts/OpenStatusEnum",
     immediate: false
   });
@@ -65,7 +64,7 @@ export default function ({ expose }) {
           type: "dict-select",
           column: {
             component: {
-              onDictChange(opts) {
+              onDictChange(opts: any) {
                 console.log("字典变化：", opts);
               }
             }
@@ -82,9 +81,7 @@ export default function ({ expose }) {
             },
             valueChange({ form }) {
               console.log("changed", form.modifyDict);
-              remoteDict.url = form.modifyDict
-                ? "/mock/dicts/moreOpenStatusEnum?remote"
-                : "/mock/dicts/OpenStatusEnum?remote";
+              remoteDict.url = form.modifyDict ? "/mock/dicts/moreOpenStatusEnum?remote" : "/mock/dicts/OpenStatusEnum?remote";
               // 由于remoteDict.cloneable =false,所以全局公用一个实例，修改会影响全部地方
               remoteDict.reloadDict();
             }
@@ -96,9 +93,7 @@ export default function ({ expose }) {
               on: {
                 // 注意：必须要on前缀
                 onChange({ $event }) {
-                  remoteDict.url = $event
-                    ? "/mock/dicts/moreOpenStatusEnum?remote"
-                    : "/mock/dicts/OpenStatusEnum?remote";
+                  remoteDict.url = $event ? "/mock/dicts/moreOpenStatusEnum?remote" : "/mock/dicts/OpenStatusEnum?remote";
                   remoteDict.reloadDict();
                 }
               }
diff --git a/packages/ui/certd-client/src/views/crud/dict/single/index.vue b/packages/ui/certd-client/src/views/crud/dict/single/index.vue
index 9579c2647..552f4537e 100644
--- a/packages/ui/certd-client/src/views/crud/dict/single/index.vue
+++ b/packages/ui/certd-client/src/views/crud/dict/single/index.vue
@@ -17,31 +17,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "DictSingle",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     function onClick() {
diff --git a/packages/ui/certd-client/src/views/crud/dict/single/mock.js b/packages/ui/certd-client/src/views/crud/dict/single/mock.ts
similarity index 92%
rename from packages/ui/certd-client/src/views/crud/dict/single/mock.js
rename to packages/ui/certd-client/src/views/crud/dict/single/mock.ts
index cad375c93..1234724ed 100644
--- a/packages/ui/certd-client/src/views/crud/dict/single/mock.js
+++ b/packages/ui/certd-client/src/views/crud/dict/single/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "DictSingle",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-resize/api.js b/packages/ui/certd-client/src/views/crud/feature/column-resize/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/column-resize/api.js
rename to packages/ui/certd-client/src/views/crud/feature/column-resize/api.ts
index 279509cc9..61fd0a473 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-resize/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/column-resize/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureSearch";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-resize/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/column-resize/crud.tsx
similarity index 72%
rename from packages/ui/certd-client/src/views/crud/feature/column-resize/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/column-resize/crud.tsx
index 913909dbd..c39759fab 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-resize/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/column-resize/crud.tsx
@@ -1,22 +1,23 @@
 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";
 import { ref } from "vue";
-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);
   };
-  const crudBinding = expose.crudBinding;
+
+  const crudBinding = crudExpose.crudBinding;
   return {
     crudOptions: {
       request: {
@@ -26,7 +27,7 @@ export default function ({ expose }) {
         delRequest
       },
       table: {
-        onResizeColumn: (w, col) => {
+        onResizeColumn: (w: number, col: any) => {
           //触发resize事件后，修改column宽度，width只能配置为number类型
           //可以将此方法写在app.use()中的commonOptions里面
           crudBinding.value.table.columnsMap[col.key].width = w;
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue b/packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue
index 1800a422f..fcdf42dcf 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue
@@ -13,32 +13,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
-import { message } from "ant-design-vue";
+
 export default defineComponent({
   name: "FeatureColumnResize",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-resize/mock.js b/packages/ui/certd-client/src/views/crud/feature/column-resize/mock.ts
similarity index 93%
rename from packages/ui/certd-client/src/views/crud/feature/column-resize/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/column-resize/mock.ts
index 68cfb67ad..e9c75cfde 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-resize/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/column-resize/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureSearch",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-sort/api.js b/packages/ui/certd-client/src/views/crud/feature/column-sort/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/column-sort/api.js
rename to packages/ui/certd-client/src/views/crud/feature/column-sort/api.ts
index 37c27d576..34b72d571 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-sort/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/column-sort/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureColumnSort";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-sort/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/column-sort/crud.tsx
similarity index 79%
rename from packages/ui/certd-client/src/views/crud/feature/column-sort/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/column-sort/crud.tsx
index fbadd388f..e019606fe 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-sort/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/column-sort/crud.tsx
@@ -1,13 +1,18 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  const editRequest = async ({ form, row }) => {
+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 }: 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);
   };
 
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue b/packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue
index f5bfeb4cf..be635fc04 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue
@@ -10,38 +10,23 @@
         <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="" />
-      </template>
-    </fs-crud>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureColumnSort",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedIds } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-sort/mock.js b/packages/ui/certd-client/src/views/crud/feature/column-sort/mock.ts
similarity index 95%
rename from packages/ui/certd-client/src/views/crud/feature/column-sort/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/column-sort/mock.ts
index 66315f552..5fffc8e15 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-sort/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/column-sort/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureColumnSort",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/columns-set/api.js b/packages/ui/certd-client/src/views/crud/feature/columns-set/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/columns-set/api.js
rename to packages/ui/certd-client/src/views/crud/feature/columns-set/api.ts
index b3a572570..2b889ccc2 100644
--- a/packages/ui/certd-client/src/views/crud/feature/columns-set/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/columns-set/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureColumnsSet";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/columns-set/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/columns-set/crud.tsx
similarity index 66%
rename from packages/ui/certd-client/src/views/crud/feature/columns-set/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/columns-set/crud.tsx
index 3099f8b95..de504d610 100644
--- a/packages/ui/certd-client/src/views/crud/feature/columns-set/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/columns-set/crud.tsx
@@ -1,21 +1,22 @@
 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";
 import { ref } from "vue";
-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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/feature/columns-set/index.vue b/packages/ui/certd-client/src/views/crud/feature/columns-set/index.vue
index b95aff624..78f141e66 100644
--- a/packages/ui/certd-client/src/views/crud/feature/columns-set/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/columns-set/index.vue
@@ -12,32 +12,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
-import { message, Modal } from "ant-design-vue";
-import { BatchDelete } from "./api";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureColumnsSet",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedRowKeys } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/columns-set/mock.js b/packages/ui/certd-client/src/views/crud/feature/columns-set/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/feature/columns-set/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/columns-set/mock.ts
index 79043c91e..d3eb99619 100644
--- a/packages/ui/certd-client/src/views/crud/feature/columns-set/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/columns-set/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureColumnsSet",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable-row/api.js b/packages/ui/certd-client/src/views/crud/feature/editable-row/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/editable-row/api.js
rename to packages/ui/certd-client/src/views/crud/feature/editable-row/api.ts
index acb0aab5c..c89dff112 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable-row/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/editable-row/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureEditableRow";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.tsx
similarity index 81%
rename from packages/ui/certd-client/src/views/crud/feature/editable-row/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/editable-row/crud.tsx
index 384e311bf..790581b52 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.tsx
@@ -1,20 +1,19 @@
 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, 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 id = await api.AddObj(form);
-    return { id };
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
   };
 
   return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable-row/index.vue b/packages/ui/certd-client/src/views/crud/feature/editable-row/index.vue
index 51f104c6a..3dd0dee31 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable-row/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/editable-row/index.vue
@@ -8,31 +8,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureEditableRow",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedIds } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
-      expose.editable.enable();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable-row/mock.js b/packages/ui/certd-client/src/views/crud/feature/editable-row/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/feature/editable-row/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/editable-row/mock.ts
index 9a11dbb27..401d88949 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable-row/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/editable-row/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureEditableRow",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable/api.js b/packages/ui/certd-client/src/views/crud/feature/editable/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/editable/api.js
rename to packages/ui/certd-client/src/views/crud/feature/editable/api.ts
index e3cf94ecc..607abb83e 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/editable/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureEditable";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/editable/crud.tsx
similarity index 83%
rename from packages/ui/certd-client/src/views/crud/feature/editable/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/editable/crud.tsx
index ce1fbf3a9..7944f6f98 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/editable/crud.tsx
@@ -1,19 +1,19 @@
 import * as api from "./api";
-import { dict, compute } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const { crudBinding } = expose;
-  const pageRequest = async (query) => {
+import { dict, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery, UserPageRes, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const { crudBinding } = crudExpose;
+  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);
   };
 
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable/index.vue b/packages/ui/certd-client/src/views/crud/feature/editable/index.vue
index 686c3c159..2f1a1dceb 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/editable/index.vue
@@ -28,45 +28,34 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
+
 export default defineComponent({
   name: "FeatureEditable",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedIds } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
-      expose.editable.enable({ mode: "free" });
+      crudExpose.doRefresh();
+      crudExpose.editable.enable({ mode: "free" });
     });
 
     function enable() {
-      expose.editable.enable({ enabled: true, mode: "free" });
+      crudExpose.editable.enable({ enabled: true, mode: "free" });
     }
     function disable() {
-      expose.editable.disable();
+      crudExpose.editable.disable();
     }
 
     return {
       crudBinding,
       crudRef,
-      enabledChanged(event) {
+      enabledChanged(event: boolean) {
         if (event) {
           enable();
         } else {
@@ -76,13 +65,13 @@ export default defineComponent({
       enable,
       disable,
       active() {
-        expose.editable.active();
+        crudExpose.editable.active();
       },
       inactive() {
-        expose.editable.inactive();
+        crudExpose.editable.inactive();
       },
       save() {
-        expose.getTableRef().editable.submit(({ changed, removed, setData }) => {
+        crudExpose.getTableRef().editable.submit(({ changed, removed, setData }: any) => {
           console.log("changed", changed);
           console.log("removed", removed);
           // setData({ 0: {id:1} }); //设置data
@@ -90,13 +79,13 @@ export default defineComponent({
         });
       },
       cancel() {
-        expose.editable.resume();
+        crudExpose.editable.resume();
       },
       addRow() {
-        expose.editable.addRow();
+        crudExpose.editable.addRow();
       },
       editCol() {
-        expose.editable.editCol({ cols: ["radio"] });
+        crudExpose.editable.editCol({ cols: ["radio"] });
       }
     };
   }
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable/mock.js b/packages/ui/certd-client/src/views/crud/feature/editable/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/feature/editable/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/editable/mock.ts
index b1d6b08d6..caab355be 100644
--- a/packages/ui/certd-client/src/views/crud/feature/editable/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/editable/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureEditable",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/expand/api.js b/packages/ui/certd-client/src/views/crud/feature/expand/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/expand/api.js
rename to packages/ui/certd-client/src/views/crud/feature/expand/api.ts
index c9ad003be..1cd3c2fed 100644
--- a/packages/ui/certd-client/src/views/crud/feature/expand/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/expand/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureExpand";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/expand/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/expand/crud.tsx
similarity index 55%
rename from packages/ui/certd-client/src/views/crud/feature/expand/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/expand/crud.tsx
index 357726305..9bb657680 100644
--- a/packages/ui/certd-client/src/views/crud/feature/expand/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/expand/crud.tsx
@@ -1,21 +1,23 @@
-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";
 import { ref } from "vue";
-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);
   };
+  const currentRow = ref();
   return {
     crudOptions: {
       request: {
@@ -27,8 +29,17 @@ export default function ({ expose }) {
       table: {
         //默认展开第一行
         defaultExpandedRowKeys: [1],
+        customRow(record: any, index: number) {
+          const clazz = record.id === currentRow.value ? "fs-current-row" : "";
+          return {
+            onClick() {
+              currentRow.value = record.id;
+            },
+            class: clazz
+          };
+        },
         slots: {
-          expandedRowRender: (scope) => {
+          expandedRowRender: (scope: any) => {
             return (
               <div>
                 index: {scope.index} ; row: {JSON.stringify(scope.record)}
@@ -40,7 +51,6 @@ export default function ({ expose }) {
       columns: {
         id: {
           title: "ID",
-          key: "id",
           type: "number",
           column: {
             width: 50
diff --git a/packages/ui/certd-client/src/views/crud/feature/expand/index.vue b/packages/ui/certd-client/src/views/crud/feature/expand/index.vue
index cc3e51cef..094961aba 100644
--- a/packages/ui/certd-client/src/views/crud/feature/expand/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/expand/index.vue
@@ -8,32 +8,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
-import { message, Modal } from "ant-design-vue";
-import { BatchDelete } from "./api";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureExpand",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedRowKeys } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/expand/mock.js b/packages/ui/certd-client/src/views/crud/feature/expand/mock.ts
similarity index 87%
rename from packages/ui/certd-client/src/views/crud/feature/expand/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/expand/mock.ts
index 3b6d69446..caeffc019 100644
--- a/packages/ui/certd-client/src/views/crud/feature/expand/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/expand/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureExpand",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/filter/api.js b/packages/ui/certd-client/src/views/crud/feature/filter/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/filter/api.js
rename to packages/ui/certd-client/src/views/crud/feature/filter/api.ts
index 6970dae3d..1ce407997 100644
--- a/packages/ui/certd-client/src/views/crud/feature/filter/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/filter/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureFilter";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/feature/filter/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/filter/crud.tsx
similarity index 68%
rename from packages/ui/certd-client/src/views/crud/feature/filter/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/filter/crud.tsx
index 672d89113..0eb38106e 100644
--- a/packages/ui/certd-client/src/views/crud/feature/filter/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/filter/crud.tsx
@@ -1,21 +1,22 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-import { ref } from "vue";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
@@ -26,7 +27,7 @@ export default function ({ expose }) {
       },
       table: {
         // 表头过滤改变事件
-        onFilterChange(e) {
+        onFilterChange(e: any) {
           console.log("onFilterChange", e);
         }
       },
@@ -57,10 +58,10 @@ export default function ({ expose }) {
             ],
             // specify the condition of filtering result
             // here is that finding the name started with `value`
-            onFilter: (value, record) => {
+            onFilter: (value: any, record: any) => {
               return record.radio === value;
             },
-            sorter: (a, b) => a.radio - b.radio,
+            sorter: (a: any, b: any) => a.radio - b.radio,
             sortDirections: ["descend"]
           }
         }
diff --git a/packages/ui/certd-client/src/views/crud/feature/filter/index.vue b/packages/ui/certd-client/src/views/crud/feature/filter/index.vue
index 7205a9473..81a2eabdc 100644
--- a/packages/ui/certd-client/src/views/crud/feature/filter/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/filter/index.vue
@@ -4,31 +4,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureFilter",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/filter/mock.js b/packages/ui/certd-client/src/views/crud/feature/filter/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/feature/filter/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/filter/mock.ts
index fd405168b..a876c4923 100644
--- a/packages/ui/certd-client/src/views/crud/feature/filter/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/filter/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureFilter",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/fixed/api.js b/packages/ui/certd-client/src/views/crud/feature/fixed/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/fixed/api.js
rename to packages/ui/certd-client/src/views/crud/feature/fixed/api.ts
index ac40ccaf6..32a20d40b 100644
--- a/packages/ui/certd-client/src/views/crud/feature/fixed/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/fixed/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureFixed";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/fixed/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/fixed/crud.tsx
similarity index 78%
rename from packages/ui/certd-client/src/views/crud/feature/fixed/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/fixed/crud.tsx
index 9b15c1ec1..6cfa0c4fc 100644
--- a/packages/ui/certd-client/src/views/crud/feature/fixed/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/fixed/crud.tsx
@@ -1,14 +1,18 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const editRequest = async ({ form, row }) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
-  const addRequest = async ({ form }) => {
+
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
diff --git a/packages/ui/certd-client/src/views/crud/feature/fixed/index.vue b/packages/ui/certd-client/src/views/crud/feature/fixed/index.vue
index 2e1d2ddfd..cc7436667 100644
--- a/packages/ui/certd-client/src/views/crud/feature/fixed/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/fixed/index.vue
@@ -4,30 +4,17 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
+import { useFs } from "@fast-crud/fast-crud";
 import { defineComponent, ref, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
 export default defineComponent({
   name: "FeatureFixed",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedIds } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/fixed/mock.js b/packages/ui/certd-client/src/views/crud/feature/fixed/mock.ts
similarity index 92%
rename from packages/ui/certd-client/src/views/crud/feature/fixed/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/fixed/mock.ts
index 22bd02c46..c4a45662f 100644
--- a/packages/ui/certd-client/src/views/crud/feature/fixed/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/fixed/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureFixed",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/header-group/api.js b/packages/ui/certd-client/src/views/crud/feature/header-group/api.ts
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/feature/header-group/api.js
rename to packages/ui/certd-client/src/views/crud/feature/header-group/api.ts
index 4af20b765..50b50a548 100644
--- a/packages/ui/certd-client/src/views/crud/feature/header-group/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/header-group/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureHeaderGroup";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/feature/header-group/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/header-group/crud.tsx
similarity index 83%
rename from packages/ui/certd-client/src/views/crud/feature/header-group/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/header-group/crud.tsx
index 09819296d..9ac49edf4 100644
--- a/packages/ui/certd-client/src/views/crud/feature/header-group/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/header-group/crud.tsx
@@ -1,20 +1,22 @@
 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, UserPageQuery, UserPageRes, ValueChangeContext } 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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/feature/header-group/index.vue b/packages/ui/certd-client/src/views/crud/feature/header-group/index.vue
index 77c344ff4..932b7b5a1 100644
--- a/packages/ui/certd-client/src/views/crud/feature/header-group/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/header-group/index.vue
@@ -6,31 +6,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureHeaderGroup",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/header-group/mock.js b/packages/ui/certd-client/src/views/crud/feature/header-group/mock.ts
similarity index 95%
rename from packages/ui/certd-client/src/views/crud/feature/header-group/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/header-group/mock.ts
index 05760a739..16ba50bd2 100644
--- a/packages/ui/certd-client/src/views/crud/feature/header-group/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/header-group/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureHeaderGroup",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/height/api.js b/packages/ui/certd-client/src/views/crud/feature/height/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/height/api.js
rename to packages/ui/certd-client/src/views/crud/feature/height/api.ts
index 4f5c7d118..58c615b2a 100644
--- a/packages/ui/certd-client/src/views/crud/feature/height/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/height/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/ComponentHeight";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/feature/height/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/height/crud.tsx
similarity index 66%
rename from packages/ui/certd-client/src/views/crud/feature/height/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/height/crud.tsx
index ecd5350d9..4bf773583 100644
--- a/packages/ui/certd-client/src/views/crud/feature/height/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/height/crud.tsx
@@ -1,20 +1,22 @@
 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, 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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/feature/height/index.vue b/packages/ui/certd-client/src/views/crud/feature/height/index.vue
index 34e52d62d..01c59c98b 100644
--- a/packages/ui/certd-client/src/views/crud/feature/height/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/height/index.vue
@@ -4,31 +4,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted, ref } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "ComponentHeight",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     const value = ref(null);
diff --git a/packages/ui/certd-client/src/views/crud/feature/height/mock.js b/packages/ui/certd-client/src/views/crud/feature/height/mock.ts
similarity index 93%
rename from packages/ui/certd-client/src/views/crud/feature/height/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/height/mock.ts
index 594f66396..df878efff 100644
--- a/packages/ui/certd-client/src/views/crud/feature/height/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/height/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "ComponentHeight",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/hide/api.js b/packages/ui/certd-client/src/views/crud/feature/hide/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/hide/api.js
rename to packages/ui/certd-client/src/views/crud/feature/hide/api.ts
index dd73bbf3c..93fb32e2a 100644
--- a/packages/ui/certd-client/src/views/crud/feature/hide/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/hide/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureHide";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/feature/hide/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/hide/crud.tsx
similarity index 79%
rename from packages/ui/certd-client/src/views/crud/feature/hide/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/hide/crud.tsx
index 27d53eda0..f739203b8 100644
--- a/packages/ui/certd-client/src/views/crud/feature/hide/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/hide/crud.tsx
@@ -1,20 +1,22 @@
 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, 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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/feature/hide/index.vue b/packages/ui/certd-client/src/views/crud/feature/hide/index.vue
index 454fa5a3e..806c98b8a 100644
--- a/packages/ui/certd-client/src/views/crud/feature/hide/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/hide/index.vue
@@ -13,27 +13,15 @@
             <a-row>
               <a-col :span="2"> 动作条： </a-col>
               <a-col :span="2">
-                <a-switch
-                  v-model:checked="crudBinding.actionbar.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.actionbar.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
               <a-col :span="3">
                 添加：
-                <a-switch
-                  v-model:checked="crudBinding.actionbar.buttons.add.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.actionbar.buttons.add.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
               <a-col :span="3">
                 自定义：
-                <a-switch
-                  v-model:checked="crudBinding.actionbar.buttons.test.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.actionbar.buttons.test.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
             </a-row>
             <a-row>
@@ -43,43 +31,23 @@
               </a-col>
               <a-col :span="3">
                 查询：
-                <a-switch
-                  v-model:checked="crudBinding.toolbar.buttons.search.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.toolbar.buttons.search.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
               <a-col :span="3">
                 刷新：
-                <a-switch
-                  v-model:checked="crudBinding.toolbar.buttons.refresh.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.toolbar.buttons.refresh.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
               <a-col :span="3">
                 紧凑：
-                <a-switch
-                  v-model:checked="crudBinding.toolbar.buttons.compact.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.toolbar.buttons.compact.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
               <a-col :span="3">
                 导出：
-                <a-switch
-                  v-model:checked="crudBinding.toolbar.buttons.export.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.toolbar.buttons.export.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
               <a-col :span="3">
                 列设置：
-                <a-switch
-                  v-model:checked="crudBinding.toolbar.buttons.columns.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.toolbar.buttons.columns.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
             </a-row>
             <a-row>
@@ -91,53 +59,29 @@
             <a-row>
               <a-col :span="2"> 操作列： </a-col>
               <a-col :span="2">
-                <a-switch
-                  v-model:checked="crudBinding.rowHandle.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.rowHandle.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
               <a-col :span="3">
                 查看：
-                <a-switch
-                  v-model:checked="crudBinding.rowHandle.buttons.view.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.rowHandle.buttons.view.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
               <a-col :span="3">
                 修改：
-                <a-switch
-                  v-model:checked="crudBinding.rowHandle.buttons.edit.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.rowHandle.buttons.edit.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
               <a-col :span="3">
                 删除：
-                <a-switch
-                  v-model:checked="crudBinding.rowHandle.buttons.remove.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.rowHandle.buttons.remove.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
               <a-col :span="3">
                 自定义：
-                <a-switch
-                  v-model:checked="crudBinding.rowHandle.buttons.custom.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.rowHandle.buttons.custom.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
             </a-row>
             <a-row>
               <a-col :span="2"> 翻页： </a-col>
               <a-col :span="2">
-                <a-switch
-                  v-model:checked="crudBinding.pagination.show"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                />
+                <a-switch v-model:checked="crudBinding.pagination.show" active-color="#13ce66" inactive-color="#ff4949" />
               </a-col>
             </a-row>
           </div>
@@ -147,32 +91,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureHide",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/hide/mock.js b/packages/ui/certd-client/src/views/crud/feature/hide/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/feature/hide/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/hide/mock.ts
index 6876a94c7..de085ec2b 100644
--- a/packages/ui/certd-client/src/views/crud/feature/hide/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/hide/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureHide",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/index/api.js b/packages/ui/certd-client/src/views/crud/feature/index/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/index/api.js
rename to packages/ui/certd-client/src/views/crud/feature/index/api.ts
index 4cf33ea3a..d2c01b7a6 100644
--- a/packages/ui/certd-client/src/views/crud/feature/index/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/index/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureIndex";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/index/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/index/crud.tsx
similarity index 64%
rename from packages/ui/certd-client/src/views/crud/feature/index/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/index/crud.tsx
index 1513e904e..c2d9eb1a6 100644
--- a/packages/ui/certd-client/src/views/crud/feature/index/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/index/crud.tsx
@@ -1,18 +1,19 @@
 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, 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);
   };
 
@@ -28,6 +29,7 @@ export default function ({ expose }) {
       columns: {
         _index: {
           title: "序号",
+          type: "text",
           form: { show: false },
           column: {
             // type: "index",
@@ -36,8 +38,8 @@ export default function ({ expose }) {
             columnSetDisabled: true, //禁止在列设置中选择
             formatter: (context) => {
               //计算序号,你可以自定义计算规则，此处为翻页累加
-              let index = context.index ?? 1;
-              let pagination = expose.crudBinding.value.pagination;
+              const index = context.index ?? 1;
+              const pagination = crudExpose.crudBinding.value.pagination;
               return ((pagination.current ?? 1) - 1) * pagination.pageSize + index + 1;
             }
           }
diff --git a/packages/ui/certd-client/src/views/crud/feature/index/index.vue b/packages/ui/certd-client/src/views/crud/feature/index/index.vue
index 06c33b2b8..bc932a5bb 100644
--- a/packages/ui/certd-client/src/views/crud/feature/index/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/index/index.vue
@@ -4,30 +4,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureIndex",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedIds } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/index/mock.js b/packages/ui/certd-client/src/views/crud/feature/index/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/feature/index/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/index/mock.ts
index 6e10439f4..8adccd7fd 100644
--- a/packages/ui/certd-client/src/views/crud/feature/index/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/index/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureIndex",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.jsx
deleted file mode 100644
index 1dbe46ff5..000000000
--- a/packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.jsx
+++ /dev/null
@@ -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: "联系人手机号码"
-        }
-      }
-    }
-  };
-}
diff --git a/packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.tsx
new file mode 100644
index 000000000..530b57b3d
--- /dev/null
+++ b/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: "联系人手机号码"
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/feature/local-v-model/index.vue b/packages/ui/certd-client/src/views/crud/feature/local-v-model/index.vue
index 01e615f59..5abec0a4e 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local-v-model/index.vue
+++ b/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>
diff --git a/packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue b/packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue
index 0110ae279..05f3a8436 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local-v-model/local.vue
+++ b/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">
diff --git a/packages/ui/certd-client/src/views/crud/feature/local/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/local/crud.tsx
similarity index 78%
rename from packages/ui/certd-client/src/views/crud/feature/local/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/local/crud.tsx
index c0f2f6af8..eea51ede1 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/local/crud.tsx
@@ -1,6 +1,6 @@
-import { uiContext } from "@fast-crud/fast-crud";
+import { CreateCrudOptionsProps, CreateCrudOptionsRet } from "@fast-crud/fast-crud";
 
-export default function ({ expose }) {
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   return {
     crudOptions: {
       mode: {
diff --git a/packages/ui/certd-client/src/views/crud/feature/local/index.vue b/packages/ui/certd-client/src/views/crud/feature/local/index.vue
index 743588f1a..dbef2a50b 100644
--- a/packages/ui/certd-client/src/views/crud/feature/local/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/local/index.vue
@@ -11,10 +11,10 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { useExpose, useCrud, useFs } from "@fast-crud/fast-crud";
 
 export default defineComponent({
   name: "FeatureLocal",
@@ -22,25 +22,11 @@ export default defineComponent({
     modelValue: {}
   },
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
-    // onMounted(() => {
-    //   expose.doRefresh();
-    // });
-
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
     // 通过crudBinding.value.data 可以获取表格实时数据
     function showData() {
       console.log("data:", crudBinding.value.data);
@@ -51,7 +37,7 @@ export default defineComponent({
 
     //启用行编辑
     function enabledRowEdit() {
-      expose.editable.enable({
+      crudExpose.editable.enable({
         mode: "row"
       });
       crudBinding.value.actionbar.buttons.add.show = false;
@@ -60,7 +46,7 @@ export default defineComponent({
 
     //启用自由编辑
     function enabledFreeEdit() {
-      expose.editable.enable({
+      crudExpose.editable.enable({
         mode: "free"
       });
       crudBinding.value.actionbar.buttons.add.show = false;
@@ -69,7 +55,7 @@ export default defineComponent({
 
     //启用关闭编辑模式
     function disabledEdit() {
-      expose.editable.enable({
+      crudExpose.editable.enable({
         enabled: false
       });
       crudBinding.value.actionbar.buttons.add.show = true;
diff --git a/packages/ui/certd-client/src/views/crud/feature/merge/api.js b/packages/ui/certd-client/src/views/crud/feature/merge/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/merge/api.js
rename to packages/ui/certd-client/src/views/crud/feature/merge/api.ts
index 65dafffca..19d49462f 100644
--- a/packages/ui/certd-client/src/views/crud/feature/merge/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/merge/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureMerge";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/feature/merge/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/merge/crud.tsx
similarity index 65%
rename from packages/ui/certd-client/src/views/crud/feature/merge/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/merge/crud.tsx
index 36d418971..1527eb496 100644
--- a/packages/ui/certd-client/src/views/crud/feature/merge/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/merge/crud.tsx
@@ -1,25 +1,25 @@
 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, 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);
   };
 
   /**
    * 列合并render
    */
-  function colMergeRender({ index }) {
+  function colMergeRender({ index }: any) {
     return {
       props: {
         colSpan: 5
@@ -35,9 +35,18 @@ export default function ({ expose }) {
         delRequest
       },
       table: {
+        //这里要减去总结栏的高度
+        maxHeightAdjust: -39,
         slots: {
           summary() {
-            return <div>总结栏</div>;
+            return (
+              <a-table-summary fixed>
+                <a-table-summary-row>
+                  <a-table-summary-cell index={0}>总结栏</a-table-summary-cell>
+                  <a-table-summary-cell index={1}>这里是总结内容</a-table-summary-cell>
+                </a-table-summary-row>
+              </a-table-summary>
+            );
           }
         }
       },
@@ -56,9 +65,10 @@ export default function ({ expose }) {
         },
         cellMerge: {
           title: "上下合并",
+          type: "text",
           column: {
-            customRender: ({ text, index }, cellRender) => {
-              const obj = {
+            customRender: ({ text, index }: any, cellRender: any) => {
+              const obj: any = {
                 props: {}
               };
               if (index === 2) {
@@ -75,9 +85,10 @@ export default function ({ expose }) {
         },
         colMerge1: {
           title: "左右合并",
+          type: "text",
           column: {
             align: "center",
-            customRender({ text, index, record, dataIndex }, cellRender) {
+            customRender({ text, index, record, dataIndex }: any, cellRender: any) {
               if (index !== 4) {
                 return {
                   children: cellRender()
@@ -94,8 +105,9 @@ export default function ({ expose }) {
         },
         colMerge2: {
           title: "左右合并",
+          type: "text",
           column: {
-            customRender({ text, index, record, dataIndex }, cellRender) {
+            customRender({ text, index, record, dataIndex }: any, cellRender: any) {
               if (index !== 4) {
                 return {
                   children: cellRender()
diff --git a/packages/ui/certd-client/src/views/crud/feature/merge/index.vue b/packages/ui/certd-client/src/views/crud/feature/merge/index.vue
index 49d0ce99c..2b7012561 100644
--- a/packages/ui/certd-client/src/views/crud/feature/merge/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/merge/index.vue
@@ -4,26 +4,15 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureMerge",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { crudExpose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ crudExpose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
diff --git a/packages/ui/certd-client/src/views/crud/feature/merge/mock.js b/packages/ui/certd-client/src/views/crud/feature/merge/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/feature/merge/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/merge/mock.ts
index e99a6af50..e305018b4 100644
--- a/packages/ui/certd-client/src/views/crud/feature/merge/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/merge/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureMerge",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/remove/api.js b/packages/ui/certd-client/src/views/crud/feature/remove/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/remove/api.js
rename to packages/ui/certd-client/src/views/crud/feature/remove/api.ts
index 1d251eb79..e1581eb98 100644
--- a/packages/ui/certd-client/src/views/crud/feature/remove/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/remove/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureRemove";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/feature/remove/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/remove/crud.tsx
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/remove/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/remove/crud.tsx
index 52a476cd3..df33f6af6 100644
--- a/packages/ui/certd-client/src/views/crud/feature/remove/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/remove/crud.tsx
@@ -1,21 +1,22 @@
 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";
 import { Modal } from "ant-design-vue";
-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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -31,7 +32,7 @@ export default function ({ expose }) {
               Modal.confirm({
                 content: `确定删除记录(${context.row.id})吗?`,
                 onOk() {
-                  resolve();
+                  resolve(true);
                 },
                 onCancel() {
                   reject();
diff --git a/packages/ui/certd-client/src/views/crud/feature/remove/index.vue b/packages/ui/certd-client/src/views/crud/feature/remove/index.vue
index 804e85bb1..6eb3bc894 100644
--- a/packages/ui/certd-client/src/views/crud/feature/remove/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/remove/index.vue
@@ -4,31 +4,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureRemove",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/remove/mock.js b/packages/ui/certd-client/src/views/crud/feature/remove/mock.ts
similarity index 93%
rename from packages/ui/certd-client/src/views/crud/feature/remove/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/remove/mock.ts
index efb116af7..e5f35bca6 100644
--- a/packages/ui/certd-client/src/views/crud/feature/remove/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/remove/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureRemove",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/search-multi/api.js b/packages/ui/certd-client/src/views/crud/feature/search-multi/api.ts
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/feature/search-multi/api.js
rename to packages/ui/certd-client/src/views/crud/feature/search-multi/api.ts
index 2f83742af..1d7234b0f 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search-multi/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/search-multi/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureSearchMulti";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/feature/search-multi/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/search-multi/crud.tsx
similarity index 74%
rename from packages/ui/certd-client/src/views/crud/feature/search-multi/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/search-multi/crud.tsx
index 6f9fdbd2f..d04d4b57c 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search-multi/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/search-multi/crud.tsx
@@ -1,21 +1,22 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-import { ref } from "vue";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
@@ -42,23 +43,23 @@ export default function ({ expose }) {
           change: {
             text: "切换模式",
             click() {
-              if (expose.crudBinding.value.search.layout === "multi-line") {
-                expose.crudBinding.value.search.layout = "";
+              if (crudExpose.crudBinding.value.search.layout === "multi-line") {
+                crudExpose.crudBinding.value.search.layout = "";
               } else {
-                expose.crudBinding.value.search.layout = "multi-line";
+                crudExpose.crudBinding.value.search.layout = "multi-line";
               }
             }
           },
           search: {
             text: "查询",
             click() {
-              expose.getSearchRef().doSearch();
+              crudExpose.getSearchRef().doSearch();
             }
           },
           reset: {
             text: "重置查询",
             click() {
-              expose.getSearchRef().doReset();
+              crudExpose.getSearchRef().doReset();
             }
           }
         }
@@ -88,12 +89,10 @@ export default function ({ expose }) {
               { text: "关", value: "0" },
               { text: "停", value: "2" }
             ],
-            // specify the condition of filtering result
-            // here is that finding the name started with `value`
-            onFilter: (value, record) => {
+            onFilter: (value: any, record: any) => {
               return record.radio === value;
             },
-            sorter: (a, b) => a.radio - b.radio,
+            sorter: (a: any, b: any) => a.radio - b.radio,
             sortDirections: ["descend"]
           }
         },
diff --git a/packages/ui/certd-client/src/views/crud/feature/search-multi/index.vue b/packages/ui/certd-client/src/views/crud/feature/search-multi/index.vue
index 6e6d96052..b4e3a79dd 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search-multi/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/search-multi/index.vue
@@ -4,32 +4,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
-import { message } from "ant-design-vue";
+
 export default defineComponent({
   name: "FeatureSearchMulti",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/search-multi/mock.js b/packages/ui/certd-client/src/views/crud/feature/search-multi/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/feature/search-multi/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/search-multi/mock.ts
index 0a2531527..d1e4ae985 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search-multi/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/search-multi/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureSearchMulti",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/search/api.js b/packages/ui/certd-client/src/views/crud/feature/search/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/search/api.js
rename to packages/ui/certd-client/src/views/crud/feature/search/api.ts
index 279509cc9..61fd0a473 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/search/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureSearch";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/feature/search/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/search/crud.tsx
similarity index 72%
rename from packages/ui/certd-client/src/views/crud/feature/search/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/search/crud.tsx
index 561153ddf..a45891b5a 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/search/crud.tsx
@@ -1,22 +1,24 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-import { computed, ref } from "vue";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { computed } from "vue";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
-  let statusRef = dict({
+
+  const statusRef = dict({
     url: "/mock/dicts/OpenStatusEnum?single"
   });
   return {
@@ -55,7 +57,7 @@ export default function ({ expose }) {
         options: computed(() => {
           return statusRef.data;
         })
-      },
+      } as any,
       columns: {
         id: {
           title: "ID",
diff --git a/packages/ui/certd-client/src/views/crud/feature/search/index.vue b/packages/ui/certd-client/src/views/crud/feature/search/index.vue
index 4813f2c2f..653a29f3b 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/search/index.vue
@@ -10,46 +10,33 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+import { useCrud, useFs } 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: "FeatureSearch",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
       crudRef,
       getSearchFormData() {
-        const form = expose.getSearchFormData();
+        const form = crudExpose.getSearchFormData();
         message.info(`searchForm:${JSON.stringify(form)}`);
       },
       setSearchFormData() {
-        expose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
+        crudExpose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
       },
       clearSearchForm() {
-        expose.setSearchFormData({ form: { radio: null }, mergeForm: false });
+        crudExpose.setSearchFormData({ form: { radio: null }, mergeForm: false });
       }
     };
   }
diff --git a/packages/ui/certd-client/src/views/crud/feature/search/mock.js b/packages/ui/certd-client/src/views/crud/feature/search/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/feature/search/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/search/mock.ts
index a6741fa06..b8e86e493 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/search/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureSearch",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection-radio/api.js b/packages/ui/certd-client/src/views/crud/feature/selection-radio/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/selection-radio/api.js
rename to packages/ui/certd-client/src/views/crud/feature/selection-radio/api.ts
index 1d86caa21..368439c12 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection-radio/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/selection-radio/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureSelection";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection-radio/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/selection-radio/crud.tsx
similarity index 69%
rename from packages/ui/certd-client/src/views/crud/feature/selection-radio/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/selection-radio/crud.tsx
index 18efb25f8..4f698eac7 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection-radio/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/selection-radio/crud.tsx
@@ -1,23 +1,24 @@
 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";
 import { ref } from "vue";
-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);
   };
+
   const selectedRowKey = ref();
-  const onSelectChange = (changed) => {
+  const onSelectChange = (changed: any) => {
     console.log("selection", changed);
     selectedRowKey.value = changed;
   };
@@ -30,7 +31,7 @@ export default function ({ expose }) {
           type: "radio",
           selectedRowKeys: selectedRowKey,
           onChange: onSelectChange,
-          getCheckboxProps: (record) => ({
+          getCheckboxProps: (record: any) => ({
             disabled: record.id === 1 // 此处演示第一行禁用
           })
         }
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection-radio/index.vue b/packages/ui/certd-client/src/views/crud/feature/selection-radio/index.vue
index 57386c5a6..6bf449bf8 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection-radio/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/selection-radio/index.vue
@@ -8,32 +8,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
-import { message, Modal } from "ant-design-vue";
-import { BatchDelete } from "./api";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureSelectionRadio",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection-radio/mock.js b/packages/ui/certd-client/src/views/crud/feature/selection-radio/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/feature/selection-radio/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/selection-radio/mock.ts
index b9b0bade6..ef3e4ecaa 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection-radio/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/selection-radio/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureSelection",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection/api.js b/packages/ui/certd-client/src/views/crud/feature/selection/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/selection/api.js
rename to packages/ui/certd-client/src/views/crud/feature/selection/api.ts
index 1d86caa21..368439c12 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/selection/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureSelection";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/selection/crud.tsx
similarity index 68%
rename from packages/ui/certd-client/src/views/crud/feature/selection/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/selection/crud.tsx
index 9ac917e3b..44248f9e1 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/selection/crud.tsx
@@ -1,24 +1,25 @@
 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";
 import { ref } from "vue";
-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);
   };
+
   const selectedRowKeys = ref([]);
 
-  const onSelectChange = (changed) => {
+  const onSelectChange = (changed: any) => {
     console.log("selection", changed);
     selectedRowKeys.value = changed;
   };
@@ -30,7 +31,7 @@ export default function ({ expose }) {
         rowSelection: {
           selectedRowKeys: selectedRowKeys,
           onChange: onSelectChange,
-          getCheckboxProps: (record) => ({
+          getCheckboxProps: (record: any) => ({
             disabled: record.id === 1 // 此处演示第一行禁用
           })
         }
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection/index.vue b/packages/ui/certd-client/src/views/crud/feature/selection/index.vue
index 7a84d6c29..8c3c40531 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/selection/index.vue
@@ -13,32 +13,19 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { useExpose, useCrud, useFs } from "@fast-crud/fast-crud";
 import { message, Modal } from "ant-design-vue";
 import { BatchDelete } from "./api";
 export default defineComponent({
   name: "FeatureSelection",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedRowKeys } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose, selectedRowKeys } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     const handleBatchDelete = () => {
@@ -49,7 +36,7 @@ export default defineComponent({
           async onOk() {
             await BatchDelete(selectedRowKeys.value);
             message.info("删除成功");
-            expose.doRefresh();
+            crudExpose.doRefresh();
             selectedRowKeys.value = [];
           }
         });
diff --git a/packages/ui/certd-client/src/views/crud/feature/selection/mock.js b/packages/ui/certd-client/src/views/crud/feature/selection/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/feature/selection/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/selection/mock.ts
index b9b0bade6..ef3e4ecaa 100644
--- a/packages/ui/certd-client/src/views/crud/feature/selection/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/selection/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureSelection",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/sortable/api.js b/packages/ui/certd-client/src/views/crud/feature/sortable/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/sortable/api.js
rename to packages/ui/certd-client/src/views/crud/feature/sortable/api.ts
index 17fe338f5..0e92da070 100644
--- a/packages/ui/certd-client/src/views/crud/feature/sortable/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/sortable/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureSortable";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/sortable/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/sortable/crud.tsx
similarity index 69%
rename from packages/ui/certd-client/src/views/crud/feature/sortable/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/sortable/crud.tsx
index 0b00b387a..a1236ece6 100644
--- a/packages/ui/certd-client/src/views/crud/feature/sortable/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/sortable/crud.tsx
@@ -1,14 +1,18 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const editRequest = async ({ form, row }) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
-  const addRequest = async ({ form }) => {
+
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
@@ -29,7 +33,7 @@ export default function ({ expose }) {
             url: "/mock/dicts/OpenStatusEnum?single"
           }),
           column: {
-            sorter(a, b) {
+            sorter(a: any, b: any) {
               return a.radio < b.radio ? 1 : -1;
             }
           }
diff --git a/packages/ui/certd-client/src/views/crud/feature/sortable/index.vue b/packages/ui/certd-client/src/views/crud/feature/sortable/index.vue
index 1d3e59455..bb48f61fb 100644
--- a/packages/ui/certd-client/src/views/crud/feature/sortable/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/sortable/index.vue
@@ -4,30 +4,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
+<script lang="ts">
+import { useFs } from "@fast-crud/fast-crud";
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureSortable",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedIds } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/sortable/mock.js b/packages/ui/certd-client/src/views/crud/feature/sortable/mock.ts
similarity index 94%
rename from packages/ui/certd-client/src/views/crud/feature/sortable/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/sortable/mock.ts
index 5bb6d0e69..7fe433891 100644
--- a/packages/ui/certd-client/src/views/crud/feature/sortable/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/sortable/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureSortable",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/tabs/index.vue b/packages/ui/certd-client/src/views/crud/feature/tabs/index.vue
index a5b1bc0a5..629719351 100644
--- a/packages/ui/certd-client/src/views/crud/feature/tabs/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/tabs/index.vue
@@ -15,44 +15,31 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+import {useCrud, useFs} 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)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
       crudRef,
       getSearchFormData() {
-        const form = expose.getSearchFormData();
+        const form = crudExpose.getSearchFormData();
         message.info(`searchForm:${JSON.stringify(form)}`);
       },
       setSearchFormData() {
-        expose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
+        crudExpose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
       },
       clearSearchForm() {
-        expose.setSearchFormData({ form: { radio: null }, mergeForm: false });
+        crudExpose.setSearchFormData({ form: { radio: null }, mergeForm: false });
       }
     };
   }
diff --git a/packages/ui/certd-client/src/views/crud/feature/tree/api.js b/packages/ui/certd-client/src/views/crud/feature/tree/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/tree/api.js
rename to packages/ui/certd-client/src/views/crud/feature/tree/api.ts
index 771633983..7c9d96c13 100644
--- a/packages/ui/certd-client/src/views/crud/feature/tree/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/tree/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureTree";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/tree/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/tree/crud.tsx
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/feature/tree/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/tree/crud.tsx
index b47c3fa96..c62be79fb 100644
--- a/packages/ui/certd-client/src/views/crud/feature/tree/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/tree/crud.tsx
@@ -1,25 +1,26 @@
 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";
 import { ref } from "vue";
 
-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);
   };
+
   const selectedRowKeys = ref([]);
 
-  const onSelectChange = (changed) => {
+  const onSelectChange = (changed: any) => {
     console.log("selection", changed);
     selectedRowKeys.value = changed;
   };
@@ -75,6 +76,7 @@ export default function ({ expose }) {
         },
         amount: {
           title: "金额(元)",
+          type: "number",
           key: "amount"
         },
         radio: {
diff --git a/packages/ui/certd-client/src/views/crud/feature/tree/index.vue b/packages/ui/certd-client/src/views/crud/feature/tree/index.vue
index b9240eac1..95e505393 100644
--- a/packages/ui/certd-client/src/views/crud/feature/tree/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/tree/index.vue
@@ -10,32 +10,19 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { useExpose, useCrud, useFs } from "@fast-crud/fast-crud";
 import { message, Modal } from "ant-design-vue";
 import { BatchDelete } from "./api";
 export default defineComponent({
   name: "FeatureTree",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedRowKeys } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose, selectedRowKeys } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     const handleBatchDelete = () => {
@@ -46,7 +33,7 @@ export default defineComponent({
           async onOk() {
             await BatchDelete(selectedRowKeys.value);
             message.info("删除成功");
-            expose.doRefresh();
+            crudExpose.doRefresh();
             selectedRowKeys.value = [];
           }
         });
diff --git a/packages/ui/certd-client/src/views/crud/feature/tree/mock.js b/packages/ui/certd-client/src/views/crud/feature/tree/mock.ts
similarity index 98%
rename from packages/ui/certd-client/src/views/crud/feature/tree/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/tree/mock.ts
index f1df3badc..7344b6868 100644
--- a/packages/ui/certd-client/src/views/crud/feature/tree/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/tree/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureTree",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/feature/value-builder/api.js b/packages/ui/certd-client/src/views/crud/feature/value-builder/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/feature/value-builder/api.js
rename to packages/ui/certd-client/src/views/crud/feature/value-builder/api.ts
index 09e547c6a..6dd8a4d09 100644
--- a/packages/ui/certd-client/src/views/crud/feature/value-builder/api.js
+++ b/packages/ui/certd-client/src/views/crud/feature/value-builder/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FeatureValueBuilder";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/feature/value-builder/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/value-builder/crud.tsx
similarity index 62%
rename from packages/ui/certd-client/src/views/crud/feature/value-builder/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/value-builder/crud.tsx
index b44f24830..6bb5af692 100644
--- a/packages/ui/certd-client/src/views/crud/feature/value-builder/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/feature/value-builder/crud.tsx
@@ -1,14 +1,18 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const editRequest = async ({ form, row }) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
-  const addRequest = async ({ form }) => {
+
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
@@ -43,7 +47,7 @@ export default function ({ expose }) {
             },
             valueBuilder({ form }) {
               if (form.roles) {
-                form.roles = form.roles.map((item) => item.id);
+                form.roles = form.roles.map((item: any) => item.id);
               }
             }
           }
diff --git a/packages/ui/certd-client/src/views/crud/feature/value-builder/index.vue b/packages/ui/certd-client/src/views/crud/feature/value-builder/index.vue
index 156b4e5bf..aad6fd5a9 100644
--- a/packages/ui/certd-client/src/views/crud/feature/value-builder/index.vue
+++ b/packages/ui/certd-client/src/views/crud/feature/value-builder/index.vue
@@ -1,5 +1,12 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">
+        ValueBuilder & ValueResolve
+        <span class="sub">后台返回的值与字段组件的modelValue类型不一致时，需要使用ValueBuilder & ValueResolve做转换</span>
+      </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">
       <template #cell_roles="scope">
         <!-- 后台返回的列表数据已经包含了角色的名称，所以无需通过fs-values-format来从dict里获取label-->
@@ -11,30 +18,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose, useCrud } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureValueBuilder",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedIds } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/feature/value-builder/mock.js b/packages/ui/certd-client/src/views/crud/feature/value-builder/mock.ts
similarity index 94%
rename from packages/ui/certd-client/src/views/crud/feature/value-builder/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/value-builder/mock.ts
index 8c86a37e1..947a14b36 100644
--- a/packages/ui/certd-client/src/views/crud/feature/value-builder/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/value-builder/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "FeatureValueBuilder",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/form/base/api.js b/packages/ui/certd-client/src/views/crud/form/base/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/base/api.js
rename to packages/ui/certd-client/src/views/crud/form/base/api.ts
index cff9ab911..d0da5ff9b 100644
--- a/packages/ui/certd-client/src/views/crud/form/base/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/base/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormBase";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/base/crud.jsx b/packages/ui/certd-client/src/views/crud/form/base/crud.tsx
similarity index 69%
rename from packages/ui/certd-client/src/views/crud/form/base/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/base/crud.tsx
index db7dad2cf..ea9124650 100644
--- a/packages/ui/certd-client/src/views/crud/form/base/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/base/crud.tsx
@@ -1,19 +1,19 @@
 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) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, FormWrapperContext, ScopeContext, UserPageQuery, UserPageRes, utils } 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);
   };
   return {
@@ -32,7 +32,7 @@ export default function ({ crudExpose }) {
             },
             custom: {
               text: "自定义按钮",
-              click: async (context) => {
+              click: async (context: FormWrapperContext) => {
                 utils.logger.info("btn context", context);
                 message.info({ content: "通过自定义按钮，触发保存" });
                 await context.submit();
@@ -51,7 +51,7 @@ export default function ({ crudExpose }) {
           title: "labelRender",
           type: "text",
           form: {
-            title(context) {
+            title(context: ScopeContext) {
               console.log("render label context:", context);
               return <div style={{ color: "red" }}>LabelRender</div>;
             },
diff --git a/packages/ui/certd-client/src/views/crud/form/base/index.vue b/packages/ui/certd-client/src/views/crud/form/base/index.vue
index 6760022cf..6744835e3 100644
--- a/packages/ui/certd-client/src/views/crud/form/base/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/base/index.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted, nextTick } from "vue";
-import {useFs, UseFsProps} from "@fast-crud/fast-crud";
+import { useFs, UseFsProps } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.jsx";
 export default defineComponent({
   name: "FormBase",
diff --git a/packages/ui/certd-client/src/views/crud/form/base/mock.js b/packages/ui/certd-client/src/views/crud/form/base/mock.ts
similarity index 99%
rename from packages/ui/certd-client/src/views/crud/form/base/mock.js
rename to packages/ui/certd-client/src/views/crud/form/base/mock.ts
index bb0fe7b99..40a00adc2 100644
--- a/packages/ui/certd-client/src/views/crud/form/base/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/base/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "FormBase",
   idGenerator: 0
 };
@@ -298,7 +298,7 @@ const mock = mockUtil.buildMock(options);
 mock.push({
   path: "/select/cascadeData",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     return {
       code: 0,
       msg: "success",
diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/mock.ts b/packages/ui/certd-client/src/views/crud/form/custom-form/mock.ts
index 479b89b43..cfdeffd66 100644
--- a/packages/ui/certd-client/src/views/crud/form/custom-form/mock.ts
+++ b/packages/ui/certd-client/src/views/crud/form/custom-form/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "FormCustomForm",
   idGenerator: 0
 };
@@ -291,7 +291,7 @@ const mock = mockUtil.buildMock(options);
 mock.push({
   path: "/select/cascadeData",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     return {
       code: 0,
       msg: "success",
diff --git a/packages/ui/certd-client/src/views/crud/form/drawer/api.js b/packages/ui/certd-client/src/views/crud/form/drawer/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/drawer/api.js
rename to packages/ui/certd-client/src/views/crud/form/drawer/api.ts
index b9e50dc64..ae16f7688 100644
--- a/packages/ui/certd-client/src/views/crud/form/drawer/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/drawer/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/formText";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/drawer/crud.jsx b/packages/ui/certd-client/src/views/crud/form/drawer/crud.tsx
similarity index 61%
rename from packages/ui/certd-client/src/views/crud/form/drawer/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/drawer/crud.tsx
index bf6e0c5fa..e3c282801 100644
--- a/packages/ui/certd-client/src/views/crud/form/drawer/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/drawer/crud.tsx
@@ -1,19 +1,21 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/form/drawer/index.vue b/packages/ui/certd-client/src/views/crud/form/drawer/index.vue
index 5143f074e..47fa1b607 100644
--- a/packages/ui/certd-client/src/views/crud/form/drawer/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/drawer/index.vue
@@ -4,31 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FormText",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/drawer/mock.js b/packages/ui/certd-client/src/views/crud/form/drawer/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/form/drawer/mock.js
rename to packages/ui/certd-client/src/views/crud/form/drawer/mock.ts
index fcf01621e..dd3d2801c 100644
--- a/packages/ui/certd-client/src/views/crud/form/drawer/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/drawer/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "formText",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/form/group-tabs/api.js b/packages/ui/certd-client/src/views/crud/form/group-tabs/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/group-tabs/api.js
rename to packages/ui/certd-client/src/views/crud/form/group-tabs/api.ts
index a059b9001..91f5a0dde 100644
--- a/packages/ui/certd-client/src/views/crud/form/group-tabs/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/group-tabs/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormGroupTabs";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/group-tabs/crud.jsx b/packages/ui/certd-client/src/views/crud/form/group-tabs/crud.tsx
similarity index 84%
rename from packages/ui/certd-client/src/views/crud/form/group-tabs/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/group-tabs/crud.tsx
index 74dbfb0b3..5a0d0fa5c 100644
--- a/packages/ui/certd-client/src/views/crud/form/group-tabs/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/group-tabs/crud.tsx
@@ -1,21 +1,21 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const { getFormRef, getFormData } = expose;
-  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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -43,6 +43,7 @@ export default function ({ expose }) {
         },
         price: {
           title: "价格",
+          type: "number",
           sortable: true
         },
         store: {
diff --git a/packages/ui/certd-client/src/views/crud/form/group-tabs/index.vue b/packages/ui/certd-client/src/views/crud/form/group-tabs/index.vue
index 3d65edece..b4335f0a2 100644
--- a/packages/ui/certd-client/src/views/crud/form/group-tabs/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/group-tabs/index.vue
@@ -4,31 +4,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FormGroupTabs",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/group-tabs/mock.js b/packages/ui/certd-client/src/views/crud/form/group-tabs/mock.ts
similarity index 99%
rename from packages/ui/certd-client/src/views/crud/form/group-tabs/mock.js
rename to packages/ui/certd-client/src/views/crud/form/group-tabs/mock.ts
index bc980fa87..823b18e94 100644
--- a/packages/ui/certd-client/src/views/crud/form/group-tabs/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/group-tabs/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "FormGroupTabs",
   idGenerator: 0
 };
@@ -291,7 +291,7 @@ const mock = mockUtil.buildMock(options);
 mock.push({
   path: "/select/cascadeData",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     return {
       code: 0,
       msg: "success",
diff --git a/packages/ui/certd-client/src/views/crud/form/group/api.js b/packages/ui/certd-client/src/views/crud/form/group/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/group/api.js
rename to packages/ui/certd-client/src/views/crud/form/group/api.ts
index b1fcf8560..2c3961f67 100644
--- a/packages/ui/certd-client/src/views/crud/form/group/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/group/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormGroup";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/group/crud.jsx b/packages/ui/certd-client/src/views/crud/form/group/crud.tsx
similarity index 86%
rename from packages/ui/certd-client/src/views/crud/form/group/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/group/crud.tsx
index 8016d35e4..d9fbda5d1 100644
--- a/packages/ui/certd-client/src/views/crud/form/group/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/group/crud.tsx
@@ -1,19 +1,23 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { CheckOutlined } from "@ant-design/icons-vue";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/form/group/index.vue b/packages/ui/certd-client/src/views/crud/form/group/index.vue
index 14e290c72..93497a2c9 100644
--- a/packages/ui/certd-client/src/views/crud/form/group/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/group/index.vue
@@ -2,39 +2,24 @@
   <fs-page>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #form_slotField="scope">
-        <a-tooltip title="这是一个字段插槽示例">
-          <a-input v-model:value="scope.form.slotField" placeholder="我是插槽字段"
-        /></a-tooltip>
+        <a-tooltip title="这是一个字段插槽示例"> <a-input v-model:value="scope.form.slotField" placeholder="我是插槽字段" /></a-tooltip>
       </template>
     </fs-crud>
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FormGroup",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/group/mock.js b/packages/ui/certd-client/src/views/crud/form/group/mock.ts
similarity index 99%
rename from packages/ui/certd-client/src/views/crud/form/group/mock.js
rename to packages/ui/certd-client/src/views/crud/form/group/mock.ts
index 70d8f4d4d..90f016530 100644
--- a/packages/ui/certd-client/src/views/crud/form/group/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/group/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "FormGroup",
   idGenerator: 0
 };
@@ -291,7 +291,7 @@ const mock = mockUtil.buildMock(options);
 mock.push({
   path: "/select/cascadeData",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     return {
       code: 0,
       msg: "success",
diff --git a/packages/ui/certd-client/src/views/crud/form/helper/api.js b/packages/ui/certd-client/src/views/crud/form/helper/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/helper/api.js
rename to packages/ui/certd-client/src/views/crud/form/helper/api.ts
index aa8f08902..600940d3c 100644
--- a/packages/ui/certd-client/src/views/crud/form/helper/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/helper/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormHelper";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/helper/crud.jsx b/packages/ui/certd-client/src/views/crud/form/helper/crud.tsx
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/form/helper/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/helper/crud.tsx
index e9946e84f..bdfb2ef74 100644
--- a/packages/ui/certd-client/src/views/crud/form/helper/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/helper/crud.tsx
@@ -1,17 +1,18 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  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);
   };
   return {
diff --git a/packages/ui/certd-client/src/views/crud/form/helper/index.vue b/packages/ui/certd-client/src/views/crud/form/helper/index.vue
index 440574488..f6f59dc3c 100644
--- a/packages/ui/certd-client/src/views/crud/form/helper/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/helper/index.vue
@@ -2,41 +2,24 @@
   <fs-page>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="info"
-          message="在表单字段下方可以显示该字段的帮助说明，点击右边编辑按钮查看示例效果"
-        />
+        <a-alert class="ml-1" type="info" message="在表单字段下方可以显示该字段的帮助说明，点击右边编辑按钮查看示例效果" />
       </template>
     </fs-crud>
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FormValidation",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/helper/mock.js b/packages/ui/certd-client/src/views/crud/form/helper/mock.ts
similarity index 99%
rename from packages/ui/certd-client/src/views/crud/form/helper/mock.js
rename to packages/ui/certd-client/src/views/crud/form/helper/mock.ts
index 92b3dacaa..dd744e59b 100644
--- a/packages/ui/certd-client/src/views/crud/form/helper/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/helper/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "FormHelper",
   idGenerator: 0
 };
@@ -298,7 +298,7 @@ const mock = mockUtil.buildMock(options);
 mock.push({
   path: "/select/cascadeData",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     return {
       code: 0,
       msg: "success",
diff --git a/packages/ui/certd-client/src/views/crud/form/independent/crud.jsx b/packages/ui/certd-client/src/views/crud/form/independent/crud.tsx
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/form/independent/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/independent/crud.tsx
index 3834954e3..f566a1d67 100644
--- a/packages/ui/certd-client/src/views/crud/form/independent/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/independent/crud.tsx
@@ -1,6 +1,7 @@
 import { message } from "ant-design-vue";
+import { CreateCrudOptionsProps, CreateCrudOptionsRet } from "@fast-crud/fast-crud";
 
-export default function ({ expose }) {
+export default function ({}: CreateCrudOptionsProps): CreateCrudOptionsRet {
   return {
     crudOptions: {
       form: {
diff --git a/packages/ui/certd-client/src/views/crud/form/independent/index.vue b/packages/ui/certd-client/src/views/crud/form/independent/index.vue
index 565597a4e..eecea7732 100644
--- a/packages/ui/certd-client/src/views/crud/form/independent/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/independent/index.vue
@@ -44,17 +44,16 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from "vue";
 import { message } from "ant-design-vue";
-import { useCrud, useExpose, useColumns, useFs } from "@fast-crud/fast-crud";
+import { CreateCrudOptionsProps, useColumns, useFormWrapper, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useFormWrapper } from "@fast-crud/fast-crud";
 
 function createFormOptionsFromCrudOptions() {
   const { buildFormOptions } = useColumns();
   //可以直接复用crud.js
-  const { crudOptions } = createCrudOptions({});
+  const { crudOptions } = createCrudOptions({} as CreateCrudOptionsProps);
   return buildFormOptions(crudOptions);
 }
 
@@ -167,7 +166,7 @@ function useCrudBindingForm() {
   // 以下代码实际上== crudBinding.addForm 或者 crudBinding.editForm
   const formWrapperOptions2 = ref({
     ...crudBinding.value.addForm, // 你也可以用editForm
-    doSubmit({ form }) {
+    doSubmit({ form }: any) {
       //覆盖提交方法
       console.log("form submit:", form);
       message.info("自定义表单提交:" + JSON.stringify(form));
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/api.js b/packages/ui/certd-client/src/views/crud/form/inner/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/inner/api.js
rename to packages/ui/certd-client/src/views/crud/form/inner/api.ts
index d8c3543c8..f4b429da6 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/inner/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormInner";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/area/api.js b/packages/ui/certd-client/src/views/crud/form/inner/area/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/inner/area/api.js
rename to packages/ui/certd-client/src/views/crud/form/inner/area/api.ts
index b9142c890..99f34abbe 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/area/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/inner/area/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormInnerArea";
-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 GetAll(query) {
+export function GetAll(query: any) {
   return request({
     url: apiPrefix + "/all",
     method: "get",
@@ -17,7 +17,7 @@ export function GetAll(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -25,7 +25,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -33,7 +33,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -41,7 +41,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/area/crud.jsx b/packages/ui/certd-client/src/views/crud/form/inner/area/crud.tsx
similarity index 53%
rename from packages/ui/certd-client/src/views/crud/form/inner/area/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/inner/area/crud.tsx
index dbd13b803..1f2627a37 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/area/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/inner/area/crud.tsx
@@ -1,20 +1,22 @@
 import * as api from "./api";
-import { dict, useExpose } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/area/index.vue b/packages/ui/certd-client/src/views/crud/form/inner/area/index.vue
index ab81c09b0..07e8fc83d 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/area/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/inner/area/index.vue
@@ -4,31 +4,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FormInner",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/area/mock.js b/packages/ui/certd-client/src/views/crud/form/inner/area/mock.ts
similarity index 93%
rename from packages/ui/certd-client/src/views/crud/form/inner/area/mock.js
rename to packages/ui/certd-client/src/views/crud/form/inner/area/mock.ts
index d7c076ef2..997ace560 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/area/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/inner/area/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "FormInnerArea",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/crud.jsx b/packages/ui/certd-client/src/views/crud/form/inner/crud.tsx
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/inner/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/inner/crud.tsx
index c7009bf7f..6efdfbdd2 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/inner/crud.tsx
@@ -1,20 +1,22 @@
 import * as api from "./api";
-import { dict, useExpose } from "@fast-crud/fast-crud";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { useRouter } from "vue-router";
 import { message } from "ant-design-vue";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { SyncOutlined } from "@ant-design/icons-vue";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/index.vue b/packages/ui/certd-client/src/views/crud/form/inner/index.vue
index ab81c09b0..07e8fc83d 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/inner/index.vue
@@ -4,31 +4,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FormInner",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/inner/mock.js b/packages/ui/certd-client/src/views/crud/form/inner/mock.ts
similarity index 94%
rename from packages/ui/certd-client/src/views/crud/form/inner/mock.js
rename to packages/ui/certd-client/src/views/crud/form/inner/mock.ts
index a9f809c81..49894f856 100644
--- a/packages/ui/certd-client/src/views/crud/form/inner/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/inner/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "FormInner",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-flex/api.js b/packages/ui/certd-client/src/views/crud/form/layout-flex/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/layout-flex/api.js
rename to packages/ui/certd-client/src/views/crud/form/layout-flex/api.ts
index 0ba39afe2..c78b21368 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-flex/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/layout-flex/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/formLayoutFlex";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-flex/crud.jsx b/packages/ui/certd-client/src/views/crud/form/layout-flex/crud.tsx
similarity index 69%
rename from packages/ui/certd-client/src/views/crud/form/layout-flex/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/layout-flex/crud.tsx
index 1e7c5c383..ac85344cc 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-flex/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/layout-flex/crud.tsx
@@ -1,17 +1,18 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  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);
   };
 
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-flex/index.vue b/packages/ui/certd-client/src/views/crud/form/layout-flex/index.vue
index e43bc8cf1..843bcf17c 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-flex/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/layout-flex/index.vue
@@ -7,31 +7,18 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+import { useCrud, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import { useExpose } from "@fast-crud/fast-crud";
 export default defineComponent({
   name: "FormLayoutFlex",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-flex/mock.js b/packages/ui/certd-client/src/views/crud/form/layout-flex/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/form/layout-flex/mock.js
rename to packages/ui/certd-client/src/views/crud/form/layout-flex/mock.ts
index e48c1f0fd..80264d9c9 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-flex/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/layout-flex/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "formLayoutFlex",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-grid/api.js b/packages/ui/certd-client/src/views/crud/form/layout-grid/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/layout-grid/api.js
rename to packages/ui/certd-client/src/views/crud/form/layout-grid/api.ts
index c00a57873..027cba856 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-grid/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/layout-grid/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/formLayoutGrid";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-grid/crud.jsx b/packages/ui/certd-client/src/views/crud/form/layout-grid/crud.tsx
similarity index 74%
rename from packages/ui/certd-client/src/views/crud/form/layout-grid/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/layout-grid/crud.tsx
index 284f7b9f8..1ed633e24 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-grid/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/layout-grid/crud.tsx
@@ -1,17 +1,18 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  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);
   };
 
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue b/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue
index 499e5fe7d..171205de9 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/layout-grid/index.vue
@@ -8,31 +8,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FormLayout",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/layout-grid/mock.js b/packages/ui/certd-client/src/views/crud/form/layout-grid/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/form/layout-grid/mock.js
rename to packages/ui/certd-client/src/views/crud/form/layout-grid/mock.ts
index 41ec78880..a2f872ff0 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout-grid/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/layout-grid/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "formLayoutGrid",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/form/layout/api.js b/packages/ui/certd-client/src/views/crud/form/layout/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/layout/api.js
rename to packages/ui/certd-client/src/views/crud/form/layout/api.ts
index d9a789418..07ece6a82 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/layout/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/formLayout";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/layout/crud.jsx b/packages/ui/certd-client/src/views/crud/form/layout/crud.tsx
similarity index 81%
rename from packages/ui/certd-client/src/views/crud/form/layout/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/layout/crud.tsx
index fabaec8ee..49f7e23bf 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/layout/crud.tsx
@@ -1,22 +1,23 @@
 import * as api from "./api";
-import { dict, compute } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
-  const { getFormData, getFormWrapperRef } = expose;
+  const { getFormData, getFormWrapperRef } = crudExpose;
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/form/layout/index.vue b/packages/ui/certd-client/src/views/crud/form/layout/index.vue
index 1a969b414..424515b2c 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/layout/index.vue
@@ -7,31 +7,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FormLayout",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/layout/mock.js b/packages/ui/certd-client/src/views/crud/form/layout/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/form/layout/mock.js
rename to packages/ui/certd-client/src/views/crud/form/layout/mock.ts
index f63208a5a..80abe6e08 100644
--- a/packages/ui/certd-client/src/views/crud/form/layout/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/layout/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "formLayout",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/form/nest/api.js b/packages/ui/certd-client/src/views/crud/form/nest/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/nest/api.js
rename to packages/ui/certd-client/src/views/crud/form/nest/api.ts
index f7d01faa7..7648aae25 100644
--- a/packages/ui/certd-client/src/views/crud/form/nest/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/nest/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormNestObject";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/nest/crud.jsx b/packages/ui/certd-client/src/views/crud/form/nest/crud.tsx
similarity index 75%
rename from packages/ui/certd-client/src/views/crud/form/nest/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/nest/crud.tsx
index 1bf0a55af..ee46c7724 100644
--- a/packages/ui/certd-client/src/views/crud/form/nest/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/nest/crud.tsx
@@ -1,20 +1,22 @@
 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, 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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -39,7 +41,7 @@ export default function ({ expose }) {
         "profile.name": {
           title: "profile.name",
           type: "text",
-          search:{show:true},
+          search: { show: true },
           form: {
             key: ["profile", "name"],
             rules: [{ required: true, message: "姓名必填" }]
diff --git a/packages/ui/certd-client/src/views/crud/form/nest/index.vue b/packages/ui/certd-client/src/views/crud/form/nest/index.vue
index 5e4c48c99..b81c902d6 100644
--- a/packages/ui/certd-client/src/views/crud/form/nest/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/nest/index.vue
@@ -2,41 +2,24 @@
   <fs-page>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="info"
-          message="表单支持嵌套对象：例如：formData:{ text:'xxx',user:{id:1,username:'xxxx',desc:'二级嵌套数据'}}"
-        />
+        <a-alert class="ml-1" type="info" message="表单支持嵌套对象：例如：formData:{ text:'xxx',user:{id:1,username:'xxxx',desc:'二级嵌套数据'}}" />
       </template>
     </fs-crud>
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+import { useCrud, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import { useExpose } from "@fast-crud/fast-crud";
 export default defineComponent({
   name: "FormNest",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/nest/mock.js b/packages/ui/certd-client/src/views/crud/form/nest/mock.ts
similarity index 99%
rename from packages/ui/certd-client/src/views/crud/form/nest/mock.js
rename to packages/ui/certd-client/src/views/crud/form/nest/mock.ts
index 1658d74a1..f84d61698 100644
--- a/packages/ui/certd-client/src/views/crud/form/nest/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/nest/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "FormNestObject",
   idGenerator: 0
 };
@@ -307,7 +307,7 @@ const mock = mockUtil.buildMock(options);
 mock.push({
   path: "/select/cascadeData",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     return {
       code: 0,
       msg: "success",
diff --git a/packages/ui/certd-client/src/views/crud/form/new-page/api.js b/packages/ui/certd-client/src/views/crud/form/new-page/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/new-page/api.js
rename to packages/ui/certd-client/src/views/crud/form/new-page/api.ts
index 0dc2616a0..6ad221b27 100644
--- a/packages/ui/certd-client/src/views/crud/form/new-page/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/new-page/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormNewPage";
-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 + "/get",
     method: "get",
diff --git a/packages/ui/certd-client/src/views/crud/form/new-page/crud.jsx b/packages/ui/certd-client/src/views/crud/form/new-page/crud.tsx
similarity index 78%
rename from packages/ui/certd-client/src/views/crud/form/new-page/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/new-page/crud.tsx
index c68282819..74a720575 100644
--- a/packages/ui/certd-client/src/views/crud/form/new-page/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/new-page/crud.tsx
@@ -1,26 +1,23 @@
 import * as api from "./api";
 import { useRouter } from "vue-router";
-export default function ({ expose }) {
-  const router = useRouter();
-
-  const { getFormRef, getFormData } = expose;
-  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 }) => {
-    if (row.id) {
-      form.id = row.id;
-    }
-
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
+  const router = useRouter();
   return {
     crudOptions: {
       request: {
@@ -63,6 +60,7 @@ export default function ({ expose }) {
         },
         price: {
           title: "价格",
+          type: "number",
           sortable: true
         },
         store: {
diff --git a/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue b/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue
index c93ef0bdd..ba6f9e548 100644
--- a/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue
+++ b/packages/ui/certd-client/src/views/crud/form/new-page/edit.vue
@@ -12,34 +12,29 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { useRoute } from "vue-router";
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose, useColumns } from "@fast-crud/fast-crud";
+import { defineComponent, onMounted, ref } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import * as api from "./api";
-import _ from "lodash-es";
 import { message } from "ant-design-vue";
 import { usePageStore } from "/@/store/modules/page";
+
 export default defineComponent({
   name: "FormNewPageEdit",
   setup(props, ctx) {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
 
     const formRef = ref();
     const formOptions = ref();
 
     const route = useRoute();
-    const id = route.query.id;
+    const id: any = route.query.id;
 
     if (id) {
       //编辑表单
@@ -50,7 +45,7 @@ export default defineComponent({
     const doSubmit = formOptions.value.doSubmit;
     const pageStore = usePageStore();
 
-    formOptions.value.doSubmit = (context) => {
+    formOptions.value.doSubmit = (context: any) => {
       console.log("submit", context);
       doSubmit(context);
       //提交成功后，关闭本页面
@@ -58,7 +53,7 @@ export default defineComponent({
       pageStore.close({ tagName: route.fullPath });
     };
 
-    const getDetail = async (id) => {
+    const getDetail = async (id: any) => {
       return await api.GetObj(id);
     };
 
diff --git a/packages/ui/certd-client/src/views/crud/form/new-page/index.vue b/packages/ui/certd-client/src/views/crud/form/new-page/index.vue
index 0702f08c9..92380ef01 100644
--- a/packages/ui/certd-client/src/views/crud/form/new-page/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/new-page/index.vue
@@ -6,32 +6,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose, useColumns } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import _ from "lodash-es";
-import { message } from "ant-design-vue";
+
 export default defineComponent({
   name: "FormNewPage",
   setup(props, ctx) {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/new-page/mock.js b/packages/ui/certd-client/src/views/crud/form/new-page/mock.ts
similarity index 95%
rename from packages/ui/certd-client/src/views/crud/form/new-page/mock.js
rename to packages/ui/certd-client/src/views/crud/form/new-page/mock.ts
index a182214c8..aa0861de2 100644
--- a/packages/ui/certd-client/src/views/crud/form/new-page/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/new-page/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "FormNewPage",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/form/reset/api.js b/packages/ui/certd-client/src/views/crud/form/reset/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/reset/api.js
rename to packages/ui/certd-client/src/views/crud/form/reset/api.ts
index 52a5ff5b0..7fd495b62 100644
--- a/packages/ui/certd-client/src/views/crud/form/reset/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/reset/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/formReset";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/reset/crud.jsx b/packages/ui/certd-client/src/views/crud/form/reset/crud.tsx
similarity index 61%
rename from packages/ui/certd-client/src/views/crud/form/reset/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/reset/crud.tsx
index 1a4f1df2f..6c9b89369 100644
--- a/packages/ui/certd-client/src/views/crud/form/reset/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/reset/crud.tsx
@@ -1,19 +1,21 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -31,9 +33,9 @@ export default function ({ expose }) {
             reset: {
               text: "重置",
               order: -1,
-              click(value) {
-                console.log("on reset", value);
-                expose.getFormRef().reset();
+              click(context) {
+                console.log("on reset", context);
+                crudExpose.getFormRef().reset();
               }
             }
           }
diff --git a/packages/ui/certd-client/src/views/crud/form/reset/index.vue b/packages/ui/certd-client/src/views/crud/form/reset/index.vue
index 8c2e77e6d..3266819ed 100644
--- a/packages/ui/certd-client/src/views/crud/form/reset/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/reset/index.vue
@@ -4,33 +4,19 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FormReset",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
-
     return {
       crudBinding,
       crudRef
diff --git a/packages/ui/certd-client/src/views/crud/form/reset/mock.js b/packages/ui/certd-client/src/views/crud/form/reset/mock.ts
similarity index 96%
rename from packages/ui/certd-client/src/views/crud/form/reset/mock.js
rename to packages/ui/certd-client/src/views/crud/form/reset/mock.ts
index f586e9c46..dff180986 100644
--- a/packages/ui/certd-client/src/views/crud/form/reset/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/reset/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "formReset",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/form/single-column/api.js b/packages/ui/certd-client/src/views/crud/form/single-column/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/single-column/api.js
rename to packages/ui/certd-client/src/views/crud/form/single-column/api.ts
index 0ba49b67f..46588a13c 100644
--- a/packages/ui/certd-client/src/views/crud/form/single-column/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/single-column/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormSingleColumn";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/single-column/crud.jsx b/packages/ui/certd-client/src/views/crud/form/single-column/crud.tsx
similarity index 66%
rename from packages/ui/certd-client/src/views/crud/form/single-column/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/single-column/crud.tsx
index f82ff9175..3126bc392 100644
--- a/packages/ui/certd-client/src/views/crud/form/single-column/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/single-column/crud.tsx
@@ -1,17 +1,18 @@
 import * as api from "./api";
-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);
   };
   return {
@@ -47,6 +48,7 @@ export default function ({ crudExpose }) {
         },
         price: {
           title: "价格",
+          type: "text",
           sortable: true
         },
         store: {
diff --git a/packages/ui/certd-client/src/views/crud/form/single-column/mock.js b/packages/ui/certd-client/src/views/crud/form/single-column/mock.ts
similarity index 99%
rename from packages/ui/certd-client/src/views/crud/form/single-column/mock.js
rename to packages/ui/certd-client/src/views/crud/form/single-column/mock.ts
index 9b37c9e75..65026454c 100644
--- a/packages/ui/certd-client/src/views/crud/form/single-column/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/single-column/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "FormSingleColumn",
   idGenerator: 0
 };
@@ -298,7 +298,7 @@ const mock = mockUtil.buildMock(options);
 mock.push({
   path: "/select/cascadeData",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     return {
       code: 0,
       msg: "success",
diff --git a/packages/ui/certd-client/src/views/crud/form/validation/api.js b/packages/ui/certd-client/src/views/crud/form/validation/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/form/validation/api.js
rename to packages/ui/certd-client/src/views/crud/form/validation/api.ts
index f62ba48b1..9ff68e6e3 100644
--- a/packages/ui/certd-client/src/views/crud/form/validation/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/validation/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormValidation";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/form/validation/crud.jsx b/packages/ui/certd-client/src/views/crud/form/validation/crud.tsx
similarity index 80%
rename from packages/ui/certd-client/src/views/crud/form/validation/crud.jsx
rename to packages/ui/certd-client/src/views/crud/form/validation/crud.tsx
index 856ca779b..88144619f 100644
--- a/packages/ui/certd-client/src/views/crud/form/validation/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/form/validation/crud.tsx
@@ -1,8 +1,24 @@
 import * as api from "./api";
-import { dict, useExpose } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const { getFormRef, getFormData } = expose;
-  const validatePass1 = async (rule, value) => {
+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 { getFormRef, getFormData } = crudExpose;
+  const validatePass1 = async (rule: any, value: any) => {
     if (value === "") {
       throw new Error("请输入密码");
     }
@@ -10,27 +26,13 @@ export default function ({ expose }) {
       getFormRef().getFormRef().validateFields(["password2"]);
     }
   };
-  const validatePass2 = async (rule, value) => {
+  const validatePass2 = async (rule: any, value: any) => {
     if (value === "") {
       throw new Error("请再次输入密码");
     } else if (value !== getFormData().password) {
       throw new Error("两次输入密码不一致!");
     }
   };
-  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: {
@@ -40,8 +42,8 @@ export default function ({ expose }) {
         delRequest
       },
       form: {
-        row:{
-          gutter:20
+        row: {
+          gutter: 20
         },
         beforeSubmit(context) {
           console.log("beforeSubmit", context);
@@ -81,10 +83,8 @@ export default function ({ expose }) {
           title: "密码",
           type: "password",
           column: {
-            component: {
-              cellRender() {
-                return <span>******</span>;
-              }
+            cellRender() {
+              return <span>******</span>;
             }
           },
           form: {
diff --git a/packages/ui/certd-client/src/views/crud/form/validation/index.vue b/packages/ui/certd-client/src/views/crud/form/validation/index.vue
index 49bd373a8..ebd506338 100644
--- a/packages/ui/certd-client/src/views/crud/form/validation/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/validation/index.vue
@@ -4,31 +4,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FormValidation",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/form/validation/mock.js b/packages/ui/certd-client/src/views/crud/form/validation/mock.ts
similarity index 99%
rename from packages/ui/certd-client/src/views/crud/form/validation/mock.js
rename to packages/ui/certd-client/src/views/crud/form/validation/mock.ts
index 0ca7bc117..487363f00 100644
--- a/packages/ui/certd-client/src/views/crud/form/validation/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/validation/mock.ts
@@ -1,6 +1,6 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
+const options: any = {
   name: "FormValidation",
   idGenerator: 0
 };
@@ -298,7 +298,7 @@ const mock = mockUtil.buildMock(options);
 mock.push({
   path: "/select/cascadeData",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     return {
       code: 0,
       msg: "success",
diff --git a/packages/ui/certd-client/src/views/crud/home/index.vue b/packages/ui/certd-client/src/views/crud/home/index.vue
deleted file mode 100644
index 274457799..000000000
--- a/packages/ui/certd-client/src/views/crud/home/index.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <fs-page class="home—index">
-    <page-cover />
-  </fs-page>
-</template>
-
-<script>
-import { defineComponent } from "vue";
-import PageCover from "./page-cover/index.vue";
-export default defineComponent({
-  components: { PageCover },
-  setup() {}
-});
-</script>
-<style lang="less"></style>
diff --git a/packages/ui/certd-client/src/views/crud/home/page-cover/helper.js b/packages/ui/certd-client/src/views/crud/home/page-cover/helper.js
deleted file mode 100644
index 5c955ba6e..000000000
--- a/packages/ui/certd-client/src/views/crud/home/page-cover/helper.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export default {
-  crud: `  columns: [
-    date:{
-      title: '日期', //字段名称
-      type: 'date', //字段类型，添加、修改、查询将自动生成相应表单组件
-    },
-    status: {
-      title: '状态',
-      type: 'dict-select', //选择框，默认单选
-      dict: dict({ url: '/dicts/OpenStatusEnum' })//远程数据字典
-    },
-    province: {
-      title: '地区',
-      type: 'dict-select', //选择框
-      form: { //表单组件自定义配置，此处配置选择框为多选
-        component: { //支持任何v-model组件
-           filterable: true, multiple: true, clearable: true
-        }
-      },
-      dict: dict({
-        data: [ //本地数据字典
-          { value: 'sz', label: '深圳' },
-          { value: 'gz', label: '广州' },
-          { value: 'wh', label: '武汉' },
-          { value: 'sh', label: '上海' }
-        ]
-      })
-    }
-  ]
-  `
-};
diff --git a/packages/ui/certd-client/src/views/crud/home/page-cover/image/crud.png b/packages/ui/certd-client/src/views/crud/home/page-cover/image/crud.png
deleted file mode 100644
index 3dfb047dd..000000000
Binary files a/packages/ui/certd-client/src/views/crud/home/page-cover/image/crud.png and /dev/null differ
diff --git a/packages/ui/certd-client/src/views/crud/home/page-cover/image/darkblue@2x.png b/packages/ui/certd-client/src/views/crud/home/page-cover/image/darkblue@2x.png
deleted file mode 100644
index efe1577f4..000000000
Binary files a/packages/ui/certd-client/src/views/crud/home/page-cover/image/darkblue@2x.png and /dev/null differ
diff --git a/packages/ui/certd-client/src/views/crud/home/page-cover/image/logo.svg b/packages/ui/certd-client/src/views/crud/home/page-cover/image/logo.svg
deleted file mode 100644
index 7a33425e3..000000000
--- a/packages/ui/certd-client/src/views/crud/home/page-cover/image/logo.svg
+++ /dev/null
@@ -1,178 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="210mm"
-   height="210mm"
-   viewBox="0 0 210 210"
-   version="1.1"
-   id="svg8"
-   inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"
-   sodipodi:docname="logo.svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.45420139"
-     inkscape:cx="628.76623"
-     inkscape:cy="688.02672"
-     inkscape:document-units="mm"
-     inkscape:current-layer="svg8"
-     inkscape:document-rotation="0"
-     showgrid="false"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:snap-bbox="true"
-     inkscape:snap-nodes="false"
-     inkscape:snap-bbox-edge-midpoints="false"
-     inkscape:bbox-nodes="true"
-     inkscape:bbox-paths="false"
-     inkscape:snap-global="true"
-     showguides="true"
-     inkscape:guide-bbox="true">
-    <sodipodi:guide
-       position="-128.15534,201.26213"
-       orientation="1,0"
-       id="guide1012" />
-    <sodipodi:guide
-       position="333.7864,165.14563"
-       orientation="1,0"
-       id="guide1014" />
-    <sodipodi:guide
-       position="242.91262,73.689318"
-       orientation="1,0"
-       id="guide1016" />
-    <sodipodi:guide
-       position="105.83717,102.82499"
-       orientation="1,0"
-       id="guide1022" />
-    <sodipodi:guide
-       position="138.0814,102.82499"
-       orientation="0,-1"
-       id="guide1024" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="图层 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     style="display:inline">
-    <path
-       style="fill:#002255;stroke:none;stroke-width:0.625348"
-       d="M 35.587501,69.766667 V 59.766664 h 70.000109 69.99991 v 10.000003 9.999997 H 105.58761 35.587501 Z"
-       id="path12" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2"
-       width="32.244232"
-       height="20"
-       x="71.506088"
-       y="106.64581" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-8"
-       width="32.244232"
-       height="20"
-       x="107.42467"
-       y="106.64581" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-5-8"
-       width="32.244232"
-       height="20"
-       x="143.34325"
-       y="106.64581" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2-4"
-       width="32.244232"
-       height="20"
-       x="71.506088"
-       y="129.82079" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-8-3"
-       width="32.244232"
-       height="20"
-       x="107.42467"
-       y="129.82079" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-5-8-2"
-       width="32.244232"
-       height="20"
-       x="143.34325"
-       y="129.82079" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2-7"
-       width="32.244232"
-       height="20"
-       x="35.587502"
-       y="106.64581" />
-    <rect
-       style="fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2-4-0"
-       width="32.244232"
-       height="20"
-       x="35.587502"
-       y="129.82079" />
-    <rect
-       style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2-9"
-       width="32.244232"
-       height="20"
-       x="71.506088"
-       y="82.941666" />
-    <rect
-       style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-8-37"
-       width="32.244232"
-       height="20"
-       x="107.42467"
-       y="82.941666" />
-    <rect
-       style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-8-5-8-4"
-       width="32.244232"
-       height="20"
-       x="143.34325"
-       y="82.941666" />
-    <rect
-       style="display:inline;fill:#2a7fff;fill-rule:evenodd;stroke-width:0.214311"
-       id="rect22-2-7-1"
-       width="32.244232"
-       height="20"
-       x="35.587502"
-       y="82.941666" />
-  </g>
-  <polygon
-     points="75.3,174.4 103.1,103.6 79.8,103.6 112.6,41.3 156.4,41.3 129.9,90.5 148.1,90.5 "
-     fill="#f6cc00"
-     id="polygon276"
-     transform="matrix(1.0930933,0,0,0.99853202,-17.517362,-0.52287941)" />
-</svg>
diff --git a/packages/ui/certd-client/src/views/crud/home/page-cover/index.vue b/packages/ui/certd-client/src/views/crud/home/page-cover/index.vue
deleted file mode 100644
index 7c51dea3d..000000000
--- a/packages/ui/certd-client/src/views/crud/home/page-cover/index.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-  <div class="d2-page-cover">
-    <div class="d2-page-cover__title" @click="$open('https://github.com/fast-crud/fast-crud')">
-      <div class="title-line">
-        <img width="50" src="./image/logo.svg" />
-        Fast Crud v{{ version }}
-      </div>
-    </div>
-    <p class="d2-page-cover__sub-title">面向配置的crud编程，快速开发crud功能</p>
-    <div class="exampleBox">
-      <div class="left">
-        <d2-highlight :code="helper.crud" lang="javascript" />
-      </div>
-      <div class="icon">
-        <fs-icon :icon="$fsui.icons.arrowRight" />
-      </div>
-      <div class="right">
-        <img style="border: 1px solid #eee" src="./image/crud.png" />
-      </div>
-    </div>
-    <div class="footer_box">
-      <div class="left"></div>
-      <div class="right">
-        <div>如果觉得好用，请不要吝啬你的star哟！</div>
-        <a href="https://gitee.com/fast-crud/fast-crud" target="_blank"
-          ><img src="https://gitee.com/fast-crud/fast-crud/badge/star.svg?theme=dark" alt="star"
-        /></a>
-        <a href="https://github.com/fast-crud/fast-crud" target="_blank"
-          ><img alt="GitHub stars" src="https://img.shields.io/github/stars/fast-crud/fast-crud?logo=github"
-        /></a>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import helper from "./helper";
-
-import { defineComponent, ref } from "vue";
-export default defineComponent({
-  name: "PageCover",
-  setup() {
-    const version = ref(import.meta.env.VITE_APP_VERSION);
-
-    return {
-      version
-    };
-  },
-  data() {
-    return {
-      helper: helper
-    };
-  }
-});
-</script>
-<style lang="less" scoped>
-.d2-page-cover {
-  .logo {
-    width: 40px;
-    height: 40px;
-  }
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-  .d2-page-cover__logo {
-    img {
-      width: 200px;
-    }
-  }
-  .d2-page-cover__title {
-    margin: 20px;
-    font-weight: bold;
-    display: -webkit-flex; /* Safari */
-    display: flex;
-    justify-content: flex-end;
-    .title-line {
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      justify-content: center;
-      cursor: pointer;
-      font-size: 20px;
-    }
-  }
-  .d2-page-cover__sub-title {
-    margin: 0px;
-    margin-bottom: 10px;
-  }
-  .d2-page-cover__build-time {
-    margin: 0px;
-    margin-bottom: 0px;
-    margin-top: 10px;
-    font-size: 12px;
-  }
-
-  .exampleBox {
-    display: flex;
-    align-items: center;
-    height: 390px;
-    width: 96%;
-    padding: 5px;
-    margin: auto;
-    justify-content: center;
-    .left {
-      height: 100%;
-      overflow-y: hidden;
-      border: 1px solid #aaa;
-    }
-    .icon {
-      padding: 10px;
-      font-size: 20px;
-    }
-    .right {
-      height: 100%;
-      img {
-        height: 100%;
-      }
-    }
-    .d2-highlight {
-      font-size: 8px;
-    }
-  }
-
-  .footer_box {
-    padding: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .right {
-      display: flex;
-      justify-items: center;
-      align-items: center;
-      & > * {
-        display: flex;
-      }
-    }
-  }
-}
-</style>
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/api.js b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/api.ts
similarity index 77%
rename from packages/ui/certd-client/src/views/crud/row-handle/dropdown/api.js
rename to packages/ui/certd-client/src/views/crud/row-handle/dropdown/api.ts
index 3cfd81822..546c2a0dc 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/api.js
+++ b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/RowHandleDropdown";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/crud.jsx b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/crud.tsx
similarity index 81%
rename from packages/ui/certd-client/src/views/crud/row-handle/dropdown/crud.jsx
rename to packages/ui/certd-client/src/views/crud/row-handle/dropdown/crud.tsx
index 2947b5377..5f46713b5 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/crud.tsx
@@ -1,21 +1,23 @@
 import * as api from "./api";
 import { dict, compute } from "@fast-crud/fast-crud";
 import { message } from "ant-design-vue";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/index.vue b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/index.vue
index 45d6937e2..dc0cf68e2 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/index.vue
+++ b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/index.vue
@@ -4,31 +4,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FeatureDropdown",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/mock.js b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/row-handle/dropdown/mock.js
rename to packages/ui/certd-client/src/views/crud/row-handle/dropdown/mock.ts
index ed703ceb8..9f26fc5ae 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/dropdown/mock.js
+++ b/packages/ui/certd-client/src/views/crud/row-handle/dropdown/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "RowHandleDropdown",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/api.js b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/row-handle/tooltip/api.js
rename to packages/ui/certd-client/src/views/crud/row-handle/tooltip/api.ts
index dd8bf7d8c..7bd5e0a51 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/api.js
+++ b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/RowHandleTooltip";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",
@@ -41,7 +41,7 @@ export function GetObj(id) {
   });
 }
 
-export function BatchDelete(ids) {
+export function BatchDelete(ids: any) {
   return request({
     url: apiPrefix + "/batchDelete",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/crud.jsx b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/crud.tsx
similarity index 78%
rename from packages/ui/certd-client/src/views/crud/row-handle/tooltip/crud.jsx
rename to packages/ui/certd-client/src/views/crud/row-handle/tooltip/crud.tsx
index 3682486c9..b3b7e5055 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/crud.tsx
@@ -1,21 +1,23 @@
 import * as api from "./api";
 import { dict } from "@fast-crud/fast-crud";
 import { ref } from "vue";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/index.vue b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/index.vue
index 40dde985f..fda4a7195 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/index.vue
+++ b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/index.vue
@@ -9,35 +9,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, Ref } from "vue";
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud.jsx";
-import { useExpose, useCrud, CrudBinding } from "@fast-crud/fast-crud";
-import { message, Modal, notification } from "ant-design-vue";
+import { message } from "ant-design-vue";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "BasisRowHandle",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding: Ref<CrudBinding> = ref({});
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, selectedRowKeys } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     function columnsSetToggleMode() {
-      crudBinding.value.toolbar.columnsFilter.mode =
-        crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
+      crudBinding.value.toolbar.columnsFilter.mode = crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
       message.info("当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
     }
 
diff --git a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/mock.js b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/row-handle/tooltip/mock.js
rename to packages/ui/certd-client/src/views/crud/row-handle/tooltip/mock.ts
index 7efa34b73..aaa9a5ac4 100644
--- a/packages/ui/certd-client/src/views/crud/row-handle/tooltip/mock.js
+++ b/packages/ui/certd-client/src/views/crud/row-handle/tooltip/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "RowHandleTooltip",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/slots/cell/api.js b/packages/ui/certd-client/src/views/crud/slots/cell/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/slots/cell/api.js
rename to packages/ui/certd-client/src/views/crud/slots/cell/api.ts
index 69094b0dd..352fb24c7 100644
--- a/packages/ui/certd-client/src/views/crud/slots/cell/api.js
+++ b/packages/ui/certd-client/src/views/crud/slots/cell/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/SlotsCell";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/slots/cell/crud.jsx b/packages/ui/certd-client/src/views/crud/slots/cell/crud.tsx
similarity index 79%
rename from packages/ui/certd-client/src/views/crud/slots/cell/crud.jsx
rename to packages/ui/certd-client/src/views/crud/slots/cell/crud.tsx
index ad836c9b2..b376a442d 100644
--- a/packages/ui/certd-client/src/views/crud/slots/cell/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/slots/cell/crud.tsx
@@ -1,21 +1,23 @@
 import * as api from "./api";
 import { dict } from "@fast-crud/fast-crud";
 import dayjs from "dayjs";
-export default function ({ expose }) {
-  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);
   };
+
   const radioDict = dict({
     url: "/mock/dicts/OpenStatusEnum?single"
   });
diff --git a/packages/ui/certd-client/src/views/crud/slots/cell/index.vue b/packages/ui/certd-client/src/views/crud/slots/cell/index.vue
index 9b8b43494..c338bc02c 100644
--- a/packages/ui/certd-client/src/views/crud/slots/cell/index.vue
+++ b/packages/ui/certd-client/src/views/crud/slots/cell/index.vue
@@ -33,38 +33,25 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
+import { useCrud, useExpose, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import dayjs from "dayjs";
 export default defineComponent({
   name: "SlotsCell",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions, radioDict } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose, radioDict } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
-    function dateFormat(time, formatter = "YYYY-MM-DD") {
+    function dateFormat(time: any, formatter = "YYYY-MM-DD") {
       return dayjs(time).format(formatter);
     }
 
-    function showScope(scope) {
+    function showScope(scope: any) {
       console.log("scope", scope);
     }
     return {
diff --git a/packages/ui/certd-client/src/views/crud/slots/cell/mock.js b/packages/ui/certd-client/src/views/crud/slots/cell/mock.ts
similarity index 95%
rename from packages/ui/certd-client/src/views/crud/slots/cell/mock.js
rename to packages/ui/certd-client/src/views/crud/slots/cell/mock.ts
index aa2397b79..c6da10fc1 100644
--- a/packages/ui/certd-client/src/views/crud/slots/cell/mock.js
+++ b/packages/ui/certd-client/src/views/crud/slots/cell/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "SlotsCell",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/slots/form-item/api.js b/packages/ui/certd-client/src/views/crud/slots/form-item/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/slots/form-item/api.js
rename to packages/ui/certd-client/src/views/crud/slots/form-item/api.ts
index 924d6570b..b328c0612 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form-item/api.js
+++ b/packages/ui/certd-client/src/views/crud/slots/form-item/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/SlotsFormItem";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/slots/form-item/crud.jsx b/packages/ui/certd-client/src/views/crud/slots/form-item/crud.tsx
similarity index 65%
rename from packages/ui/certd-client/src/views/crud/slots/form-item/crud.jsx
rename to packages/ui/certd-client/src/views/crud/slots/form-item/crud.tsx
index 7af63d446..7bb8e6b42 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form-item/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/slots/form-item/crud.tsx
@@ -1,19 +1,21 @@
 import * as api from "./api";
-export default function ({ expose }) {
-  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);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/slots/form-item/index.vue b/packages/ui/certd-client/src/views/crud/slots/form-item/index.vue
index 97869b958..992d35eca 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form-item/index.vue
+++ b/packages/ui/certd-client/src/views/crud/slots/form-item/index.vue
@@ -6,14 +6,7 @@
       </template>
 
       <template #form_topics="scope">
-        <a-input-search
-          v-for="(item, index) in scope.form.topics"
-          :key="index"
-          v-model:value="scope.form.topics[index]"
-          :disabled="scope.mode === 'view'"
-          class="mb-1"
-          @search="removeTopic(index, scope.form, scope.key)"
-        >
+        <a-input-search v-for="(item, index) in scope.form.topics" :key="index" v-model:value="scope.form.topics[index]" :disabled="scope.mode === 'view'" class="mb-1" @search="removeTopic(index, scope.form, scope.key)">
           <template #enterButton>
             <a-button :disabled="scope.mode === 'view'">
               <DeleteOutlined />
@@ -26,39 +19,26 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
+import { useCrud, useExpose, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 export default defineComponent({
   name: "SlotsForm",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
-    function addTopic(form, key) {
+    function addTopic(form: any, key: string) {
       if (form[key] == null) {
         form[key] = [];
       }
       form[key].push("");
     }
-    function removeTopic(index, form, key) {
+    function removeTopic(index: number, form: any, key: string) {
       form[key].splice(index, 1);
     }
     return {
diff --git a/packages/ui/certd-client/src/views/crud/slots/form-item/mock.js b/packages/ui/certd-client/src/views/crud/slots/form-item/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/slots/form-item/mock.js
rename to packages/ui/certd-client/src/views/crud/slots/form-item/mock.ts
index a9f3d7569..87b8b2dd7 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form-item/mock.js
+++ b/packages/ui/certd-client/src/views/crud/slots/form-item/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "SlotsFormItem",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/slots/form/api.js b/packages/ui/certd-client/src/views/crud/slots/form/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/slots/form/api.js
rename to packages/ui/certd-client/src/views/crud/slots/form/api.ts
index b15ec4e05..5fc5aeecb 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form/api.js
+++ b/packages/ui/certd-client/src/views/crud/slots/form/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/SlotsForm";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/slots/form/crud.jsx b/packages/ui/certd-client/src/views/crud/slots/form/crud.tsx
similarity index 64%
rename from packages/ui/certd-client/src/views/crud/slots/form/crud.jsx
rename to packages/ui/certd-client/src/views/crud/slots/form/crud.tsx
index b5d8c1df5..ef2c27577 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/slots/form/crud.tsx
@@ -1,20 +1,22 @@
 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, 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);
   };
+
   const radioDict = dict({
     url: "/mock/dicts/OpenStatusEnum?single"
   });
diff --git a/packages/ui/certd-client/src/views/crud/slots/form/index.vue b/packages/ui/certd-client/src/views/crud/slots/form/index.vue
index 74aa9ec35..8df5bf141 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form/index.vue
+++ b/packages/ui/certd-client/src/views/crud/slots/form/index.vue
@@ -34,30 +34,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
 import createCrudOptions from "./crud";
+import { useFs } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "SlotsForm",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/slots/form/mock.js b/packages/ui/certd-client/src/views/crud/slots/form/mock.ts
similarity index 90%
rename from packages/ui/certd-client/src/views/crud/slots/form/mock.js
rename to packages/ui/certd-client/src/views/crud/slots/form/mock.ts
index 22d45cf72..8009d5649 100644
--- a/packages/ui/certd-client/src/views/crud/slots/form/mock.js
+++ b/packages/ui/certd-client/src/views/crud/slots/form/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "SlotsForm",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/slots/layout/api.js b/packages/ui/certd-client/src/views/crud/slots/layout/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/slots/layout/api.js
rename to packages/ui/certd-client/src/views/crud/slots/layout/api.ts
index 56f3de45f..6be777f2c 100644
--- a/packages/ui/certd-client/src/views/crud/slots/layout/api.js
+++ b/packages/ui/certd-client/src/views/crud/slots/layout/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/SlotsLayout";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/slots/search/crud.jsx b/packages/ui/certd-client/src/views/crud/slots/layout/crud.tsx
similarity index 64%
rename from packages/ui/certd-client/src/views/crud/slots/search/crud.jsx
rename to packages/ui/certd-client/src/views/crud/slots/layout/crud.tsx
index af8ad45e2..08696d8c1 100644
--- a/packages/ui/certd-client/src/views/crud/slots/search/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/slots/layout/crud.tsx
@@ -1,20 +1,22 @@
 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, 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 (id) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/slots/layout/index.vue b/packages/ui/certd-client/src/views/crud/slots/layout/index.vue
index ce35fe282..bcc9718e8 100644
--- a/packages/ui/certd-client/src/views/crud/slots/layout/index.vue
+++ b/packages/ui/certd-client/src/views/crud/slots/layout/index.vue
@@ -41,31 +41,18 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "SlotsLayout",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/slots/layout/mock.js b/packages/ui/certd-client/src/views/crud/slots/layout/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/slots/layout/mock.js
rename to packages/ui/certd-client/src/views/crud/slots/layout/mock.ts
index 31e3a7d78..ec619dbe6 100644
--- a/packages/ui/certd-client/src/views/crud/slots/layout/mock.js
+++ b/packages/ui/certd-client/src/views/crud/slots/layout/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "SlotsLayout",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/slots/search/api.js b/packages/ui/certd-client/src/views/crud/slots/search/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/slots/search/api.js
rename to packages/ui/certd-client/src/views/crud/slots/search/api.ts
index 192ff43ea..d8d500368 100644
--- a/packages/ui/certd-client/src/views/crud/slots/search/api.js
+++ b/packages/ui/certd-client/src/views/crud/slots/search/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/SlotsSearch";
-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",
diff --git a/packages/ui/certd-client/src/views/crud/slots/layout/crud.jsx b/packages/ui/certd-client/src/views/crud/slots/search/crud.tsx
similarity index 64%
rename from packages/ui/certd-client/src/views/crud/slots/layout/crud.jsx
rename to packages/ui/certd-client/src/views/crud/slots/search/crud.tsx
index af8ad45e2..08696d8c1 100644
--- a/packages/ui/certd-client/src/views/crud/slots/layout/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/slots/search/crud.tsx
@@ -1,20 +1,22 @@
 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, 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 (id) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
+
   return {
     crudOptions: {
       request: {
diff --git a/packages/ui/certd-client/src/views/crud/slots/search/index.vue b/packages/ui/certd-client/src/views/crud/slots/search/index.vue
index bbf30cffb..e4c1bfea5 100644
--- a/packages/ui/certd-client/src/views/crud/slots/search/index.vue
+++ b/packages/ui/certd-client/src/views/crud/slots/search/index.vue
@@ -5,44 +5,29 @@
         <a-alert class="ml-1" type="info" message=" ↑↑↑ 这里演示查询字段通过插槽自定义" />
       </template>
       <template #search_radio="scope">
-        <a-input-number v-model:value="scope.form.radio" style="width: 200px" placeholder="字段插槽自定义" />
+        <a-input v-model:value="scope.form.radio" style="width: 200px" placeholder="字段插槽自定义" />
       </template>
       <template #search-middle="scope">
         <a-form-item label="自定义">
-          <a-tooltip title="注意：search-middle插槽自定义的内容，无法被重置">
-            <a-input v-model:value="scope.form.custom" placeholder="search-middle插槽" />
-          </a-tooltip>
+          <a-input v-model:value="scope.form.custom" placeholder="search-middle插槽" />
         </a-form-item>
       </template>
     </fs-crud>
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "SlotsSearch",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
-
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/slots/search/mock.js b/packages/ui/certd-client/src/views/crud/slots/search/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/slots/search/mock.js
rename to packages/ui/certd-client/src/views/crud/slots/search/mock.ts
index 4312767d5..1f3175fac 100644
--- a/packages/ui/certd-client/src/views/crud/slots/search/mock.js
+++ b/packages/ui/certd-client/src/views/crud/slots/search/mock.ts
@@ -1,5 +1,5 @@
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "SlotsSearch",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/framework/error/404.vue b/packages/ui/certd-client/src/views/framework/error/404.vue
index 2dacd3630..7191e6566 100644
--- a/packages/ui/certd-client/src/views/framework/error/404.vue
+++ b/packages/ui/certd-client/src/views/framework/error/404.vue
@@ -6,7 +6,7 @@
   </a-result>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "Exception404",
   methods: {
diff --git a/packages/ui/certd-client/src/views/framework/home/index.vue b/packages/ui/certd-client/src/views/framework/home/index.vue
index 274457799..5bd1251cf 100644
--- a/packages/ui/certd-client/src/views/framework/home/index.vue
+++ b/packages/ui/certd-client/src/views/framework/home/index.vue
@@ -4,7 +4,7 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from "vue";
 import PageCover from "./page-cover/index.vue";
 export default defineComponent({
diff --git a/packages/ui/certd-client/src/views/framework/home/page-cover/helper.js b/packages/ui/certd-client/src/views/framework/home/page-cover/helper.ts
similarity index 100%
rename from packages/ui/certd-client/src/views/framework/home/page-cover/helper.js
rename to packages/ui/certd-client/src/views/framework/home/page-cover/helper.ts
diff --git a/packages/ui/certd-client/src/views/framework/home/page-cover/index.vue b/packages/ui/certd-client/src/views/framework/home/page-cover/index.vue
index 976c620e4..2fe6b1352 100644
--- a/packages/ui/certd-client/src/views/framework/home/page-cover/index.vue
+++ b/packages/ui/certd-client/src/views/framework/home/page-cover/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="d2-page-cover">
-    <div class="d2-page-cover__title" @click="$open('https://github.com/fast-crud/fast-crud')">
+    <div class="d2-page-cover__title">
       <div class="title-line">
         <img width="50" src="./image/logo.svg" />
         FsAdmin v{{ version }}
@@ -9,10 +9,10 @@
     <p class="d2-page-cover__sub-title">面向配置的crud编程，快速开发crud功能</p>
     <div class="exampleBox">
       <div class="left">
-        <fs-highlight :code="helper.crud" lang="javascript" />
+        <fs-highlight :code="helperRef.crud" lang="javascript" />
       </div>
       <div class="icon">
-        <fs-icon :icon="$fsui.icons.arrowRight" />
+        <fs-icon :icon="ui.icons.arrowRight" />
       </div>
       <div class="right">
         <img style="border: 1px solid #eee" src="./image/crud.png" />
@@ -22,32 +22,26 @@
       <div class="left"></div>
       <div class="right">
         <div>如果觉得好用，请不要吝啬你的star哟！</div>
-        <a href="https://gitee.com/fast-crud/fast-crud" target="_blank"
-          ><img src="https://gitee.com/fast-crud/fast-crud/badge/star.svg?theme=dark" alt="star"
-        /></a>
-        <a href="https://github.com/fast-crud/fast-crud" target="_blank"
-          ><img alt="GitHub stars" src="https://img.shields.io/github/stars/fast-crud/fast-crud?logo=github"
-        /></a>
+        <a href="https://gitee.com/fast-crud/fast-crud" target="_blank"><img src="https://gitee.com/fast-crud/fast-crud/badge/star.svg?theme=dark" alt="star" /></a>
+        <a href="https://github.com/fast-crud/fast-crud" target="_blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/fast-crud/fast-crud?logo=github" /></a>
       </div>
     </div>
   </div>
 </template>
-<script>
-import helper from "./helper";
-
+<script lang="ts">
 import { defineComponent, ref } from "vue";
+import { useUi } from "@fast-crud/fast-crud";
+import helper from "./helper";
 export default defineComponent({
   name: "PageCover",
   setup() {
     const version = ref(import.meta.env.VITE_APP_VERSION);
-
+    const helperRef = ref(helper);
+    const { ui } = useUi();
     return {
-      version
-    };
-  },
-  data() {
-    return {
-      helper: helper
+      ui,
+      version,
+      helperRef
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/framework/login/index.vue b/packages/ui/certd-client/src/views/framework/login/index.vue
index a4b8728b7..d479ffccf 100644
--- a/packages/ui/certd-client/src/views/framework/login/index.vue
+++ b/packages/ui/certd-client/src/views/framework/login/index.vue
@@ -1,15 +1,6 @@
 <template>
   <div class="main">
-    <a-form
-      ref="formRef"
-      class="user-layout-login"
-      name="custom-validation"
-      :model="formState"
-      :rules="rules"
-      v-bind="layout"
-      @finish="handleFinish"
-      @finishFailed="handleFinishFailed"
-    >
+    <a-form ref="formRef" class="user-layout-login" name="custom-validation" :model="formState" :rules="rules" v-bind="layout" @finish="handleFinish" @finishFailed="handleFinishFailed">
       <!--      <div class="login-title">登录</div>-->
       <a-tabs :active-key="formState.loginType" :tab-bar-style="{ textAlign: 'center', borderBottom: 'unset' }">
         <a-tab-pane key="password" tab="用户名密码登录">
@@ -24,12 +15,7 @@
             </a-input>
           </a-form-item>
           <a-form-item has-feedback name="password">
-            <a-input-password
-              v-model:value="formState.password"
-              placeholder="请输入密码"
-              size="large"
-              autocomplete="off"
-            >
+            <a-input-password v-model:value="formState.password" placeholder="请输入密码" size="large" autocomplete="off">
               <template #prefix>
                 <span class="iconify" data-icon="ion:lock-closed-outline" data-inline="false"></span>
               </template>
@@ -47,12 +33,7 @@
           <a-form-item has-feedback name="imgCode">
             <a-row :gutter="16">
               <a-col class="gutter-row" :span="16">
-                <a-input
-                  v-model:value="formState.imgCode"
-                  placeholder="请输入图片验证码"
-                  size="large"
-                  autocomplete="off"
-                >
+                <a-input v-model:value="formState.imgCode" placeholder="请输入图片验证码" size="large" autocomplete="off">
                   <template #prefix>
                     <span class="iconify" data-icon="ion:image-outline" data-inline="false"></span>
                   </template>
@@ -74,13 +55,7 @@
                 </a-input>
               </a-col>
               <a-col class="gutter-row" :span="8">
-                <a-button
-                  class="getCaptcha"
-                  tabindex="-1"
-                  :disabled="smsSendBtnDisabled"
-                  @click="sendSmsCode"
-                  v-text="smsTime <= 0 ? '发送' : smsTime + ' s'"
-                ></a-button>
+                <a-button class="getCaptcha" tabindex="-1" :disabled="smsSendBtnDisabled" @click="sendSmsCode" v-text="smsTime <= 0 ? '发送' : smsTime + ' s'"></a-button>
               </a-col>
             </a-row>
           </a-form-item>
@@ -96,11 +71,11 @@
     </a-form>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { defineComponent, reactive, ref, toRaw, computed } from "vue";
 import { useUserStore } from "/src/store/modules/user";
 export default defineComponent({
-  name: "Login",
+  name: "LoginPage",
   setup() {
     const loading = ref(false);
     const userStore = useUserStore();
@@ -153,7 +128,7 @@ export default defineComponent({
       }
     };
 
-    const handleFinish = async (values) => {
+    const handleFinish = async (values: any) => {
       console.log(values, formState);
       loading.value = true;
       try {
@@ -163,7 +138,7 @@ export default defineComponent({
       }
     };
 
-    const handleFinishFailed = (errors) => {
+    const handleFinishFailed = (errors: any) => {
       console.log(errors);
     };
 
diff --git a/packages/ui/certd-client/src/views/framework/register/index.vue b/packages/ui/certd-client/src/views/framework/register/index.vue
index d63e8e102..328176e01 100644
--- a/packages/ui/certd-client/src/views/framework/register/index.vue
+++ b/packages/ui/certd-client/src/views/framework/register/index.vue
@@ -1,15 +1,6 @@
 <template>
   <div class="main">
-    <a-form
-      ref="formRef"
-      class="user-layout-login"
-      name="custom-validation"
-      :model="formState"
-      :rules="rules"
-      v-bind="layout"
-      @finish="handleFinish"
-      @finishFailed="handleFinishFailed"
-    >
+    <a-form ref="formRef" class="user-layout-login" name="custom-validation" :model="formState" :rules="rules" v-bind="layout" @finish="handleFinish" @finishFailed="handleFinishFailed">
       <a-form-item required has-feedback name="username">
         <a-input v-model:value="formState.username" size="large" autocomplete="off">
           <template #prefix>
@@ -42,15 +33,15 @@
     </a-form>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { defineComponent, reactive, ref, toRaw } from "vue";
 import { useUserStore } from "/src/store/modules/user";
 export default defineComponent({
-  name: "Register",
+  name: "RegisterPage",
   setup() {
     const userStore = useUserStore();
     const formRef = ref();
-    const formState = reactive({
+    const formState: any = reactive({
       username: "",
       password: ""
     });
@@ -87,7 +78,7 @@ export default defineComponent({
       }
     };
 
-    const handleFinish = async (values) => {
+    const handleFinish = async (values: any) => {
       console.log(values, formState);
       const userInfo = await userStore.login(
         toRaw({
@@ -97,7 +88,7 @@ export default defineComponent({
       );
     };
 
-    const handleFinishFailed = (errors) => {
+    const handleFinishFailed = (errors: any) => {
       console.log(errors);
     };
 
diff --git a/packages/ui/certd-client/src/views/sys/authority/permission/fs-permission-tree.vue b/packages/ui/certd-client/src/views/sys/authority/permission/fs-permission-tree.vue
index 692ca1ddb..7cff8e940 100644
--- a/packages/ui/certd-client/src/views/sys/authority/permission/fs-permission-tree.vue
+++ b/packages/ui/certd-client/src/views/sys/authority/permission/fs-permission-tree.vue
@@ -16,27 +16,19 @@
         <div class="node-title">{{ scope.title }}</div>
         <div v-if="editable === true" class="node-suffix">
           <fs-icon v-if="actions.add !== false" :icon="$fsui.icons.add" @click.stop="add(scope)" />
-          <fs-icon
-            v-if="actions.edit !== false && scope.id !== -1"
-            :icon="$fsui.icons.edit"
-            @click.stop="edit(scope)"
-          />
-          <fs-icon
-            v-if="actions.remove !== false && scope.id !== -1"
-            :icon="$fsui.icons.remove"
-            @click.stop="remove(scope)"
-          />
+          <fs-icon v-if="actions.edit !== false && scope.id !== -1" :icon="$fsui.icons.edit" @click.stop="edit(scope)" />
+          <fs-icon v-if="actions.remove !== false && scope.id !== -1" :icon="$fsui.icons.remove" @click.stop="remove(scope)" />
         </div>
       </div>
     </template>
   </a-tree>
 </template>
 
-<script>
+<script lang="ts">
+import { utils } from "@fast-crud/fast-crud";
 import _ from "lodash-es";
-import getEachDeep from "deepdash-es/getEachDeep";
-const eachDeep = getEachDeep(_);
-import { defineComponent, ref, computed } from "vue";
+import { computed, defineComponent, ref } from "vue";
+
 export default defineComponent({
   name: "FsPermissionTree",
   props: {
@@ -53,16 +45,16 @@ export default defineComponent({
     actions: {
       default: {}
     }
-  },
+  } as any,
   emits: ["add", "edit", "remove"],
-  setup(props, ctx) {
+  setup(props: any, ctx) {
     const treeRef = ref();
     const computedTree = computed(() => {
       if (props.tree == null) {
         return null;
       }
       const clone = _.cloneDeep(props.tree);
-      eachDeep(clone, (value, key, pNode, context) => {
+      utils.deepdash.forEachDeep(clone, (value: any, key: any, pNode: any, context: any) => {
         if (value == null) {
           return;
         }
@@ -102,16 +94,16 @@ export default defineComponent({
         }
       ];
     });
-    function add(scope) {
+    function add(scope: any) {
       ctx.emit("add", scope.dataRef);
     }
-    function edit(scope) {
+    function edit(scope: any) {
       ctx.emit("edit", scope.dataRef);
     }
-    function remove(scope) {
+    function remove(scope: any) {
       ctx.emit("remove", scope.dataRef);
     }
-    function onChecked(a, b, c) {
+    function onChecked(a: any, b: any, c: any) {
       console.log("chedcked", a, b, c);
     }
     function getChecked() {
diff --git a/packages/ui/certd-client/src/views/sys/authority/permission/index.vue b/packages/ui/certd-client/src/views/sys/authority/permission/index.vue
index b6293777c..b854aa3ee 100644
--- a/packages/ui/certd-client/src/views/sys/authority/permission/index.vue
+++ b/packages/ui/certd-client/src/views/sys/authority/permission/index.vue
@@ -5,7 +5,7 @@
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <a-button v-permission="'sys:auth:per:add'" style="margin-left: 20px" @click="addHandle({})">
-        <fs-icon :icon="$fsui.icons.add"></fs-icon>
+        <fs-icon :icon="ui.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>
@@ -14,46 +14,37 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose, CrudExpose, useUi } from "@fast-crud/fast-crud";
+import { defineComponent, onMounted, ref } from "vue";
 import createCrudOptions from "./crud.js";
 import FsPermissionTree from "./fs-permission-tree.vue";
 import { usePermission } from "/src/plugin/permission";
+import { useFs, useUi } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "AuthorityPermission",
   components: { FsPermissionTree },
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { crudExpose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    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({ crudExpose, crudOptions, permission: "sys:auth:per" });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, permission: "sys:auth:per" });
 
     // 页面打开后获取列表数据
     onMounted(async () => {
       await crudExpose.doRefresh();
     });
 
+    const { ui } = useUi();
+
     //用户业务代码
 
-    async function addHandle(item) {
-      await expose.openAdd({ initialForm: { parentId: item?.id ?? -1 } });
+    async function addHandle(item: any) {
+      await crudExpose.openAdd({ row: { parentId: item?.id ?? -1 } });
     }
-    async function editHandle(item) {
-      await expose.openEdit({ row: item });
+    async function editHandle(item: any) {
+      await crudExpose.openEdit({ row: item });
     }
-    async function removeHandle(item) {
-      await expose.doRemove({ row: { id: item.id } });
+    async function removeHandle(item: any) {
+      await crudExpose.doRemove({ row: { id: item.id }, index: null });
     }
 
     const { hasPermissions } = usePermission();
@@ -64,6 +55,7 @@ export default defineComponent({
     });
 
     return {
+      ui,
       crudBinding,
       crudRef,
       addHandle,
diff --git a/packages/ui/certd-client/src/views/sys/authority/role/api.js b/packages/ui/certd-client/src/views/sys/authority/role/api.ts
similarity index 75%
rename from packages/ui/certd-client/src/views/sys/authority/role/api.js
rename to packages/ui/certd-client/src/views/sys/authority/role/api.ts
index 6793b6fa3..92ecb1657 100644
--- a/packages/ui/certd-client/src/views/sys/authority/role/api.js
+++ b/packages/ui/certd-client/src/views/sys/authority/role/api.ts
@@ -1,6 +1,6 @@
 import { request } from "/src/api/service";
 const apiPrefix = "/sys/authority/role";
-export async function GetList(query) {
+export async function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "post",
@@ -8,7 +8,7 @@ export async function GetList(query) {
   });
 }
 
-export async function AddObj(obj) {
+export async function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -16,7 +16,7 @@ export async function AddObj(obj) {
   });
 }
 
-export async function UpdateObj(obj) {
+export async function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -24,7 +24,7 @@ export async function UpdateObj(obj) {
   });
 }
 
-export async function DelObj(id) {
+export async function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -32,7 +32,7 @@ export async function DelObj(id) {
   });
 }
 
-export async function GetObj(id) {
+export async function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "post",
@@ -46,7 +46,7 @@ export async function GetObj(id) {
  * @returns {*}
  * @constructor
  */
-export function getPermissionIds(roleId) {
+export function getPermissionIds(roleId: any) {
   return request({
     url: apiPrefix + "/getPermissionIds",
     method: "post",
@@ -61,7 +61,7 @@ export function getPermissionIds(roleId) {
  * @returns {*}
  * @constructor
  */
-export function DoAuthz(roleId, permissionIds) {
+export function DoAuthz(roleId: any, permissionIds: any) {
   return request({
     url: apiPrefix + "/authz",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/sys/authority/role/crud.jsx b/packages/ui/certd-client/src/views/sys/authority/role/crud.tsx
similarity index 76%
rename from packages/ui/certd-client/src/views/sys/authority/role/crud.jsx
rename to packages/ui/certd-client/src/views/sys/authority/role/crud.tsx
index a4c7290ef..00f37ef8a 100644
--- a/packages/ui/certd-client/src/views/sys/authority/role/crud.jsx
+++ b/packages/ui/certd-client/src/views/sys/authority/role/crud.tsx
@@ -1,17 +1,19 @@
 import * as api from "./api";
-export default function ({ expose, authz }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose, authz }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
   return {
@@ -37,6 +39,7 @@ export default function ({ expose, authz }) {
       columns: {
         id: {
           title: "id",
+          type: "text",
           form: { show: false }, // 表单配置
           column: {
             width: 70,
diff --git a/packages/ui/certd-client/src/views/sys/authority/role/index.vue b/packages/ui/certd-client/src/views/sys/authority/role/index.vue
index 089cf1cdd..e63e00e56 100644
--- a/packages/ui/certd-client/src/views/sys/authority/role/index.vue
+++ b/packages/ui/certd-client/src/views/sys/authority/role/index.vue
@@ -5,27 +5,21 @@
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding" />
     <a-modal v-model:visible="authzDialogVisible" width="860px" title="分配权限" @ok="updatePermission">
-      <fs-permission-tree
-        ref="permissionTreeRef"
-        v-model:checkedKeys="checkedKeys"
-        :tree="permissionTreeData"
-        :editable="false"
-        checkable
-        :replace-fields="{ key: 'id', label: 'title' }"
-      >
-      </fs-permission-tree>
+      <fs-permission-tree ref="permissionTreeRef" v-model:checkedKeys="checkedKeys" :tree="permissionTreeData" :editable="false" checkable :replace-fields="{ key: 'id', label: 'title' }"> </fs-permission-tree>
     </a-modal>
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
+<script lang="ts">
+import {defineComponent, onMounted, ref} from "vue";
+import {useFs} from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import * as permissionApi from "../permission/api";
 import * as api from "./api";
-import { message } from "ant-design-vue";
+import {message} from "ant-design-vue";
 import FsPermissionTree from "../permission/fs-permission-tree.vue";
+import {UseCrudPermissionCompProps, UseCrudPermissionExtraProps} from "/@/plugin/permission";
+
 function useAuthz() {
   const checkedKeys = ref();
 
@@ -38,7 +32,7 @@ function useAuthz() {
 
   // 如果勾选节点中存在非叶子节点，tree组件会将其所有子节点全部勾选
   // 所以要找出所有叶子节点，仅勾选叶子节点，tree组件会将父节点同步勾选
-  function getAllCheckedLeafNodeId(tree, checkedIds, temp) {
+  function getAllCheckedLeafNodeId(tree: any, checkedIds: any, temp: any) {
     for (let i = 0; i < tree.length; i++) {
       const item = tree[i];
       if (item.children && item.children.length !== 0) {
@@ -54,7 +48,7 @@ function useAuthz() {
   function authzClose() {
     authzDialogVisible.value = false;
   }
-  async function authzOpen(roleId) {
+  async function authzOpen(roleId: any) {
     permissionTreeData.value = await permissionApi.GetTree();
     checkedKeys.value = [];
     currentRoleId.value = roleId;
@@ -62,7 +56,7 @@ function useAuthz() {
     await updateChecked(roleId);
     authzDialogVisible.value = true;
   }
-  async function updateChecked(roleId) {
+  async function updateChecked(roleId: any) {
     let checkedIds = await api.getPermissionIds(roleId);
     // 找出所有的叶子节点
     checkedIds = getAllCheckedLeafNodeId(permissionTreeData.value, checkedIds, []);
@@ -95,32 +89,23 @@ export default defineComponent({
   setup() {
     //授权配置
     const authz = useAuthz();
-
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose, authz });
-    // 初始化crud配置
-    // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
-    // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
-    const permission = {
+    const permission: UseCrudPermissionCompProps = {
       prefix: "sys:auth:role", //权限代码前缀
-      extra: ({ hasActionPermission }) => {
+      extra: ({ hasActionPermission }: UseCrudPermissionExtraProps): any => {
         //额外按钮权限控制
         return { rowHandle: { buttons: { authz: { show: hasActionPermission("authz") } } } };
       }
     };
-    const { resetCrudOptions } = useCrud({ expose, crudOptions, permission });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+
+    // 初始化crud配置
+    // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
+    // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
+
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, authz, permission });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/sys/authority/user/api.js b/packages/ui/certd-client/src/views/sys/authority/user/api.ts
similarity index 72%
rename from packages/ui/certd-client/src/views/sys/authority/user/api.js
rename to packages/ui/certd-client/src/views/sys/authority/user/api.ts
index 55474d504..44ce65c86 100644
--- a/packages/ui/certd-client/src/views/sys/authority/user/api.js
+++ b/packages/ui/certd-client/src/views/sys/authority/user/api.ts
@@ -1,6 +1,6 @@
 import { request } from "/src/api/service";
 const apiPrefix = "/sys/authority/user";
-export async function GetList(query) {
+export async function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "post",
@@ -8,7 +8,7 @@ export async function GetList(query) {
   });
 }
 
-export async function AddObj(obj) {
+export async function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -16,7 +16,7 @@ export async function AddObj(obj) {
   });
 }
 
-export async function UpdateObj(obj) {
+export async function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -24,7 +24,7 @@ export async function UpdateObj(obj) {
   });
 }
 
-export async function DelObj(id) {
+export async function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -32,7 +32,7 @@ export async function DelObj(id) {
   });
 }
 
-export async function GetObj(id) {
+export async function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/sys/authority/user/crud.jsx b/packages/ui/certd-client/src/views/sys/authority/user/crud.tsx
similarity index 87%
rename from packages/ui/certd-client/src/views/sys/authority/user/crud.jsx
rename to packages/ui/certd-client/src/views/sys/authority/user/crud.tsx
index 291e31f35..d41cb0bdf 100644
--- a/packages/ui/certd-client/src/views/sys/authority/user/crud.jsx
+++ b/packages/ui/certd-client/src/views/sys/authority/user/crud.tsx
@@ -1,20 +1,22 @@
 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, 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);
   };
+
   return {
     crudOptions: {
       request: {
@@ -35,6 +37,7 @@ export default function ({ expose }) {
       columns: {
         id: {
           title: "id",
+          type: "text",
           form: { show: false }, // 表单配置
           column: {
             width: 70,
diff --git a/packages/ui/certd-client/src/views/sys/authority/user/index.vue b/packages/ui/certd-client/src/views/sys/authority/user/index.vue
index 33f0c7a55..c2f308df2 100644
--- a/packages/ui/certd-client/src/views/sys/authority/user/index.vue
+++ b/packages/ui/certd-client/src/views/sys/authority/user/index.vue
@@ -7,33 +7,21 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
+import { useCrud, useExpose, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 export default defineComponent({
   name: "AuthorityUser",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-
     // 初始化crud配置
     // 此处传入权限前缀进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
     // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
-    const { resetCrudOptions } = useCrud({ expose, crudOptions, permission: "sys:auth:user" });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, permission: "sys:auth:user" });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/tsconfig.json b/packages/ui/certd-client/tsconfig.json
index 2365be917..c9ea1dd5a 100644
--- a/packages/ui/certd-client/tsconfig.json
+++ b/packages/ui/certd-client/tsconfig.json
@@ -17,6 +17,7 @@
     "baseUrl": ".",
     "outDir": "./dist/ts",
     "types": [
+      "vite/client",
       "mocha",
       "chai",
       "node",