diff --git a/packages/ui/certd-client/.dependency-cruiser.js b/packages/ui/certd-client/.dependency-cruiser.js
new file mode 100644
index 00000000..c27a7b85
--- /dev/null
+++ b/packages/ui/certd-client/.dependency-cruiser.js
@@ -0,0 +1,463 @@
+/** @type {import('dependency-cruiser').IConfiguration} */
+module.exports = {
+  forbidden: [
+    /* rules from the 'recommended' preset: */
+    {
+      name: 'no-circular',
+      severity: 'warn',
+      comment:
+        'This dependency is part of a circular relationship. You might want to revise ' +
+        'your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ',
+      from: {},
+      to: {
+        circular: true
+      }
+    },
+    {
+      name: 'no-orphans',
+      comment:
+        "This is an orphan module - it's likely not used (anymore?). Either use it or " +
+        "remove it. If it's logical this module is an orphan (i.e. it's a config file), " +
+        "add an exception for it in your dependency-cruiser configuration. By default " +
+        "this rule does not scrutinize dot-files (e.g. .eslintrc.js), TypeScript declaration " +
+        "files (.d.ts), tsconfig.json and some of the babel and webpack configs.",
+      severity: 'warn',
+      from: {
+        orphan: true,
+        pathNot: [
+          '(^|/)\\.[^/]+\\.(js|cjs|mjs|ts|json)$', // dot files
+          '\\.d\\.ts$',                            // TypeScript declaration files
+          '(^|/)tsconfig\\.json$',                 // TypeScript config
+          '(^|/)(babel|webpack)\\.config\\.(js|cjs|mjs|ts|json)$' // other configs
+        ]
+      },
+      to: {},
+    },
+    {
+      name: 'no-deprecated-core',
+      comment:
+        'A module depends on a node core module that has been deprecated. Find an alternative - these are ' +
+        "bound to exist - node doesn't deprecate lightly.",
+      severity: 'warn',
+      from: {},
+      to: {
+        dependencyTypes: [
+          'core'
+        ],
+        path: [
+          '^(v8\/tools\/codemap)$',
+          '^(v8\/tools\/consarray)$',
+          '^(v8\/tools\/csvparser)$',
+          '^(v8\/tools\/logreader)$',
+          '^(v8\/tools\/profile_view)$',
+          '^(v8\/tools\/profile)$',
+          '^(v8\/tools\/SourceMap)$',
+          '^(v8\/tools\/splaytree)$',
+          '^(v8\/tools\/tickprocessor-driver)$',
+          '^(v8\/tools\/tickprocessor)$',
+          '^(node-inspect\/lib\/_inspect)$',
+          '^(node-inspect\/lib\/internal\/inspect_client)$',
+          '^(node-inspect\/lib\/internal\/inspect_repl)$',
+          '^(async_hooks)$',
+          '^(punycode)$',
+          '^(domain)$',
+          '^(constants)$',
+          '^(sys)$',
+          '^(_linklist)$',
+          '^(_stream_wrap)$'
+        ],
+      }
+    },
+    {
+      name: 'not-to-deprecated',
+      comment:
+        'This module uses a (version of an) npm module that has been deprecated. Either upgrade to a later ' +
+        'version of that module, or find an alternative. Deprecated modules are a security risk.',
+      severity: 'warn',
+      from: {},
+      to: {
+        dependencyTypes: [
+          'deprecated'
+        ]
+      }
+    },
+    {
+      name: 'no-non-package-json',
+      severity: 'error',
+      comment:
+        "This module depends on an npm package that isn't in the 'dependencies' section of your package.json. " +
+        "That's problematic as the package either (1) won't be available on live (2 - worse) will be " +
+        "available on live with an non-guaranteed version. Fix it by adding the package to the dependencies " +
+        "in your package.json.",
+      from: {},
+      to: {
+        dependencyTypes: [
+          'npm-no-pkg',
+          'npm-unknown'
+        ]
+      }
+    },
+    {
+      name: 'not-to-unresolvable',
+      comment:
+        "This module depends on a module that cannot be found ('resolved to disk'). If it's an npm " +
+        'module: add it to your package.json. In all other cases you likely already know what to do.',
+      severity: 'error',
+      from: {},
+      to: {
+        couldNotResolve: true
+      }
+    },
+    {
+      name: 'no-duplicate-dep-types',
+      comment:
+        "Likely this module depends on an external ('npm') package that occurs more than once " +
+        "in your package.json i.e. bot as a devDependencies and in dependencies. This will cause " +
+        "maintenance problems later on.",
+      severity: 'warn',
+      from: {},
+      to: {
+        moreThanOneDependencyType: true,
+        // as it's pretty common to have a type import be a type only import 
+        // _and_ (e.g.) a devDependency - don't consider type-only dependency
+        // types for this rule
+        dependencyTypesNot: ["type-only"]
+      }
+    },
+
+    /* rules you might want to tweak for your specific situation: */
+    {
+      name: 'not-to-test',
+      comment:
+        "This module depends on code within a folder that should only contain tests. As tests don't " +
+        "implement functionality this is odd. Either you're writing a test outside the test folder " +
+        "or there's something in the test folder that isn't a test.",
+      severity: 'error',
+      from: {
+        pathNot: '^(tests)'
+      },
+      to: {
+        path: '^(tests)'
+      }
+    },
+    {
+      name: 'not-to-spec',
+      comment:
+        'This module depends on a spec (test) file. The sole responsibility of a spec file is to test code. ' +
+        "If there's something in a spec that's of use to other modules, it doesn't have that single " +
+        'responsibility anymore. Factor it out into (e.g.) a separate utility/ helper or a mock.',
+      severity: 'error',
+      from: {},
+      to: {
+        path: '\\.(spec|test)\\.(js|mjs|cjs|ts|ls|coffee|litcoffee|coffee\\.md)$'
+      }
+    },
+    {
+      name: 'not-to-dev-dep',
+      severity: 'error',
+      comment:
+        "This module depends on an npm package from the 'devDependencies' section of your " +
+        'package.json. It looks like something that ships to production, though. To prevent problems ' +
+        "with npm packages that aren't there on production declare it (only!) in the 'dependencies'" +
+        'section of your package.json. If this module is development only - add it to the ' +
+        'from.pathNot re of the not-to-dev-dep rule in the dependency-cruiser configuration',
+      from: {
+        path: '^(src)',
+        pathNot: '\\.(spec|test)\\.(js|mjs|cjs|ts|ls|coffee|litcoffee|coffee\\.md)$'
+      },
+      to: {
+        dependencyTypes: [
+          'npm-dev'
+        ]
+      }
+    },
+    {
+      name: 'optional-deps-used',
+      severity: 'info',
+      comment:
+        "This module depends on an npm package that is declared as an optional dependency " +
+        "in your package.json. As this makes sense in limited situations only, it's flagged here. " +
+        "If you're using an optional dependency here by design - add an exception to your" +
+        "dependency-cruiser configuration.",
+      from: {},
+      to: {
+        dependencyTypes: [
+          'npm-optional'
+        ]
+      }
+    },
+    {
+      name: 'peer-deps-used',
+      comment:
+        "This module depends on an npm package that is declared as a peer dependency " +
+        "in your package.json. This makes sense if your package is e.g. a plugin, but in " +
+        "other cases - maybe not so much. If the use of a peer dependency is intentional " +
+        "add an exception to your dependency-cruiser configuration.",
+      severity: 'warn',
+      from: {},
+      to: {
+        dependencyTypes: [
+          'npm-peer'
+        ]
+      }
+    }
+  ],
+  options: {
+
+    /* conditions specifying which files not to follow further when encountered:
+       - path: a regular expression to match
+       - dependencyTypes: see https://github.com/sverweij/dependency-cruiser/blob/master/doc/rules-reference.md#dependencytypes-and-dependencytypesnot
+       for a complete list
+    */
+    doNotFollow: {
+      path: 'node_modules'
+    },
+
+    /* conditions specifying which dependencies to exclude
+       - path: a regular expression to match
+       - dynamic: a boolean indicating whether to ignore dynamic (true) or static (false) dependencies.
+          leave out if you want to exclude neither (recommended!)
+    */
+    // exclude : {
+    //   path: '',
+    //   dynamic: true
+    // },
+
+    /* pattern specifying which files to include (regular expression)
+       dependency-cruiser will skip everything not matching this pattern
+    */
+    // includeOnly : '',
+
+    /* dependency-cruiser will include modules matching against the focus
+       regular expression in its output, as well as their neighbours (direct
+       dependencies and dependents)
+    */
+    // focus : '',
+
+    /* list of module systems to cruise */
+    // moduleSystems: ['amd', 'cjs', 'es6', 'tsd'],
+
+    /* prefix for links in html and svg output (e.g. 'https://github.com/you/yourrepo/blob/develop/'
+       to open it on your online repo or `vscode://file/${process.cwd()}/` to 
+       open it in visual studio code),
+     */
+    // prefix: '',
+
+    /* false (the default): ignore dependencies that only exist before typescript-to-javascript compilation
+       true: also detect dependencies that only exist before typescript-to-javascript compilation
+       "specify": for each dependency identify whether it only exists before compilation or also after
+     */
+    tsPreCompilationDeps: true,
+    
+    /* 
+       list of extensions to scan that aren't javascript or compile-to-javascript. 
+       Empty by default. Only put extensions in here that you want to take into
+       account that are _not_ parsable. 
+    */
+    // extraExtensionsToScan: [".json", ".jpg", ".png", ".svg", ".webp"],
+
+    /* if true combines the package.jsons found from the module up to the base
+       folder the cruise is initiated from. Useful for how (some) mono-repos
+       manage dependencies & dependency definitions.
+     */
+    // combinedDependencies: false,
+
+    /* if true leave symlinks untouched, otherwise use the realpath */
+    // preserveSymlinks: false,
+
+    /* TypeScript project file ('tsconfig.json') to use for
+       (1) compilation and
+       (2) resolution (e.g. with the paths property)
+
+       The (optional) fileName attribute specifies which file to take (relative to
+       dependency-cruiser's current working directory). When not provided
+       defaults to './tsconfig.json'.
+     */
+    tsConfig: {
+      fileName: 'tsconfig.json'
+    },
+
+    /* Webpack configuration to use to get resolve options from.
+
+       The (optional) fileName attribute specifies which file to take (relative
+       to dependency-cruiser's current working directory. When not provided defaults
+       to './webpack.conf.js'.
+
+       The (optional) `env` and `args` attributes contain the parameters to be passed if
+       your webpack config is a function and takes them (see webpack documentation
+       for details)
+     */
+    // webpackConfig: {
+    //  fileName: './webpack.config.js',
+    //  env: {},
+    //  args: {},
+    // },
+
+    /* Babel config ('.babelrc', '.babelrc.json', '.babelrc.json5', ...) to use
+      for compilation (and whatever other naughty things babel plugins do to
+      source code). This feature is well tested and usable, but might change
+      behavior a bit over time (e.g. more precise results for used module 
+      systems) without dependency-cruiser getting a major version bump.
+     */
+    // babelConfig: {
+    //   fileName: './.babelrc'
+    // },
+
+    /* List of strings you have in use in addition to cjs/ es6 requires
+       & imports to declare module dependencies. Use this e.g. if you've
+       re-declared require, use a require-wrapper or use window.require as
+       a hack.
+    */
+    // exoticRequireStrings: [],
+    /* options to pass on to enhanced-resolve, the package dependency-cruiser
+       uses to resolve module references to disk. You can set most of these
+       options in a webpack.conf.js - this section is here for those
+       projects that don't have a separate webpack config file.
+
+       Note: settings in webpack.conf.js override the ones specified here.
+     */
+    enhancedResolveOptions: {
+      /* List of strings to consider as 'exports' fields in package.json. Use
+         ['exports'] when you use packages that use such a field and your environment
+         supports it (e.g. node ^12.19 || >=14.7 or recent versions of webpack).
+
+         If you have an `exportsFields` attribute in your webpack config, that one
+         will have precedence over the one specified here.
+      */ 
+      exportsFields: ["exports"],
+      /* List of conditions to check for in the exports field. e.g. use ['imports']
+         if you're only interested in exposed es6 modules, ['require'] for commonjs,
+         or all conditions at once `(['import', 'require', 'node', 'default']`)
+         if anything goes for you. Only works when the 'exportsFields' array is
+         non-empty.
+
+        If you have a 'conditionNames' attribute in your webpack config, that one will
+        have precedence over the one specified here.
+      */
+      conditionNames: ["import", "require", "node", "default"],
+      /*
+         The extensions, by default are the same as the ones dependency-cruiser
+         can access (run `npx depcruise --info` to see which ones that are in
+         _your_ environment. If that list is larger than what you need (e.g. 
+         it contains .js, .jsx, .ts, .tsx, .cts, .mts - but you don't use 
+         TypeScript you can pass just the extensions you actually use (e.g. 
+         [".js", ".jsx"]). This can speed up the most expensive step in 
+         dependency cruising (module resolution) quite a bit.
+       */
+      // extensions: [".js", ".jsx", ".ts", ".tsx", ".d.ts"],
+      /* 
+         If your TypeScript project makes use of types specified in 'types'
+         fields in package.jsons of external dependencies, specify "types"
+         in addition to "main" in here, so enhanced-resolve (the resolver
+         dependency-cruiser uses) knows to also look there. You can also do
+         this if you're not sure, but still use TypeScript. In a future version
+         of dependency-cruiser this will likely become the default.
+       */
+      mainFields: ["main", "types"],
+    },
+    reporterOptions: {
+      dot: {
+        /* pattern of modules that can be consolidated in the detailed
+           graphical dependency graph. The default pattern in this configuration
+           collapses everything in node_modules to one folder deep so you see
+           the external modules, but not the innards your app depends upon.
+         */
+        collapsePattern: 'node_modules/(@[^/]+/[^/]+|[^/]+)',
+
+        /* Options to tweak the appearance of your graph.See
+           https://github.com/sverweij/dependency-cruiser/blob/master/doc/options-reference.md#reporteroptions
+           for details and some examples. If you don't specify a theme
+           don't worry - dependency-cruiser will fall back to the default one.
+        */
+        // theme: {
+        //   graph: {
+        //     /* use splines: "ortho" for straight lines. Be aware though
+        //       graphviz might take a long time calculating ortho(gonal)
+        //       routings.
+        //    */
+        //     splines: "true"
+        //   },
+        //   modules: [
+        //     {
+        //       criteria: { matchesFocus: true },
+        //       attributes: {
+        //         fillcolor: "lime",
+        //         penwidth: 2,
+        //       },
+        //     },
+        //     {
+        //       criteria: { matchesFocus: false },
+        //       attributes: {
+        //         fillcolor: "lightgrey",
+        //       },
+        //     },
+        //     {
+        //       criteria: { matchesReaches: true },
+        //       attributes: {
+        //         fillcolor: "lime",
+        //         penwidth: 2,
+        //       },
+        //     },
+        //     {
+        //       criteria: { matchesReaches: false },
+        //       attributes: {
+        //         fillcolor: "lightgrey",
+        //       },
+        //     },
+        //     {
+        //       criteria: { source: "^src/model" },
+        //       attributes: { fillcolor: "#ccccff" }
+        //     },
+        //     {
+        //       criteria: { source: "^src/view" },
+        //       attributes: { fillcolor: "#ccffcc" }
+        //     },
+        //   ],
+        //   dependencies: [
+        //     {
+        //       criteria: { "rules[0].severity": "error" },
+        //       attributes: { fontcolor: "red", color: "red" }
+        //     },
+        //     {
+        //       criteria: { "rules[0].severity": "warn" },
+        //       attributes: { fontcolor: "orange", color: "orange" }
+        //     },
+        //     {
+        //       criteria: { "rules[0].severity": "info" },
+        //       attributes: { fontcolor: "blue", color: "blue" }
+        //     },
+        //     {
+        //       criteria: { resolved: "^src/model" },
+        //       attributes: { color: "#0000ff77" }
+        //     },
+        //     {
+        //       criteria: { resolved: "^src/view" },
+        //       attributes: { color: "#00770077" }
+        //     }
+        //   ]
+        // }
+      },
+      archi: {
+        /* pattern of modules that can be consolidated in the high level
+          graphical dependency graph. If you use the high level graphical
+          dependency graph reporter (`archi`) you probably want to tweak
+          this collapsePattern to your situation.
+        */
+        collapsePattern: '^(packages|src|lib|app|bin|test(s?)|spec(s?))/[^/]+|node_modules/(@[^/]+/[^/]+|[^/]+)',
+
+        /* Options to tweak the appearance of your graph.See
+           https://github.com/sverweij/dependency-cruiser/blob/master/doc/options-reference.md#reporteroptions
+           for details and some examples. If you don't specify a theme
+           for 'archi' dependency-cruiser will use the one specified in the
+           dot section (see above), if any, and otherwise use the default one.
+         */
+        // theme: {
+        // },
+      },
+      "text": {
+        "highlightFocused": true
+      },
+    }
+  }
+};
+// generated: dependency-cruiser@12.11.0 on 2023-03-24T14:11:38.647Z
diff --git a/packages/ui/certd-client/.eslintrc.js b/packages/ui/certd-client/.eslintrc.js
index c7996c1f..a208b621 100644
--- a/packages/ui/certd-client/.eslintrc.js
+++ b/packages/ui/certd-client/.eslintrc.js
@@ -16,14 +16,10 @@ module.exports = {
       tsx: true
     }
   },
-  extends: [
-    "plugin:vue/vue3-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
-    "prettier"
-  ],
+  extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "prettier"],
   rules: {
     //"max-len": [0, 200, 2, { ignoreUrls: true }],
+    "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-types": "off",
diff --git a/packages/ui/certd-client/README.md b/packages/ui/certd-client/README.md
index c0166cfd..b360e070 100644
--- a/packages/ui/certd-client/README.md
+++ b/packages/ui/certd-client/README.md
@@ -34,3 +34,4 @@ https://github.com/fast-crud/fs-server-js
 
 
 
+
diff --git a/packages/ui/certd-client/package.json b/packages/ui/certd-client/package.json
index ef5b0cda..6b448fe4 100644
--- a/packages/ui/certd-client/package.json
+++ b/packages/ui/certd-client/package.json
@@ -6,109 +6,118 @@
     "dev": "vite",
     "dev:pm": "vite --mode pm",
     "dev:force": "vite --force",
-    "debug": "vite --mode debug",
+    "debug": "vite --mode debug --open",
     "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",
     "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
     "upgrade": "yarn upgrade-interactive --latest",
-    "tsc": "vue-tsc --noEmit --skipLibCheck"
+    "tsc": "vue-tsc --noEmit --skipLibCheck",
+    "circle:check": "pnpm dependency-cruise --validate --output-type err-html -f dependency-report.html src",
+    "afterPubPush": "git add . && git commit -m \"build: publish success\" && git push"
   },
   "author": "Greper",
   "license": "MIT",
   "dependencies": {
-    "@ant-design/colors": "^6.0.0",
-    "@ant-design/icons-vue": "^6.0.1",
-    "@certd/acme-client": "^1.1.6",
-    "@fast-crud/fast-crud": "^1.14.4",
-    "@fast-crud/fast-extends": "^1.14.4",
-    "@fast-crud/ui-antdv": "^1.14.4",
-    "@fast-crud/ui-interface": "^1.14.4",
-    "@iconify/iconify": "^3.0.1",
-    "@iconify/json": "^2.1.151",
+    "@ant-design/colors": "^7.0.0",
+    "@ant-design/icons-vue": "^6.1.0",
+    "@aws-sdk/client-s3": "^3.383.0",
+    "@aws-sdk/s3-request-presigner": "^3.383.0",
+    "@fast-crud/fast-crud": "^1.18.3",
+    "@fast-crud/fast-extends": "^1.18.3",
+    "@fast-crud/ui-antdv": "^1.18.3",
+    "@fast-crud/ui-interface": "^1.18.3",
+    "@iconify/iconify": "^3.1.1",
+    "@iconify/json": "^2.2.98",
     "@purge-icons/generated": "^0.9.0",
     "@soerenmartius/vue3-clipboard": "^0.1.2",
-    "ant-design-vue": "^3.2.15",
-    "axios": "^1.2.1",
+    "ant-design-vue": "^3.2.20",
+    "axios": "^1.3.4",
     "axios-mock-adapter": "^1.21.2",
     "base64-js": "^1.5.1",
-    "better-scroll": "^2.5.0",
-    "china-division": "^2.4.0",
-    "core-js": "^3.26.1",
-    "cos-js-sdk-v5": "^1.4.15-beta.0",
+    "better-scroll": "^2.5.1",
+    "china-division": "^2.6.1",
+    "core-js": "^3.32.0",
+    "cos-js-sdk-v5": "^1.4.19",
     "cropperjs": "^1.5.13",
-    "dayjs": "^1.11.7",
-    "deepdash-es": "5.3.5",
-    "highlight.js": "^11.7.0",
+    "dayjs": "^1.11.9",
+    "highlight.js": "^11.8.0",
     "humanize-duration": "^3.27.3",
     "lodash-es": "^4.17.21",
-    "mitt": "^3.0.0",
+    "mitt": "^3.0.1",
     "nanoid": "^4.0.0",
     "nprogress": "^0.2.0",
     "object-assign": "^4.1.1",
-    "pinia": "2.0.28",
+    "pinia": "2.1.6",
     "qiniu-js": "^3.4.1",
-    "sortablejs": "^1.14.0",
-    "vue": "^3.2.45",
+    "sortablejs": "^1.15.0",
+    "vue": "^3.3.4",
     "vue-cropperjs": "^5.0.0",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.5",
-    "vuedraggable": "^4.0.1"
+    "vue-router": "^4.2.4",
+    "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@types/chai": "^4.3.5",
+    "@types/lodash-es": "^4.17.8",
     "@certd/pipeline": "^1.1.6",
-    "@rollup/plugin-commonjs": "^23.0.4",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@types/chai": "^4.3.4",
-    "@types/lodash-es": "^4.17.7",
     "@types/mocha": "^10.0.1",
-    "@types/node": "^18.11.15",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
-    "@vitejs/plugin-legacy": "^3.0.1",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "@vue/compiler-sfc": "^3.2.45",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.2.6",
+    "@types/node": "^20.4.7",
+    "@types/nprogress": "^0.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
+    "@vitejs/plugin-legacy": "^4.1.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/test-utils": "^2.4.1",
     "autoprefixer": "^10.4.14",
     "caller-path": "^4.0.0",
     "chai": "^4.3.7",
-    "eslint": "8.29.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.26.0",
+    "dependency-cruiser": "^13.1.1",
+    "dot": "^1.1.3",
+    "eslint": "8.46.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.0.1",
-    "eslint-plugin-vue": "^9.8.0",
-    "esno": "^0.16.3",
-    "husky": "^8.0.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.16.1",
+    "esno": "^0.17.0",
+    "husky": "^8.0.3",
     "less": "^4.1.3",
-    "less-loader": "^11.0.0",
-    "lint-staged": "^13.1.0",
-    "postcss": "^8.4.23",
-    "prettier": "2.8.1",
+    "less-loader": "^11.1.3",
+    "lint-staged": "^13.2.3",
+    "postcss": "^8.4.27",
+    "prettier": "3.0.1",
     "pretty-quick": "^3.1.3",
-    "rimraf": "^3.0.2",
-    "rollup": "^3.7.4",
-    "rollup-plugin-visualizer": "^5.8.2",
-    "stylelint": "^14.16.0",
-    "stylelint-config-prettier": "^9.0.4",
-    "stylelint-order": "^5.0.0",
-    "tailwindcss": "^3.3.2",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.27.2",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "stylelint": "^15.10.2",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-order": "^6.0.3",
+    "tailwindcss": "^3.3.3.3",
+    "terser": "^5.19.2",
     "ts-node": "^10.9.1",
-    "typescript": "4.9.4",
-    "vite": "^4.0.1",
+    "typescript": "5.1.6",
+    "unplugin-vue-define-options": "^1.3.14",
+    "vite": "^4.4.8",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-optimize-persist": "^0.1.2",
     "vite-plugin-package-config": "^0.1.1",
     "vite-plugin-purge-icons": "^0.9.2",
-    "vite-plugin-theme": "^0.8.1",
-    "vue-eslint-parser": "^9.1.0",
-    "vue-tsc": "^0.40.13"
+    "vite-plugin-theme": "^0.8.6",
+    "vite-plugin-windicss": "^1.9.0",
+    "vue-eslint-parser": "^9.3.1",
+    "vue-tsc": "^1.8.8",
+    "windicss": "^3.5.6"
   },
   "husky": {
     "hooks": {
diff --git a/packages/ui/certd-client/public/index.html b/packages/ui/certd-client/public/index.html
deleted file mode 100644
index 3e5a1396..00000000
--- a/packages/ui/certd-client/public/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
diff --git a/packages/ui/certd-client/public/template-import.csv b/packages/ui/certd-client/public/template-import.csv
new file mode 100644
index 00000000..457000ed
--- /dev/null
+++ b/packages/ui/certd-client/public/template-import.csv
@@ -0,0 +1,6 @@
+name,mobile
+张三,18603040102
+李四,18603040103
+王五,18603040104
+赵六,18603040105
+田七,18603040106
diff --git a/packages/ui/certd-client/src/App.vue b/packages/ui/certd-client/src/App.vue
index 414d5081..64d04042 100644
--- a/packages/ui/certd-client/src/App.vue
+++ b/packages/ui/certd-client/src/App.vue
@@ -4,10 +4,10 @@
   </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";
+import { provide, ref, nextTick, getCurrentInstance } from "vue";
 import { usePageStore } from "/src/store/modules/page";
 import { useResourceStore } from "/src/store/modules/resource";
 import { useSettingStore } from "/@/store/modules/settings";
@@ -16,7 +16,7 @@ import "dayjs/locale/en";
 import dayjs from "dayjs";
 export default {
   name: "App",
-  setup() {
+  setup(props: any, ctx: any) {
     //刷新页面方法
     const routerEnabled = ref(true);
     const locale = ref(zhCN);
@@ -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/tools.ts b/packages/ui/certd-client/src/api/tools.ts
index d26c4f8c..ccf032d4 100644
--- a/packages/ui/certd-client/src/api/tools.ts
+++ b/packages/ui/certd-client/src/api/tools.ts
@@ -49,13 +49,14 @@ export function responseError(data = {}, msg = "请求失败", code = 500) {
  * @param {Error} error 错误对象
  */
 export function errorLog(error: any) {
-  if (error?.response?.data?.message) {
-    error.message = error?.response?.data?.message;
-  }
   // 打印到控制台
   console.error("errorLog", error);
+  let message = error.message;
+  if (error.response?.data?.message) {
+    message = error.response.data.message;
+  }
   // 显示提示
-  uiContext.get().notification.error({ message: error.message });
+  uiContext.get().notification.error({ message });
 }
 
 /**
diff --git a/packages/ui/certd-client/src/components/highlight/index.vue b/packages/ui/certd-client/src/components/highlight/index.vue
index 67388235..ba826d25 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/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 6e3866f7..00000000
--- 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 664f4132..00000000
--- 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 a1979ef0..ed4da122 100644
--- a/packages/ui/certd-client/src/layout/components/locale/index.vue
+++ b/packages/ui/certd-client/src/layout/components/locale/index.vue
@@ -22,7 +22,7 @@
   </a-dropdown>
 </template>
 
-<script>
+<script lang="ts">
 import i18n from "../../../i18n";
 import { computed, inject } from "vue";
 import _ from "lodash-es";
@@ -30,8 +30,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,
@@ -44,9 +44,9 @@ 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);
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 cb2cb58d..ecb21df3 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 9d16a502..0daefde1 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 21ddddb8..6f289abc 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">
@@ -217,6 +202,11 @@ export default {
 }
 //antdv
 .fs-multiple-page-control-group {
+  .ant-tabs-tab-remove {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
   .ant-tabs-bar {
     margin: 0;
     border-bottom: 1px solid #f0f0f0;
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 599baf34..f44368f2 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 bc8a92c0..4f0e6e34 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 24af1985..be8aef97 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 1d94d673..e1b5c6b8 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";
@@ -152,6 +152,11 @@ export default {
     background: #f6f6f6;
     display: flex;
     justify-content: space-between;
+
+    > div {
+      height: auto;
+      padding: 5px;
+    }
   }
   .header-buttons {
     display: flex;
diff --git a/packages/ui/certd-client/src/layout/layout-outside.vue b/packages/ui/certd-client/src/layout/layout-outside.vue
index 862a68d0..68e33fbf 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"
 };
@@ -75,7 +75,10 @@ export default {
 
       .top {
         text-align: center;
-
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
         .header {
           height: 44px;
           line-height: 44px;
diff --git a/packages/ui/certd-client/src/main.ts b/packages/ui/certd-client/src/main.ts
index 1e7b9211..f472005b 100644
--- a/packages/ui/certd-client/src/main.ts
+++ b/packages/ui/certd-client/src/main.ts
@@ -2,15 +2,19 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import Antd from "ant-design-vue";
+import "ant-design-vue/dist/antd.less";
 import "./style/common.less";
+
 import i18n from "./i18n";
 import store from "./store";
 import components from "./components";
 import plugin from "./plugin/";
 
+// 正式项目请删除mock，避免影响性能
+//import "./mock";
+
 // @ts-ignore
 const app = createApp(App);
-// 尽量
 app.use(Antd);
 app.use(router);
 app.use(i18n);
diff --git a/packages/ui/certd-client/src/mock/base.js b/packages/ui/certd-client/src/mock/base.ts
similarity index 83%
rename from packages/ui/certd-client/src/mock/base.js
rename to packages/ui/certd-client/src/mock/base.ts
index 1cacbac7..c5084a6a 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,38 @@ 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 {
+function findByIds(ids: any[], list: any) {
+  const res = [];
+  for (const id of ids) {
+    const item = findById(id, list);
+    if (item != null) {
+      res.push(item);
+    }
+  }
+  console.log("findbyids", res, ids);
+  return res;
+}
+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 +66,7 @@ export default {
       {
         path: "/mock/" + name + "/page",
         method: "get",
-        handle(req) {
+        handle(req: any) {
           let data = [...list];
           let limit = 20;
           let offset = 0;
@@ -65,9 +76,10 @@ export default {
               item.lazy = false;
             }
           }
-          let orderProp, orderAsc;
+          let orderProp: any, orderAsc: any;
           if (req && req.body) {
-            const { page, query, sort } = req.body;
+            const { page, sort } = req.body;
+            let query = req.body.query;
             if (page.limit != null) {
               limit = parseInt(page.limit);
             }
@@ -76,9 +88,9 @@ export default {
             }
             orderProp = sort.prop;
             orderAsc = sort.asc;
-
+            query = query || {};
             if (Object.keys(query).length > 0) {
-              data = list.filter((item) => {
+              data = list.filter((item: any) => {
                 let allFound = true; // 是否所有条件都符合
                 for (const key in query) {
                   // 判定某一个条件
@@ -169,16 +181,10 @@ export default {
       {
         path: "/mock/" + name + "/get",
         method: "get",
-        handle(req) {
+        handle(req: any) {
           let id = req.params.id;
           id = parseInt(id);
-          let current = null;
-          for (const item of list) {
-            if (item.id === id) {
-              current = item;
-              break;
-            }
-          }
+          const current = findById(req.body.id, list);
           return {
             code: 0,
             msg: "success",
@@ -186,10 +192,23 @@ export default {
           };
         }
       },
+      {
+        path: "/mock/" + name + "/byIds",
+        method: "post",
+        handle(req: any) {
+          const ids = req.body.ids;
+          const res = findByIds(ids, list);
+          return {
+            code: 0,
+            msg: "success",
+            data: res
+          };
+        }
+      },
       {
         path: "/mock/" + name + "/add",
         method: "post",
-        handle(req) {
+        handle(req: any) {
           req.body.id = ++options.idGenerator;
           list.unshift(req.body);
           return {
@@ -202,7 +221,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 +244,7 @@ export default {
       {
         path: "/mock/" + name + "/delete",
         method: "post",
-        handle(req) {
+        handle(req: any): any {
           delById(req, list);
           return {
             code: 0,
@@ -237,7 +256,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 +274,7 @@ export default {
       {
         path: "/mock/" + name + "/delete",
         method: "post",
-        handle(req) {
+        handle(req: any): any {
           delById(req, list);
           return {
             code: 0,
@@ -267,7 +286,7 @@ export default {
       {
         path: "/mock/" + name + "/all",
         method: "post",
-        handle(req) {
+        handle(req: any): any {
           return {
             code: 0,
             msg: "success",
@@ -278,3 +297,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 69%
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 d758ddd4..0ccb7b53 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";
-
+import _ from "lodash-es";
 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,25 @@ const textStatus = [
   { id: "0", text: "关闭", color: "red" }
 ];
 
-export function GetTreeChildrenByParentId(parentId) {
+let manyStatus = [
+  { 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" }
+];
+for (let i = 0; i < 2; i++) {
+  manyStatus = manyStatus.concat(_.cloneDeep(manyStatus));
+}
+let idIndex = 0;
+for (const item of manyStatus) {
+  idIndex++;
+  item.value = idIndex + "";
+}
+
+export function GetTreeChildrenByParentId(parentId: any) {
   return TreeNodesLazyLoader.getChildren(parentId);
 }
 
-export function GetNodesByValues(values) {
+export function GetNodesByValues(values: any) {
   return TreeNodesLazyLoader.getNodesByValues(values);
 }
 
@@ -51,6 +67,17 @@ export default [
       };
     }
   },
+  {
+    path: "/mock/dicts/ManyOpenStatusEnum",
+    method: "get",
+    handle() {
+      return {
+        code: 0,
+        msg: "success",
+        data: manyStatus
+      };
+    }
+  },
   {
     path: "/mock/dicts/moreOpenStatusEnum",
     method: "get",
@@ -99,7 +126,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 +138,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 c1bbb64a..aa35ab97 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 72%
rename from packages/ui/certd-client/src/mock/index.js
rename to packages/ui/certd-client/src/mock/index.ts
index 4494fc5f..6234e34e 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.globEager("./common/mock.*.js");
-const apiMocks = import.meta.globEager("../api/modules/*.mock.ts");
-const viewMocks = import.meta.globEager("../views/**/mock.js");
+// @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,9 +19,9 @@ _.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) => {
+    mock.onAny(new RegExp(item.path)).reply(async (config: any) => {
       console.log("------------fake request start -------------");
       console.log("request:", config);
       const data = config.data ? JSON.parse(config.data) : {};
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 3ef75a58..ed9d021c 100644
--- a/packages/ui/certd-client/src/plugin/fast-crud/index.tsx
+++ b/packages/ui/certd-client/src/plugin/fast-crud/index.tsx
@@ -1,12 +1,14 @@
 import { request, requestForMock } from "/src/api/service";
-import { ColumnCompositionProps, CrudOptions, FastCrud, setLogger, useColumns, UseCrudProps, useTypes } from "@fast-crud/fast-crud";
+import { ColumnCompositionProps, CrudOptions, FastCrud, PageQuery, PageRes, setLogger, TransformResProps, useColumns, UseCrudProps, UserPageQuery, useTypes, useUi } from "@fast-crud/fast-crud";
 import "@fast-crud/fast-crud/dist/style.css";
-import { FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExtendsUploader } from "@fast-crud/fast-extends";
+import { FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExtendsUploader, FsUploaderS3SignedUrlType } 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 { App } from "vue";
+import { GetSignedUrl } from "/@/views/crud/component/uploader/s3/api";
+import { notification } from "ant-design-vue";
 
 function install(app: App, options: any = {}) {
   app.use(UiAntdv);
@@ -14,7 +16,7 @@ function install(app: App, options: any = {}) {
   setLogger({ level: "info" });
   app.use(FastCrud, {
     i18n: options.i18n,
-    async dictRequest({ url }) {
+    async dictRequest({ url }: any) {
       if (url && url.startsWith("/mock")) {
         //如果是crud开头的dict请求视为mock
         return await requestForMock({ url, method: "post" });
@@ -23,16 +25,33 @@ function install(app: App, options: any = {}) {
     },
     /**
      * useCrud时会被执行
-     * @param context，useCrud的参数
+     * @param props，useCrud的参数
      */
-    commonOptions(context: UseCrudProps) {
-      const crudBinding = context.expose?.crudBinding;
+    commonOptions(props: UseCrudProps): CrudOptions {
+      const crudBinding = props.crudExpose?.crudBinding;
       const opts: CrudOptions = {
         table: {
           size: "small",
           pagination: false,
-          onResizeColumn: (w: any, col: any) => {
-            crudBinding.value.table.columnsMap[col.key].width = w;
+          onResizeColumn: (w: number, col: any) => {
+            if (crudBinding.value?.table?.columnsMap && crudBinding.value?.table?.columnsMap[col.key]) {
+              crudBinding.value.table.columnsMap[col.key].width = w;
+            }
+          },
+          conditionalRender: {
+            match(scope) {
+              //不能用 !scope.value ， 否则switch组件设置为关之后就消失了
+              const { value, key } = scope;
+              return !value && key != "_index" && value != false;
+            },
+            render() {
+              return "-";
+            }
+          }
+        },
+        toolbar: {
+          export: {
+            fileType: "excel"
           }
         },
         rowHandle: {
@@ -48,7 +67,7 @@ function install(app: App, options: any = {}) {
           }
         },
         request: {
-          transformQuery: ({ page, form, sort }) => {
+          transformQuery: ({ page, form, sort }: PageQuery): UserPageQuery => {
             const limit = page.pageSize;
             const currentPage = page.currentPage ?? 1;
             const offset = limit * (currentPage - 1);
@@ -64,7 +83,7 @@ function install(app: App, options: any = {}) {
               sort
             };
           },
-          transformRes: ({ res }) => {
+          transformRes: ({ res }: TransformResProps): PageRes => {
             const pageSize = res.limit;
             let currentPage = res.offset / pageSize;
             if (res.offset % pageSize === 0) {
@@ -82,6 +101,13 @@ function install(app: App, options: any = {}) {
               width: "120px"
             }
           },
+          async afterSubmit({ mode }) {
+            if (mode === "add") {
+              notification.success({ message: "添加成功" });
+            } else if (mode === "edit") {
+              notification.success({ message: "保存成功" });
+            }
+          },
           wrapperCol: {
             span: null
           }
@@ -89,7 +115,8 @@ function install(app: App, options: any = {}) {
       };
 
       // 从 useCrud({permission}) 里获取permission参数，去设置各个按钮的权限
-      const crudPermission = useCrudPermission({ permission: context.permission });
+      const permission = props.context?.permission || null;
+      const crudPermission = useCrudPermission({ permission });
       return crudPermission.merge(opts);
     }
   });
@@ -101,28 +128,28 @@ function install(app: App, options: any = {}) {
     // @ts-ignore
     defaultType: "cos",
     cos: {
+      keepName: true,
       domain: "https://d2p-demo-1251260344.cos.ap-guangzhou.myqcloud.com",
       bucket: "d2p-demo-1251260344",
       region: "ap-guangzhou",
       secretId: "", //
       secretKey: "", // 传了secretKey 和secretId 代表使用本地签名模式（不安全，生产环境不推荐）
-      getAuthorization(custom) {
+      async getAuthorization(custom: any) {
         // 不传secretKey代表使用临时签名模式,此时此参数必传（安全，生产环境推荐）
-        return request({
+        const ret = request({
           url: "http://www.docmirror.cn:7070/api/upload/cos/getAuthorization",
           method: "get"
-        }).then((ret: any) => {
-          // 返回结构如下
-          // ret.data:{
-          //   TmpSecretId,
-          //   TmpSecretKey,
-          //   XCosSecurityToken,
-          //   ExpiredTime, // SDK 在 ExpiredTime 时间前，不会再次调用 getAuthorization
-          // }
-          return ret;
         });
+        // 返回结构要求如下
+        // ret.data:{
+        //   TmpSecretId,
+        //   TmpSecretKey,
+        //   XCosSecurityToken,
+        //   ExpiredTime, // SDK 在 ExpiredTime 时间前，不会再次调用 getAuthorization
+        // }
+        return ret;
       },
-      successHandle(ret) {
+      successHandle(ret: any) {
         // 上传完成后可以在此处处理结果，修改url什么的
         console.log("success handle:", ret);
         return ret;
@@ -134,6 +161,7 @@ function install(app: App, options: any = {}) {
       region: "oss-cn-shenzhen",
       accessKeyId: "",
       accessKeySecret: "",
+      keepName: true,
       async getAuthorization(custom: any, context: any) {
         // 不传accessKeySecret代表使用临时签名模式,此时此参数必传（安全，生产环境推荐）
         const ret = await request({
@@ -147,33 +175,62 @@ function install(app: App, options: any = {}) {
         // sdk配置
         secure: true // 默认为非https上传,为了安全，设置为true
       },
-      successHandle(ret) {
+      successHandle(ret: any) {
         // 上传完成后可以在此处处理结果，修改url什么的
         console.log("success handle:", ret);
         return ret;
       }
     },
     qiniu: {
+      keepName: true,
       bucket: "d2p-demo",
-      async getToken(options) {
+      async getToken(options: any) {
         const ret = await request({
           url: "http://www.docmirror.cn:7070/api/upload/qiniu/getToken",
           method: "get"
         });
         return ret; // {token:xxx,expires:xxx}
       },
-      successHandle(ret) {
+      successHandle(ret: any) {
         // 上传完成后可以在此处处理结果，修改url什么的
         console.log("success handle:", ret);
         return ret;
       },
       domain: "http://d2p.file.handsfree.work/"
     },
+    s3: {
+      keepName: true,
+      //同时也支持minio
+      bucket: "fast-crud",
+      sdkOpts: {
+        s3ForcePathStyle: true,
+        signatureVersion: "v4",
+        region: "us-east-1",
+        forcePathStyle: true,
+        //minio与s3完全适配
+        endpoint: "https://play.min.io",
+        credentials: {
+          //不建议在客户端使用secretAccessKey来上传
+          accessKeyId: "Q3AM3UQ867SPQQA43P2F", //访问登录名
+          secretAccessKey: "zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG" //访问密码
+        }
+      },
+      //预签名配置，向后端获取上传的预签名连接
+      async getSignedUrl(bucket: string, key: string, options: any, type: FsUploaderS3SignedUrlType) {
+        return await GetSignedUrl(bucket, key, type);
+      },
+      successHandle(ret: any) {
+        // 上传完成后可以在此处处理结果，修改url什么的
+        console.log("success handle:", ret);
+        return ret;
+      }
+    },
     form: {
+      keepName: true,
       action: "http://www.docmirror.cn:7070/api/upload/form/upload",
       name: "file",
       withCredentials: false,
-      uploadRequest: async ({ action, file, onProgress }) => {
+      uploadRequest: async ({ action, file, onProgress }: any) => {
         // @ts-ignore
         const data = new FormData();
         data.append("file", file);
@@ -190,7 +247,7 @@ function install(app: App, options: any = {}) {
           }
         });
       },
-      successHandle(ret) {
+      successHandle(ret: any) {
         // 上传完成后的结果处理， 此处应返回格式为{url:xxx}
         return {
           url: "http://www.docmirror.cn:7070" + ret,
@@ -203,14 +260,23 @@ function install(app: App, options: any = {}) {
   //安装editor
   app.use(FsExtendsEditor, {
     //编辑器的公共配置
-    wangEditor: {}
+    wangEditor: {
+      editorConfig: {
+        MENU_CONF: {}
+      },
+      toolbarConfig: {}
+    }
   });
   app.use(FsExtendsJson);
   app.use(FsExtendsTime);
   app.use(FsExtendsCopyable);
 
+  const { addTypes, getType } = useTypes();
+  //此处演示修改官方字段类型
+  const textType = getType("text");
+  textType.search.autoSearchTrigger = "change"; //修改官方的字段类型，设置为文本变化就触发查询
+
   // 此处演示自定义字段类型
-  const { addTypes } = useTypes();
   addTypes({
     time2: {
       //如果与官方字段类型同名，将会覆盖官方的字段类型
diff --git a/packages/ui/certd-client/src/plugin/iconfont/iconfont.js b/packages/ui/certd-client/src/plugin/iconfont/iconfont.js
index 357dc3bd..ecb94059 100644
--- a/packages/ui/certd-client/src/plugin/iconfont/iconfont.js
+++ b/packages/ui/certd-client/src/plugin/iconfont/iconfont.js
@@ -1 +1,61 @@
-!function(t){var e,c,o,n,l,a='<svg><symbol id="icon-CI" viewBox="0 0 1024 1024"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path><path d="M730 311.9h-50.4c-4.4 0-8 3.6-8 8v384.2c0 4.4 3.6 8 8 8H730c4.4 0 8-3.6 8-8V319.9c0-4.4-3.6-8-8-8zM448.6 361.5c49.5 0 83.1 31.5 87 77.6 0.4 4.2 3.8 7.4 8 7.4h52.6c2.4 0 4.4-2 4.4-4.4 0-81.2-64-138.1-152.3-138.1C345.4 304 286 373.5 286 488.4v49c0 114 59.4 182.6 162.3 182.6 88 0 152.3-55.1 152.3-132.5 0-2.4-2-4.4-4.4-4.4h-52.7c-4.2 0-7.6 3.2-8 7.3-4.2 43-37.7 72.4-87 72.4-61.1 0-95.6-44.9-95.6-125.2v-49.3c0.1-81.4 34.6-126.8 95.7-126.8z"  ></path></symbol><symbol id="icon-Dollar" viewBox="0 0 1024 1024"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path><path d="M559.7 488.8l-25.4-5.9V348.6c38 5.2 61.5 29 65.5 58.2 0.5 4 3.9 6.9 7.9 6.9h44.9c4.7 0 8.4-4.1 8-8.8-6.1-62.3-57.4-102.3-125.9-109.2V263c0-4.4-3.6-8-8-8h-28.1c-4.4 0-8 3.6-8 8v33c-70.8 6.9-126.2 46-126.2 119 0 67.6 49.8 100.2 102.1 112.7l24.7 6.3v142.7c-44.2-5.9-69-29.5-74.1-61.3-0.6-3.8-4-6.6-7.9-6.6H363c-4.7 0-8.4 4-8 8.7 4.5 55 46.2 105.6 135.2 112.1V761c0 4.4 3.6 8 8 8h28.4c4.4 0 8-3.6 8-8.1l-0.2-31.7c78.3-6.9 134.3-48.8 134.3-124-0.1-69.4-44.2-100.4-109-116.4z m-68.6-16.2c-5.6-1.6-10.3-3.1-15-5-33.8-12.2-49.5-31.9-49.5-57.3 0-36.3 27.5-57 64.5-61.7v124zM534.3 677V543.3c3.1 0.9 5.9 1.6 8.8 2.2 47.3 14.4 63.2 34.4 63.2 65.1 0 39.1-29.4 62.6-72 66.4z"  ></path></symbol><symbol id="icon-compass" viewBox="0 0 1024 1024"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path><path d="M710.4 295.9c-8-3.1-16.7-2.9-24.5 0.5L414.9 415 296.4 686c-3.6 8.2-3.6 17.5 0 25.7 3.4 7.8 9.7 13.9 17.7 17 3.8 1.5 7.7 2.2 11.7 2.2 4.4 0 8.7-0.9 12.8-2.7l271-118.6 118.5-271c3.6-8.2 3.6-17.5 0-25.7-3.5-7.9-9.8-13.9-17.7-17zM576.8 534.4l26.2 26.2-42.4 42.4-26.2-26.2L380 644.4 447.5 490 422 464.4l42.4-42.4 25.5 25.5L644.4 380l-67.6 154.4z"  ></path><path d="M464.4 422L422 464.4l25.5 25.6 86.9 86.8 26.2 26.2 42.4-42.4-26.2-26.2-86.8-86.9z"  ></path></symbol><symbol id="icon-close-circle" viewBox="0 0 1024 1024"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"  ></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path></symbol><symbol id="icon-frown" viewBox="0 0 1024 1024"><path d="M336 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"  ></path><path d="M688 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"  ></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2-44.3-18.7-84.1-45.6-118.3-79.8-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8c18.7-44.3 45.6-84.1 79.8-118.3 34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2 44.3 18.7 84.1 45.6 118.3 79.8 34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8c-18.7 44.3-45.6 84.1-79.8 118.2z"  ></path><path d="M512 533c-85.5 0-155.6 67.3-160 151.6-0.2 4.6 3.4 8.4 8 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c0.3 4.2 3.9 7.4 8.1 7.4H664c4.6 0 8.2-3.8 8-8.4-4.4-84.3-74.5-151.6-160-151.6z"  ></path></symbol><symbol id="icon-left-circle" viewBox="0 0 1024 1024"><path d="M603.3 327.5l-246 178c-4.4 3.2-4.4 9.7 0 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"  ></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path></symbol><symbol id="icon-down-circle" viewBox="0 0 1024 1024"><path d="M690 405h-46.9c-10.2 0-19.9 4.9-25.9 13.2L512 563.6 406.8 418.2c-6-8.3-15.6-13.2-25.9-13.2H334c-6.5 0-10.3 7.4-6.5 12.7l178 246c3.2 4.4 9.7 4.4 12.9 0l178-246c3.9-5.3 0.1-12.7-6.4-12.7z"  ></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path></symbol></svg>',i=(i=document.getElementsByTagName("script"))[i.length-1].getAttribute("data-injectcss"),h=function(t,e){e.parentNode.insertBefore(t,e)};if(i&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}function s(){l||(l=!0,o())}function d(){try{n.documentElement.doScroll("left")}catch(t){return void setTimeout(d,50)}s()}e=function(){var t,e=document.createElement("div");e.innerHTML=a,a=null,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?h(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(e,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),e()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(o=e,n=t.document,l=!1,d(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,s())})}(window);
+!(function (t) {
+  var e,
+    c,
+    o,
+    n,
+    l,
+    a =
+      '<svg><symbol id="icon-CI" viewBox="0 0 1024 1024"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path><path d="M730 311.9h-50.4c-4.4 0-8 3.6-8 8v384.2c0 4.4 3.6 8 8 8H730c4.4 0 8-3.6 8-8V319.9c0-4.4-3.6-8-8-8zM448.6 361.5c49.5 0 83.1 31.5 87 77.6 0.4 4.2 3.8 7.4 8 7.4h52.6c2.4 0 4.4-2 4.4-4.4 0-81.2-64-138.1-152.3-138.1C345.4 304 286 373.5 286 488.4v49c0 114 59.4 182.6 162.3 182.6 88 0 152.3-55.1 152.3-132.5 0-2.4-2-4.4-4.4-4.4h-52.7c-4.2 0-7.6 3.2-8 7.3-4.2 43-37.7 72.4-87 72.4-61.1 0-95.6-44.9-95.6-125.2v-49.3c0.1-81.4 34.6-126.8 95.7-126.8z"  ></path></symbol><symbol id="icon-Dollar" viewBox="0 0 1024 1024"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path><path d="M559.7 488.8l-25.4-5.9V348.6c38 5.2 61.5 29 65.5 58.2 0.5 4 3.9 6.9 7.9 6.9h44.9c4.7 0 8.4-4.1 8-8.8-6.1-62.3-57.4-102.3-125.9-109.2V263c0-4.4-3.6-8-8-8h-28.1c-4.4 0-8 3.6-8 8v33c-70.8 6.9-126.2 46-126.2 119 0 67.6 49.8 100.2 102.1 112.7l24.7 6.3v142.7c-44.2-5.9-69-29.5-74.1-61.3-0.6-3.8-4-6.6-7.9-6.6H363c-4.7 0-8.4 4-8 8.7 4.5 55 46.2 105.6 135.2 112.1V761c0 4.4 3.6 8 8 8h28.4c4.4 0 8-3.6 8-8.1l-0.2-31.7c78.3-6.9 134.3-48.8 134.3-124-0.1-69.4-44.2-100.4-109-116.4z m-68.6-16.2c-5.6-1.6-10.3-3.1-15-5-33.8-12.2-49.5-31.9-49.5-57.3 0-36.3 27.5-57 64.5-61.7v124zM534.3 677V543.3c3.1 0.9 5.9 1.6 8.8 2.2 47.3 14.4 63.2 34.4 63.2 65.1 0 39.1-29.4 62.6-72 66.4z"  ></path></symbol><symbol id="icon-compass" viewBox="0 0 1024 1024"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path><path d="M710.4 295.9c-8-3.1-16.7-2.9-24.5 0.5L414.9 415 296.4 686c-3.6 8.2-3.6 17.5 0 25.7 3.4 7.8 9.7 13.9 17.7 17 3.8 1.5 7.7 2.2 11.7 2.2 4.4 0 8.7-0.9 12.8-2.7l271-118.6 118.5-271c3.6-8.2 3.6-17.5 0-25.7-3.5-7.9-9.8-13.9-17.7-17zM576.8 534.4l26.2 26.2-42.4 42.4-26.2-26.2L380 644.4 447.5 490 422 464.4l42.4-42.4 25.5 25.5L644.4 380l-67.6 154.4z"  ></path><path d="M464.4 422L422 464.4l25.5 25.6 86.9 86.8 26.2 26.2 42.4-42.4-26.2-26.2-86.8-86.9z"  ></path></symbol><symbol id="icon-close-circle" viewBox="0 0 1024 1024"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"  ></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path></symbol><symbol id="icon-frown" viewBox="0 0 1024 1024"><path d="M336 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"  ></path><path d="M688 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z"  ></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2-44.3-18.7-84.1-45.6-118.3-79.8-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8c18.7-44.3 45.6-84.1 79.8-118.3 34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2 44.3 18.7 84.1 45.6 118.3 79.8 34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8c-18.7 44.3-45.6 84.1-79.8 118.2z"  ></path><path d="M512 533c-85.5 0-155.6 67.3-160 151.6-0.2 4.6 3.4 8.4 8 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c0.3 4.2 3.9 7.4 8.1 7.4H664c4.6 0 8.2-3.8 8-8.4-4.4-84.3-74.5-151.6-160-151.6z"  ></path></symbol><symbol id="icon-left-circle" viewBox="0 0 1024 1024"><path d="M603.3 327.5l-246 178c-4.4 3.2-4.4 9.7 0 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"  ></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path></symbol><symbol id="icon-down-circle" viewBox="0 0 1024 1024"><path d="M690 405h-46.9c-10.2 0-19.9 4.9-25.9 13.2L512 563.6 406.8 418.2c-6-8.3-15.6-13.2-25.9-13.2H334c-6.5 0-10.3 7.4-6.5 12.7l178 246c3.2 4.4 9.7 4.4 12.9 0l178-246c3.9-5.3 0.1-12.7-6.4-12.7z"  ></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path></symbol></svg>',
+    i = (i = document.getElementsByTagName("script"))[i.length - 1].getAttribute("data-injectcss"),
+    h = function (t, e) {
+      e.parentNode.insertBefore(t, e);
+    };
+  if (i && !t.__iconfont__svg__cssinject__) {
+    t.__iconfont__svg__cssinject__ = !0;
+    try {
+      document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>");
+    } catch (t) {
+      console && console.log(t);
+    }
+  }
+  function s() {
+    l || ((l = !0), o());
+  }
+  function d() {
+    try {
+      n.documentElement.doScroll("left");
+    } catch (t) {
+      return void setTimeout(d, 50);
+    }
+    s();
+  }
+  (e = function () {
+    var t,
+      e = document.createElement("div");
+    (e.innerHTML = a),
+      (a = null),
+      (e = e.getElementsByTagName("svg")[0]) &&
+        (e.setAttribute("aria-hidden", "true"),
+        (e.style.position = "absolute"),
+        (e.style.width = 0),
+        (e.style.height = 0),
+        (e.style.overflow = "hidden"),
+        (e = e),
+        (t = document.body).firstChild ? h(e, t.firstChild) : t.appendChild(e));
+  }),
+    document.addEventListener
+      ? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
+        ? setTimeout(e, 0)
+        : ((c = function () {
+            document.removeEventListener("DOMContentLoaded", c, !1), e();
+          }),
+          document.addEventListener("DOMContentLoaded", c, !1))
+      : document.attachEvent &&
+        ((o = e),
+        (n = t.document),
+        (l = !1),
+        d(),
+        (n.onreadystatechange = function () {
+          "complete" == n.readyState && ((n.onreadystatechange = null), s());
+        }));
+})(window);
diff --git a/packages/ui/certd-client/src/plugin/index.ts b/packages/ui/certd-client/src/plugin/index.ts
index 91a48eb5..9435f7c6 100644
--- a/packages/ui/certd-client/src/plugin/index.ts
+++ b/packages/ui/certd-client/src/plugin/index.ts
@@ -1,6 +1,6 @@
 import "./iconify";
 import "./iconfont";
-import FastCrud from "./fast-crud/index";
+import FastCrud from "./fast-crud";
 import permission from "./permission";
 import { App } from "vue";
 function install(app: App, options: any = {}) {
diff --git a/packages/ui/certd-client/src/plugin/permission/directive/index.js b/packages/ui/certd-client/src/plugin/permission/directive/index.ts
similarity index 57%
rename from packages/ui/certd-client/src/plugin/permission/directive/index.js
rename to packages/ui/certd-client/src/plugin/permission/directive/index.ts
index e0e5181f..4255d90f 100644
--- a/packages/ui/certd-client/src/plugin/permission/directive/index.js
+++ b/packages/ui/certd-client/src/plugin/permission/directive/index.ts
@@ -1,9 +1,11 @@
-import permission from "./permission";
+import permission from "./permission.js";
 import permissionUtil from "../util.permission";
-const install = function (app) {
+const install = function (app: any) {
   app.directive("permission", permission);
   app.config.globalProperties.$hasPermissions = permissionUtil.hasPermissions;
 };
 
-permission.install = install;
-export default permission;
+export default {
+  install,
+  ...permission
+};
diff --git a/packages/ui/certd-client/src/plugin/permission/directive/permission.js b/packages/ui/certd-client/src/plugin/permission/directive/permission.ts
similarity index 84%
rename from packages/ui/certd-client/src/plugin/permission/directive/permission.js
rename to packages/ui/certd-client/src/plugin/permission/directive/permission.ts
index 0b2a9578..43a0d282 100644
--- a/packages/ui/certd-client/src/plugin/permission/directive/permission.js
+++ b/packages/ui/certd-client/src/plugin/permission/directive/permission.ts
@@ -1,6 +1,6 @@
 import permissionUtil from "../util.permission";
 export default {
-  mounted(el, binding, vnode) {
+  mounted(el: any, binding: any, vnode: any) {
     const { value } = binding;
     const hasPermission = permissionUtil.hasPermissions(value);
 
diff --git a/packages/ui/certd-client/src/plugin/permission/index.ts b/packages/ui/certd-client/src/plugin/permission/index.ts
index c300560a..c86d6101 100644
--- a/packages/ui/certd-client/src/plugin/permission/index.ts
+++ b/packages/ui/certd-client/src/plugin/permission/index.ts
@@ -1,4 +1,4 @@
-import permissionDirective from "./directive/index";
+import permissionDirective from "./directive/index.js";
 import { registerRouterHook } from "./hook";
 import util from "./util.permission";
 export * from "./use-crud-permission";
@@ -11,7 +11,7 @@ export function usePermission() {
 }
 
 export default {
-  install(app) {
+  install(app: any) {
     // 开启权限模块
     // 注册v-permission指令, 用于控制按钮权限
     app.use(permissionDirective);
diff --git a/packages/ui/certd-client/src/plugin/permission/store.permission.ts b/packages/ui/certd-client/src/plugin/permission/store.permission.ts
index 5cbb3305..a5d4cf25 100644
--- a/packages/ui/certd-client/src/plugin/permission/store.permission.ts
+++ b/packages/ui/certd-client/src/plugin/permission/store.permission.ts
@@ -21,7 +21,7 @@ interface PermissionState {
  * @param permissionList
  * @returns {*}
  */
-function formatPermissions(menuTree: Array<any>, permissionList = []) {
+function formatPermissions(menuTree: Array<any>, permissionList: any[] = []) {
   if (menuTree == null) {
     menuTree = [];
   }
@@ -44,17 +44,19 @@ export const usePermissionStore = defineStore({
     inited: false
   }),
   getters: {
+    // @ts-ignore
     getPermissions() {
       // @ts-ignore
       return this.permissions;
     },
+    // @ts-ignore
     isInited() {
       // @ts-ignore
       return this.inited;
     }
   },
   actions: {
-    init({ permissions }) {
+    init({ permissions }: any) {
       this.permissions = permissions;
       this.inited = true;
     },
@@ -62,7 +64,7 @@ export const usePermissionStore = defineStore({
       this.permissions = [];
       this.inited = false;
     },
-    resolve(resourceTree) {
+    resolve(resourceTree: any) {
       const permissions = formatPermissions(resourceTree);
       this.init({ permissions });
 
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 2c60f8e2..69a0ed1f 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,17 +1,29 @@
 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 | UseCrudPermissionCompProps;
+};
 /**
  * 设置按钮动作权限
  * @param permission {prefix,extra}
  */
-export function useCrudPermission({ permission }) {
+export function useCrudPermission({ permission }: UseCrudPermissionProps) {
   const { hasPermissions } = usePermission();
 
   const prefix = permission instanceof Object ? permission.prefix : permission;
 
   //根据权限显示按钮
-  function hasActionPermission(action) {
+  function hasActionPermission(action: string) {
     if (!prefix) {
       return true;
     }
@@ -50,7 +62,7 @@ export function useCrudPermission({ permission }) {
     );
   }
 
-  function merge(userOptions) {
+  function merge(userOptions: any) {
     const permissionOptions = buildCrudPermission();
     _.merge(permissionOptions, userOptions);
     return permissionOptions;
diff --git a/packages/ui/certd-client/src/plugin/permission/util.permission.ts b/packages/ui/certd-client/src/plugin/permission/util.permission.ts
index 1c197335..4efd2b6b 100644
--- a/packages/ui/certd-client/src/plugin/permission/util.permission.ts
+++ b/packages/ui/certd-client/src/plugin/permission/util.permission.ts
@@ -14,11 +14,11 @@ const util = {
     }
     const permissionStore = usePermissionStore();
     const userPermissionList = permissionStore.getPermissions;
-    return userPermissionList.some((permission) => {
+    return userPermissionList.some((permission: any) => {
       return need.includes(permission);
     });
   },
-  requirePermissions: (value) => {
+  requirePermissions: (value: any) => {
     if (!util.hasPermissions(value)) {
       message.error("对不起，您没有权限执行此操作");
       throw new NoPermissionError();
diff --git a/packages/ui/certd-client/src/router/index.ts b/packages/ui/certd-client/src/router/index.ts
index 72d1aac6..c57cf102 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 39cbd998..8c36cc7d 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, parent: any) {
   let menu: any = null;
   if (resource.meta == null) {
     resource.meta = {};
@@ -22,58 +21,58 @@ function transformOneResource(resource) {
   } else {
     menu = _.cloneDeep(resource);
     delete menu.component;
-  }
-  let route;
-  if (resource.type !== "menu") {
-    if (resource.path == null || resource.path.startsWith("https://") || resource.path.startsWith("http://")) {
-      //没有route
-      route = null;
+    if (menu.path?.startsWith("/")) {
+      menu.fullPath = menu.path;
     } else {
-      route = _.cloneDeep(resource);
-      if (route.component && typeof route.component === "string") {
-        const path = "/src/views" + route.component;
-        route.component = modules[path];
-      }
-      if (route.component == null) {
-        route.component = LayoutPass;
-      }
+      menu.fullPath = (parent?.fullPath || "") + "/" + menu.path;
+    }
+  }
+  let route;
+  if (meta.isRoute === false || resource.path == null || resource.path.startsWith("https://") || resource.path.startsWith("http://")) {
+    //没有route
+    route = null;
+  } else {
+    route = _.cloneDeep(resource);
+    if (route.component && typeof route.component === "string") {
+      const path = "/src/views" + route.component;
+      route.component = modules[path];
+    }
+    if (route.component == null) {
+      route.component = LayoutPass;
+    }
+    if (route?.meta?.cache !== false) {
+      if (route.meta == null) {
+        route.meta = {};
+      }
+      route.meta.cache = true;
+    }
+  }
+  if (resource.children) {
+    const { menus, routes } = buildMenusAndRouters(resource.children, resource);
+    if (menu) {
+      menu.children = menus;
+    }
+    if (route) {
+      route.children = routes;
     }
   }
-
   return {
     menu,
     route
   };
 }
 
-export const buildMenusAndRouters = (resources) => {
+export const buildMenusAndRouters = (resources: any, parent: any = null) => {
   const routes: Array<any> = [];
   const menus: Array<any> = [];
   for (const item of resources) {
-    const { menu, route } = transformOneResource(item);
-    let menuChildren;
-    let routeChildren;
-    if (item.children) {
-      if (item.children.length > 0) {
-        const ret = buildMenusAndRouters(item.children);
-        menuChildren = ret.menus;
-        routeChildren = ret.routes;
-      }
-    }
+    const { menu, route } = transformOneResource(item, parent);
 
     if (menu) {
       menus.push(menu);
-      menu.children = menuChildren;
     }
     if (route) {
-      if (route?.meta?.cache !== false) {
-        if (route.meta == null) {
-          route.meta = {};
-        }
-        route.meta.cache = true;
-      }
       routes.push(route);
-      route.children = routeChildren;
     }
   }
 
@@ -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) {
@@ -148,7 +147,7 @@ const outsideRet = buildMenusAndRouters(outsideResource);
 const headerRet = buildMenusAndRouters(headerResource);
 
 const outsideRoutes = outsideRet.routes;
-const frameworkRoutes = flatSubRouters(frameworkRet.routes);
+const frameworkRoutes = frameworkRet.routes;
 const routes = [...outsideRoutes, ...frameworkRoutes];
 const frameworkMenus = frameworkRet.menus;
 const headerMenus = headerRet.menus;
diff --git a/packages/ui/certd-client/src/router/source/modules/crud.ts b/packages/ui/certd-client/src/router/source/modules/crud.ts
index 226ff916..b6291772 100644
--- a/packages/ui/certd-client/src/router/source/modules/crud.ts
+++ b/packages/ui/certd-client/src/router/source/modules/crud.ts
@@ -8,6 +8,15 @@ export const crudResources = [
       icon: "ion:apps-sharp"
     },
     children: [
+      {
+        title: "debug",
+        name: "debug",
+        path: "/crud/debug",
+        component: "/crud/debug/index.vue",
+        meta: {
+          isMenu: false
+        }
+      },
       {
         title: "基本特性",
         name: "basis",
@@ -18,11 +27,17 @@ export const crudResources = [
         },
         children: [
           {
-            title: "HelloWorld",
+            title: "FirstDemo",
             name: "FsCrudFirst",
             path: "/crud/basis/first",
             component: "/crud/basis/first/index.vue"
           },
+          {
+            title: "HelloWorld",
+            name: "FsCrudHelloWorld",
+            path: "/crud/basis/helloworld",
+            component: "/crud/basis/helloworld/index.vue"
+          },
           {
             title: "动态计算",
             name: "BasisCompute",
@@ -59,6 +74,12 @@ export const crudResources = [
             path: "/crud/basis/layout-custom",
             component: "/crud/basis/layout-custom/index.vue"
           },
+          {
+            title: "自定义组件",
+            name: "BasisCustom",
+            path: "/crud/basis/custom",
+            component: "/crud/basis/custom/index.vue"
+          },
           {
             title: "列设置",
             name: "BasisColumnsSet",
@@ -70,6 +91,12 @@ export const crudResources = [
             name: "BasisColumnMergePlugin",
             path: "/crud/basis/column-merge-plugin",
             component: "/crud/basis/column-merge-plugin/index.vue"
+          },
+          {
+            title: "ResetCrudOptions",
+            name: "BasisReset",
+            path: "/crud/basis/reset",
+            component: "/crud/basis/reset/index.vue"
           }
         ]
       },
@@ -165,6 +192,12 @@ export const crudResources = [
             path: "/crud/component/select",
             component: "/crud/component/select/index.vue"
           },
+          {
+            title: "表格选择(table-select)",
+            name: "ComponentTableSelect",
+            path: "/crud/component/table-select",
+            component: "/crud/component/table-select/index.vue"
+          },
           {
             title: "级联(cascader)",
             name: "ComponentCascader",
@@ -243,6 +276,12 @@ export const crudResources = [
             path: "/crud/component/uploader/qiniu",
             component: "/crud/component/uploader/qiniu/index.vue"
           },
+          {
+            title: "s3上传",
+            name: "ComponentUploaderS3",
+            path: "/crud/component/uploader/s3",
+            component: "/crud/component/uploader/s3/index.vue"
+          },
           {
             title: "富文本编辑器",
             name: "ComponentEditor",
@@ -260,6 +299,12 @@ export const crudResources = [
             name: "ComponentJson",
             path: "/crud/component/json",
             component: "/crud/component/json/index.vue"
+          },
+          {
+            title: "组件独立使用",
+            name: "ComponentIndependent",
+            path: "/crud/component/independent",
+            component: "/crud/component/independent/index.vue"
           }
         ]
       },
@@ -391,6 +436,18 @@ export const crudResources = [
             name: "FormNest",
             path: "/crud/form/nest",
             component: "/crud/form/nest/index.vue"
+          },
+          {
+            title: "字段组件render",
+            name: "FormRender",
+            path: "/crud/form/render",
+            component: "/crud/form/render/index.vue"
+          },
+          {
+            title: "查看表单使用单元格组件",
+            name: "FormView",
+            path: "/crud/form/view",
+            component: "/crud/form/view/index.vue"
           }
         ]
       },
@@ -444,6 +501,12 @@ export const crudResources = [
             path: "/crud/feature/header-group",
             component: "/crud/feature/header-group/index.vue"
           },
+          {
+            title: "自定义表头",
+            name: "FeatureHeader",
+            path: "/crud/feature/header",
+            component: "/crud/feature/header/index.vue"
+          },
           {
             title: "合并单元格",
             name: "FeatureMerge",
@@ -498,6 +561,12 @@ export const crudResources = [
             path: "/crud/feature/search-multi",
             component: "/crud/feature/search-multi/index.vue"
           },
+          {
+            title: "Tabs快捷查询",
+            name: "FeatureTabs",
+            path: "/crud/feature/tabs",
+            component: "/crud/feature/tabs/index.vue"
+          },
           {
             title: "字段排序",
             name: "FeatureColumnSort",
@@ -525,9 +594,21 @@ export const crudResources = [
           {
             title: "v-model",
             name: "FeatureVModel",
-            path: "/crud/feature/v-model",
+            path: "/crud/feature/local-v-model",
             component: "/crud/feature/local-v-model/index.vue"
           },
+          {
+            title: "导入",
+            name: "FeatureImport",
+            path: "/crud/feature/local-import",
+            component: "/crud/feature/local-import/index.vue"
+          },
+          {
+            title: "导出",
+            name: "FeatureExport",
+            path: "/crud/feature/export",
+            component: "/crud/feature/export/index.vue"
+          },
           {
             title: "自定义删除",
             name: "FeatureRemove",
diff --git a/packages/ui/certd-client/src/router/source/modules/integration.ts b/packages/ui/certd-client/src/router/source/modules/integration.ts
new file mode 100644
index 00000000..0b0c8cd8
--- /dev/null
+++ b/packages/ui/certd-client/src/router/source/modules/integration.ts
@@ -0,0 +1,22 @@
+export const integrationResources = [
+  {
+    title: "集成",
+    name: "integration",
+    path: "/integration",
+    redirect: "/integration/bpmn",
+    meta: {
+      icon: "ion:apps-sharp"
+    },
+    children: [
+      {
+        title: "FsBpmn",
+        name: "FsBpmn",
+        path: "/integration/bpmn",
+        component: "/integration/bpmn/index.vue",
+        meta: {
+          icon: "ion:disc-outline"
+        }
+      }
+    ]
+  }
+];
diff --git a/packages/ui/certd-client/src/router/source/modules/ui.ts b/packages/ui/certd-client/src/router/source/modules/ui.ts
new file mode 100644
index 00000000..e8cfc6e4
--- /dev/null
+++ b/packages/ui/certd-client/src/router/source/modules/ui.ts
@@ -0,0 +1,30 @@
+export const uiResources = [
+  {
+    title: "UI示例",
+    name: "ui",
+    path: "/ui",
+    redirect: "/ui/form",
+    meta: {
+      icon: "ion:apps-sharp"
+    },
+    children: [
+      {
+        title: "表单组件",
+        name: "UIForm",
+        path: "/ui/form",
+        redirect: "/ui/form/input",
+        meta: {
+          icon: "ion:disc-outline"
+        },
+        children: [
+          {
+            title: "input",
+            name: "UIFormInput",
+            path: "/ui/form/input",
+            component: "/ui/form/input/index.vue"
+          }
+        ]
+      }
+    ]
+  }
+];
diff --git a/packages/ui/certd-client/src/store/index.ts b/packages/ui/certd-client/src/store/index.ts
index 52b9cf68..cecd8344 100644
--- a/packages/ui/certd-client/src/store/index.ts
+++ b/packages/ui/certd-client/src/store/index.ts
@@ -1,7 +1,7 @@
 import { createPinia } from "pinia";
 const store = createPinia();
 export default {
-  install(app) {
+  install(app: any) {
     app.use(store);
   }
 };
diff --git a/packages/ui/certd-client/src/store/modules/page.ts b/packages/ui/certd-client/src/store/modules/page.ts
index 58305cb8..b2b100f8 100644
--- a/packages/ui/certd-client/src/store/modules/page.ts
+++ b/packages/ui/certd-client/src/store/modules/page.ts
@@ -15,7 +15,7 @@ interface PageState {
   // 已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
   openedLoaded: boolean;
   // 当前页面
-  current: "";
+  current: string;
   // 需要缓存的页面 name
   keepAlive: Array<any>;
   inited: boolean;
@@ -49,7 +49,7 @@ export const usePageStore = defineStore({
   }),
   getters: {
     // @ts-ignore
-    getOpened() {
+    getOpened(): any {
       // @ts-ignore
       return this.opened;
     },
@@ -358,14 +358,14 @@ export const usePageStore = defineStore({
      */
     keepAliveRefresh() {
       this.keepAlive = this.opened.filter((item) => isKeepAlive(item)).map((e) => e.name);
-      console.log("keep alive:", this.keepAlive);
+      console.log("keepalive", this.keepAlive);
     },
     /**
      * @description 删除一个页面的缓存设置
      * @param {Object} state state
      * @param {String} name name
      */
-    keepAliveRemove(name: any) {
+    keepAliveRemove(name: string) {
       const list = cloneDeep(this.keepAlive);
       const index = list.findIndex((item) => item === name);
       if (index !== -1) {
@@ -378,7 +378,7 @@ export const usePageStore = defineStore({
      * @param {Object} state state
      * @param {String} name name
      */
-    keepAlivePush(name: any) {
+    keepAlivePush(name: string) {
       const keep = cloneDeep(this.keepAlive);
       keep.push(name);
       this.keepAlive = uniq(keep);
@@ -396,7 +396,7 @@ export const usePageStore = defineStore({
      * @param {Object} state state
      * @param {String} fullPath new fullPath
      */
-    currentSet(fullPath: any) {
+    currentSet(fullPath: string) {
       this.current = fullPath;
     },
     /**
@@ -405,7 +405,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/store/modules/resource.ts b/packages/ui/certd-client/src/store/modules/resource.ts
index 4018f4ab..58d8fc49 100644
--- a/packages/ui/certd-client/src/store/modules/resource.ts
+++ b/packages/ui/certd-client/src/store/modules/resource.ts
@@ -45,7 +45,7 @@ export const useResourceStore = defineStore({
       // @ts-ignore
       return this.frameworkMenus;
     }
-  },
+  } as any,
   actions: {
     clear() {
       this.inited = false;
diff --git a/packages/ui/certd-client/src/style/common.less b/packages/ui/certd-client/src/style/common.less
index ad43d5b6..670d686b 100644
--- a/packages/ui/certd-client/src/style/common.less
+++ b/packages/ui/certd-client/src/style/common.less
@@ -48,6 +48,24 @@ h1, h2, h3, h4, h5, h6 {
   vertical-align: 0 !important;
 }
 
+.flex{
+  display: flex;
+  align-items: center;
+}
+
+
+.ml-5{
+  margin-left:5px;
+}
+
+.mt-10{
+  margin-top:10px;
+}
+
+.m-10{
+  margin:10px;
+}
+
 
 .text-center{
   text-align: center;
diff --git a/packages/ui/certd-client/src/types/global.d.ts b/packages/ui/certd-client/src/types/global.d.ts
index d40bbd68..4e8e52cc 100644
--- a/packages/ui/certd-client/src/types/global.d.ts
+++ b/packages/ui/certd-client/src/types/global.d.ts
@@ -1,10 +1,4 @@
-import type {
-  ComponentRenderProxy,
-  VNode,
-  ComponentPublicInstance,
-  FunctionalComponent,
-  PropType as VuePropType,
-} from 'vue';
+import type { ComponentRenderProxy, VNode, ComponentPublicInstance, FunctionalComponent, PropType as VuePropType } from "vue";
 
 declare global {
   const __APP_INFO__: {
@@ -64,7 +58,7 @@ declare global {
     VITE_GLOB_APP_SHORT_NAME: string;
     VITE_USE_CDN: boolean;
     VITE_DROP_CONSOLE: boolean;
-    VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
+    VITE_BUILD_COMPRESS: "gzip" | "brotli" | "none";
     VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
     VITE_LEGACY: boolean;
     VITE_USE_IMAGEMIN: boolean;
@@ -92,8 +86,6 @@ declare global {
   }
 }
 
-declare module 'vue' {
-  export type JSXComponent<Props = any> =
-    | { new (): ComponentPublicInstance<Props> }
-    | FunctionalComponent<Props>;
+declare module "vue" {
+  export type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;
 }
diff --git a/packages/ui/certd-client/src/utils/util.env.ts b/packages/ui/certd-client/src/utils/util.env.ts
index 523beacc..c00e549c 100644
--- a/packages/ui/certd-client/src/utils/util.env.ts
+++ b/packages/ui/certd-client/src/utils/util.env.ts
@@ -20,7 +20,7 @@ export class EnvConfig {
     _.forEach(import.meta.env, (value, key) => {
       if (key.startsWith("VITE_APP")) {
         key = key.replace("VITE_APP_", "");
-        //@ts-ignore
+        // @ts-ignore
         this[key] = value;
       }
     });
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 73%
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 a2e187ae..5895fc6b 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,9 +34,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 72%
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 d66f65d8..ddf4ef9e 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,25 +1,26 @@
 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);
   };
 
   return {
     output: {},
     crudOptions: {
+      //大量数据的crud配置
       request: {
         pageRequest,
         addRequest,
@@ -41,7 +42,6 @@ export default function ({ expose }) {
       columns: {
         id: {
           title: "ID",
-          key: "id",
           type: "number",
           column: {
             width: 50
@@ -58,70 +58,70 @@ export default function ({ expose }) {
           title: "字典1",
           type: "dict-select",
           dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?from=dict1"
+            url: "/mock/dicts/ManyOpenStatusEnum?from=dict1"
           })
         },
         dict2: {
           title: "字典2",
           type: "dict-select",
           dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?from=dict2"
+            url: "/mock/dicts/ManyOpenStatusEnum?from=dict2"
           })
         },
         dict3: {
           title: "字典3",
           type: "dict-select",
           dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?from=dict3"
+            url: "/mock/dicts/ManyOpenStatusEnum?from=dict3"
           })
         },
         dict4: {
           title: "字典4",
           type: "dict-select",
           dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?from=dict4"
+            url: "/mock/dicts/ManyOpenStatusEnum?from=dict4"
           })
         },
         dict5: {
           title: "字典5",
           type: "dict-select",
           dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?from=dict5"
+            url: "/mock/dicts/ManyOpenStatusEnum?from=dict5"
           })
         },
         dict6: {
           title: "字典6",
           type: "dict-select",
           dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?from=dict6"
+            url: "/mock/dicts/ManyOpenStatusEnum?from=dict6"
           })
         },
         dict7: {
           title: "字典7",
           type: "dict-select",
           dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?from=dict7"
+            url: "/mock/dicts/ManyOpenStatusEnum?from=dict7"
           })
         },
         dict8: {
           title: "字典8",
           type: "dict-select",
           dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?from=dict8"
+            url: "/mock/dicts/ManyOpenStatusEnum?from=dict8"
           })
         },
         dict9: {
           title: "字典9",
           type: "dict-select",
           dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?from=dict9"
+            url: "/mock/dicts/ManyOpenStatusEnum?from=dict9"
           })
         },
         dict10: {
           title: "字典10",
           type: "dict-select",
           dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?from=dict10"
+            url: "/mock/dicts/ManyOpenStatusEnum?from=dict10"
           })
         },
         text1: {
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 91a4914c..3c3e8846 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 96%
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 a166ac9d..e51c8e8b 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,7 +1,9 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "AdvancedBigData",
   idGenerator: 0,
+  //此处copy多次，模拟大量数据
   copyTimes: 1000
 };
 const list = [
diff --git a/packages/ui/certd-client/src/views/crud/advanced/from-backend/api.js b/packages/ui/certd-client/src/views/crud/advanced/from-backend/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/crud/advanced/from-backend/api.js
rename to packages/ui/certd-client/src/views/crud/advanced/from-backend/api.ts
index ae38d293..b2b5d786 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/from-backend/api.js
+++ 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/advanced/from-backend/crud-backend.js b/packages/ui/certd-client/src/views/crud/advanced/from-backend/crud-backend.ts
similarity index 85%
rename from packages/ui/certd-client/src/views/crud/advanced/from-backend/crud-backend.js
rename to packages/ui/certd-client/src/views/crud/advanced/from-backend/crud-backend.ts
index abcf8ef1..050d384e 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/from-backend/crud-backend.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/from-backend/crud-backend.ts
@@ -1,5 +1,6 @@
+//此处演示从后台获取crudOptions配置字符串
 export const crudOptions = `
- ({expose,dict}) => {
+ ({crudExpose,dict}) => {
   return {
       columns: {
         id: {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/from-backend/crud.jsx b/packages/ui/certd-client/src/views/crud/advanced/from-backend/crud.jsx
deleted file mode 100644
index a577b88d..00000000
--- a/packages/ui/certd-client/src/views/crud/advanced/from-backend/crud.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as api from "./api";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
-    return await api.GetList(query);
-  };
-  const editRequest = async ({ form, row }) => {
-    form.id = row.id;
-    return await api.UpdateObj(form);
-  };
-  const delRequest = async ({ row }) => {
-    return await api.DelObj(row.id);
-  };
-
-  const addRequest = async ({ form }) => {
-    return await api.AddObj(form);
-  };
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      }
-    }
-  };
-}
diff --git a/packages/ui/certd-client/src/views/crud/advanced/from-backend/crud.tsx b/packages/ui/certd-client/src/views/crud/advanced/from-backend/crud.tsx
new file mode 100644
index 00000000..37613382
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/advanced/from-backend/crud.tsx
@@ -0,0 +1,49 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, dict } from "@fast-crud/fast-crud";
+import { GetCrud } from "./api";
+import _ from "lodash-es";
+
+/**
+ * 异步创建options
+ * @param props
+ */
+export default async function (props: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
+  const { crudExpose } = props;
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  const localCrudOptions = {
+    request: {
+      pageRequest,
+      addRequest,
+      editRequest,
+      delRequest
+    }
+  };
+  // 上面是本地crudOptions
+
+  // 下面从后台获取crudOptions
+  const ret = await GetCrud();
+  // 编译
+  const crudBackend = eval(ret);
+  // 本示例返回的是一个方法字符串，所以要先执行这个方法，获取options
+  const remoteCrudOptions = crudBackend({ crudExpose, dict });
+  // 与本地options合并
+  const crudOptions = _.merge(localCrudOptions, remoteCrudOptions);
+
+  return {
+    crudOptions
+  };
+}
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 bec75930..84a29443 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,39 +1,38 @@
 <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>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, dict, useExpose } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted, ref, Ref } from "vue";
+import { CrudBinding, useFsAsync } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { GetCrud } from "./api";
-import _ from "lodash-es";
+
 export default defineComponent({
   name: "AdvancedFromBackend",
   setup() {
     // crud组件的ref
-    const crudRef = ref();
+    const crudRef: Ref = ref();
     // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
+    const crudBinding: Ref<CrudBinding> = ref();
+
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数
+
     // 初始化crud配置
     // 页面打开后获取列表数据
     onMounted(async () => {
-      // 从后台获取crud配置
-      const ret = await GetCrud();
-      // 编译
-      const crudBackend = eval(ret);
-      // 本示例返回的是一个方法字符串，所以要先执行这个方法，获取options
-      const crudOptionsFromBackend = crudBackend({ expose, dict });
-      // 与本地options合并
-      _.merge(crudOptions, crudOptionsFromBackend);
-      // useCrud
-      useCrud({ expose, crudOptions });
+      const customValue = {};
+      //异步初始化fs，createCrudOptions为异步方法
+      const { crudExpose, context } = await useFsAsync({ crudRef, crudBinding, createCrudOptions, context: customValue });
       // 刷新数据
-      expose.doRefresh();
+      await crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/from-backend/mock.js b/packages/ui/certd-client/src/views/crud/advanced/from-backend/mock.ts
similarity index 89%
rename from packages/ui/certd-client/src/views/crud/advanced/from-backend/mock.js
rename to packages/ui/certd-client/src/views/crud/advanced/from-backend/mock.ts
index 2f802d45..ed646fbd 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/from-backend/mock.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/from-backend/mock.ts
@@ -1,6 +1,7 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
 import { crudOptions } from "./crud-backend";
-const options = {
+const options: any = {
   name: "AdvancedFromBackend",
   idGenerator: 0
 };
@@ -23,7 +24,7 @@ const mock = mockUtil.buildMock(options);
 mock.push({
   path: "/AdvancedFromBackend/crud",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     return {
       code: 0,
       msg: "success",
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 73%
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 236e922a..8b6b001c 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 cde2c0c2..9788e26a 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 5b3591ef..3359b7a0 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 31a5c561..2f50cb95 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 64ac7713..a85b208d 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,32 @@
 <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-crud页面 -->
+        <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'
+//将fs-crud做成的页面在此处引入
+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/api.js b/packages/ui/certd-client/src/views/crud/advanced/linkage/api.ts
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/advanced/linkage/api.js
rename to packages/ui/certd-client/src/views/crud/advanced/linkage/api.ts
index bbc69cc2..198d7d49 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/linkage/api.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/linkage/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormLinkage";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.jsx b/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx
similarity index 82%
rename from packages/ui/certd-client/src/views/crud/advanced/linkage/crud.jsx
rename to packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx
index 6fe18540..a18c8cdc 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/advanced/linkage/crud.tsx
@@ -1,18 +1,18 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, ScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+export default function ({ 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);
   };
 
@@ -30,7 +30,6 @@ export default function ({ expose }) {
       columns: {
         id: {
           title: "ID",
-          key: "id",
           type: "number",
           column: {
             width: 50
@@ -70,7 +69,7 @@ export default function ({ expose }) {
             cache: true,
             prototype: true,
             // url() 改成构建url，返回一个url
-            url({ form }) {
+            url({ form }: any) {
               if (form && form.province != null) {
                 // 本数据字典的url是通过前一个select的选项决定的
                 return `/mock/linkage/city?province=${form.province}`;
@@ -81,7 +80,7 @@ export default function ({ expose }) {
           }),
           form: {
             // 注释同上
-            valueChange({ value, form, getComponentRef }) {
+            valueChange({ value, form, getComponentRef }: ScopeContext) {
               if (value) {
                 form.county = undefined; // 将county的value置空
                 const countySelect = getComponentRef("county");
@@ -104,7 +103,7 @@ export default function ({ expose }) {
             value: "id",
             cache: true,
             prototype: true,
-            url({ form }) {
+            url({ form }: any) {
               if (form && form.province != null && form.city != null) {
                 return `/mock/linkage/county?province=${form.province} &city=${form.city}`;
               }
diff --git a/packages/ui/certd-client/src/views/crud/advanced/linkage/index.vue b/packages/ui/certd-client/src/views/crud/advanced/linkage/index.vue
index 48faf05b..da5f6620 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/linkage/index.vue
+++ b/packages/ui/certd-client/src/views/crud/advanced/linkage/index.vue
@@ -2,31 +2,20 @@
   <fs-crud ref="crudRef" v-bind="crudBinding" />
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
-import { useExpose } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+
 export default defineComponent({
   name: "FormLinkage",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions, context: customValue });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/crud/advanced/linkage/mock.js b/packages/ui/certd-client/src/views/crud/advanced/linkage/mock.ts
similarity index 91%
rename from packages/ui/certd-client/src/views/crud/advanced/linkage/mock.js
rename to packages/ui/certd-client/src/views/crud/advanced/linkage/mock.ts
index 8e42b2d5..dc22fb6e 100644
--- a/packages/ui/certd-client/src/views/crud/advanced/linkage/mock.js
+++ b/packages/ui/certd-client/src/views/crud/advanced/linkage/mock.ts
@@ -1,6 +1,7 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
 import _ from "lodash-es";
-const options = {
+const options: any = {
   name: "FormLinkage",
   idGenerator: 0
 };
@@ -64,12 +65,12 @@ const tree = [
 ];
 
 options.list = list;
-options.copyTimes = 1000;
+options.copyTimes = 100;
 const mock = mockUtil.buildMock(options);
 
-function omitChildren(orignalListt) {
-  const list = [];
-  orignalListt.forEach((item) => {
+function omitChildren(originalList: any) {
+  const list: any = [];
+  originalList.forEach((item: any) => {
     list.push(_.omit(item, "children"));
   });
   return list;
@@ -90,7 +91,7 @@ mock.push({
 mock.push({
   path: "/mock/linkage/city",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     const province = parseInt(req.params.province);
     const a = tree.filter((item) => {
       return item.id === province;
@@ -107,7 +108,7 @@ mock.push({
 mock.push({
   path: "/mock/linkage/county",
   method: "get",
-  handle(req) {
+  handle(req: any) {
     const province = parseInt(req.params.province);
     const a = tree.filter((item) => {
       return item.id === province;
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 73%
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 457dac6d..382cc6a6 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 74%
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 e4989bee..9b9891c6 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,17 @@
-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, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const localDataRef = context.localDataRef;
+  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 +36,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 +48,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 +56,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 d48a680e..f4a8a19b 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, context: { 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 120c2a63..048a8eb7 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 72%
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 b18db901..c553e3dc 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 72%
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 3a8a4a1b..4b065e53 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 567715c6..dc8978da 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 9a198b9e..fdba51d2 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 2d70c579..c366a461 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 76%
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 b42ba5c8..a0fe05b6 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, context: { 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() {
@@ -82,8 +88,7 @@ export default function ({ expose, asideTableRef }) {
             // 嵌套表格字段
             rules: [{ required: true, message: "请选择用户" }],
             component: {
-              //局部引用子表格，要用shallowRef包裹
-              name: shallowRef(SubTable),
+              name: SubTable,
               vModel: "modelValue",
               gradeId: compute(({ form }) => {
                 return form.id;
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 5fa4b445..53c5c6c0 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, context } = useFs({ createCrudOptions, context: { 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 709699d2..d24e3e6f 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 72%
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 167a31de..d8f5d178 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 65%
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 ad5faa1e..e4fa119b 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, context: { 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 fb928438..ea69cb6f 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, context: { 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 726a628a..e2aab6e1 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/column-merge-plugin/api.js b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/api.ts
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/api.js
rename to packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/api.ts
index af612a7a..704320a3 100644
--- a/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/api.js
+++ b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/BasisColumnMergePlugin";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.jsx b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.tsx
similarity index 71%
rename from packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.jsx
rename to packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.tsx
index 40a9cc8c..85019be6 100644
--- a/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.tsx
@@ -1,24 +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";
 
-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 {
-    output: {},
     crudOptions: {
       settings: {
         viewFormUseCellComponent: true
diff --git a/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/index.vue b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/index.vue
index 186aa036..38336f41 100644
--- a/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/index.vue
@@ -12,14 +12,15 @@
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import createCrudOptions from "./crud";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFs, UseFsProps } from "@fast-crud/fast-crud";
 export default defineComponent({
   name: "BasisColumnMergePlugin",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const context: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
     // 页面打开后获取列表数据
     onMounted(() => {
       crudExpose.doRefresh();
diff --git a/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/mock.js b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/mock.ts
similarity index 92%
rename from packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/mock.js
rename to packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/mock.ts
index a36687c6..f695ad69 100644
--- a/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/mock.js
+++ b/packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "BasisColumnMergePlugin",
   idGenerator: 0
 };
diff --git a/packages/ui/certd-client/src/views/crud/basis/columns-set/api.js b/packages/ui/certd-client/src/views/crud/basis/columns-set/api.ts
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/basis/columns-set/api.js
rename to packages/ui/certd-client/src/views/crud/basis/columns-set/api.ts
index 2d20318f..01afe62a 100644
--- a/packages/ui/certd-client/src/views/crud/basis/columns-set/api.js
+++ b/packages/ui/certd-client/src/views/crud/basis/columns-set/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/BasisColumnsSet";
-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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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/basis/columns-set/crud.jsx b/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.jsx
deleted file mode 100644
index 559e49e3..00000000
--- a/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-import { ref } from "vue";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
-    return await api.GetList(query);
-  };
-  const editRequest = async ({ form, row }) => {
-    form.id = row.id;
-    return await api.UpdateObj(form);
-  };
-  const delRequest = async ({ row }) => {
-    return await api.DelObj(row.id);
-  };
-
-  const addRequest = async ({ form }) => {
-    return await api.AddObj(form);
-  };
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      },
-      toolbar: {
-        columnsFilter: {
-          mode: "default"
-        }
-      },
-      columns: {
-        id: {
-          title: "ID",
-          key: "id",
-          type: "number",
-          column: {
-            width: 50
-          },
-          form: {
-            show: false
-          }
-        },
-        radio: {
-          title: "状态",
-          search: { show: true },
-          type: "dict-radio",
-          dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?single"
-          })
-        },
-        disabled: {
-          title: "列设置禁用",
-          type: "text",
-          column: {
-            columnSetDisabled: true
-          }
-        },
-        hidden: {
-          title: "列设置隐藏",
-          type: "text",
-          column: {
-            columnSetShow: false
-          }
-        }
-      }
-    }
-  };
-}
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
new file mode 100644
index 00000000..f62a9da7
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/columns-set/crud.tsx
@@ -0,0 +1,98 @@
+import * as api from "./api.js";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { message } from "ant-design-vue";
+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 }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      toolbar: {
+        columnsFilter: {
+          mode: "default"
+        }
+      },
+      actionbar: {
+        buttons: {
+          toggleMode: {
+            text: "切换简单模式",
+            click() {
+              crudBinding.value.toolbar.columnsFilter.mode = crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
+              message.info("当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
+            }
+          },
+          toggleColumnSetShow: {
+            text: "切换列设置项显隐",
+            click() {
+              crudBinding.value.toolbar.columnsFilter.originalColumns.hidden.columnSetShow = !crudBinding.value.toolbar.columnsFilter.originalColumns.hidden.columnSetShow;
+              message.info("切换第4列的列设置显隐");
+            }
+          },
+          toggleColumnSetDisabled: {
+            text: "切换列设置项禁用",
+            click() {
+              crudBinding.value.toolbar.columnsFilter.originalColumns.disabled.columnSetDisabled = !crudBinding.value.toolbar.columnsFilter.originalColumns.disabled.columnSetDisabled;
+              message.info("切换第3列的列设置禁用启用");
+            }
+          },
+          desc: {
+            text: "点击左侧按钮后，再点最右侧的列设置按钮查看效果"
+          }
+        }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        },
+        disabled: {
+          title: "列设置禁用",
+          type: "text",
+          column: {
+            columnSetDisabled: true
+          }
+        },
+        hidden: {
+          title: "列设置隐藏",
+          type: "text",
+          column: {
+            columnSetShow: false
+          }
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue b/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue
index a5436107..8fda6906 100644
--- a/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue
@@ -1,51 +1,47 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-alert class="ml-1" type="warning" message="列设置可以禁用或者隐藏某字段勾选" />
-        <a-button @click="columnsSetToggleMode()"> 切换简单模式 </a-button>
-      </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">
+        列设置
+        <span class="sub">列设置可以禁用或者隐藏某字段勾选 ，-------> 点击右侧最后一个按钮查看效果</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/toolbar.html#columnsfilter-mode">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, Ref } 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 { defineComponent, onMounted } from "vue";
+import createCrudOptions from "./crud";
+import { useFs } from "@fast-crud/fast-crud";
+import { message } from "ant-design-vue";
+
 export default defineComponent({
   name: "BasisColumnsSet",
   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";
-      message.info("当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
+      crudBinding.value.toolbar.columnsFilter.mode = crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
+      message.info("点击列设置按钮查看效果，当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
     }
 
+    function columnsSetShowToggle() {
+      crudBinding.value.table.columns.disabled.columnSetShow = !crudBinding.value.table.columns.disabled.columnSetShow;
+    }
     return {
       crudBinding,
       crudRef,
-      columnsSetToggleMode
+      columnsSetToggleMode,
+      columnsSetShowToggle
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/basis/columns-set/mock.js b/packages/ui/certd-client/src/views/crud/basis/columns-set/mock.ts
similarity index 87%
rename from packages/ui/certd-client/src/views/crud/basis/columns-set/mock.js
rename to packages/ui/certd-client/src/views/crud/basis/columns-set/mock.ts
index 90154b73..5c869f1c 100644
--- a/packages/ui/certd-client/src/views/crud/basis/columns-set/mock.js
+++ 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.js b/packages/ui/certd-client/src/views/crud/basis/compute-more/api.ts
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/basis/compute-more/api.js
rename to packages/ui/certd-client/src/views/crud/basis/compute-more/api.ts
index 39c56ba1..88e88dd5 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute-more/api.js
+++ 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute-more/crud.jsx b/packages/ui/certd-client/src/views/crud/basis/compute-more/crud.tsx
similarity index 74%
rename from packages/ui/certd-client/src/views/crud/basis/compute-more/crud.jsx
rename to packages/ui/certd-client/src/views/crud/basis/compute-more/crud.tsx
index 92ccdee8..73be370e 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute-more/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/basis/compute-more/crud.tsx
@@ -1,22 +1,20 @@
 import * as api from "./api";
-import { requestForMock } from "/src/api/service";
-import { useCompute } from "@fast-crud/fast-crud";
-import { message } from "ant-design-vue";
-import { ref, computed } from "vue";
-const { asyncCompute, compute } = useCompute();
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { computed, ref } 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);
   };
 
@@ -48,7 +46,7 @@ export default function ({ expose }) {
       },
       rowHandle: {
         fixed: "right",
-        align:'center',
+        align: "center"
       },
       columns: {
         id: {
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue b/packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue
index 01d9da38..8e806baa 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue
@@ -2,35 +2,27 @@
   <fs-page>
     <template #header>
       <div class="title">动态计算-更多测试</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">文档</a>
+      </div>
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </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 { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
+
 export default defineComponent({
   name: "BasisComputeMore",
   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/compute-more/mock.js b/packages/ui/certd-client/src/views/crud/basis/compute-more/mock.ts
similarity index 93%
rename from packages/ui/certd-client/src/views/crud/basis/compute-more/mock.js
rename to packages/ui/certd-client/src/views/crud/basis/compute-more/mock.ts
index ee602acf..63a51fbb 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute-more/mock.js
+++ 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/api.js b/packages/ui/certd-client/src/views/crud/basis/compute/api.ts
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/basis/compute/api.js
rename to packages/ui/certd-client/src/views/crud/basis/compute/api.ts
index c8ec9fc8..a68548e3 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute/api.js
+++ b/packages/ui/certd-client/src/views/crud/basis/compute/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormCompute";
-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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute/crud.jsx b/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx
similarity index 81%
rename from packages/ui/certd-client/src/views/crud/basis/compute/crud.jsx
rename to packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx
index 0f450f13..caf67e0f 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/basis/compute/crud.tsx
@@ -1,43 +1,29 @@
 import * as api from "./api";
 import { requestForMock } from "/src/api/service";
-import { useCompute } 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 } from "vue";
+
 const { asyncCompute, compute } = useCompute();
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+export default function ({ crudExpose, context }: 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);
   };
 
-  //普通的ref引用，可以动态切换配置
-  const showRef = ref(false);
-  const showTableRef = ref(true);
-  const showTableComputed = computed(() => {
-    return showTableRef.value;
-  });
-
-  const columnComponentShowRef = ref(true);
-  const columnComponentShowComputed = computed(() => {
-    return columnComponentShowRef.value;
-  });
+  const { showRef, showTableComputed, columnComponentShowComputed } = context;
 
   return {
-    output: {
-      showRef,
-      showTableRef,
-      columnComponentShowRef
-    },
     crudOptions: {
       request: {
         pageRequest,
@@ -58,9 +44,12 @@ export default function ({ expose }) {
       },
       rowHandle: {
         fixed: "right",
+        show: computed(() => {
+          return true;
+        }),
         buttons: {
           edit: {
-            show: compute(({ row }) => {
+            show: compute<boolean>(({ row }) => {
               return row.editable;
             })
           },
@@ -153,7 +142,7 @@ export default function ({ expose }) {
               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 });
                 }
@@ -172,14 +161,12 @@ export default function ({ expose }) {
               vModel: "value",
               placeholder: "异步计算远程获取options",
               options: asyncCompute({
-                watch({ form }) {
+                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";
+                  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/index.vue b/packages/ui/certd-client/src/views/crud/basis/compute/index.vue
index d7408935..d8907267 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/compute/index.vue
@@ -6,7 +6,7 @@
         <fs-icon icon="ion:apps-sharp" :spin="true" />
       </div>
       <div class="more">
-        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">帮助说明</a>
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">文档</a>
       </div>
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
@@ -15,6 +15,7 @@
           <span class="ml-1">表格显隐:<a-switch v-model:checked="showTableRef"></a-switch></span>
         </a-tooltip>
         <span class="ml-1">列显隐:<a-switch v-model:checked="columnComponentShowRef"></a-switch></span>
+        <span class="ml-1">列显隐2:<a-button @click="columnsMapSetShow">列显隐2</a-button></span>
         <a-alert class="ml-1" type="info" message="点击下方右边的编辑按钮查看示例效果-----------> ↓↓↓↓↓" />
       </template>
       <template #form_refSwitch>
@@ -24,36 +25,48 @@
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose } from "@fast-crud/fast-crud";
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
+
 export default defineComponent({
   name: "BasisCompute",
   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)
+    //普通的ref引用，可以动态切换配置
+    const showRef = ref(false);
+    const showTableRef = ref(true);
+    const showTableComputed = computed(() => {
+      return showTableRef.value;
+    });
 
+    const columnComponentShowRef = ref(true);
+    const columnComponentShowComputed = computed(() => {
+      return columnComponentShowRef.value;
+    });
+
+    const context = {
+      showRef,
+      showTableRef,
+      showTableComputed,
+      columnComponentShowRef,
+      columnComponentShowComputed
+    };
+
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
+    function columnsMapSetShow() {
+      crudBinding.value.table.columnsMap["id"].show = !crudBinding.value.table.columnsMap["id"].show;
+    }
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
       crudRef,
-      ...output
+      ...context,
+      columnsMapSetShow
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/basis/compute/mock.js b/packages/ui/certd-client/src/views/crud/basis/compute/mock.ts
similarity index 94%
rename from packages/ui/certd-client/src/views/crud/basis/compute/mock.js
rename to packages/ui/certd-client/src/views/crud/basis/compute/mock.ts
index b4c21d85..6bc6732f 100644
--- a/packages/ui/certd-client/src/views/crud/basis/compute/mock.js
+++ 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/custom/api.ts b/packages/ui/certd-client/src/views/crud/basis/custom/api.ts
new file mode 100644
index 00000000..1ccc733a
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/custom/api.ts
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/BasisCustom";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx
new file mode 100644
index 00000000..318f5f97
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/custom/crud.tsx
@@ -0,0 +1,146 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { shallowRef } from "vue";
+import VmodelCounter from "./vmodel-counter.vue";
+import { message } from "ant-design-vue";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        counter: {
+          title: "自定义组件",
+          type: "text",
+          column: {
+            component: {
+              //引用自定义组件
+              name: shallowRef(VmodelCounter),
+              color: "blue",
+              slots: {
+                //插槽示例
+                default() {
+                  return <span>counter on cell:</span>;
+                }
+              },
+              on: {
+                //监听事件
+                onChange({ $event, row }) {
+                  message.info("counter changed:" + $event);
+                }
+              }
+            }
+          },
+          form: {
+            //form表单
+            component: {
+              //引用自定义组件
+              name: shallowRef(VmodelCounter),
+              vModel: "modelValue",
+              color: "red",
+              on: {
+                //监听事件
+                onChange({ $event, form }) {
+                  message.info("counter changed:" + $event);
+                }
+              },
+              slots: {
+                //插槽示例
+                default() {
+                  return <span>counter on form:</span>;
+                }
+              }
+            }
+          },
+          search: {
+            show: true,
+            //form表单
+            component: {
+              color: "yellow",
+              slots: {
+                //插槽示例
+                default() {
+                  return "counter:";
+                }
+              }
+            }
+          }
+        },
+        cellRender: {
+          title: "单元格render",
+          type: "text",
+          column: {
+            cellRender({ value }) {
+              return <a-tag>{value}</a-tag>;
+            }
+          }
+        },
+        formAroundRender: {
+          title: "表单组件周围的render",
+          type: "text",
+          form: {
+            helper: "演示组件周围自定义render",
+            topRender({ value }) {
+              return <a-tag color="red">topRender</a-tag>;
+            },
+            bottomRender({ value }) {
+              return <a-tag color="red">bottomRender {value ?? ""}</a-tag>;
+            },
+            prefixRender({ value }) {
+              return <a-tag color="red">prefixRender</a-tag>;
+            },
+            suffixRender({ value }) {
+              return <a-tag color="red">suffixRender</a-tag>;
+            }
+          }
+        },
+        formRender: {
+          title: "字段组件本身render",
+          type: "text",
+          form: {
+            helper: "组件本身render",
+            render({ form }) {
+              return (
+                <div>
+                  <a-input v-model={[form.formRender, "value"]} />
+                  render value : {form.formRender}
+                </div>
+              );
+            }
+          }
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/index.vue b/packages/ui/certd-client/src/views/crud/basis/custom/index.vue
new file mode 100644
index 00000000..461dfbcc
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/custom/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">自定义组件</div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+
+export default defineComponent({
+  name: "BasisCustom",
+  setup() {
+    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef,
+      ...context
+    };
+  }
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/mock.ts b/packages/ui/certd-client/src/views/crud/basis/custom/mock.ts
new file mode 100644
index 00000000..84e0ca9f
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/custom/mock.ts
@@ -0,0 +1,22 @@
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "BasisCustom",
+  idGenerator: 0
+};
+const list = [
+  {
+    counter: 1,
+    cellRender: "cellRender1"
+  },
+  {
+    counter: 2,
+    cellRender: "cellRender2"
+  },
+  {
+    counter: 3,
+    cellRender: "cellRender3"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
diff --git a/packages/ui/certd-client/src/views/crud/basis/custom/vmodel-counter.vue b/packages/ui/certd-client/src/views/crud/basis/custom/vmodel-counter.vue
new file mode 100644
index 00000000..226c0a5c
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/custom/vmodel-counter.vue
@@ -0,0 +1,45 @@
+<template>
+  <a-tooltip title="点击我自增">
+    <a-tag :color="color" @click="onClick">
+      <!-- 插槽示例 -->
+      <slot></slot>
+      <span> {{ modelValue }}</span>
+    </a-tag>
+  </a-tooltip>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch } from "vue";
+
+export default defineComponent({
+  name: "VmodelCounter",
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: String,
+      default: "success"
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, ctx) {
+    function onClick() {
+      //发射modelValue更新事件，父组件引用时只需要v-model={xxx}即可
+      ctx.emit("update:modelValue", props.modelValue + 1);
+    }
+    watch(
+      () => {
+        return props.modelValue;
+      },
+      (value) => {
+        ctx.emit("change", value);
+      }
+    );
+    return {
+      onClick
+    };
+  }
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/basis/first/api.ts b/packages/ui/certd-client/src/views/crud/basis/first/api.ts
new file mode 100644
index 00000000..227af989
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/first/api.ts
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FsCrudFirst";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
diff --git a/packages/ui/certd-client/src/views/crud/basis/first/crud.ts b/packages/ui/certd-client/src/views/crud/basis/first/crud.ts
new file mode 100644
index 00000000..c0ed096a
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/first/crud.ts
@@ -0,0 +1,52 @@
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import * as api from "./api";
+export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      // 自定义crudOptions配置
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      //两个字段
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text",
+          search: { show: true },
+          column: {
+            resizable: true,
+            width: 200
+          }
+        },
+        type: {
+          title: "类型",
+          type: "dict-select",
+          dict: dict({
+            data: [
+              { value: 1, label: "开始", color: "green" },
+              { value: 0, label: "停止", color: "red" }
+            ]
+          })
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/basis/first/index.vue b/packages/ui/certd-client/src/views/crud/basis/first/index.vue
index 6edf3a6d..27a4c5d7 100644
--- a/packages/ui/certd-client/src/views/crud/basis/first/index.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/first/index.vue
@@ -1,105 +1,43 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">第一个crud</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/first.html">文档</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding" />
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { dict, useCrud } from "@fast-crud/fast-crud";
-import { useExpose } from "@fast-crud/fast-crud";
-import _ from "lodash-es";
-
-//此处为crudOptions配置
-const createCrudOptions = function ({ expose }) {
-  //本地模拟后台crud接口方法 ----开始
-  const records = [{ id: 1, name: "Hello World", type: 1 }];
-  const pageRequest = async (query) => {
-    return {
-      records,
-      currentPage: 1,
-      pageSize: 20,
-      total: records.length
-    };
-  };
-  const editRequest = async ({ form, row }) => {
-    const target = _.find(records, (item) => {
-      return row.id === item.id;
-    });
-    _.merge(target, form);
-    return target;
-  };
-  const delRequest = async ({ row }) => {
-    _.remove(records, (item) => {
-      return item.id === row.id;
-    });
-  };
-  const addRequest = async ({ form }) => {
-    const maxRecord = _.maxBy(records, (item) => {
-      return item.id;
-    });
-    form.id = (maxRecord?.id || 0) + 1;
-    records.push(form);
-    return form;
-  };
-  //本地模拟后台crud接口方法 -----结束
-
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      },
-      columns: {
-        name: {
-          title: "姓名",
-          type: "text",
-          search: { show: true },
-          column: {
-            resizable: true,
-            width: 200
-          }
-        },
-        type: {
-          title: "类型",
-          type: "dict-select",
-          dict: dict({
-            data: [
-              { value: 1, label: "开始" },
-              { value: 0, label: "停止" }
-            ]
-          })
-        }
-      }
-    }
-  };
-};
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
 
 //此处为组件定义
 export default defineComponent({
   name: "FsCrudFirst",
   setup() {
-    // crud组件的ref
-    const crudRef = ref();
-    // crud 配置的ref
-    const crudBinding = ref();
-    // 暴露的方法
-    const { expose } = useExpose({ crudRef, crudBinding });
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // 初始化crud配置
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    // // crud组件的ref
+    // const crudRef: Ref = ref();
+    // // crud 配置的ref
+    // const crudBinding: Ref<CrudBinding> = ref();
+    // // 暴露的方法
+    // const { crudExpose } = useExpose({ crudRef, crudBinding });
+    // // 你的crud配置
+    // const { crudOptions, customExport } = createCrudOptions({ crudExpose, customValue });
+    // // 初始化crud配置
+    // const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
+
+    //  =======以上为fs的初始化代码=========
+    //  =======你可以简写为下面这一行========
+    const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: {} });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
-
     return {
       crudBinding,
       crudRef
diff --git a/packages/ui/certd-client/src/views/crud/basis/first/mock.ts b/packages/ui/certd-client/src/views/crud/basis/first/mock.ts
new file mode 100644
index 00000000..bb9ce24a
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/first/mock.ts
@@ -0,0 +1,22 @@
+// @ts-ignore
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "FsCrudFirst",
+  idGenerator: 0
+};
+const list = [
+  {
+    name: "张三",
+    type: 1
+  },
+  {
+    name: "李四",
+    type: 0
+  },
+  {
+    name: "王五"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
diff --git a/packages/ui/certd-client/src/views/crud/basis/helloworld/index.vue b/packages/ui/certd-client/src/views/crud/basis/helloworld/index.vue
new file mode 100644
index 00000000..62a15464
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/helloworld/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">HelloWorld</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/integration.html">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, reactive } from "vue";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useCrud, useFs, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import _ from "lodash-es";
+
+//此处为crudOptions配置
+const createCrudOptions = function ({}: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  //本地模拟后台crud接口方法 ----开始
+  const records = reactive([{ id: 1, name: "Hello World", type: 1 }]);
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return {
+      records,
+      offset: 0, //后续transformRes会计算为currentPage
+      limit: 20, //后续transformRes会计算为pageSize
+      total: records.length
+    };
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    const target = _.find(records, (item) => {
+      return row.id === item.id;
+    });
+    _.merge(target, form);
+    return target;
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    _.remove(records, (item) => {
+      return item.id === row.id;
+    });
+  };
+  const addRequest = async ({ form }: AddReq) => {
+    const maxRecord = _.maxBy(records, (item) => {
+      return item.id;
+    });
+    form.id = (maxRecord?.id || 0) + 1;
+    records.push(form);
+    return form;
+  };
+  //本地模拟后台crud接口方法 -----结束
+
+  return {
+    //自定义变量返回
+    customExport: {},
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text",
+          search: { show: true },
+          column: {
+            resizable: true,
+            width: 200
+          }
+        },
+        type: {
+          title: "类型",
+          type: "dict-select",
+          dict: dict({
+            data: [
+              { value: 1, label: "开始" },
+              { value: 0, label: "停止" }
+            ]
+          })
+        }
+      }
+    }
+  };
+};
+
+//此处为组件定义
+export default defineComponent({
+  name: "FsCrudHelloWorld",
+  setup() {
+    // // crud组件的ref
+    // const crudRef: Ref = ref();
+    // // crud 配置的ref
+    // const crudBinding: Ref<CrudBinding> = ref();
+    // // 暴露的方法
+    // const { crudExpose } = useExpose({ crudRef, crudBinding });
+    // // 你的crud配置
+    // const { crudOptions, customExport } = createCrudOptions({ crudExpose, context });
+    // // 初始化crud配置
+    // const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
+
+    //  =======以上为fs的初始化代码=========
+    //  =======你可以简写为下面这一行========
+    const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: {} });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
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 72%
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 d62b1b72..4e4d75cf 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 e789ca3e..48d9c48b 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 3c50ea0a..9a53a5b2 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
@@ -2,7 +2,9 @@
   <fs-page>
     <template #header>
       <div class="title">CRUD示例【国际化】</div>
-      <div class="more"><a-button @click="showDemo">更多</a-button></div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/i18n.html">文档</a>
+      </div>
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
@@ -12,41 +14,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";
-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();
     });
 
-    function showDemo() {
-      message("演示按钮");
-    }
     return {
       crudBinding,
-      crudRef,
-      showDemo
+      crudRef
     };
   }
 });
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 4bbcc95b..298354ac 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 73%
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 1ee8f29f..23cf53e8 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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.jsx
deleted file mode 100644
index 085f4852..00000000
--- a/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }) {
-  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: {
-      container: {
-        is: "fs-layout-card"
-      },
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      },
-      columns: {
-        id: {
-          title: "ID",
-          key: "id",
-          type: "number",
-          column: {
-            width: 50
-          },
-          form: {
-            show: false
-          }
-        },
-        name: {
-          title: "姓名",
-          type: "text",
-          search: { show: true }
-        },
-        city: {
-          title: "城市",
-          type: "dict-select",
-          search: { show: true },
-          dict: dict({
-            value: "id",
-            label: "text",
-            data: [
-              { id: "sz", text: "深圳", color: "success" },
-              { id: "gz", text: "广州", color: "blue" },
-              { id: "bj", text: "北京" },
-              { id: "wh", text: "武汉" },
-              { id: "sh", text: "上海" }
-            ]
-          })
-        },
-        radio: {
-          title: "单选",
-          search: { show: true },
-          type: "dict-radio",
-          dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?single"
-          })
-        }
-      }
-    }
-  };
-}
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.tsx
new file mode 100644
index 00000000..0036ab86
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-card/crud.tsx
@@ -0,0 +1,105 @@
+import * as api from "./api";
+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 }: 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 cityDictRef = dict({
+    value: "id",
+    label: "text",
+    data: [
+      { id: "sz", text: "深圳", color: "success" },
+      { id: "gz", text: "广州", color: "blue" },
+      { id: "bj", text: "北京" },
+      { id: "wh", text: "武汉" },
+      { id: "sh", text: "上海" }
+    ]
+  });
+  return {
+    crudOptions: {
+      container: {
+        is: "fs-layout-card"
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      actionbar: {
+        show: true
+      },
+      toolbar: {
+        show: true
+      },
+      search: {
+        buttons: {
+          actionbarToggle: {
+            text: "actionbar/toolbar显隐",
+            show: true,
+            click() {
+              crudExpose.crudBinding.value.actionbar.show = !crudExpose.crudBinding.value.actionbar.show;
+              crudExpose.crudBinding.value.toolbar.show = !crudExpose.crudBinding.value.toolbar.show;
+            }
+          }
+        }
+      },
+      tabs: {
+        name: "city",
+        show: true,
+        type: "card",
+        value: "id",
+        label: "text",
+        options: computed(() => {
+          return cityDictRef.data;
+        })
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        name: {
+          title: "姓名",
+          type: "text",
+          search: { show: true }
+        },
+        city: {
+          title: "城市",
+          type: "dict-select",
+          search: { show: true },
+          dict: cityDictRef
+        },
+        radio: {
+          title: "单选",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}
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 60597b7e..8788bc80 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
@@ -1,30 +1,24 @@
 <template>
   <fs-page class="page-layout-card">
+    <template #header>
+      <div class="title">Card布局</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/layout.html">文档</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
-<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(() => {
@@ -42,5 +36,9 @@ export default defineComponent({
 <style lang="less">
 .page-layout-card {
   background-color: #eee;
+
+  .fs-page-header {
+    background-color: #fff;
+  }
 }
 </style>
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 417d9601..d7c7bc48 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 73%
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 f243b402..3c390674 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 72%
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 85192994..af9062dd 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,27 +1,33 @@
 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: {
         is: shallowRef(CustomLayout) //可以将自定义布局组件全局注册，这里只需要配置name即可
       },
+      tabs: {
+        show: true,
+        name: "city",
+        type: "card"
+      } as any,
       request: {
         pageRequest,
         addRequest,
@@ -48,7 +54,7 @@ export default function ({ crudExpose }) {
         city: {
           title: "城市",
           type: "dict-select",
-          search: { show: false },
+          search: { show: true },
           dict: dict({
             value: "id",
             label: "text",
diff --git a/packages/ui/certd-client/src/views/crud/basis/layout-custom/custom-layout.vue b/packages/ui/certd-client/src/views/crud/basis/layout-custom/custom-layout.vue
index 0f65a9b2..b388e917 100644
--- a/packages/ui/certd-client/src/views/crud/basis/layout-custom/custom-layout.vue
+++ b/packages/ui/certd-client/src/views/crud/basis/layout-custom/custom-layout.vue
@@ -9,6 +9,8 @@
     <div class="layout-top">
       <!-- ↓↓↓↓↓  关键插槽：动作条  ↓↓↓↓ -->
       <slot name="actionbar"></slot>
+
+      <slot name="tabs"></slot>
       <!-- ↓↓↓↓↓  上翻页条  ↓↓↓↓ -->
       <slot name="pagination"></slot>
     </div>
@@ -70,5 +72,10 @@ export default defineComponent({
     text-align: right;
     padding: 5px 10px 5px 10px;
   }
+
+  .fs-tabs-filter {
+    flex: 1;
+    margin-left: 10px;
+  }
 }
 </style>
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 747c9dd9..0f2e1ab2 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
@@ -1,41 +1,27 @@
 <template>
   <fs-page class="page-layout-custom">
     <template #header>
-      <div class="title">自定义布局</div>
+      <div class="title">
+        自定义布局
+        <span class="sub">通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/layout.html">文档</a>
+      </div>
     </template>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="info"
-          message="通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条 -------->"
-        />
-      </template>
-    </fs-crud>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
-<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 d877b043..4b8662d8 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/api.ts b/packages/ui/certd-client/src/views/crud/basis/reset/api.ts
new file mode 100644
index 00000000..f93c5e96
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/reset/api.ts
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/BasisReset";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
diff --git a/packages/ui/certd-client/src/views/crud/basis/reset/crud.tsx b/packages/ui/certd-client/src/views/crud/basis/reset/crud.tsx
new file mode 100644
index 00000000..07f81503
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/reset/crud.tsx
@@ -0,0 +1,54 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    output: {},
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        switch: {
+          title: "开关",
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { value: true, label: "开启" },
+              { value: false, label: "关闭" }
+            ]
+          })
+        }
+      }
+    }
+  };
+}
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
new file mode 100644
index 00000000..12fe66a5
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/reset/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        重置CrudOptions
+        <span class="sub">重置CrudOptions,演示2秒后追加一个字段</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/use.html">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { CrudOptions, DynamicType, useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+import _ from "lodash-es";
+
+export default defineComponent({
+  name: "BasisReset",
+  setup() {
+    const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions, appendBindingOptions } = useFs({ createCrudOptions, context: {} });
+
+    setTimeout(() => {
+      //合并新的crudOptions
+      const newOptions: DynamicType<CrudOptions> = _.merge(crudOptions, {
+        columns: {
+          text: {
+            title: "追加字段",
+            type: "text"
+          }
+        }
+      });
+      //重置crudBinding
+      resetCrudOptions(newOptions);
+      crudExpose.doRefresh();
+    }, 2000);
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/basis/reset/mock.ts b/packages/ui/certd-client/src/views/crud/basis/reset/mock.ts
new file mode 100644
index 00000000..d32e1deb
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/basis/reset/mock.ts
@@ -0,0 +1,23 @@
+// @ts-ignore
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "BasisReset",
+  idGenerator: 0
+};
+const list = [
+  {
+    switch: true,
+    text: "1111"
+  },
+  {
+    switch: true,
+    text: "2222"
+  },
+  {
+    switch: true,
+    text: "3333"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
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 73%
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 35fdfa0c..620c51e5 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 15dde4a4..975ea76d 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,24 +1,24 @@
 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);
   };
 
   return {
-    output: {},
     crudOptions: {
       request: {
         pageRequest,
@@ -52,12 +52,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 +67,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 +81,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 0a6bc659..642e5973 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
@@ -2,41 +2,33 @@
   <fs-page>
     <template #header>
       <div class="title">ValueChange</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#valuebuilder与valueresolve">文档</a>
+      </div>
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </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, context } = useFs({ createCrudOptions });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
       crudBinding,
       crudRef,
-      ...output
+      ...context
     };
   }
 });
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 2d16ebcc..f2967377 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 73%
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 99ab67a8..ade0ebe4 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 4e10ee19..94385795 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 bf86cd95..77c42958 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 bddcce22..ac808811 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 73%
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 8e851ae5..777c83f3 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 2b5206b7..fa2aa0a2 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 58428ac7..21364b10 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 01bc0582..304c781c 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 73%
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 f1d4edba..026486f7 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 ba55af1b..a35838dd 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 a1dd4729..afb6bdd5 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 1763e9bb..5bc8deac 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 73%
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 f6a0197f..46e9f44c 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 69%
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 ba405c56..3e241355 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: {
@@ -27,7 +28,7 @@ export default function ({ expose }) {
         delRequest
       },
       table: {
-        scroll: { x: 2000 }
+        scroll: { x: 3000 }
       },
       rowHandle: { fixed: "right" },
       columns: {
@@ -71,6 +72,17 @@ export default function ({ expose }) {
                 largest: 2
               }
             }
+          },
+          valueBuilder({ value, row, key }) {
+            console.log("value builder:", key, value, row);
+            if (value != null) {
+              row[key] = dayjs(value);
+            }
+          },
+          valueResolve({ value, row, key }) {
+            if (value != null) {
+              row[key] = value.unix();
+            }
           }
         },
         datetime: {
@@ -105,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);
                 }
               }
@@ -122,13 +134,49 @@ export default function ({ expose }) {
             }
           }
         },
+        month: {
+          title: "月份",
+          type: "month",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
+            }
+          }
+        },
+        week: {
+          title: "星期",
+          type: "week",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
+            }
+          }
+        },
+        quarter: {
+          title: "季度",
+          type: "quarter",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
+            }
+          }
+        },
+        year: {
+          title: "年份",
+          type: "year",
+          form: {
+            component: {
+              valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
+            }
+          }
+        },
         disabledDate: {
           title: "禁用日期",
           type: "date",
           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 8ec79528..be5473bc 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 88%
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 895fddda..67db6414 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
 };
@@ -12,6 +12,10 @@ const list = [
     date: "2019-09-02 11:11:11",
     format: "2019-09-21 11:11:11",
     time: "2019-09-22 12:11:11",
+    month: "2019-09-22 12:11:11",
+    week: "2019-09-22 12:11:11",
+    quarter: "2019-09-22 12:11:11",
+    year: "2019-09-22 12:11:11",
     daterangeStart: "2019-09-23 11:11:11",
     daterangeEnd: "2019-09-24 11:11:11",
     datetimerangeStart: "2019-09-25 11:11:11",
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 73%
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 523cfb37..c49c7a83 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 53%
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 d32431b7..3fcd7e02 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,27 +76,40 @@ 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 }) => {
             //   return form.change === "wang";
             // }),
-            rules: [{ required: true, message: "此项必填" }],
+            rules: [
+              { required: true, message: "此项必填" },
+              {
+                validator: async (rule, value) => {
+                  if (value.trim() === "<p><br></p>") {
+                    throw new Error("内容不能为空");
+                  }
+                }
+              }
+            ],
             component: {
               disabled: compute(({ form }) => {
                 return form.disabled;
               }),
               id: "1", // 当同一个页面有多个editor时，需要配置不同的id
-              config: {},
+              toolbarConfig: {},
+              editorConfig: {},
+              onOnChange(value: any) {
+                console.log("value changed", value);
+              },
               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 61e5e203..e35c9adc 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 8351e075..c43684f0 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 73%
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 4db9ed9b..f29e47ad 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 ad9c38be..c8b55f0d 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 f8f1e929..1b6be1c8 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 fe2de8ed..ffe920b0 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/independent/index.vue b/packages/ui/certd-client/src/views/crud/component/independent/index.vue
new file mode 100644
index 00000000..8db10b43
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/independent/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">独立使用组件</div>
+      <div class="more"></div>
+    </template>
+    <div style="padding: 20px; width: 50%">
+      <a-form ref="formRef" :model="form" :label-col="{ style: { width: '150px' } }">
+        <a-form-item label="上传">
+          <fs-file-uploader v-model="form.upload" :uploader="uploader" />
+        </a-form-item>
+        <a-form-item label="裁剪">
+          <fs-cropper-uploader v-model="form.avatar" v-bind="cropperUploader" />
+        </a-form-item>
+        <a-form-item label="可复制">
+          <fs-copyable v-model="form.copyable" />
+        </a-form-item>
+        <a-form-item label="人性化时间">
+          <fs-time-humanize v-model="form.humanizeTime" />
+          = {{ form.humanizeTime.format("YYYY-MM-DD HH:mm:ss") }}
+        </a-form-item>
+        <a-form-item label="dict-select">
+          <fs-dict-select v-model="form.select" :dict="dictRef" />
+        </a-form-item>
+        <a-form-item label="使用上传方法">
+          <input type="file" @change="fileUploaderChange" />
+          <a v-if="signedUrl" :href="signedUrl" target="_blank">下载</a>
+        </a-form-item>
+        <a-form-item>
+          <a-button @click="submit">提交</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { message } from "ant-design-vue";
+import { dict, useUi } from "@fast-crud/fast-crud";
+import dayjs from "dayjs";
+import { FsUploaderS3, loadUploader, useUploader } from "@fast-crud/fast-extends";
+
+defineOptions({
+  name: "ComponentIndependent"
+});
+const form = reactive({
+  upload: [],
+  avatar: undefined,
+  copyable: "可复制的内容",
+  select: 1,
+  humanizeTime: dayjs(new Date().getTime() - 100000)
+});
+
+const uploader = ref({
+  type: "cos",
+  keepName: true
+});
+
+const cropperUploader = ref({
+  uploader: {
+    type: "cos",
+    keepName: true
+  },
+  cropper: {
+    viewMode: 1
+  },
+  async onReady(context: any) {
+    console.log("onReady", context);
+    context.zoom(-0.1);
+    context.zoom(-0.1);
+    context.zoom(-0.1);
+  }
+});
+
+const dictRef = dict({
+  data: [
+    { label: "选项1", value: 1 },
+    { label: "选项2", value: 2 },
+    { label: "选项3", value: 3 }
+  ]
+});
+
+const signedUrl = ref();
+async function fileUploaderChange(event: any) {
+  const file = event.target.files[0];
+  //异步加载上传组件
+  const s3Uploader = await loadUploader<FsUploaderS3>("s3");
+  const res = await s3Uploader.upload({
+    file,
+    fileName: file.name,
+    onProgress(progress: any) {
+      console.log("progress:" + progress.percent + "%");
+    }
+  });
+  const { ui } = useUi();
+  ui.message.info("upload success；" + JSON.stringify(res));
+  //构建下载地址
+  const { getConfig } = useUploader();
+  const s3Config = getConfig("s3");
+  const url = await s3Uploader.buildSignedUrl(s3Config, res.key, "get");
+  signedUrl.value = url;
+}
+
+function submit() {
+  message.info("submit:" + JSON.stringify(form));
+  console.log("submit:", form);
+}
+</script>
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 73%
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 a62736e6..ff19433e 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 898fb5d3..b2753af4 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 34868881..1d854ac3 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 727a1788..ed10e813 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 73%
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 30c88fc3..7fe4bc4e 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 057f7b18..61c755bc 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 f6989e02..5453d792 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 6b8854a1..968f562b 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 73%
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 761dae47..707ff60b 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 cf732019..a78acdbd 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 d851e585..61eb616e 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 64751485..ba3efaf0 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 73%
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 6c9e2511..71f20c92 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 89%
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 bead50f6..8dbed6ad 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);
   };
 
@@ -121,10 +121,7 @@ export default function ({ expose }) {
           title: "单选远程",
           search: {
             show: true,
-            rules: null,
-            component: {
-              style: { width: "100px" }
-            }
+            rules: null
           },
           type: "dict-select",
           dict: dict({
@@ -132,6 +129,11 @@ export default function ({ expose }) {
           }),
           form: {
             rules: [{ required: true, message: "请选择一个选项" }]
+          },
+          column: {
+            component: {
+              type: "text"
+            }
           }
         },
         filter: {
@@ -145,7 +147,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,7 +155,8 @@ export default function ({ expose }) {
         },
         search: {
           title: "远程搜索",
-          search: { show: true, component: { style: { width: "240px" } } },
+          type: "text",
+          search: { show: true },
           form: {
             component: {
               name: "a-select",
@@ -165,7 +168,7 @@ export default function ({ expose }) {
               allowClear: true,
               placeholder: "输入远程搜索，数据仅供演示",
               options: searchState.data,
-              onSearch(value) {
+              onSearch(value: any) {
                 fetchUser(value);
               },
               children: {
@@ -206,10 +209,8 @@ export default function ({ expose }) {
         },
         disabledOptions: {
           title: "禁用某个选项",
-          key: "disabledOptions",
           type: "dict-select",
           dict: dict({
-            cloneable: true,
             url: "/mock/dicts/OpenStatusEnum?disabledOptions"
           }),
           form: {
@@ -217,7 +218,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 +234,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;
@@ -265,11 +265,13 @@ export default function ({ expose }) {
           title: "多选自动染色",
           sortable: true,
           type: "dict-select",
+          search: { show: true },
           form: {
             title: "多选本地",
             component: {
               mode: "multiple"
-            }
+            },
+            rules: [{ required: true, message: "请选择一个选项" }]
           },
           dict: dict({
             data: [
@@ -311,6 +313,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 8278b456..d778ca0a 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 d7448877..d49561ca 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 73%
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 f2e25bed..ba122962 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 e2d751a7..278283fa 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 beb30f7d..67f85dac 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 42772b1f..6ee54302 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/table-select/api.ts b/packages/ui/certd-client/src/views/crud/component/table-select/api.ts
new file mode 100644
index 00000000..c34364c7
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/table-select/api.ts
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/ComponentTableSelect";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
diff --git a/packages/ui/certd-client/src/views/crud/component/table-select/crud.tsx b/packages/ui/certd-client/src/views/crud/component/table-select/crud.tsx
new file mode 100644
index 00000000..acfaaa01
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/table-select/crud.tsx
@@ -0,0 +1,98 @@
+import * as api from "./api";
+import * as textTableApi from "../text/api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import createCrudOptionsText from "../text/crud";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        single: {
+          title: "单选",
+          search: { show: true },
+          type: "table-select",
+          dict: dict({
+            value: "id",
+            label: "name",
+            getNodesByValues: async (values: any[]) => {
+              return await textTableApi.GetByIds(values);
+            }
+          }),
+          form: {
+            component: {
+              crossPage: true,
+              createCrudOptions: createCrudOptionsText,
+              crudOptionsOverride: {
+                table: {
+                  scroll: {
+                    x: 2000
+                  }
+                }
+              }
+            }
+          }
+        },
+        multi: {
+          title: "多选",
+          search: { show: true },
+          type: "table-select",
+          dict: dict({
+            value: "id",
+            label: "name",
+            getNodesByValues: async (values: any[]) => {
+              return await textTableApi.GetByIds(values);
+            }
+          }),
+          form: {
+            component: {
+              crossPage: true,
+              multiple: true,
+              createCrudOptions: createCrudOptionsText,
+              crudOptionsOverride: {
+                table: {
+                  scroll: {
+                    x: 2000
+                  }
+                },
+                rowHandle: {
+                  fixed: "right"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/component/table-select/index.vue b/packages/ui/certd-client/src/views/crud/component/table-select/index.vue
new file mode 100644
index 00000000..cf9684cc
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/table-select/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<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: "ComponentTableSelect",
+  setup() {
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    const value = ref(null);
+    return {
+      crudBinding,
+      crudRef,
+      value
+    };
+  }
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/component/table-select/mock.ts b/packages/ui/certd-client/src/views/crud/component/table-select/mock.ts
new file mode 100644
index 00000000..b44acd38
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/table-select/mock.ts
@@ -0,0 +1,21 @@
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "ComponentTableSelect",
+  idGenerator: 0
+};
+const list = [
+  {
+    single: 1,
+    multi: [1, 2]
+  },
+  {
+    single: 3,
+    multi: [1, 2, 3]
+  },
+  {
+    single: 2
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
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.js
deleted file mode 100644
index 2111f772..00000000
--- a/packages/ui/certd-client/src/views/crud/component/text/api.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { requestForMock } from "/src/api/service";
-const request = requestForMock;
-const apiPrefix = "/mock/ComponentText";
-export function GetList(query) {
-  return request({
-    url: apiPrefix + "/page",
-    method: "get",
-    data: query
-  });
-}
-
-export function AddObj(obj) {
-  return request({
-    url: apiPrefix + "/add",
-    method: "post",
-    data: obj
-  });
-}
-
-export function UpdateObj(obj) {
-  return request({
-    url: apiPrefix + "/update",
-    method: "post",
-    data: obj
-  });
-}
-
-export function DelObj(id) {
-  return request({
-    url: apiPrefix + "/delete",
-    method: "post",
-    params: { id }
-  });
-}
-
-export function GetObj(id) {
-  return request({
-    url: apiPrefix + "/info",
-    method: "get",
-    params: { id }
-  });
-}
diff --git a/packages/ui/certd-client/src/views/crud/component/text/api.ts b/packages/ui/certd-client/src/views/crud/component/text/api.ts
new file mode 100644
index 00000000..6227edcd
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/text/api.ts
@@ -0,0 +1,49 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/ComponentText";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
+export function GetByIds(ids: any) {
+  return request({
+    url: apiPrefix + "/byIds",
+    method: "post",
+    data: { ids }
+  });
+}
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 53%
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 24850e9e..46be924d 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: {
@@ -36,6 +37,56 @@ export default function ({ expose }) {
             }
           }
         },
+        trim: {
+          title: "trim空格",
+          type: "text", //虽然不写也能正确显示组件，但不建议省略它
+          search: { show: true },
+          form: {
+            component: {
+              vModel: {
+                name: "value",
+                trim: true
+              },
+              maxlength: 20
+            },
+            helper: "自动移除两端空格"
+          }
+        },
+        number: {
+          title: "转换为number",
+          type: "text", //虽然不写也能正确显示组件，但不建议省略它
+          search: { show: true },
+          form: {
+            component: {
+              vModel: {
+                name: "value",
+                number: true
+              },
+              maxlength: 20
+            },
+            helper: "自动转为number"
+          }
+        },
+        transform: {
+          title: "自定义transform",
+          type: "text", //虽然不写也能正确显示组件，但不建议省略它
+          search: { show: true },
+          form: {
+            component: {
+              vModel: {
+                name: "value",
+                transform: (value) => {
+                  if (!value) {
+                    return undefined;
+                  }
+                  return value;
+                }
+              },
+              maxlength: 20,
+              helper: "自定义transform方法，此处演示空字符串转为undefined"
+            }
+          }
+        },
         search: {
           title: "搜索",
           type: "text",
@@ -92,23 +143,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 +161,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 a97ef551..698daef5 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
@@ -1,34 +1,31 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">
+        文本类型
+        <span class="sub">
+          <span>type='text'</span>
+          <fs-copyable :inline="true" model-value="文本复制组件测试" style="width: 200px; margin-left: 100px" :button="{ showOnHover: false, show: true, text: '点我复制' }" />
+        </span>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding" />
   </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 92%
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 4bc9df77..da007409 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
 };
@@ -8,6 +8,8 @@ const list = [
     name: "王小虎",
     date: "2016-05-02",
     status: "0",
+    trim: "  aa  aa ",
+    number: "123",
     province: "1",
     avatar: "https://alicdn.antdv.com/vue.png",
     show: true,
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 73%
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 b9db03f1..8b567c7a 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 1d3ce5ab..8a3300ec 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 b5c74073..41c63c5f 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 ed3a1d39..66ec979d 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 73%
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 c5871d5b..cddadbd7 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 c5dd0c41..762f2156 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 0a305710..f1343b87 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 c3de4857..ebe8d758 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 73%
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 536456ea..93f67345 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 05e54e16..bd20eb7d 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 8b4bc1ef..1411fbc0 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 5c608212..721e514a 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 73%
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 5113d49c..3680fec0 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 4d8e168c..fe827fd4 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 3e6a98bf..3a569cb7 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 83108782..8edd683b 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 73%
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 af8d42b4..2abff86c 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 60%
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 7a9cb064..de50d636 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";
+import { createUploaderRules } 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: {
@@ -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;
               }
             }
@@ -73,16 +74,17 @@ export default function ({ expose }) {
           type: "image-uploader",
           form: {
             component: {
-              limit: 1,
+              limit: 2,
               uploader: {
                 type: "form"
               }
             },
-            helper: "最大可上传1个文件"
+            rules: createUploaderRules([{ required: true, message: "此项必传", trigger: "change" }]),
+            helper: "最大可上传2个文件"
           },
           column: {
             component: {
-              buildPreviewUrl({ url, index }) {
+              buildPreviewUrl({ url, index }: any) {
                 if (index === 0) {
                   return "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";
                 } else {
@@ -92,21 +94,29 @@ export default function ({ expose }) {
             }
           }
         },
+        error: {
+          title: "error",
+          type: "image-uploader"
+        },
+        object: {
+          title: "object",
+          type: "image-uploader"
+        },
         pictureCard2: {
           title: "通过urls显示",
           type: "image-uploader",
+          form: {
+            show: false,
+            component: {
+              uploader: {
+                type: "form"
+              }
+            }
+          },
           column: {
             component: {
-              urls: [
-                {
-                  url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1",
-                  previewUrl: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?preview1"
-                },
-                {
-                  url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?2",
-                  previewUrl: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?preview2"
-                }
-              ]
+              vModel: "urls"
+              // urls:[{url:'xxxx',previewUrl:'xxxx'}]
             }
           }
         },
@@ -142,7 +152,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);
@@ -152,7 +162,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);
@@ -192,7 +244,7 @@ export default function ({ expose }) {
           type: "file-uploader",
           form: {
             component: {
-              accept: "*.jpg,*.png"
+              accept: ".jpg,.png"
             },
             helper: "只能上传jpg或者png"
           }
@@ -201,13 +253,8 @@ export default function ({ expose }) {
           title: "校验",
           type: "file-uploader",
           form: {
-            rules: [
-              { required: true, message: "此项必传" },
-              {
-                validator: AllUploadSuccessValidator(), //如果要自定义校验规则则需要手动配置这个
-                message: "还有文件正在上传，请稍候"
-              }
-            ],
+            // 使用createUploaderRules创建校验规则,会附带文件还未上传完成的校验
+            rules: createUploaderRules([{ required: true, message: "此项必传", trigger: "change" }]),
             helper: "大小不能超过50M，文件未上传完成之前，阻止提交",
             component: {
               uploader: {
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 eaae1cac..87ac316d 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.js
deleted file mode 100644
index e4fda8db..00000000
--- a/packages/ui/certd-client/src/views/crud/component/uploader/form/mock.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import mockUtil from "/src/mock/base";
-const options = {
-  name: "ComponentUploader",
-  idGenerator: 0
-};
-const list = [
-  {
-    avatar: "http://greper.handsfree.work/extends/avatar.jpg",
-    file: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
-    pictureCard: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
-    limit: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
-    statusRemote: "0",
-    keyValueType: "/2022-12-20/qygzqdjd1g.yaml"
-  },
-  {
-    radio: "2"
-  },
-  {
-    radio: "0"
-  }
-];
-options.list = list;
-const mock = mockUtil.buildMock(options);
-export default mock;
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/form/mock.ts b/packages/ui/certd-client/src/views/crud/component/uploader/form/mock.ts
new file mode 100644
index 00000000..bc394d7d
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/form/mock.ts
@@ -0,0 +1,38 @@
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "ComponentUploader",
+  idGenerator: 0
+};
+const list = [
+  {
+    avatar: "http://greper.handsfree.work/extends/avatar.jpg",
+    file: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
+    pictureCard: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
+    error: ["http://localhost:11111/error_image"],
+    pictureCard2: [
+      {
+        url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1",
+        previewUrl: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?preview1"
+      },
+      {
+        url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?2",
+        previewUrl: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?preview2"
+      }
+    ],
+    limit: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
+    statusRemote: "0",
+    keyValueType: "/2022-12-20/qygzqdjd1g.yaml",
+    object: {
+      url: "http://greper.handsfree.work/extends/avatar.jpg"
+    }
+  },
+  {
+    radio: "2"
+  },
+  {
+    radio: "0"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
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 73%
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 2d79f7b5..23818b6e 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 89c787c3..6e3d0f88 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 0a305710..3413275f 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: "AliossUploader",
+  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 45c79685..92c3407a 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
new file mode 100644
index 00000000..b1f40f00
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/api.ts
@@ -0,0 +1,56 @@
+import { requestForMock } from "/src/api/service";
+import { generateSignedUrl } from "/@/views/crud/component/uploader/s3/s3-server";
+import { FsUploaderS3SignedUrlType } from "@fast-crud/fast-extends";
+const request = requestForMock;
+const apiPrefix = "/mock/S3Uploader";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
+
+/**
+ * 向后端请求获取预签名url
+ * @param bucket
+ * @param key
+ * @param type
+ * @constructor
+ */
+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
new file mode 100644
index 00000000..e0f7be51
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/crud.tsx
@@ -0,0 +1,93 @@
+import * as api from "./api";
+import { GetSignedUrl } from "./api";
+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 }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        file: {
+          title: "S3上传",
+          type: "file-uploader",
+          // 将被分发到 form.component 和 column.component之下
+          async buildUrl(key: string) {
+            //向后端获取下载的预签名链接
+            return await GetSignedUrl("fast-crud", key, "get");
+          },
+          form: {
+            component: {
+              uploader: {
+                type: "s3"
+              },
+              valueType: "key" //返回值为key
+            }
+          }
+        },
+        pictureCard: {
+          title: "照片墙",
+          type: "image-uploader",
+          async buildUrl(key: string) {
+            //向后端获取下载的预签名链接
+            return await GetSignedUrl("fast-crud", key, "get");
+          },
+          form: {
+            component: {
+              uploader: {
+                type: "s3"
+              },
+              valueType: "key"
+            }
+          }
+        },
+        cropper: {
+          title: "裁剪",
+          type: "cropper-uploader",
+          async buildUrl(key: string) {
+            //向后端获取下载的预签名链接
+            return await GetSignedUrl("fast-crud", key, "get");
+          },
+          form: {
+            component: {
+              uploader: {
+                type: "s3"
+              },
+              valueType: "key"
+            }
+          }
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/s3/index.vue b/packages/ui/certd-client/src/views/crud/component/uploader/s3/index.vue
new file mode 100644
index 00000000..af1cf4f0
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        s3上传
+        <span class="sub">支持minio</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/extends/uploader.html">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+
+export default defineComponent({
+  name: "S3Uploader",
+  setup() {
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/component/uploader/s3/mock.ts b/packages/ui/certd-client/src/views/crud/component/uploader/s3/mock.ts
new file mode 100644
index 00000000..e9585bc1
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/mock.ts
@@ -0,0 +1,23 @@
+// @ts-ignore
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "S3Uploader",
+  idGenerator: 0
+};
+const list = [
+  {
+    avatar: "http://greper.handsfree.work/extends/avatar.jpg",
+    file: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
+    image: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
+    image2: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"]
+  },
+  {
+    radio: "2"
+  },
+  {
+    radio: "0"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
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
new file mode 100644
index 00000000..c7e4632f
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/component/uploader/s3/s3-server.ts
@@ -0,0 +1,46 @@
+// @ts-ignore
+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",
+    region: "us-east-1",
+    forcePathStyle: true,
+    endpoint: "https://play.min.io",
+    credentials: {
+      accessKeyId: "Q3AM3UQ867SPQQA43P2F", //访问登录名
+      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
+  };
+  let url;
+  let cmd;
+  if (type === "get") {
+    cmd = new GetObjectCommand(params);
+  } else {
+    cmd = new PutObjectCommand(params);
+  }
+
+  try {
+    url = await getSignedUrl(client, cmd);
+  } catch (err) {
+    console.log("Error getting signed URL ", err);
+  }
+
+  return url;
+}
diff --git a/packages/ui/certd-client/src/views/crud/debug/select/api.js b/packages/ui/certd-client/src/views/crud/debug/api.ts
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/debug/select/api.js
rename to packages/ui/certd-client/src/views/crud/debug/api.ts
index 06a6bd3e..ca651ead 100644
--- a/packages/ui/certd-client/src/views/crud/debug/select/api.js
+++ b/packages/ui/certd-client/src/views/crud/debug/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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/debug/select/crud.jsx b/packages/ui/certd-client/src/views/crud/debug/crud.tsx
similarity index 52%
rename from packages/ui/certd-client/src/views/crud/debug/select/crud.jsx
rename to packages/ui/certd-client/src/views/crud/debug/crud.tsx
index d3bee612..a919fec8 100644
--- a/packages/ui/certd-client/src/views/crud/debug/select/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/debug/crud.tsx
@@ -1,22 +1,47 @@
 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, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
+import dayjs from "dayjs";
+import { computed, Ref, ref } 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);
   };
 
+  const options: Ref = ref([]);
+
+  let arr = [
+    {
+      value: "1",
+      label: "test"
+    },
+    {
+      value: "1",
+      label: "test2"
+    }
+  ];
+
+  for (let i = 0; i < 10; i++) {
+    arr = arr.concat(arr);
+  }
+  let i = 0;
+  for (const item of arr) {
+    i++;
+    item.value = i + "";
+  }
+  options.value = arr;
+
   return {
     crudOptions: {
       request: {
@@ -46,18 +71,14 @@ export default function ({ expose }) {
             show: false
           }
         },
-
         statusRemote: {
           title: "单选远程",
           search: {
-            show: true,
-            value: []
+            show: false
           },
           type: "dict-select",
           dict: dict({
-            url: "/mock/dicts/_OpenStatusEnum2?simple",
-            value: "id",
-            label: "text"
+            url: "/mock/dicts/ManyOpenStatusEnum?from=dict1"
           }),
           form: {
             component: { mode: "multiple" },
@@ -66,39 +87,6 @@ export default function ({ expose }) {
           column: {
             width: 200
           }
-        },
-        id2: {
-          title: "ID",
-          key: "id",
-          type: "number",
-          column: {
-            width: 300
-          },
-          form: {
-            show: false
-          }
-        },
-        id3: {
-          title: "ID",
-          key: "id",
-          type: "number",
-          column: {
-            width: 300
-          },
-          form: {
-            show: false
-          }
-        },
-        id4: {
-          title: "ID",
-          key: "id",
-          type: "number",
-          column: {
-            width: 300
-          },
-          form: {
-            show: false
-          }
         }
       }
     }
diff --git a/packages/ui/certd-client/src/views/crud/debug/index.vue b/packages/ui/certd-client/src/views/crud/debug/index.vue
new file mode 100644
index 00000000..35238852
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/debug/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+
+export default defineComponent({
+  name: "DebugSelect",
+  setup() {
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/debug/mock.ts b/packages/ui/certd-client/src/views/crud/debug/mock.ts
new file mode 100644
index 00000000..1321af6b
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/debug/mock.ts
@@ -0,0 +1,20 @@
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "DebugSelect",
+  idGenerator: 0,
+  copyTimes: 500
+};
+const list: any = [
+  {
+    statusRemote: "1"
+  },
+  {
+    statusRemote: "2"
+  },
+  {
+    statusRemote: "3"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
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
deleted file mode 100644
index e7105c52..00000000
--- a/packages/ui/certd-client/src/views/crud/debug/select/index.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding" />
-  </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";
-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)
-
-    // 页面打开后获取列表数据
-    onMounted(() => {
-      expose.doRefresh();
-    });
-
-    return {
-      crudBinding,
-      crudRef
-    };
-  }
-});
-</script>
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.js
deleted file mode 100644
index 2cb1e175..00000000
--- a/packages/ui/certd-client/src/views/crud/debug/select/mock.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import mockUtil from "/src/mock/base";
-const options = {
-  name: "DebugSelect",
-  idGenerator: 0
-};
-const list = [];
-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 73%
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 a6c63db5..625829bc 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 4ad17c78..72442e3a 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,18 +1,18 @@
 import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, ValueChangeContext } from "@fast-crud/fast-crud";
+export default function createCrudOptions({}: 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);
   };
 
@@ -60,7 +60,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 +73,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 4850b620..89ce6c7a 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
@@ -1,42 +1,35 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">
+        分发时复制Dict
+        <span class="sub">如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/dict.html">文档</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="warning"
-          message="如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制；----点击switch看效果----↓↓↓↓↓↓"
-        />
+        <a-alert class="ml-1" type="warning" message="如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制；----点击switch看效果----↓↓↓↓↓↓" />
       </template>
     </fs-crud>
   </fs-page>
 </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.ts b/packages/ui/certd-client/src/views/crud/dict/cloneable/mock.ts
new file mode 100644
index 00000000..514fc4ed
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/dict/cloneable/mock.ts
@@ -0,0 +1,24 @@
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "DictCloneable",
+  idGenerator: 0
+};
+const list = [
+  {
+    status: "1",
+    remote: "2",
+    modifyDict: true
+  },
+  {
+    status: "2",
+    remote: "0",
+    modifyDict: false
+  },
+  {
+    status: "0",
+    modifyDict: true
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
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 73%
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 08ab8195..69669b86 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 c40a2b07..e31ad7ef 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 1adcdfaa..f714e9a9 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
@@ -1,42 +1,35 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">
+        原型复制Dict
+        <span class="sub">dict配置作为原型，任何用到的地方都会clone一个新的实例例（同一个字段每一行的dict都是不一样的）</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/dict.html">文档</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="warning"
-          message="dict配置作为原型，任何用到的地方都会clone一个新的实例例（同一个字段每一行的dict都是不一样的）------点击switch看效果-------↓↓↓↓↓↓↓↓"
-        />
+        <a-alert class="ml-1" type="warning" message="------点击switch看效果-------↓↓↓↓↓↓↓↓" />
       </template>
     </fs-crud>
   </fs-page>
 </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 adc12b8a..bc6eb283 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/shared/manager/api.js b/packages/ui/certd-client/src/views/crud/dict/shared/manager/api.ts
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/dict/shared/manager/api.js
rename to packages/ui/certd-client/src/views/crud/dict/shared/manager/api.ts
index 0d2a093f..829796c4 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/manager/api.js
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/manager/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/DictSharedManager";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/manager/crud.tsx b/packages/ui/certd-client/src/views/crud/dict/shared/manager/crud.tsx
index 5293f502..5cceb4bb 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/manager/crud.tsx
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/manager/crud.tsx
@@ -1,18 +1,19 @@
-import * as api from "./api";
+import * as api from "./api.js";
 import { statusDict } from "../shared-dict";
-export default function ({ crudExpose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/manager/index.vue b/packages/ui/certd-client/src/views/crud/dict/shared/manager/index.vue
index da55bca0..27c76e73 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/manager/index.vue
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/manager/index.vue
@@ -1,14 +1,16 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-alert class="ml-1" type="warning" message="管理共享字典，此处添加和修改字典，在使用时实时变化" />
-      </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">
+        管理共享字典
+        <span class="sub">此处添加和修改字典，在使用时实时变化</span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
@@ -16,8 +18,8 @@ import createCrudOptions from "./crud";
 export default defineComponent({
   name: "DictSharedManager",
   setup() {
-    // crud组件的ref
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const context: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
 
     // 页面打开后获取列表数据
     onMounted(() => {
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/manager/mock.js b/packages/ui/certd-client/src/views/crud/dict/shared/manager/mock.ts
similarity index 90%
rename from packages/ui/certd-client/src/views/crud/dict/shared/manager/mock.js
rename to packages/ui/certd-client/src/views/crud/dict/shared/manager/mock.ts
index d99468cb..ec8ca5cb 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/manager/mock.js
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/manager/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "DictSharedManager",
   idGenerator: 0,
   copyTimes: 1
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/shared-dict.ts b/packages/ui/certd-client/src/views/crud/dict/shared/shared-dict.ts
index 606f93ae..44da96b1 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/shared-dict.ts
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/shared-dict.ts
@@ -1,5 +1,5 @@
 import { dict, utils } from "@fast-crud/fast-crud";
-import * as api from "./manager/api";
+import * as api from "./manager/api.js";
 export const statusDict = dict({
   value: "name",
   async getData() {
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/use/api.js b/packages/ui/certd-client/src/views/crud/dict/shared/use/api.ts
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/dict/shared/use/api.js
rename to packages/ui/certd-client/src/views/crud/dict/shared/use/api.ts
index c2bdbc91..a15f5c06 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/use/api.js
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/use/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/DictSharedUse";
-export function GetList(query) {
+export function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
   });
 }
 
-export function AddObj(obj) {
+export function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
   });
 }
 
-export function UpdateObj(obj) {
+export function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
   });
 }
 
-export function DelObj(id) {
+export function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -33,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/use/crud.jsx b/packages/ui/certd-client/src/views/crud/dict/shared/use/crud.tsx
similarity index 59%
rename from packages/ui/certd-client/src/views/crud/dict/shared/use/crud.jsx
rename to packages/ui/certd-client/src/views/crud/dict/shared/use/crud.tsx
index f2f566d5..33d0b214 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/use/crud.jsx
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/use/crud.tsx
@@ -1,18 +1,20 @@
-import * as api from "./api";
+import * as api from "./api.js";
 import { statusDict } from "../shared-dict";
-export default function ({ crudExpose }) {
-  const pageRequest = async (query) => {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     return await api.UpdateObj(form);
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     return await api.DelObj(row.id);
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     return await api.AddObj(form);
   };
 
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/use/index.vue b/packages/ui/certd-client/src/views/crud/dict/shared/use/index.vue
index 547dc92d..95144618 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/use/index.vue
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/use/index.vue
@@ -1,23 +1,26 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-alert class="ml-1" type="warning" message="共享字典的使用" />
-      </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">
+        共享字典的使用
+        <span class="sub">在管理共享字典页面添加字典后，使用时会自动增加字典选项</span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import { useFs } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
+import createCrudOptions from "./crud.js";
 
 export default defineComponent({
   name: "DictSharedUse",
   setup() {
     // crud组件的ref
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions, context: customValue });
 
     // 页面打开后获取列表数据
     onMounted(() => {
diff --git a/packages/ui/certd-client/src/views/crud/dict/shared/use/mock.js b/packages/ui/certd-client/src/views/crud/dict/shared/use/mock.ts
similarity index 87%
rename from packages/ui/certd-client/src/views/crud/dict/shared/use/mock.js
rename to packages/ui/certd-client/src/views/crud/dict/shared/use/mock.ts
index b7c65bf3..86d1d25f 100644
--- a/packages/ui/certd-client/src/views/crud/dict/shared/use/mock.js
+++ b/packages/ui/certd-client/src/views/crud/dict/shared/use/mock.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import mockUtil from "/src/mock/base";
-const options = {
+const options: any = {
   name: "DictSharedUse",
   idGenerator: 0
 };
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 73%
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 97193654..4bf86f46 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 aa161d64..a0257edf 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 a0f6a2d0..552f4537 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
@@ -1,38 +1,35 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">
+        单例Dict
+        <span class="sub">修改一个，影响全部组件</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/dict.html">文档</a>
+      </div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert class="ml-1" type="warning" message="单例dict，修改一个，影响全部组件，----------点击switch看效果----------↓↓↓↓↓↓↓↓↓↓↓↓↓↓" />
+        <a-alert class="ml-1" type="warning" message="----------点击switch看效果----------↓↓↓↓↓↓↓↓↓↓↓↓↓↓" />
       </template>
     </fs-crud>
   </fs-page>
 </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 cad375c9..1234724e 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.ts b/packages/ui/certd-client/src/views/crud/feature/column-resize/api.ts
new file mode 100644
index 00000000..2e28954b
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/column-resize/api.ts
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FeatureColumnResize";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
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 913909db..788cd89f 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 { 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);
   };
-  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 8565e9e6..fcdf42dc 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
@@ -1,37 +1,31 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" style="position: relative" v-bind="crudBinding">
-      <template #actionbar-right> 列头可以调整宽度 </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">
+        列宽调整
+        <span class="sub">列头可以调整宽度</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/table.html#对应ui库的table组件的参数">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" style="position: relative" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
-<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 85%
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 68cfb67a..b09b4b14 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,6 +1,6 @@
 import mockUtil from "/src/mock/base";
-const options = {
-  name: "FeatureSearch",
+const options: any = {
+  name: "FeatureColumnResize",
   idGenerator: 0
 };
 const list = [
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 73%
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 37c27d57..62d80c79 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 68%
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 fbadd388..11794a54 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);
   };
 
@@ -27,8 +32,10 @@ export default function ({ expose }) {
       },
       form: {
         //表单跨列
-        col: { span: 24 },
-        labelCol: { span: 6 }
+        col: { span: 24 }
+      },
+      rowHandle: {
+        order: 1000
       },
       columns: {
         col1: {
@@ -41,18 +48,18 @@ export default function ({ expose }) {
           search: {
             //控制查询字段顺序
             show: true,
-            //字段默认order为100，比100大的放最后面
+            //字段默认order为1，比1大的放最后面
             order: 101
           },
           type: "text",
           column: {
             //控制列字段顺序
-            //字段默认order为100，比100大的放最后面
+            //字段默认order为1，比1大的放最后面
             order: 101
           },
           form: {
             //控制表单字段顺序
-            //字段默认order为100，比100大的放最后面
+            //字段默认order为1，比1大的放最后面
             order: 101
           }
         },
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 4f86ebea..be635fc0 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
@@ -1,41 +1,32 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="info"
-          message="配置order即可控制字段的顺序，数字越小越靠前，默认为1，（配置0或负数排前面，配置2以上排后面）"
-        />
-      </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">
+        字段列排序
+        <span class="sub">表格列和表单字段可以单独配置顺序，配置order即可控制字段的顺序，数字越小越靠前，默认为1，（配置0或负数排前面，配置2以上排后面）</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#key-column-order">列顺序配置</a> /
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#key-form-order">表单字段顺序配置</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </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 66315f55..5fffc8e1 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 73%
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 b3a57257..175ad5a0 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 3099f8b9..de504d61 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 5c898b19..78f141e6 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
@@ -1,48 +1,35 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">列设置（简化模式）</div>
+      <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/toolbar.html#columnsfilter-mode">文档</a></div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
-        <a-alert
-            class="ml-1"
-            type="warning"
-            message="列设置支持简化模式"
-        />
+        <a-alert class="ml-1" type="warning" message="列设置支持简化模式 ------> 点击最右侧按钮查看效果" />
       </template>
     </fs-crud>
   </fs-page>
 </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 {
       crudBinding,
-      crudRef,
+      crudRef
     };
   }
 });
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 79043c91..d3eb9961 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 73%
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 acb0aab5..904b85ef 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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.jsx
deleted file mode 100644
index 4b4c8784..00000000
--- a/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
-    return await api.GetList(query);
-  };
-  const editRequest = async ({ form, row }) => {
-    form.id = row.id;
-    return await api.UpdateObj(form);
-  };
-  const delRequest = async ({ row }) => {
-    return await api.DelObj(row.id);
-  };
-
-  const addRequest = async ({ form }) => {
-    const id = await api.AddObj(form);
-    return { id };
-  };
-
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      },
-      actionbar: { buttons: { add: { show: false }, addRow: { show: true } } },
-      table: {
-        editable: {
-          enabled: true,
-          mode: "row",
-          activeTrigger: false
-        }
-      },
-      columns: {
-        id: {
-          title: "ID",
-          type: "number",
-          form: {
-            show: false
-          },
-          column: { width: 80, align: "center" }
-        },
-        disable: {
-          title: "禁止编辑",
-          type: "text",
-          column: {
-            editable: {
-              disabled: true //也可以配置为方法，根据条件禁用或启用编辑
-              // disabled: ({ column, index, row }) => {
-              //   return index % 2 === 0;
-              // }
-            }
-          }
-        },
-        radio: {
-          title: "状态",
-          search: { show: true },
-          type: "dict-radio",
-          dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?single"
-          })
-        },
-        name: {
-          title: "姓名",
-          type: "text"
-        },
-        province: {
-          title: "省份",
-          search: { show: true },
-          type: "dict-select",
-          dict: dict({
-            value: "id",
-            label: "text",
-            data: [
-              { id: "sz", text: "深圳", color: "success" },
-              { id: "gz", text: "广州", color: "primary" },
-              { id: "bj", text: "北京" },
-              { id: "wh", text: "武汉" },
-              { id: "sh", text: "上海" }
-            ]
-          })
-        }
-      }
-    }
-  };
-}
diff --git a/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.tsx
new file mode 100644
index 00000000..b7849419
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/editable-row/crud.tsx
@@ -0,0 +1,116 @@
+import * as api from "./api";
+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 }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      //将 addRow 按钮启用
+      actionbar: { buttons: { add: { show: false }, addRow: { show: true } } },
+      table: {
+        editable: {
+          enabled: true,
+          mode: "row",
+          activeTrigger: false
+        }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          type: "number",
+          form: {
+            show: false
+          },
+          column: { width: 80, align: "center" }
+        },
+        disable: {
+          title: "禁止编辑",
+          type: "text",
+          column: {
+            editable: {
+              disabled: true //也可以配置为方法，根据条件禁用或启用编辑
+              // disabled: ({ column, index, row }) => {
+              //   return index % 2 === 0;
+              // }
+            }
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        },
+        target: {
+          title: "根据状态动态显隐",
+          search: { show: true },
+          type: "text",
+          form: {
+            conditionalRender: {
+              match: ({ form }) => {
+                return form.radio === "2";
+              },
+              render: ({ form }) => {
+                return <div>已停止</div>;
+              }
+            },
+            show: compute(({ form }) => {
+              return form.radio !== "0";
+            })
+          }
+        },
+        name: {
+          title: "姓名",
+          type: "text"
+        },
+        address: {
+          title: "地址",
+          children: {
+            province: {
+              title: "省份",
+              search: { show: true },
+              type: "text"
+            },
+            city: {
+              title: "城市",
+              search: { show: true },
+              type: "dict-select",
+              dict: dict({
+                value: "id",
+                label: "text",
+                data: [
+                  { id: "sz", text: "深圳", color: "success" },
+                  { id: "gz", text: "广州", color: "primary" },
+                  { id: "bj", text: "北京" },
+                  { id: "wh", text: "武汉" },
+                  { id: "sh", text: "上海" }
+                ]
+              })
+            }
+          }
+        }
+      }
+    }
+  };
+}
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 54f2c697..50e77708 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
@@ -1,34 +1,27 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">行编辑模式</div>
+      <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/expose.html">文档</a></div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding" />
   </fs-page>
 </template>
 
-<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();
+      crudExpose.editable.enable({ mode: "row" });
     });
 
     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 9a11dbb2..401d8894 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 73%
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 e3cf94ec..9e2bda63 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 58%
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 72d8d608..7944f6f9 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);
   };
 
@@ -83,21 +83,31 @@ export default function ({ expose }) {
           title: "姓名",
           type: "text"
         },
-        province: {
-          title: "省份",
-          search: { show: true },
-          type: "dict-select",
-          dict: dict({
-            value: "id",
-            label: "text",
-            data: [
-              { id: "sz", text: "深圳", color: "success" },
-              { id: "gz", text: "广州", color: "primary" },
-              { id: "bj", text: "北京" },
-              { id: "wh", text: "武汉" },
-              { id: "sh", text: "上海" }
-            ]
-          })
+        address: {
+          title: "地址",
+          children: {
+            province: {
+              title: "省份",
+              search: { show: true },
+              type: "text"
+            },
+            city: {
+              title: "城市",
+              search: { show: true },
+              type: "dict-select",
+              dict: dict({
+                value: "id",
+                label: "text",
+                data: [
+                  { id: "sz", text: "深圳", color: "success" },
+                  { id: "gz", text: "广州", color: "primary" },
+                  { id: "bj", text: "北京" },
+                  { id: "wh", text: "武汉" },
+                  { id: "sh", text: "上海" }
+                ]
+              })
+            }
+          }
         }
       }
     }
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 e7280e8a..2f1a1dce 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
@@ -1,5 +1,9 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">可编辑</div>
+      <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/expose.html">文档</a></div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #actionbar-right>
         <!--      <fs-button class="ml-1" @click="addRow">添加行</fs-button>-->
@@ -24,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 {
@@ -72,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
@@ -86,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 b1d6b08d..caab355b 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 72%
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 c9ad003b..04422556 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 53%
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 5a3dee3f..9bb65768 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: {
@@ -26,9 +28,18 @@ export default function ({ expose }) {
       },
       table: {
         //默认展开第一行
-        defaultExpandedRowKeys:[1],
+        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 fe8b3d2c..094961ab 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
@@ -1,64 +1,31 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #pagination-left>
-        <a-tooltip title="批量删除">
-          <fs-button icon="DeleteOutlined" @click="handleBatchDelete"></fs-button>
-        </a-tooltip>
-      </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">行展开</div>
+      <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/table.html#对应ui库的table组件的参数">文档</a></div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
-<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();
     });
 
-    const handleBatchDelete = () => {
-      if (selectedRowKeys.value?.length > 0) {
-        Modal.confirm({
-          title: "确认",
-          content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
-          async onOk() {
-            await BatchDelete(selectedRowKeys.value);
-            message.info("删除成功");
-            expose.doRefresh();
-            selectedRowKeys.value = [];
-          }
-        });
-      } else {
-        message.error("请先勾选记录");
-      }
-    };
-
     return {
       crudBinding,
-      crudRef,
-      handleBatchDelete
+      crudRef
     };
   }
 });
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 3b6d6944..caeffc01 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/export/api.ts b/packages/ui/certd-client/src/views/crud/feature/export/api.ts
new file mode 100644
index 00000000..929ae61a
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/export/api.ts
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FeatureExport";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
diff --git a/packages/ui/certd-client/src/views/crud/feature/export/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/export/crud.tsx
new file mode 100644
index 00000000..75b159cb
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/export/crud.tsx
@@ -0,0 +1,117 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import dayjs from "dayjs";
+
+export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      toolbar: {
+        export: {
+          columnBuilder: ({ col }) => {
+            // https://docs.sheetjs.com/docs/csf/features/#row-and-column-properties
+            if (col.key === "multi") {
+              col.width = 40;
+            } else {
+              col.width = 20;
+            }
+          },
+          dataFormatter: ({ row, originalRow, col }) => {
+            //格式化日期
+            if (col.key === "date" && originalRow.date) {
+              row.date = dayjs(originalRow.date).format("YYYY-MM-DD HH:mm:ss");
+            }
+          },
+          fileType: context.fileType, //导出类型为excel
+          dataFrom: context.dataFrom, //search查询获取， local 当前页数据
+          //仅导出显示的列
+          onlyShow: true,
+          searchParams: {
+            //查询条件
+            page: {
+              currentPage: 1,
+              pageSize: 99999999
+            }
+            //以下不传，以当前查询条件为准
+            // form: {},
+            // sort: {}
+          }
+        }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        text: {
+          title: "文本",
+          search: { show: true },
+          type: "text"
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        },
+        multi: {
+          title: "多选",
+          search: { show: true },
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          }),
+          form: {
+            component: {
+              mode: "multiple"
+            }
+          }
+        },
+        date: {
+          title: "日期",
+          search: { show: true },
+          type: "datetime",
+          valueBuilder({ row, value, key }) {
+            if (value) {
+              row[key] = dayjs(value);
+            }
+          },
+          valueResolve({ form, value, key }) {
+            if (value) {
+              form[key] = dayjs(value).unix();
+            }
+          }
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/feature/export/index.vue b/packages/ui/certd-client/src/views/crud/feature/export/index.vue
new file mode 100644
index 00000000..93886ed1
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/export/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <fs-page>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #toolbar-left>
+        <fs-label lass="ml-5" label="导出方式">
+          <a-select v-model:value="exportType">
+            <a-select-option value="local">本地</a-select-option>
+            <a-select-option value="server">服务端</a-select-option>
+          </a-select>
+        </fs-label>
+        <fs-label v-if="exportType === 'local'" lass="ml-5" label="导出文件类型">
+          <a-select v-model:value="fileType">
+            <a-select-option value="excel">Excel</a-select-option>
+            <a-select-option value="csv">CSV</a-select-option>
+          </a-select>
+        </fs-label>
+        <fs-label v-if="exportType === 'local'" class="ml-5" label="数据来源">
+          <a-select v-model:value="dataFrom">
+            <a-select-option value="search">查询</a-select-option>
+            <a-select-option value="local">本页数据</a-select-option>
+          </a-select>
+        </fs-label>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, watch } from "vue";
+import { useFs, UserPageQuery, useUi } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+
+export default defineComponent({
+  name: "FeatureExport",
+  setup() {
+    const fileType = ref("excel");
+    const dataFrom = ref("search");
+    const exportType = ref("local");
+    const context = {
+      fileType,
+      dataFrom,
+      exportType
+    };
+
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+    const { ui } = useUi();
+    watch(
+      () => {
+        return exportType.value;
+      },
+      (value) => {
+        if (value === "server") {
+          crudBinding.value.toolbar.export.server = async (userPageQuery: UserPageQuery) => {
+            ui.message.info("请在此处请求后端导出，查询条件：" + JSON.stringify(userPageQuery));
+          };
+        } else {
+          crudBinding.value.toolbar.export.server = null;
+        }
+      }
+    );
+
+    return {
+      crudBinding,
+      crudRef,
+      ...context
+    };
+  }
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/feature/export/mock.ts b/packages/ui/certd-client/src/views/crud/feature/export/mock.ts
new file mode 100644
index 00000000..fc4e44e2
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/export/mock.ts
@@ -0,0 +1,31 @@
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "FeatureExport",
+  idGenerator: 0
+};
+const list = [
+  {
+    text: "测试文本1",
+    radio: "1",
+    multi: ["1", "2"],
+    date: 1111111222222
+  },
+  {
+    text: "测试文本2",
+    radio: "2",
+    multi: ["0", "2"],
+    date: 123123234433
+  },
+  {
+    text: "测试文本3"
+  },
+  {
+    text: "测试文本4"
+  },
+  {
+    text: "测试文本5"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
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 73%
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 6970dae3..e4093938 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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.jsx
deleted file mode 100644
index 672d8911..00000000
--- a/packages/ui/certd-client/src/views/crud/feature/filter/crud.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-import { ref } from "vue";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
-    return await api.GetList(query);
-  };
-  const editRequest = async ({ form, row }) => {
-    form.id = row.id;
-    return await api.UpdateObj(form);
-  };
-  const delRequest = async ({ row }) => {
-    return await api.DelObj(row.id);
-  };
-
-  const addRequest = async ({ form }) => {
-    return await api.AddObj(form);
-  };
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      },
-      table: {
-        // 表头过滤改变事件
-        onFilterChange(e) {
-          console.log("onFilterChange", e);
-        }
-      },
-      columns: {
-        id: {
-          title: "ID",
-          key: "id",
-          type: "number",
-          column: {
-            width: 50
-          },
-          form: {
-            show: false
-          }
-        },
-        radio: {
-          title: "状态",
-          search: { show: true },
-          type: "dict-radio",
-          dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?single"
-          }),
-          column: {
-            filters: [
-              { text: "开", value: "1" },
-              { text: "关", value: "0" },
-              { text: "停", value: "2" }
-            ],
-            // specify the condition of filtering result
-            // here is that finding the name started with `value`
-            onFilter: (value, record) => {
-              return record.radio === value;
-            },
-            sorter: (a, b) => a.radio - b.radio,
-            sortDirections: ["descend"]
-          }
-        }
-      }
-    }
-  };
-}
diff --git a/packages/ui/certd-client/src/views/crud/feature/search/crud.jsx b/packages/ui/certd-client/src/views/crud/feature/filter/crud.tsx
similarity index 50%
rename from packages/ui/certd-client/src/views/crud/feature/search/crud.jsx
rename to packages/ui/certd-client/src/views/crud/feature/filter/crud.tsx
index 06139536..c480e862 100644
--- a/packages/ui/certd-client/src/views/crud/feature/search/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,29 +27,14 @@ export default function ({ expose }) {
       },
       table: {
         // 表头过滤改变事件
-        onFilterChange(e) {
-          console.log("onFilterChange", e);
-        }
-      },
-      search: {
-        initialForm: {
-          radio: "0"
-        },
-        buttons: {
-          custom: {
-            text: "自定义",
-            show: true,
-            order: 3,
-            icon: {
-              icon: "ant-design:search",
-              style: {
-                "font-size": "16px"
-              }
-            },
-            click() {
-              console.log("点击了自定义按钮");
+        onFilterChange(filters: any) {
+          console.log("onFilterChange", filters);
+          crudExpose.setSearchFormData({
+            form: {
+              remote: filters.remote
             }
-          }
+          });
+          crudExpose.doRefresh();
         }
       },
       columns: {
@@ -64,7 +50,7 @@ export default function ({ expose }) {
           }
         },
         radio: {
-          title: "状态",
+          title: "本地过滤",
           search: { show: true },
           type: "dict-radio",
           dict: dict({
@@ -78,12 +64,32 @@ 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"]
           }
+        },
+        remote: {
+          title: "支持服务端过滤",
+          search: {
+            show: true,
+            component: {
+              mode: "multiple"
+            }
+          },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          }),
+          column: {
+            filters: [
+              { text: "开", value: "1" },
+              { text: "关", value: "0" },
+              { text: "停", value: "2" }
+            ]
+          }
         }
       }
     }
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 7205a947..81a2eabd 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.js
deleted file mode 100644
index fd405168..00000000
--- a/packages/ui/certd-client/src/views/crud/feature/filter/mock.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import mockUtil from "/src/mock/base";
-const options = {
-  name: "FeatureFilter",
-  idGenerator: 0
-};
-const list = [
-  {
-    radio: "1"
-  },
-  {
-    radio: "2"
-  },
-  {
-    radio: "0"
-  }
-];
-options.list = list;
-const mock = mockUtil.buildMock(options);
-export default mock;
diff --git a/packages/ui/certd-client/src/views/crud/dict/cloneable/mock.js b/packages/ui/certd-client/src/views/crud/feature/filter/mock.ts
similarity index 66%
rename from packages/ui/certd-client/src/views/crud/dict/cloneable/mock.js
rename to packages/ui/certd-client/src/views/crud/feature/filter/mock.ts
index acb0f31b..e536d725 100644
--- a/packages/ui/certd-client/src/views/crud/dict/cloneable/mock.js
+++ b/packages/ui/certd-client/src/views/crud/feature/filter/mock.ts
@@ -1,19 +1,20 @@
 import mockUtil from "/src/mock/base";
-const options = {
-  name: "DictCloneable",
+const options: any = {
+  name: "FeatureFilter",
   idGenerator: 0
 };
 const list = [
   {
-    status: "1",
-    remote: "2"
-  },
-  {
-    status: "2",
+    radio: "1",
     remote: "0"
   },
   {
-    status: "0"
+    radio: "2",
+    remote: "1"
+  },
+  {
+    radio: "0",
+    remote: "2"
   }
 ];
 options.list = list;
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 72%
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 ac40ccaf..d23945d8 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 9b15c1ec..6cfa0c4f 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 2e1d2ddf..cc743666 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 22bd02c4..c4a45662 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 73%
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 4af20b76..4e287644 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 09819296..9ac49edf 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 77c344ff..932b7b5a 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 05760a73..16ba50bd 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/header/api.ts b/packages/ui/certd-client/src/views/crud/feature/header/api.ts
new file mode 100644
index 00000000..ba066dc3
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/header/api.ts
@@ -0,0 +1,50 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FeatureHeader";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
+
+export function BatchDelete(ids: any[]) {
+  return request({
+    url: apiPrefix + "/batchDelete",
+    method: "post",
+    data: { ids }
+  });
+}
diff --git a/packages/ui/certd-client/src/views/crud/feature/header/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/header/crud.tsx
new file mode 100644
index 00000000..aafd7fb0
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/header/crud.tsx
@@ -0,0 +1,48 @@
+import * as api from "./api.js";
+import { CreateCrudOptionsProps, dict, CreateCrudOptionsRet, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest: api.GetList,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      table: {
+        slots: {
+          headerCell({ column }: any) {
+            if (column.key === "text") {
+              return (
+                <span class={"flex "}>
+                  Text
+                  <a-tooltip title={"tooltip 提示"}>
+                    <fs-icon class={"ml-5"} icon={"ion:alert-circle-outline"}></fs-icon>
+                  </a-tooltip>
+                </span>
+              );
+            }
+          }
+        }
+      },
+      columns: {
+        text: {
+          title: "text",
+          type: "text",
+          search: { show: true }
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/feature/header/index.vue b/packages/ui/certd-client/src/views/crud/feature/header/index.vue
new file mode 100644
index 00000000..ba07c6f3
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/header/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        <span>自定义header</span>
+        <span class="sub">通过配置a-table的headerCell插槽实现</span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import createCrudOptions from "./crud.js";
+import { useFs, UseFsProps } from "@fast-crud/fast-crud";
+defineOptions({
+  name: "FeatureHeader"
+});
+const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue } as UseFsProps);
+
+// 页面打开后获取列表数据
+onMounted(() => {
+  crudExpose.doRefresh();
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/feature/header/mock.ts b/packages/ui/certd-client/src/views/crud/feature/header/mock.ts
new file mode 100644
index 00000000..a7db8232
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/header/mock.ts
@@ -0,0 +1,14 @@
+// @ts-ignore
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "FeatureHeader",
+  idGenerator: 0
+};
+const list = [
+  {
+    text: "上面自定义表头"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
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 73%
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 4f5c7d11..541c533d 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 ecd5350d..4bf77358 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 34e52d62..01c59c98 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 594f6639..df878eff 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 73%
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 dd73bbf3..8aababa3 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 27d53eda..f739203b 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 454fa5a3..806c98b8 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 6876a94c..de085ec2 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 72%
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 4cf33ea3..9fe205fc 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 59%
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 5c3f3105..c2d9eb1a 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,9 +38,9 @@ export default function ({ expose }) {
             columnSetDisabled: true, //禁止在列设置中选择
             formatter: (context) => {
               //计算序号,你可以自定义计算规则，此处为翻页累加
-              let index = context.index ?? 1;
-              let pagination = expose.crudBinding.value.pagination;
-              return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+              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 06c33b2b..bc932a5b 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 6e10439f..8adccd7f 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-import/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/local-import/crud.tsx
new file mode 100644
index 00000000..8f629a2c
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/local-import/crud.tsx
@@ -0,0 +1,90 @@
+import { CreateCrudOptionsProps, CreateCrudOptionsRet, importTable } from "@fast-crud/fast-crud";
+import { Modal, notification } from "ant-design-vue";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const crudBinding = crudExpose.crudBinding;
+  return {
+    crudOptions: {
+      mode: {
+        name: "local",
+        isMergeWhenUpdate: true,
+        isAppendWhenAdd: true
+      },
+      //启用addRow按钮
+      actionbar: {
+        buttons: {
+          //禁用弹框添加
+          add: { show: false },
+          //启用添加行
+          addRow: { show: true },
+          //导入按钮
+          import: {
+            show: true,
+            text: "批量导入",
+            type: "primary",
+            click() {
+              const modal = Modal.info({
+                title: "批量导入",
+                okText: "关闭",
+                content() {
+                  async function onChange(e: any) {
+                    const file = e.target.files[0];
+                    await importTable(crudExpose, { file, append: true });
+                    modal.destroy();
+                    notification.success({
+                      message: "导入成功"
+                    });
+                  }
+                  return (
+                    <div>
+                      <p>
+                        1、<a href={"template-import.csv"}>下载导入模板</a>
+                      </p>
+                      <p>
+                        2、<span>模板填充数据</span>
+                      </p>
+                      <p>
+                        <span>3、导入：</span>
+                        <input type={"file"} onInput={onChange}></input>
+                      </p>
+                    </div>
+                  );
+                }
+              });
+            }
+          }
+        }
+      },
+      table: {
+        remove: {
+          //删除数据后不请求后台
+          refreshTable: false
+        },
+        editable: {
+          enabled: true,
+          mode: "row",
+          activeTrigger: false
+        }
+      },
+      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-import/index.vue b/packages/ui/certd-client/src/views/crud/feature/local-import/index.vue
new file mode 100644
index 00000000..0e3200d6
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/local-import/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">将本地crud当做v-model,编辑好之后一并提交，本示例演示import导入</div>
+    </template>
+    <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">
+            <FeatureLocalImportValueInput v-model="form.data" />
+          </div>
+        </a-form-item>
+        <a-form-item>
+          <a-button @click="submit">提交</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, reactive } from "vue";
+import { message } from "ant-design-vue";
+import FeatureLocalImportValueInput from "./local.vue";
+export default defineComponent({
+  name: "FeatureLocalImport",
+  components: { FeatureLocalImportValueInput },
+  setup() {
+    const form = reactive({
+      name: "test",
+      data: [{ name: "初始数据" }]
+    });
+
+    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-import/local.vue b/packages/ui/certd-client/src/views/crud/feature/local-import/local.vue
new file mode 100644
index 00000000..88fc1585
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/local-import/local.vue
@@ -0,0 +1,57 @@
+<template>
+  <fs-crud ref="crudRef" v-bind="crudBinding" />
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, watch } from "vue";
+import createCrudOptions from "./crud";
+import { useFs } from "@fast-crud/fast-crud";
+
+export default defineComponent({
+  name: "FeatureLocalImportValueInput",
+  props: {
+    modelValue: {
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(props) {
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+
+    onMounted(() => {
+      //启用行编辑模式
+      crudExpose.editable.enable({ mode: "row" });
+    });
+
+    //通过导出modelValue, 可以导出成为一个input组件
+    watch(
+      () => {
+        return props.modelValue;
+      },
+      (value = []) => {
+        crudBinding.value.data = value;
+      },
+      {
+        immediate: true
+      }
+    );
+
+    // 通过crudBinding.value.data 可以获取表格实时数据
+    function showData() {
+      console.log("data:", crudBinding.value.data);
+    }
+
+    return {
+      crudBinding,
+      crudRef,
+      showData
+    };
+  }
+});
+</script>
+<style lang="less">
+.fs-crud-container.compact .el-table--border {
+  border-left: 1px solid #eee;
+}
+</style>
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 1dbe46ff..00000000
--- 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 00000000..afc6e8bb
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/local-v-model/crud.tsx
@@ -0,0 +1,45 @@
+import { CreateCrudOptionsProps, CreateCrudOptionsRet, uiContext } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  return {
+    crudOptions: {
+      mode: {
+        name: "local",
+        isMergeWhenUpdate: true,
+        isAppendWhenAdd: true
+      },
+      //启用addRow按钮
+      actionbar: { buttons: { add: { show: false }, addRow: { show: true } } },
+      table: {
+        remove: {
+          //删除数据后不请求后台
+          refreshTable: false
+        },
+        editable: {
+          enabled: true,
+          mode: "row",
+          activeTrigger: false
+        }
+      },
+      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 01e615f5..03a65212 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, onMounted, 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 0110ae27..405e2959 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,53 @@
 <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, onMounted, 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)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
-    // 页面打开后获取列表数据
-    // onMounted(() => {
-    //   expose.doRefresh();
-    // });
+    onMounted(() => {
+      //启用行编辑模式
+      crudExpose.editable.enable({ mode: "row" });
+    });
 
     //通过导出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 c0f2f6af..eea51ede 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 743588f1..dbef2a50 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 73%
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 65dafffc..28e4fc96 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,11 +33,10 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
 }
-
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 36d41897..1527eb49 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 49d0ce99..2b701256 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 e99a6af5..e305018b 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 73%
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 1d251eb7..056d615e 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 52a476cd..df33f6af 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 804e85bb..6eb3bc89 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 efb116af..e5f35bca 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 73%
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 2f83742a..7c8a37e1 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 67%
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 6f9fdbd2..dfef9462 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: {
@@ -25,9 +26,12 @@ export default function ({ expose }) {
         delRequest
       },
       search: {
-        layout: "multi-line",
-        col: {
-          span: 4
+        container: {
+          layout: "multi-line",
+          action: {
+            label: "操作"
+            //col: { span: 4 }
+          }
         },
         options: {
           labelCol: {
@@ -42,23 +46,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.container.layout === "multi-line") {
+                crudExpose.crudBinding.value.search.container.layout = "default";
               } else {
-                expose.crudBinding.value.search.layout = "multi-line";
+                crudExpose.crudBinding.value.search.container.layout = "multi-line";
               }
             }
           },
           search: {
             text: "查询",
             click() {
-              expose.getSearchRef().doSearch();
+              crudExpose.getSearchRef().doSearch();
             }
           },
           reset: {
             text: "重置查询",
             click() {
-              expose.getSearchRef().doReset();
+              crudExpose.getSearchRef().doReset();
             }
           }
         }
@@ -88,19 +92,17 @@ 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"]
           }
         },
         text1: {
-          type: "text",
-          title: "text1",
-          search: { show: true }
+          type: "datetimerange",
+          title: "datetimerange",
+          search: { show: true, col: { span: 8 } }
         },
         text2: {
           type: "text",
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 6e6d9605..96be6ab5 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
@@ -1,35 +1,21 @@
 <template>
-  <fs-page>
+  <fs-page class="PageFeatureSearchMulti">
     <fs-crud ref="crudRef" v-bind="crudBinding"> </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";
-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 {
@@ -39,3 +25,22 @@ export default defineComponent({
   }
 });
 </script>
+<style lang="less">
+.PageFeatureSearchMulti {
+  .fs-search {
+    .fs-search-multi-line-buttons {
+      position: absolute;
+      bottom: -38px;
+      right: 160px;
+    }
+    .ant-form-item-label:before {
+      border-bottom: 1px solid #eee;
+      content: "";
+      position: absolute;
+      bottom: 1px;
+      left: 2px;
+      right: 8px;
+    }
+  }
+}
+</style>
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 0a253152..d1e4ae98 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.js
deleted file mode 100644
index 279509cc..00000000
--- a/packages/ui/certd-client/src/views/crud/feature/search/api.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { requestForMock } from "/src/api/service";
-const request = requestForMock;
-const apiPrefix = "/mock/FeatureSearch";
-export function GetList(query) {
-  return request({
-    url: apiPrefix + "/page",
-    method: "get",
-    data: query
-  });
-}
-
-export function AddObj(obj) {
-  return request({
-    url: apiPrefix + "/add",
-    method: "post",
-    data: obj
-  });
-}
-
-export function UpdateObj(obj) {
-  return request({
-    url: apiPrefix + "/update",
-    method: "post",
-    data: obj
-  });
-}
-
-export function DelObj(id) {
-  return request({
-    url: apiPrefix + "/delete",
-    method: "post",
-    params: { id }
-  });
-}
-
-export function GetObj(id) {
-  return request({
-    url: apiPrefix + "/info",
-    method: "get",
-    params: { id }
-  });
-}
diff --git a/packages/ui/certd-client/src/views/crud/feature/column-resize/api.js b/packages/ui/certd-client/src/views/crud/feature/search/api.ts
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/feature/column-resize/api.js
rename to packages/ui/certd-client/src/views/crud/feature/search/api.ts
index 279509cc..7a1e4eb6 100644
--- a/packages/ui/certd-client/src/views/crud/feature/column-resize/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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/feature/search/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/search/crud.tsx
new file mode 100644
index 00000000..6bac155c
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/search/crud.tsx
@@ -0,0 +1,146 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { computed } from "vue";
+import { message } from "ant-design-vue";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  const statusRef = dict({
+    url: "/mock/dicts/OpenStatusEnum?single"
+  });
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      search: {
+        validate: true,
+        initialForm: {
+          //查询默认值
+          radio: "1"
+        },
+        buttons: {
+          custom: {
+            text: "自定义",
+            show: true,
+            order: 3,
+            class: "fs-test",
+            icon: {
+              icon: "ant-design:search",
+              style: {
+                "font-size": "16px"
+              }
+            },
+            click() {
+              console.log("点击了自定义按钮");
+            }
+          }
+        }
+      },
+      tabs: {
+        name: "radio",
+        show: true,
+        type: "card",
+        options: computed(() => {
+          return statusRef.data;
+        })
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        radio: {
+          title: "状态",
+          search: {
+            show: true,
+            rules: [
+              {
+                required: true,
+                message: "请选择状态"
+              }
+            ]
+          },
+          type: "dict-radio",
+          dict: statusRef
+        },
+        text: {
+          title: "默认值",
+          type: "text",
+          search: {
+            show: true,
+            value: "1"
+          }
+        },
+        customRender: {
+          title: "自定义render",
+          search: {
+            show: true
+          },
+          type: "text",
+          form: {
+            component: {
+              vModel: "checked",
+              render({ attrs }) {
+                return <a-switch {...attrs} />;
+              },
+              title: "自定义render，可以继承component的属性,可以触发search的自动查询"
+            }
+          }
+        },
+        customRender2: {
+          title: "自定义render2",
+          search: {
+            show: true
+          },
+          type: "text",
+          form: {
+            component: {
+              render({ form }) {
+                //注意此处的v-model写法
+                return <a-switch v-model={[form.customRender2, "checked"]} title={"render配置在component之下，注意vModel的写法,不能触发search的自动查询"} />;
+              }
+            }
+          }
+        },
+        customRender3: {
+          title: "自定义render3",
+          search: {
+            show: true
+          },
+          type: "text",
+          form: {
+            render({ form }) {
+              //注意此处的v-model写法
+              return <a-switch v-model={[form.customRender3, "checked"]} title={"render配置在form之下，注意vModel的写法,不能触发search的自动查询"} />;
+            }
+          }
+        }
+      }
+    }
+  };
+}
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 e36b8dff..653a29f3 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", test: 2 }, mergeForm: true });
+        crudExpose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
       },
       clearSearchForm() {
-        expose.setSearchFormData({ form: {}, 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.js
deleted file mode 100644
index a6741fa0..00000000
--- a/packages/ui/certd-client/src/views/crud/feature/search/mock.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import mockUtil from "/src/mock/base";
-const options = {
-  name: "FeatureSearch",
-  idGenerator: 0
-};
-const list = [
-  {
-    radio: "1"
-  },
-  {
-    radio: "2"
-  },
-  {
-    radio: "0"
-  }
-];
-options.list = list;
-const mock = mockUtil.buildMock(options);
-export default mock;
diff --git a/packages/ui/certd-client/src/views/crud/feature/search/mock.ts b/packages/ui/certd-client/src/views/crud/feature/search/mock.ts
new file mode 100644
index 00000000..12c235e7
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/search/mock.ts
@@ -0,0 +1,25 @@
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "FeatureSearch",
+  idGenerator: 0
+};
+const list = [
+  {
+    radio: "1",
+    text: "1",
+    customRender: true,
+    customRender2: false,
+    customRender3: true
+  },
+  {
+    radio: "2",
+    text: "2"
+  },
+  {
+    radio: "0",
+    text: "3"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
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 73%
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 1d86caa2..3a282f76 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 18efb25f..4f698eac 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 57386c5a..6bf449bf 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 b9b0bade..ef3e4eca 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 73%
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 1d86caa2..3a282f76 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 9ac917e3..44248f9e 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 7a84d6c2..8c3c4053 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 b9b0bade..ef3e4eca 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 73%
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 17fe338f..e14aa74b 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 0b00b387..a1236ece 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 1d3e5945..bb48f61f 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 5bb6d0e6..7fe43389 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/api.ts b/packages/ui/certd-client/src/views/crud/feature/tabs/api.ts
new file mode 100644
index 00000000..604402c2
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/tabs/api.ts
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FeatureTabs";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: number) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: number) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
diff --git a/packages/ui/certd-client/src/views/crud/feature/tabs/crud.tsx b/packages/ui/certd-client/src/views/crud/feature/tabs/crud.tsx
new file mode 100644
index 00000000..764f3f8e
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/tabs/crud.tsx
@@ -0,0 +1,91 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+  const statusRef = dict({
+    url: "/mock/dicts/OpenStatusEnum?single"
+  });
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      search: {
+        autoSearch: false,
+        initialForm: {
+          radio: null
+        },
+        buttons: {
+          custom: {
+            text: "自定义",
+            show: true,
+            order: 3,
+            icon: {
+              icon: "ant-design:search",
+              style: {
+                "font-size": "16px"
+              }
+            },
+            click() {
+              console.log("点击了自定义按钮");
+            }
+          }
+        }
+      },
+      tabs: {
+        name: "radio",
+        show: true
+        //type: 'card', //tabs类型
+        // defaultOption: { //第一个tab页签显示
+        //   show: true,
+        //   value: null, //点击第一个页签，查询值
+        //   label: '全部', // 第一个页签的名称
+        // },
+        // options: computed(() => { //选项，默认从name字段的dict里面获取
+        //   return statusRef.data;
+        // })
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: statusRef
+        },
+        text: {
+          title: "文本",
+          search: { show: true },
+          type: "text"
+        }
+      }
+    }
+  };
+}
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
new file mode 100644
index 00000000..fb515994
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/tabs/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        Tabs快捷查询
+        <span class="sub">表格顶部显示tabs，点击tabs快捷查询</span>
+      </div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/tabs.html">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from "vue";
+import { useCrud, 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() {
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef,
+      getSearchFormData() {
+        const form = crudExpose.getSearchFormData();
+        message.info(`searchForm:${JSON.stringify(form)}`);
+      },
+      setSearchFormData() {
+        crudExpose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
+      },
+      clearSearchForm() {
+        crudExpose.setSearchFormData({ form: { radio: null }, mergeForm: false });
+      }
+    };
+  }
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/feature/tabs/mock.ts b/packages/ui/certd-client/src/views/crud/feature/tabs/mock.ts
new file mode 100644
index 00000000..af16b4a0
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/feature/tabs/mock.ts
@@ -0,0 +1,20 @@
+// @ts-ignore
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "FeatureTabs",
+  idGenerator: 0
+};
+const list = [
+  {
+    radio: "1"
+  },
+  {
+    radio: "2"
+  },
+  {
+    radio: "0"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
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 72%
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 77163398..e0ba2cff 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 b47c3fa9..c62be79f 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 b9240eac..95e50539 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 f1df3bad..7344b686 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 73%
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 09e547c6..c2092b5d 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 b44f2483..6bb5af69 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 156b4e5b..aad6fd5a 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 8c86a37e..947a14b3 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 72%
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 cff9ab91..484f1f27 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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.jsx
deleted file mode 100644
index 26220cee..00000000
--- a/packages/ui/certd-client/src/views/crud/form/base/crud.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as api from "./api";
-export default function ({ crudExpose }) {
-  const pageRequest = async (query) => {
-    return await api.GetList(query);
-  };
-  const editRequest = async ({ form, row }) => {
-    form.id = row.id;
-    return await api.UpdateObj(form);
-  };
-  const delRequest = async ({ row }) => {
-    return await api.DelObj(row.id);
-  };
-
-  const addRequest = async ({ form }) => {
-    return await api.AddObj(form);
-  };
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      },
-      form: {
-        wrapper: {
-          buttons: {
-            ok: {
-              text: "保存"
-            }
-          }
-        }
-      },
-      columns: {
-        name: {
-          title: "姓名",
-          type: "text"
-        },
-        renderLabel: {
-          title: "labelRender",
-          type: "text",
-          form: {
-            title(context) {
-              console.log("render label context:", context);
-              return <div style={{ color: "red" }}>LabelRender</div>;
-            },
-            helper: {
-              text: "配置form.title为一个render方法即可自定义label"
-            }
-          }
-        }
-      }
-    }
-  };
-}
diff --git a/packages/ui/certd-client/src/views/crud/form/base/crud.tsx b/packages/ui/certd-client/src/views/crud/form/base/crud.tsx
new file mode 100644
index 00000000..2c39fb0f
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/base/crud.tsx
@@ -0,0 +1,92 @@
+import * as api from "./api";
+import { message } from "ant-design-vue";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, FormWrapperContext, ScopeContext, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
+import { computed } from "vue";
+
+export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      form: {
+        labelCol: {
+          //固定label宽度
+          span: null,
+          style: {
+            width: computed(() => {
+              return context.labelWidthRef.value + "px";
+            })
+          }
+        },
+        afterSubmit(context) {
+          // context.res 是add或update请求返回结果
+          if (context.form.id === 1) {
+            message.error("模拟保存失败，阻止弹窗关闭");
+            throw new Error("模拟失败，阻止弹窗关闭");
+          }
+        },
+        wrapper: {
+          buttons: {
+            ok: {
+              text: "保存"
+            },
+            custom: {
+              text: "自定义按钮",
+              click: async (context: FormWrapperContext) => {
+                utils.logger.info("btn context", context);
+                message.info("通过自定义按钮，触发保存");
+                await context.submit();
+                message.info("保存成功");
+              }
+            },
+            customClose: {
+              text: "自定义关闭",
+              color: "red",
+              click: async (context: FormWrapperContext) => {
+                context.close();
+              }
+            }
+          }
+        }
+      },
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text"
+        },
+        renderLabel: {
+          title: "labelRender",
+          type: "text",
+          form: {
+            title(context: ScopeContext) {
+              console.log("render label context:", context);
+              return <div style={{ color: "red" }}>LabelRender</div>;
+            },
+            helper: {
+              text: "配置form.title为一个render方法即可自定义label"
+            }
+          }
+        }
+      }
+    }
+  };
+}
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 c7a2168c..dcb96c89 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
@@ -1,21 +1,32 @@
 <template>
   <fs-page>
+    <template #header>
+      <div class="title">基本表单</div>
+    </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-alert class="ml-1" type="info" message="基本表单" />
+      <template #form-body-top>
+        <div style="display: flex">
+          <span>label宽度设置:</span>
+          <a-slider v-model:value="labelWidthRef" style="width: 200px" :min="40" :max="300"></a-slider>
+        </div>
       </template>
     </fs-crud>
   </fs-page>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, nextTick } from "vue";
+import { defineComponent, onMounted, ref } from "vue";
 import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.jsx";
+
 export default defineComponent({
   name: "FormBase",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const labelWidthRef = ref(100);
+    const context = {
+      labelWidthRef
+    };
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
 
     // 页面打开后获取列表数据
     onMounted(async () => {
@@ -24,7 +35,8 @@ export default defineComponent({
 
     return {
       crudBinding,
-      crudRef
+      crudRef,
+      labelWidthRef
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/form/base/mock.ts b/packages/ui/certd-client/src/views/crud/form/base/mock.ts
new file mode 100644
index 00000000..2caa7c35
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/base/mock.ts
@@ -0,0 +1,311 @@
+import mockUtil from "/src/mock/base";
+
+const options: any = {
+  name: "FormBase",
+  idGenerator: 0
+};
+const list = [
+  {
+    name: "王小虎",
+    age: 15,
+    password: "",
+    status: "2",
+    url: "https://baidu.com",
+    renderLabel: "第一行编辑演示阻止表单提交"
+  },
+  {
+    name: "张三",
+    age: 18,
+    password: "",
+    url: "https://baidu.com"
+  },
+  {
+    status: "2"
+  }
+];
+
+const dictData = [
+  {
+    value: "zhinan",
+    label: "指南",
+    children: [
+      {
+        value: "shejiyuanze",
+        label: "设计原则",
+        children: [
+          {
+            value: "yizhi",
+            label: "一致"
+          },
+          {
+            value: "fankui",
+            label: "反馈"
+          },
+          {
+            value: "xiaolv",
+            label: "效率"
+          },
+          {
+            value: "kekong",
+            label: "可控"
+          }
+        ]
+      },
+      {
+        value: "daohang",
+        label: "导航",
+        children: [
+          {
+            value: "cexiangdaohang",
+            label: "侧向导航"
+          },
+          {
+            value: "dingbudaohang",
+            label: "顶部导航"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: "zujian",
+    label: "组件",
+    children: [
+      {
+        value: "basic",
+        label: "Basic",
+        children: [
+          {
+            value: "layout",
+            label: "Layout 布局"
+          },
+          {
+            value: "color",
+            label: "Color 色彩"
+          },
+          {
+            value: "typography",
+            label: "Typography 字体"
+          },
+          {
+            value: "icon",
+            label: "Icon 图标"
+          },
+          {
+            value: "button",
+            label: "Button 按钮"
+          }
+        ]
+      },
+      {
+        value: "form",
+        label: "Form",
+        children: [
+          {
+            value: "radio",
+            label: "Radio 单选框"
+          },
+          {
+            value: "checkbox",
+            label: "Checkbox 多选框"
+          },
+          {
+            value: "input",
+            label: "Input 输入框"
+          },
+          {
+            value: "input-number",
+            label: "InputNumber 计数器"
+          },
+          {
+            value: "select",
+            label: "Select 选择器"
+          },
+          {
+            value: "cascader",
+            label: "Cascader 级联选择器"
+          },
+          {
+            value: "switch",
+            label: "Switch 开关"
+          },
+          {
+            value: "slider",
+            label: "Slider 滑块"
+          },
+          {
+            value: "time-picker",
+            label: "TimePicker 时间选择器"
+          },
+          {
+            value: "date-picker",
+            label: "DatePicker 日期选择器"
+          },
+          {
+            value: "datetime-picker",
+            label: "DateTimePicker 日期时间选择器"
+          },
+          {
+            value: "upload",
+            label: "Upload 上传"
+          },
+          {
+            value: "rate",
+            label: "Rate 评分"
+          },
+          {
+            value: "form",
+            label: "Form 表单"
+          }
+        ]
+      },
+      {
+        value: "data",
+        label: "Data",
+        children: [
+          {
+            value: "table",
+            label: "Table 表格"
+          },
+          {
+            value: "tag",
+            label: "Tag 标签"
+          },
+          {
+            value: "progress",
+            label: "Progress 进度条"
+          },
+          {
+            value: "tree",
+            label: "Tree 树形控件"
+          },
+          {
+            value: "pagination",
+            label: "Pagination 分页"
+          },
+          {
+            value: "badge",
+            label: "Badge 标记"
+          }
+        ]
+      },
+      {
+        value: "notice",
+        label: "Notice",
+        children: [
+          {
+            value: "alert",
+            label: "Alert 警告"
+          },
+          {
+            value: "loading",
+            label: "Loading 加载"
+          },
+          {
+            value: "message",
+            label: "Message 消息提示"
+          },
+          {
+            value: "message-box",
+            label: "MessageBox 弹框"
+          },
+          {
+            value: "notification",
+            label: "Notification 通知"
+          }
+        ]
+      },
+      {
+        value: "navigation",
+        label: "Navigation",
+        children: [
+          {
+            value: "menu",
+            label: "NavMenu 导航菜单"
+          },
+          {
+            value: "tabs",
+            label: "Tabs 标签页"
+          },
+          {
+            value: "breadcrumb",
+            label: "Breadcrumb 面包屑"
+          },
+          {
+            value: "dropdown",
+            label: "Dropdown 下拉菜单"
+          },
+          {
+            value: "steps",
+            label: "Steps 步骤条"
+          }
+        ]
+      },
+      {
+        value: "others",
+        label: "Others",
+        children: [
+          {
+            value: "dialog",
+            label: "Dialog 对话框"
+          },
+          {
+            value: "tooltip",
+            label: "Tooltip 文字提示"
+          },
+          {
+            value: "popover",
+            label: "Popover 弹出框"
+          },
+          {
+            value: "card",
+            label: "Card 卡片"
+          },
+          {
+            value: "carousel",
+            label: "Carousel 走马灯"
+          },
+          {
+            value: "collapse",
+            label: "Collapse 折叠面板"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: "ziyuan",
+    label: "资源",
+    children: [
+      {
+        value: "axure",
+        label: "Axure Components"
+      },
+      {
+        value: "sketch",
+        label: "Sketch Templates"
+      },
+      {
+        value: "jiaohu",
+        label: "组件交互文档"
+      }
+    ]
+  }
+];
+
+options.list = list;
+options.copyTimes = 1000;
+const mock = mockUtil.buildMock(options);
+mock.push({
+  path: "/select/cascadeData",
+  method: "get",
+  handle(req: any) {
+    return {
+      code: 0,
+      msg: "success",
+      data: dictData
+    };
+  }
+});
+
+export default mock;
diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/api.js b/packages/ui/certd-client/src/views/crud/form/custom-form/api.ts
similarity index 73%
rename from packages/ui/certd-client/src/views/crud/form/custom-form/api.js
rename to packages/ui/certd-client/src/views/crud/form/custom-form/api.ts
index 1cab3602..2a424586 100644
--- a/packages/ui/certd-client/src/views/crud/form/custom-form/api.js
+++ b/packages/ui/certd-client/src/views/crud/form/custom-form/api.ts
@@ -1,7 +1,7 @@
 import { requestForMock } from "/src/api/service";
 const request = requestForMock;
 const apiPrefix = "/mock/FormCustomForm";
-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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/crud.jsx b/packages/ui/certd-client/src/views/crud/form/custom-form/crud.jsx
deleted file mode 100644
index 875a8063..00000000
--- a/packages/ui/certd-client/src/views/crud/form/custom-form/crud.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const { getFormRef, getFormData } = expose;
-  const pageRequest = async (query) => {
-    return await api.GetList(query);
-  };
-  const editRequest = async ({ form, row }) => {
-    form.id = row.id;
-    return await api.UpdateObj(form);
-  };
-  const delRequest = async ({ row }) => {
-    return await api.DelObj(row.id);
-  };
-
-  const addRequest = async ({ form }) => {
-    return await api.AddObj(form);
-  };
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      },
-      columns: {
-        title: {
-          title: "商品标题",
-          type: "text"
-        },
-        code: {
-          title: "商品代码",
-          search: { show: true },
-          type: "text"
-        }
-      }
-    }
-  };
-}
diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx b/packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx
new file mode 100644
index 00000000..90f91de0
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/custom-form/crud.tsx
@@ -0,0 +1,137 @@
+import * as api from "./api.js";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, CrudExpose, CrudOptions, DelReq, dict, EditReq, useColumns, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { message } from "ant-design-vue";
+import { useFormWrapper } from "@fast-crud/fast-crud";
+
+function useCustomFormWrapperDemo(crudExpose: CrudExpose) {
+  let index = 0;
+  // 自定义表单配置
+  const { buildFormOptions } = useColumns();
+  const customOptions: CrudOptions = {
+    columns: {
+      index: {
+        title: "index",
+        type: "text"
+      },
+      customField: {
+        title: "新表单字段",
+        type: "text"
+      },
+      groupField: {
+        title: "分组字段",
+        type: "text"
+      }
+    },
+    form: {
+      wrapper: {
+        title: "自定义表单",
+        buttons: {
+          open: {
+            text: "打开新对话框",
+            order: -1,
+            click() {
+              openCustomForm();
+            }
+          }
+        },
+        onOpened() {
+          console.log("fsFormWrapper", crudExpose.getFormWrapperRef());
+        }
+      },
+      group: {
+        groups: {
+          testGroupName: {
+            header: "分组测试",
+            columns: ["groupField"]
+          }
+        }
+      },
+      doSubmit({ form }) {
+        console.log("form submit:", form);
+        message.info("自定义表单提交:" + JSON.stringify(form));
+        message.warn("抛出异常可以阻止表单关闭");
+        throw new Error("抛出异常可以阻止表单关闭");
+      }
+    }
+  };
+
+  const { openDialog } = useFormWrapper();
+  //使用crudOptions结构来构建自定义表单配置
+  //打开自定义表单
+  const openCustomForm = async () => {
+    const formOptions = buildFormOptions(customOptions);
+    index++;
+    formOptions.initialForm = { index };
+    formOptions.newInstance = true; //新实例打开
+    const dialogRef = await openDialog(formOptions);
+    console.log("openCustomFormRef", dialogRef);
+  };
+
+  const openCustomFormByExpose = async () => {
+    const formOptions = buildFormOptions(customOptions);
+    index++;
+    formOptions.initialForm = { index };
+    formOptions.newInstance = true; //新实例打开
+    const dialogRef = await crudExpose.openDialog(formOptions);
+    console.log("openCustomFormByExposeRef", dialogRef);
+  };
+
+  return {
+    openCustomForm,
+    openCustomFormByExpose
+  };
+}
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const { openCustomForm, openCustomFormByExpose } = useCustomFormWrapperDemo(crudExpose);
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+  return {
+    crudOptions: {
+      actionbar: {
+        buttons: {
+          custom: {
+            text: "打开自定义对话框",
+            async click() {
+              await openCustomForm();
+            }
+          },
+          byExpose: {
+            text: "byExpose.openDialog",
+            async click() {
+              await openCustomFormByExpose();
+            }
+          }
+        }
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        title: {
+          title: "商品标题",
+          type: "text"
+        },
+        code: {
+          title: "商品代码",
+          search: { show: true },
+          type: "text"
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue b/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue
index faa3c2be..b32f9062 100644
--- a/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/custom-form/index.vue
@@ -1,85 +1,33 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-divider type="vertical" />
-        <a-button @click="openCustomForm">打开自定义表单对话框</a-button>
-      </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">自定义表单</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/use.html#useformwrapper">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
   </fs-page>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose, useColumns } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
-import _ from "lodash-es";
-import { message } from "ant-design-vue";
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs, UseFsProps } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+
 export default defineComponent({
   name: "FormCustomForm",
   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();
     });
 
-    // 自定义表单配置
-    const { buildFormOptions } = useColumns();
-    const customOptions = {
-      columns: {
-        customField: {
-          title: "新表单字段",
-          type: "text"
-        },
-        groupField: {
-          title: "分组字段",
-          type: "text"
-        }
-      },
-      form: {
-        wrapper: { title: "自定义表单" },
-        group: {
-          groups: {
-            testGroupName: {
-              header: "分组测试",
-              columns: ["groupField"]
-            }
-          }
-        },
-        doSubmit({ form }) {
-          console.log("form submit:", form);
-          message.info("自定义表单提交:" + JSON.stringify(form));
-          message.warn("抛出异常可以阻止表单关闭");
-          throw new Error("抛出异常可以阻止表单关闭");
-        }
-      }
-    };
-    //使用crudOptions结构来构建自定义表单配置
-    const formOptions = buildFormOptions(customOptions);
-
-    //打开自定义表单
-    const openCustomForm = () => {
-      expose.getFormWrapperRef().open(formOptions);
-    };
-
     return {
       crudBinding,
-      crudRef,
-      openCustomForm
+      crudRef
     };
   }
 });
diff --git a/packages/ui/certd-client/src/views/crud/form/custom-form/mock.js b/packages/ui/certd-client/src/views/crud/form/custom-form/mock.ts
similarity index 99%
rename from packages/ui/certd-client/src/views/crud/form/custom-form/mock.js
rename to packages/ui/certd-client/src/views/crud/form/custom-form/mock.ts
index 479b89b4..cfdeffd6 100644
--- a/packages/ui/certd-client/src/views/crud/form/custom-form/mock.js
+++ 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 72%
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 b9e50dc6..ab483c23 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 bf6e0c5f..e3c28280 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 5143f074..47fa1b60 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 fcf01621..dd3d2801 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 73%
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 a059b900..3f29ccb9 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 74dbfb0b..5a0d0fa5 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 3d65edec..b4335f0a 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 bc980fa8..823b18e9 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 72%
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 b1fcf856..1c878e6c 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 8016d35e..d9fbda5d 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 14e290c7..93497a2c 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 70d8f4d4..90f01653 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 73%
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 aa8f0890..c8ddc835 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 e9946e84..bdfb2ef7 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 44057448..f6f59dc3 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 92b3daca..dd744e59 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 72%
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 7e492d64..f566a1d6 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,4 +1,7 @@
-export default function ({ expose }) {
+import { message } from "ant-design-vue";
+import { CreateCrudOptionsProps, CreateCrudOptionsRet } from "@fast-crud/fast-crud";
+
+export default function ({}: CreateCrudOptionsProps): CreateCrudOptionsRet {
   return {
     crudOptions: {
       form: {
@@ -10,6 +13,13 @@ export default function ({ expose }) {
             console.log("onOpened", e);
           }
         },
+        doSubmit({ form }) {
+          //覆盖提交方法
+          console.log("form submit:", form);
+          message.info("自定义表单提交:" + JSON.stringify(form));
+          message.warn("抛出异常可以阻止表单关闭");
+          throw new Error("抛出异常可以阻止表单关闭");
+        },
         labelCol: { span: 6 },
         wrapperCol: { span: 16 },
         helper: {
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 78e46334..7ed29772 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
@@ -1,46 +1,59 @@
 <template>
   <fs-page>
-    <a-row :gutter="10">
-      <a-col :span="12">
-        <a-card title="直接显示表单">
-          <fs-form ref="formRef" v-bind="formOptions"> </fs-form>
-          <div style="margin-top: 10px">
-            <a-button @click="formSubmit">提交表单</a-button>
-            <a-button @click="formReset">重置表单</a-button>
-            <a-button class="ml-1" @click="setFormDataTest">setFormData</a-button>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col span="12">
-        <a-card title="打开表单对话框">
-          <a-button @click="openFormWrapper">打开表单对话框</a-button>
-          <fs-form-wrapper ref="formWrapperRef" v-bind="formWrapperOptions" />
-        </a-card>
+    <template #header>
+      <div class="title">独立使用表单</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/use.html#useformwrapper">文档</a>
+      </div>
+    </template>
+    <div style="padding: 20px">
+      <a-row :gutter="10">
+        <a-col :span="12">
+          <a-card class="mt-10" title="直接显示表单">
+            <fs-form ref="formRef" v-bind="formOptions"> </fs-form>
+            <div style="margin-top: 10px">
+              <a-button @click="formSubmit">提交表单</a-button>
+              <a-button @click="formReset">重置表单</a-button>
+              <a-button class="ml-1" @click="setFormDataTest">setFormData</a-button>
+            </div>
+          </a-card>
+        </a-col>
+        <a-col span="12">
+          <a-card class="mt-10" title="直接打开对话框,无需写 fs-form-wrapper 标签">
+            <div style="margin-top: 10px">
+              <a-button @click="openFormWrapperNoTag">打开对话框</a-button>
+            </div>
+          </a-card>
+          <a-card class="mt-10" title="打开表单对话框">
+            <a-button @click="openFormWrapper">打开表单对话框</a-button>
+            <fs-form-wrapper ref="formWrapperRef" v-bind="formWrapperOptions" />
+          </a-card>
 
-        <a-card title="打开表单对话框（复用crudOptions）">
-          <a-button @click="openFormWrapper2">打开表单对话框</a-button>
-          <fs-form-wrapper ref="formWrapper2Ref" v-bind="formWrapper2Options" />
-        </a-card>
+          <a-card class="mt-10" title="打开表单对话框（复用crudOptions）">
+            <a-button @click="openFormWrapper2">打开表单对话框</a-button>
+            <fs-form-wrapper ref="formWrapper2Ref" v-bind="formWrapper2Options" />
+          </a-card>
 
-        <a-card class="mt-10" title="打开表单对话框【复用crudBinding】">
-          <a-button @click="openFormWrapper2">打开表单对话框</a-button>
-          <fs-form-wrapper ref="formWrapperRef2" v-bind="formWrapperOptions2" />
-        </a-card>
-      </a-col>
-    </a-row>
+          <a-card class="mt-10" title="打开表单对话框【复用crudBinding】">
+            <a-button @click="openFormWrapper2">打开表单对话框</a-button>
+            <fs-form-wrapper ref="formWrapperRef2" v-bind="formWrapperOptions2" />
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
   </fs-page>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from "vue";
 import { message } from "ant-design-vue";
-import { useCrud, useExpose, useColumns } from "@fast-crud/fast-crud";
+import { CreateCrudOptionsProps, useColumns, useFormWrapper, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 
 function createFormOptionsFromCrudOptions() {
   const { buildFormOptions } = useColumns();
   //可以直接复用crud.js
-  const { crudOptions } = createCrudOptions({});
+  const { crudOptions } = createCrudOptions({} as CreateCrudOptionsProps);
   return buildFormOptions(crudOptions);
 }
 
@@ -126,7 +139,7 @@ function useFormDirect() {
  * 表单对话框独立使用
  * @returns {{formWrapperRef, formWrapperOptions, openFormWrapper: openFormWrapper}}
  */
-function useFormWrapper() {
+function useFormWrapperUsingTag() {
   const formWrapperRef = ref();
   const formWrapperOptions = ref();
   formWrapperOptions.value = createFormOptions();
@@ -148,24 +161,12 @@ function useFormWrapper() {
 function useCrudBindingForm() {
   const formWrapperRef2 = ref();
 
-  // 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 });
 
   // 以下代码实际上== 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));
@@ -201,14 +202,32 @@ function useCrudOptions() {
   };
 }
 
+/**
+ * 无需写 fs-form-wrapper标签，直接打开对话框
+ * 此方式可以层叠打开多个对话框
+ */
+function useFormProvider() {
+  const { openDialog } = useFormWrapper();
+
+  async function openFormWrapperNoTag() {
+    const opts = createFormOptionsFromCrudOptions();
+    const wrapperRef = await openDialog(opts);
+    console.log("对话框已打开", wrapperRef);
+  }
+  return {
+    openFormWrapperNoTag
+  };
+}
+
 export default defineComponent({
   name: "FormIndependent",
   setup() {
     return {
       ...useFormDirect(),
-      ...useFormWrapper(),
+      ...useFormWrapperUsingTag(),
       ...useCrudBindingForm(),
-      ...useCrudOptions()
+      ...useCrudOptions(),
+      ...useFormProvider()
     };
   }
 });
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 72%
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 d8c3543c..8123f957 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 72%
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 b9142c89..fb4554b6 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,9 +41,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 dbd13b80..1f2627a3 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 ab81c09b..07e8fc83 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 d7c076ef..997ace56 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 c7009bf7..6efdfbdd 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 ab81c09b..07e8fc83 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 a9f809c8..49894f85 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 73%
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 0ba39afe..382983dc 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 1e7c5c38..ac85344c 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 e43bc8cf..843bcf17 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 e48c1f0f..80264d9c 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 73%
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 c00a5787..01bf8605 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 284f7b9f..1ed633e2 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 499e5fe7..bfcedeaf 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
@@ -1,38 +1,24 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" custom-class="page-layout" v-bind="crudBinding">
-      <template #header-top>
-        <div class="page-header">表单布局</div>
-      </template>
-    </fs-crud>
+    <template #header>
+      <div class="title">表单Grid布局</div>
+    </template>
+    <fs-crud ref="crudRef" custom-class="page-layout" v-bind="crudBinding"> </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: "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 41ec7888..a2f872ff 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 73%
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 d9a78941..0a228c1e 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 fabaec8e..49f7e23b 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 1a969b41..424515b2 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 f63208a5..80abe6e0 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 73%
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 f7d01faa..db682eb5 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 1bf0a55a..ee46c772 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 5e4c48c9..b81c902d 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 1658d74a..f84d6169 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 0dc2616a..6ad221b2 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 c6828281..74a72057 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 c93ef0bd..ba6f9e54 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 0702f08c..92380ef0 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 a182214c..aa0861de 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/render/api.ts b/packages/ui/certd-client/src/views/crud/form/render/api.ts
new file mode 100644
index 00000000..07791fcb
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/render/api.ts
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FormRender";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
diff --git a/packages/ui/certd-client/src/views/crud/form/render/crud.tsx b/packages/ui/certd-client/src/views/crud/form/render/crud.tsx
new file mode 100644
index 00000000..6e704d54
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/render/crud.tsx
@@ -0,0 +1,96 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, useUi } 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 { ui } = useUi();
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        name: {
+          title: "演示表单组件周围的render",
+          type: "text",
+          form: {
+            helper: "演示组件周围自定义render",
+            topRender({ value }) {
+              return <a-tag color="red">topRender</a-tag>;
+            },
+            bottomRender({ value }) {
+              return <a-tag color="red">bottomRender {value ?? ""}</a-tag>;
+            },
+            prefixRender({ value }) {
+              return <a-tag color="red">prefixRender</a-tag>;
+            },
+            suffixRender({ value }) {
+              return <a-tag color="red">suffixRender</a-tag>;
+            }
+          }
+        },
+        render: {
+          title: "字段组件本身render",
+          type: "text",
+          form: {
+            helper: "组件本身render",
+            render({ form }) {
+              return (
+                <div>
+                  <a-input v-model={[form.render, "value"]} />
+                  render value : {form.render}
+                </div>
+              );
+            }
+          }
+        },
+        conditionalRender: {
+          title: "条件渲染",
+          type: "text",
+          form: {
+            helper: "符合条件则render，否则走默认",
+            conditionalRender: {
+              match({ form }) {
+                return form.conditionalRenderToggle;
+              },
+              render({ form }) {
+                return <div style={{ lineHeight: "32px" }}>{form.conditionalRender || "请先输入值"}</div>;
+              }
+            }
+          }
+        },
+        conditionalRenderToggle: {
+          title: "切换条件",
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { value: 1, label: "预览模式" },
+              { value: 0, label: "编辑模式" }
+            ]
+          }),
+          form: {
+            helper: "切换条件render 编辑/预览 模式"
+          }
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/form/render/index.vue b/packages/ui/certd-client/src/views/crud/form/render/index.vue
new file mode 100644
index 00000000..04c96794
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/render/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">表单字段render</div>
+      <div class="more">
+        <a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#key-form-prefixrender">文档</a>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+
+export default defineComponent({
+  name: "FormRender",
+  setup() {
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/form/render/mock.ts b/packages/ui/certd-client/src/views/crud/form/render/mock.ts
new file mode 100644
index 00000000..f725d086
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/render/mock.ts
@@ -0,0 +1,22 @@
+import mockUtil from "/src/mock/base";
+
+const options: any = {
+  name: "FormRender",
+  idGenerator: 0
+};
+const list = [
+  {
+    name: "王小虎",
+    conditionalRender: "conditionalRender"
+  },
+  {
+    name: "张三",
+    conditionalRender: "conditionalRender"
+  }
+];
+
+options.list = list;
+options.copyTimes = 1000;
+const mock = mockUtil.buildMock(options);
+
+export default mock;
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 72%
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 52a5ff5b..015c7604 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 1a4f1df2..6c9b8936 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 8c2e77e6..3266819e 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 f586e9c4..dff18098 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 73%
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 0ba49b67..04725326 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 f82ff917..3126bc39 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/index.vue b/packages/ui/certd-client/src/views/crud/form/single-column/index.vue
index 83d27934..040b1085 100644
--- a/packages/ui/certd-client/src/views/crud/form/single-column/index.vue
+++ b/packages/ui/certd-client/src/views/crud/form/single-column/index.vue
@@ -10,12 +10,13 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted, nextTick } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
+import { useFs, UseFsProps } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 export default defineComponent({
   name: "FormSingleColumn",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: customValue });
 
     // 页面打开后获取列表数据
     onMounted(async () => {
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 9b37c9e7..65026454 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 73%
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 f62ba48b..9e2dfa5f 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 856ca779..88144619 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 49bd373a..ebd50633 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 0ca7bc11..487363f0 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/form/view/api.ts b/packages/ui/certd-client/src/views/crud/form/view/api.ts
new file mode 100644
index 00000000..3cd028b6
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/view/api.ts
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FormView";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/get",
+    method: "get",
+    params: { id }
+  });
+}
diff --git a/packages/ui/certd-client/src/views/crud/form/view/crud.tsx b/packages/ui/certd-client/src/views/crud/form/view/crud.tsx
new file mode 100644
index 00000000..da1f1c39
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/view/crud.tsx
@@ -0,0 +1,96 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({}: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      settings: {
+        viewFormUseCellComponent: true
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      form: {
+        row: {
+          gutter: 20
+        },
+        beforeSubmit(context) {
+          console.log("beforeSubmit", context);
+        },
+        afterSubmit(context) {
+          console.log("afterSubmit", context);
+        }
+      },
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text",
+          form: {
+            helper: "添加和编辑时必填，编辑时额外需要校验长度",
+            rules: [{ required: true, message: "请输入姓名" }],
+            component: {
+              maxlength: 5, // 原生属性要写在这里
+              props: {
+                type: "text",
+                showWordLimit: true
+              }
+            }
+          },
+          editForm: {
+            rules: [{ min: 2, max: 5, message: "姓名长度为2-5" }]
+          }
+        },
+        age: {
+          title: "年龄",
+          type: "text",
+          form: {
+            rules: [{ pattern: /^\d+$/, message: "必须为整数" }],
+            helper: "正则表达式"
+          }
+        },
+        status: {
+          title: "必选",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum"
+          }),
+          form: {
+            rules: [{ required: true, message: "请选择一个选项" }]
+          }
+        },
+        email: {
+          title: "邮箱",
+          type: "text",
+          form: {
+            rules: [{ type: "email", message: "请填写正确的邮箱" }]
+          }
+        },
+        url: {
+          title: "URL",
+          type: "text",
+          form: {
+            rules: [{ type: "url", message: "请填写正确的url" }]
+          }
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/form/view/index.vue b/packages/ui/certd-client/src/views/crud/form/view/index.vue
new file mode 100644
index 00000000..4a42334b
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/view/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        查看表单使用单元格组件显示
+        <span class="sub">点击查看按钮，打开查看表单显示效果</span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+
+export default defineComponent({
+  name: "FormView",
+  setup() {
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/form/base/mock.js b/packages/ui/certd-client/src/views/crud/form/view/mock.ts
similarity index 98%
rename from packages/ui/certd-client/src/views/crud/form/base/mock.js
rename to packages/ui/certd-client/src/views/crud/form/view/mock.ts
index bb0fe7b9..7678f128 100644
--- a/packages/ui/certd-client/src/views/crud/form/base/mock.js
+++ b/packages/ui/certd-client/src/views/crud/form/view/mock.ts
@@ -1,7 +1,7 @@
 import mockUtil from "/src/mock/base";
 
-const options = {
-  name: "FormBase",
+const options: any = {
+  name: "FormView",
   idGenerator: 0
 };
 const list = [
@@ -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 27445779..00000000
--- 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 5c955ba6..00000000
--- 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 3dfb047d..00000000
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 efe1577f..00000000
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 7a33425e..00000000
--- 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 7c51dea3..00000000
--- 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 73%
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 3cfd8182..872ce124 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 2947b537..5f46713b 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 45d6937e..dc0cf68e 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 ed703ceb..9f26fc5a 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 73%
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 dd8bf7d8..2cda9ae8 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,15 +33,15 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { 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 3682486c..b3b7e505 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 40dde985..05e192c2 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";
-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)
+import { message } from "ant-design-vue";
+import { useFs } from "@fast-crud/fast-crud";
 
+export default defineComponent({
+  name: "RowHandleTooltip",
+  setup() {
+    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 7efa34b7..aaa9a5ac 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 72%
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 69094b0d..6aaf0f52 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 ad836c9b..b376a442 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 9b8b4349..c338bc02 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 aa2397b7..c6da10fc 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 73%
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 924d6570..573bba37 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 7af63d44..7bb8e6b4 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 97869b95..992d35ec 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 a9f3d756..87b8b2dd 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 72%
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 b15ec4e0..a654aab8 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
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 b5d8c1df..ef2c2757 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 74aa9ec3..8df5bf14 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 22d45cf7..8009d564 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 73%
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 56f3de45..df82753d 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/slots/layout/crud.jsx b/packages/ui/certd-client/src/views/crud/slots/layout/crud.jsx
deleted file mode 100644
index af8ad45e..00000000
--- a/packages/ui/certd-client/src/views/crud/slots/layout/crud.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
-    return await api.GetList(query);
-  };
-  const editRequest = async ({ form, row }) => {
-    form.id = row.id;
-    return await api.UpdateObj(form);
-  };
-  const delRequest = async (id) => {
-    return await api.DelObj(row.id);
-  };
-
-  const addRequest = async ({ form }) => {
-    return await api.AddObj(form);
-  };
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      },
-      columns: {
-        id: {
-          title: "ID",
-          key: "id",
-          type: "number",
-          column: {
-            width: 50
-          },
-          form: {
-            show: false
-          }
-        },
-        radio: {
-          title: "状态",
-          search: { show: true },
-          type: "dict-radio",
-          dict: dict({
-            url: "/mock/dicts/OpenStatusEnum?single"
-          })
-        }
-      }
-    }
-  };
-}
diff --git a/packages/ui/certd-client/src/views/crud/slots/layout/crud.tsx b/packages/ui/certd-client/src/views/crud/slots/layout/crud.tsx
new file mode 100644
index 00000000..c34df26d
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/slots/layout/crud.tsx
@@ -0,0 +1,72 @@
+import * as api from "./api";
+import { dict } from "@fast-crud/fast-crud";
+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 }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      search: {
+        container: {
+          action: {
+            col: {
+              span: 16
+            }
+          }
+        },
+        buttons: {
+          change: {
+            text: "切换模式",
+            click() {
+              if (crudExpose.crudBinding.value.search.container.layout === "multi-line") {
+                crudExpose.crudBinding.value.search.container.layout = "default";
+              } else {
+                crudExpose.crudBinding.value.search.container.layout = "multi-line";
+              }
+            }
+          }
+        }
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        radio: {
+          title: "状态",
+          search: { show: true },
+          type: "dict-radio",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum?single"
+          })
+        }
+      }
+    }
+  };
+}
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 ce35fe28..2039ec5b 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
@@ -15,13 +15,13 @@
       </template>
 
       <template #search-left>
-        <a-button type="danger">search-left插槽</a-button>
+        <fs-button type="danger">search-left插槽</fs-button>
       </template>
       <template #search-middle>
-        <a-button type="danger">search-middle</a-button>
+        <fs-button type="danger">search-middle</fs-button>
       </template>
       <template #search-right>
-        <a-button type="danger">search-right插槽</a-button>
+        <fs-button type="danger">search-right插槽</fs-button>
       </template>
 
       <template #actionbar-left>
@@ -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 31e3a7d7..ec619dbe 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 73%
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 192ff43e..90b43bfa 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,9 +33,9 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
-    url: apiPrefix + "/info",
+    url: apiPrefix + "/get",
     method: "get",
     params: { id }
   });
diff --git a/packages/ui/certd-client/src/views/crud/slots/search/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/search/crud.jsx
rename to packages/ui/certd-client/src/views/crud/slots/search/crud.tsx
index af8ad45e..08696d8c 100644
--- a/packages/ui/certd-client/src/views/crud/slots/search/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 bbf30cff..e4c1bfea 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 4312767d..1f3175fa 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 2dacd363..7191e656 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 c716dd05..7fc007dd 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 PageContent from "./content/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 976c620e..2fe6b135 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 0644c109..fd5f1a2d 100644
--- a/packages/ui/certd-client/src/views/framework/login/index.vue
+++ b/packages/ui/certd-client/src/views/framework/login/index.vue
@@ -71,7 +71,7 @@
     </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({
@@ -128,7 +128,7 @@ export default defineComponent({
       }
     };
 
-    const handleFinish = async (values) => {
+    const handleFinish = async (values: any) => {
       console.log(values, formState);
       loading.value = true;
       try {
@@ -138,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 d3923c3e..cb88f8df 100644
--- a/packages/ui/certd-client/src/views/framework/register/index.vue
+++ b/packages/ui/certd-client/src/views/framework/register/index.vue
@@ -36,7 +36,7 @@
     </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({
@@ -44,7 +44,7 @@ export default defineComponent({
   setup() {
     const userStore = useUserStore();
     const formRef = ref();
-    const formState = reactive({
+    const formState: any = reactive({
       username: "",
       password: "",
       confirmPassword: ""
@@ -82,7 +82,7 @@ export default defineComponent({
       }
     };
 
-    const handleFinish = async (values) => {
+    const handleFinish = async (values: any) => {
       await userStore.register(
         toRaw({
           password: formState.password,
@@ -91,7 +91,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/api.js b/packages/ui/certd-client/src/views/sys/authority/permission/api.ts
similarity index 76%
rename from packages/ui/certd-client/src/views/sys/authority/permission/api.js
rename to packages/ui/certd-client/src/views/sys/authority/permission/api.ts
index 64627ea6..585a7e5a 100644
--- a/packages/ui/certd-client/src/views/sys/authority/permission/api.js
+++ b/packages/ui/certd-client/src/views/sys/authority/permission/api.ts
@@ -1,6 +1,6 @@
 import { request } from "/src/api/service";
 const apiPrefix = "/sys/authority/permission";
-export async function GetList(query) {
+export async function GetList(query: any) {
   return request({
     url: apiPrefix + "/page",
     method: "post",
@@ -15,7 +15,7 @@ export async function GetTree() {
   });
 }
 
-export async function AddObj(obj) {
+export async function AddObj(obj: any) {
   return request({
     url: apiPrefix + "/add",
     method: "post",
@@ -23,7 +23,7 @@ export async function AddObj(obj) {
   });
 }
 
-export async function UpdateObj(obj) {
+export async function UpdateObj(obj: any) {
   return request({
     url: apiPrefix + "/update",
     method: "post",
@@ -31,7 +31,7 @@ export async function UpdateObj(obj) {
   });
 }
 
-export async function DelObj(id) {
+export async function DelObj(id: any) {
   return request({
     url: apiPrefix + "/delete",
     method: "post",
@@ -39,7 +39,7 @@ export async function DelObj(id) {
   });
 }
 
-export async function GetObj(id) {
+export async function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "post",
diff --git a/packages/ui/certd-client/src/views/sys/authority/permission/crud.jsx b/packages/ui/certd-client/src/views/sys/authority/permission/crud.tsx
similarity index 82%
rename from packages/ui/certd-client/src/views/sys/authority/permission/crud.jsx
rename to packages/ui/certd-client/src/views/sys/authority/permission/crud.tsx
index c8b91853..b44a9376 100644
--- a/packages/ui/certd-client/src/views/sys/authority/permission/crud.jsx
+++ b/packages/ui/certd-client/src/views/sys/authority/permission/crud.tsx
@@ -1,9 +1,9 @@
-import * as api from "./api";
-import { dict } from "@fast-crud/fast-crud";
+import * as api from "./api.js";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 
-export default function ({ expose }) {
-  const pageRequest = async (query) => {
-    const list = await api.GetTree(query);
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    const list = await api.GetTree();
 
     return {
       current: 1,
@@ -16,29 +16,29 @@ export default function ({ expose }) {
   async function afterChange() {
     await permissionTreeDict.reloadDict();
   }
-  const editRequest = async ({ form, row }) => {
+  const editRequest = async ({ form, row }: EditReq) => {
     form.id = row.id;
     const ret = await api.UpdateObj(form);
     await afterChange();
     return ret;
   };
-  const delRequest = async ({ row }) => {
+  const delRequest = async ({ row }: DelReq) => {
     const ret = await api.DelObj(row.id);
     await afterChange();
     return ret;
   };
 
-  const addRequest = async ({ form }) => {
+  const addRequest = async ({ form }: AddReq) => {
     const ret = await api.AddObj(form);
     await afterChange();
     return ret;
   };
-  let permissionTreeDict = dict({
+  const permissionTreeDict = dict({
     url: "/sys/authority/permission/tree",
     isTree: true,
     value: "id",
     label: "title",
-    async onReady({ dict }) {
+    async onReady({ dict }: any) {
       dict.setData([{ id: -1, title: "根节点", children: dict.data }]);
     }
   });
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 692ca1dd..7cff8e94 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 0005298e..bffc0ac7 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,64 +5,46 @@
     </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>
+      <fs-permission-tree class="permission-tree" :tree="crudBinding.data" :checkable="false" :actions="permission" @add="addHandle" @edit="editHandle" @remove="removeHandle"></fs-permission-tree>
     </fs-crud>
   </fs-page>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
-import { useCrud, useExpose, CrudExpose, useUi } from "@fast-crud/fast-crud";
-import createCrudOptions from "./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 exposeRet: { expose: CrudExpose } = useExpose({ crudRef, crudBinding });
-    const expose: CrudExpose = exposeRet.expose;
-    // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-    // 初始化crud配置
     // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
     // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
-    const { resetCrudOptions } = useCrud({ expose, crudOptions, permission: "sys:auth:per" });
-    // 你可以调用此方法，重新初始化crud配置
-    // resetCrudOptions(options)
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { permission: "sys:auth:per" } });
 
     // 页面打开后获取列表数据
     onMounted(async () => {
-      await expose.doRefresh();
+      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();
@@ -73,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 6793b6fa..92ecb165 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 a4c7290e..026746c6 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, context: { 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 089cf1cd..3d3686b0 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 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, context: { 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 55474d50..44ce65c8 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 291e31f3..d41cb0bd 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 33f0c7a5..89b095f5 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, context: { permission: "sys:auth:user" } });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/ui/form/input/index.vue b/packages/ui/certd-client/src/views/ui/form/input/index.vue
new file mode 100644
index 00000000..6ffe47ec
--- /dev/null
+++ b/packages/ui/certd-client/src/views/ui/form/input/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">input输入框</div>
+    </template>
+    <component :is="ui.card.name">
+      <fs-ui-render :render-fn="inputDemo1Render"></fs-ui-render>
+    </component>
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { useUi } from "@fast-crud/fast-crud";
+import { ref } from "vue";
+
+const { ui } = useUi();
+const textRef = ref();
+function inputDemo1Render() {
+  return ui.input.render({ vModel: { ref: textRef, key: "value" } });
+}
+</script>
diff --git a/packages/ui/certd-client/tsconfig.json b/packages/ui/certd-client/tsconfig.json
index 3ce206ec..c9ea1dd5 100644
--- a/packages/ui/certd-client/tsconfig.json
+++ b/packages/ui/certd-client/tsconfig.json
@@ -17,9 +17,11 @@
     "baseUrl": ".",
     "outDir": "./dist/ts",
     "types": [
+      "vite/client",
       "mocha",
       "chai",
-      "node"
+      "node",
+      "unplugin-vue-define-options/macros-global"
     ],
     "paths": {
       "/@/*": ["src/*"],
diff --git a/packages/ui/certd-client/vite.config.ts b/packages/ui/certd-client/vite.config.ts
index 0fa8a851..b2a1592f 100644
--- a/packages/ui/certd-client/vite.config.ts
+++ b/packages/ui/certd-client/vite.config.ts
@@ -4,6 +4,13 @@ import visualizer from "rollup-plugin-visualizer";
 import viteCompression from "vite-plugin-compression";
 import PurgeIcons from "vite-plugin-purge-icons";
 import * as path from "path";
+import DefineOptions from "unplugin-vue-define-options/vite";
+// import WindiCSS from "vite-plugin-windicss";
+// import { generateModifyVars } from "./build/modify-vars";
+// import { configThemePlugin } from "./build/theme-plugin";
+// import OptimizationPersist from "vite-plugin-optimize-persist";
+// import PkgConfig from "vite-plugin-package-config";
+// https://vitejs.dev/config/
 // 增加环境变量 _
 process.env.VITE_APP_VERSION = require("./package.json").version;
 process.env.VITE_APP_BUILD_TIME = require("dayjs")().format("YYYY-M-D HH:mm:ss");
@@ -16,10 +23,11 @@ export default ({ command, mode }) => {
   if (mode.startsWith("debug")) {
     devAlias = [
       { find: /@fast-crud\/fast-crud\/dist/, replacement: path.resolve("../../fast-crud/src/") },
-      { find: /@fast-crud\/fast-crud$/, replacement: path.resolve("../../fast-crud/src/") },
-      { find: /@fast-crud\/fast-extends\/dist/, replacement: path.resolve("../../fast-extends/src/") },
-      { find: /@fast-crud\/fast-extends$/, replacement: path.resolve("../../fast-extends/src/") },
-      { find: /@fast-crud\/ui-antdv$/, replacement: path.resolve("../../ui/ui-antdv/src/") }
+      // { find: /@fast-crud\/fast-crud$/, replacement: path.resolve("../../fast-crud/src/") },
+      { find: /@fast-crud\/fast-extends\/dist/, replacement: path.resolve("../../fast-extends/src/") }
+      // { find: /@fast-crud\/fast-extends$/, replacement: path.resolve("../../fast-extends/src/") },
+      // { find: /@fast-crud\/ui-antdv$/, replacement: path.resolve("../../ui/ui-antdv/src/") },
+      // { find: /@fast-crud\/ui-interface$/, replacement: path.resolve("../../ui/ui-interface/src/") }
     ];
     devServerFs = {
       // 这里配置dev启动时读取的项目根目录
@@ -31,6 +39,7 @@ export default ({ command, mode }) => {
   return {
     base: "/",
     plugins: [
+      DefineOptions(),
       vueJsx(),
       vue(),
       // 压缩build后的代码
@@ -51,7 +60,7 @@ export default ({ command, mode }) => {
     ],
     esbuild: {
       drop: command === "build" ? ["debugger"] : [],
-      // pure: ["console.log", "debugger"],
+      pure: ["console.log", "debugger"],
       jsxFactory: "h",
       jsxFragment: "Fragment"
     },