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

perf: 完善文档，完善部分types
perf: 优化d.ts类型
perf: 日期增加week、month、year、quarter类型
feat: resetCrudOptions 示例
feat: tabs快捷查询组件
fix: 行编辑支持多级表头

https://github.com/fast-crud/fast-crud/issues/143
perf: antdv 增加自定义表头示例

https://github.com/fast-crud/fast-crud/issues/141
perf: 表单下方按钮支持context

https://github.com/fast-crud/fast-crud/issues/142

packages/ui/certd-client/.eslintrc.js

@@ -16,12 +16,7 @@ module.exports = {
       tsx: true
     }
   },
-  extends: [
+  extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "prettier"],
-    "plugin:vue/vue3-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
-    "prettier"
-  ],
   rules: {
     //"max-len": [0, 200, 2, { ignoreUrls: true }],
     "@typescript-eslint/ban-ts-ignore": "off",

packages/ui/certd-client/package.json

@@ -20,91 +20,93 @@
   "author": "Greper",
   "license": "MIT",
   "dependencies": {
-    "@ant-design/colors": "^6.0.0",
+    "@ant-design/colors": "^7.0.0",
-    "@ant-design/icons-vue": "^6.0.1",
+    "@ant-design/icons-vue": "^6.1.0",
-    "@fast-crud/fast-crud": "^1.9.2",
+    "@fast-crud/fast-crud": "workspace:^1.9.2",
-    "@fast-crud/fast-extends": "^1.9.2",
+    "@fast-crud/fast-extends": "workspace:^1.9.2",
-    "@fast-crud/ui-antdv": "^1.9.2",
+    "@fast-crud/ui-antdv": "workspace:^1.9.2",
-    "@iconify/iconify": "^3.0.1",
+    "@iconify/iconify": "^3.1.0",
-    "@iconify/json": "^2.1.151",
+    "@iconify/json": "^2.2.32",
     "@purge-icons/generated": "^0.9.0",
     "@soerenmartius/vue3-clipboard": "^0.1.2",
     "ant-design-vue": "^3.2.15",
-    "axios": "^1.2.1",
+    "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",
+    "china-division": "^2.6.0",
-    "core-js": "^3.26.1",
+    "core-js": "^3.29.0",
-    "cos-js-sdk-v5": "^1.4.15-beta.0",
+    "cos-js-sdk-v5": "^1.4.16",
     "cropperjs": "^1.5.13",
     "dayjs": "^1.11.7",
-    "deepdash-es": "5.3.5",
+    "deepdash-es": "5.3.9",
     "highlight.js": "^11.7.0",
-    "lodash-es": "^4.17.15",
+    "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",
     "object-assign": "^4.1.1",
-    "pinia": "2.0.28",
+    "pinia": "2.0.33",
     "qiniu-js": "^3.4.1",
-    "sortablejs": "^1.14.0",
+    "sortablejs": "^1.15.0",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
     "vue-cropperjs": "^5.0.0",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.5",
+    "vue-router": "^4.1.6",
-    "vuedraggable": "^4.0.1"
+    "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^23.0.4",
+    "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@types/chai": "^4.3.4",
     "@types/lodash-es": "^4.17.6",
     "@types/mocha": "^10.0.1",
-    "@types/node": "^18.11.15",
+    "@types/node": "^18.14.6",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/parser": "^5.46.1",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@vitejs/plugin-legacy": "^3.0.1",
+    "@typescript-eslint/parser": "^5.54.1",
+    "@vitejs/plugin-legacy": "^4.0.1",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "@vue/compiler-sfc": "^3.2.45",
+    "@vue/compiler-sfc": "^3.2.47",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.2.6",
+    "@vue/test-utils": "^2.3.1",
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.4.13",
     "caller-path": "^4.0.0",
     "chai": "^4.3.7",
-    "eslint": "8.29.0",
+    "eslint": "8.35.0",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-prettier": "^8.7.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.0.1",
+    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.8.0",
+    "eslint-plugin-vue": "^9.9.0",
     "esno": "^0.16.3",
-    "husky": "^8.0.2",
+    "husky": "^8.0.3",
     "less": "^4.1.3",
-    "less-loader": "^11.0.0",
+    "less-loader": "^11.1.0",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^13.1.2",
-    "postcss": "^8.4.20",
+    "postcss": "^8.4.21",
-    "prettier": "2.8.1",
+    "prettier": "2.8.4",
     "pretty-quick": "^3.1.3",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.4.0",
-    "rollup": "^3.7.4",
+    "rollup": "^3.18.0",
-    "rollup-plugin-visualizer": "^5.8.2",
+    "rollup-plugin-visualizer": "^5.9.0",
-    "stylelint": "^14.16.0",
+    "stylelint": "^15.2.0",
-    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-order": "^5.0.0",
+    "stylelint-order": "^6.0.3",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.2.7",
     "ts-node": "^10.9.1",
-    "typescript": "4.9.4",
+    "typescript": "4.9.5",
-    "vite": "^4.0.1",
+    "unplugin-vue-define-options": "^1.2.3",
+    "vite": "^4.1.4",
     "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",
+    "vite-plugin-theme": "^0.8.6",
     "vite-plugin-windicss": "^1.8.10",
     "vue-eslint-parser": "^9.1.0",
-    "vue-tsc": "^0.40.13",
+    "vue-tsc": "^1.2.0",
     "windicss": "^3.5.6"
   },
   "husky": {

packages/ui/certd-client/src/App.vue

@@ -11,9 +11,9 @@ import { provide, ref, nextTick } from "vue";
 import { usePageStore } from "/src/store/modules/page";
 import { useResourceStore } from "/src/store/modules/resource";
 import { useSettingStore } from "/@/store/modules/settings";
-import  'dayjs/locale/zh-cn';
+import "dayjs/locale/zh-cn";
-import  'dayjs/locale/en';
+import "dayjs/locale/en";
-import dayjs from 'dayjs'
+import dayjs from "dayjs";
 export default {
   name: "App",
   setup() {
@@ -29,13 +29,13 @@ export default {
       console.log("locale changed:", value);
       if (value === "zh-cn") {
         locale.value = zhCN;
-        dayjs.locale('zh-cn');
+        dayjs.locale("zh-cn");
       } else if (value === "en") {
         locale.value = enUS;
-        dayjs.locale('en');
+        dayjs.locale("en");
       }
     }
-    localeChanged('zh-cn')
+    localeChanged("zh-cn");
     provide("fn:router.reload", reload);
     provide("fn:locale.changed", localeChanged);
 

packages/ui/certd-client/src/layout/layout-framework.vue

@@ -1,4 +1,4 @@
-<template xmlns:w="http://www.w3.org/1999/xhtml">
+<template>
   <a-layout class="fs-framework">
     <a-layout-sider v-model:collapsed="asideCollapsed" :trigger="null" collapsible>
       <div class="header-logo">
@@ -152,6 +152,11 @@ export default {
     background: #f6f6f6;
     display: flex;
     justify-content: space-between;
+
+    > div {
+      height: auto;
+      padding: 5px;
+    }
   }
   .header-buttons {
     display: flex;

packages/ui/certd-client/src/mock/index.js

@@ -1,9 +1,9 @@
 import { mock } from "../api/service";
 import * as tools from "../api/tools";
 import _ from "lodash-es";
-const commonMocks = import.meta.globEager("./common/mock.*.js");
+const commonMocks = import.meta.glob("./common/mock.*.[j|t]s", { eager: true });
-const apiMocks = import.meta.globEager("../api/modules/*.mock.ts");
+const apiMocks = import.meta.glob("../api/modules/*.mock.ts", { eager: true });
-const viewMocks = import.meta.globEager("../views/**/mock.js");
+const viewMocks = import.meta.glob("../views/**/mock.[j|t]s", { eager: true });
 
 const list = [];
 _.forEach(commonMocks, (value) => {

packages/ui/certd-client/src/plugin/fast-crud/index.tsx

@@ -1,20 +1,21 @@
 import { request, requestForMock } from "/src/api/service";
 import "/src/mock";
-import { FastCrud, UseCrudProps, useTypes, setLogger, useColumns, ColumnCompositionProps, MergeColumnPlugin, CrudOptions } from "@fast-crud/fast-crud";
+import { FastCrud, UseCrudProps, useTypes, setLogger, useColumns, ColumnCompositionProps, MergeColumnPlugin, CrudOptions, TransformQuery, PageQuery, UserPageQuery, UserPageRes, PageRes } from "@fast-crud/fast-crud";
 import "@fast-crud/fast-crud/dist/style.css";
 import { FsExtendsUploader, FsExtendsEditor, FsExtendsJson, FsExtendsCopyable, FsExtendsTime } from "@fast-crud/fast-extends";
 import "@fast-crud/fast-extends/dist/style.css";
 import UiAntdv from "@fast-crud/ui-antdv";
 import _ from "lodash-es";
 import { useCrudPermission } from "../permission";
+import { TransformResProps } from "@fast-crud/fast-crud/src";
 
-function install(app, options: any = {}) {
+function install(app: any, options: any = {}) {
   app.use(UiAntdv);
   //设置日志级别
   setLogger({ level: "debug" });
   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" });
@@ -25,14 +26,16 @@ function install(app, options: any = {}) {
      * useCrud时会被执行
      * @param context，useCrud的参数
      */
-    commonOptions(context: UseCrudProps) {
+    commonOptions(context: UseCrudProps): CrudOptions {
-      const crudBinding = context.expose?.crudBinding;
+      const crudBinding = context.crudExpose?.crudBinding;
       const opts: CrudOptions = {
         table: {
           size: "small",
           pagination: false,
-          onResizeColumn: (w, col) => {
+          onResizeColumn: (w: number, col: any) => {
-            crudBinding.value.table.columnsMap[col.key].width = w;
+            if (crudBinding.value?.table?.columnsMap && crudBinding.value?.table?.columnsMap[col.key]) {
+              crudBinding.value.table.columnsMap[col.key].width = w;
+            }
           }
         },
         rowHandle: {
@@ -48,7 +51,7 @@ function install(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 +67,7 @@ function install(app, options: any = {}) {
               sort
             };
           },
-          transformRes: ({ res }) => {
+          transformRes: ({ res }: TransformResProps): PageRes => {
             const pageSize = res.limit;
             let currentPage = res.offset / pageSize;
             if (res.offset % pageSize === 0) {
@@ -104,23 +107,22 @@ function install(app, options: any = {}) {
       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) => {
-          // 返回结构如下
-          // 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;
@@ -132,7 +134,7 @@ function install(app, options: any = {}) {
       region: "oss-cn-shenzhen",
       accessKeyId: "",
       accessKeySecret: "",
-      async getAuthorization(custom, context) {
+      async getAuthorization(custom: any, context: any) {
         // 不传accessKeySecret代表使用临时签名模式,此时此参数必传（安全，生产环境推荐）
         const ret = await request({
           url: "http://www.docmirror.cn:7070/api/upload/alioss/getAuthorization",
@@ -145,7 +147,7 @@ function install(app, options: any = {}) {
         // sdk配置
         secure: true // 默认为非https上传,为了安全，设置为true
       },
-      successHandle(ret) {
+      successHandle(ret: any) {
         // 上传完成后可以在此处处理结果，修改url什么的
         console.log("success handle:", ret);
         return ret;
@@ -153,14 +155,14 @@ function install(app, options: any = {}) {
     },
     qiniu: {
       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;
@@ -171,7 +173,7 @@ function install(app, options: any = {}) {
       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);
@@ -183,12 +185,12 @@ function install(app, options: any = {}) {
           },
           timeout: 60000,
           data,
-          onUploadProgress: (p) => {
+          onUploadProgress: (p: any) => {
             onProgress({ percent: Math.round((p.loaded / p.total) * 100) });
           }
         });
       },
-      successHandle(ret) {
+      successHandle(ret: any) {
         // 上传完成后的结果处理， 此处应返回格式为{url:xxx}
         return {
           url: "http://www.docmirror.cn:7070" + ret,
@@ -214,7 +216,7 @@ function install(app, options: any = {}) {
       //如果与官方字段类型同名，将会覆盖官方的字段类型
       form: { component: { name: "a-date-picker" } },
       column: { component: { name: "fs-date-format", format: "YYYY-MM-DD" } },
-      valueBuilder(context) {
+      valueBuilder(context: any) {
         console.log("time2,valueBuilder", context);
       }
     }

packages/ui/certd-client/src/plugin/iconfont/index.ts

@@ -1 +1 @@
-import "./iconfont.js"
+import "./iconfont.js";

packages/ui/certd-client/src/plugin/index.ts

@@ -2,7 +2,7 @@ import "./iconify";
 import "./iconfont";
 import FastCrud from "./fast-crud";
 import permission from "./permission";
-function install(app, options: any = {}) {
+function install(app: any, options: any = {}) {
   app.use(FastCrud, options);
   app.use(permission);
 }

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 {
-export default permission;
+  install,
+  ...permission
+};

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);
 

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);

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 });
 

packages/ui/certd-client/src/plugin/permission/use-crud-permission.ts

@@ -1,17 +1,25 @@
 import { usePermission } from "/@/plugin/permission";
 import _ from "lodash-es";
 
+export type UseCrudPermissionProps = {
+  permission:
+    | string
+    | {
+        prefix: string;
+        [key: string]: any;
+      };
+};
 /**
  * 设置按钮动作权限
  * @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 +58,7 @@ export function useCrudPermission({ permission }) {
     );
   }
 
-  function merge(userOptions) {
+  function merge(userOptions: any) {
     const permissionOptions = buildCrudPermission();
     _.merge(permissionOptions, userOptions);
     return permissionOptions;

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();

packages/ui/certd-client/src/router/source/modules/crud.ts

@@ -18,11 +18,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",
@@ -70,6 +76,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"
           }
         ]
       },
@@ -444,6 +456,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 +516,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",

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);
   }
 };

packages/ui/certd-client/src/store/modules/page.ts

@@ -15,13 +15,13 @@ interface PageState {
   // 已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
   openedLoaded: boolean;
   // 当前页面
-  current: "";
+  current: string;
   // 需要缓存的页面 name
   keepAlive: Array<any>;
   inited: boolean;
 }
 // 判定是否需要缓存
-const isKeepAlive = (data) => get(data, "meta.cache", false);
+const isKeepAlive = (data: any) => get(data, "meta.cache", false);
 
 export const usePageStore = defineStore({
   id: "app.page",
@@ -48,7 +48,7 @@ export const usePageStore = defineStore({
     inited: false
   }),
   getters: {
-    getOpened() {
+    getOpened(): any {
       // @ts-ignore
       return this.opened;
     },
@@ -91,7 +91,7 @@ export const usePageStore = defineStore({
       const valid: Array<number> = [];
       // 处理数据
       this.opened = value
-        .map((opened) => {
+        .map((opened: any) => {
           // 忽略首页
           if (opened.fullPath === "/index") {
             valid.push(1);
@@ -105,7 +105,7 @@ export const usePageStore = defineStore({
           // 新的数据中一般不会携带 params 和 query, 所以旧的参数会留存
           return Object.assign({}, opened, find);
         })
-        .filter((opened, index) => valid[index] === 1);
+        .filter((opened: any, index: any) => valid[index] === 1);
       // 标记已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
       this.openedLoaded = true;
       // 根据 opened 数据生成缓存设置
@@ -132,7 +132,7 @@ export const usePageStore = defineStore({
      * @param {Object} context
      * @param {Object} payload { index, params, query, fullPath } 路由信息
      */
-    async openedUpdate({ index, params, query, fullPath }) {
+    async openedUpdate({ index, params, query, fullPath }: any) {
       // 更新页面列表某一项
       const page = this.opened[index];
       page.params = params || page.params;
@@ -148,7 +148,7 @@ export const usePageStore = defineStore({
      * @param {Object} context
      * @param {Object} payload { oldIndex, newIndex } 位置信息
      */
-    async openedSort({ oldIndex, newIndex }) {
+    async openedSort({ oldIndex, newIndex }: any) {
       // 重排页面列表某一项
       const page = this.opened[oldIndex];
       this.opened.splice(oldIndex, 1);
@@ -162,7 +162,7 @@ export const usePageStore = defineStore({
      * @param {Object} context
      * @param {Object} payload new tag info
      */
-    async add({ tag, params, query, fullPath }) {
+    async add({ tag, params, query, fullPath }: any) {
       // 设置新的 tag 在新打开一个以前没打开过的页面时使用
       const newTag = tag;
       newTag.params = params || newTag.params;
@@ -183,7 +183,7 @@ export const usePageStore = defineStore({
      * @param {Object} context
      * @param {Object} payload 从路由钩子的 to 对象上获取 { name, params, query, fullPath, meta } 路由信息
      */
-    async open({ name, params, query, fullPath, meta }) {
+    async open({ name, params, query, fullPath, meta }: any) {
       // 已经打开的页面
       const opened = this.opened;
       // 判断此页面是否已经打开 并且记录位置
@@ -227,7 +227,7 @@ export const usePageStore = defineStore({
      * @param {Object} context
      * @param {Object} payload { tagName: 要关闭的标签名字 }
      */
-    async close({ tagName }) {
+    async close({ tagName }: any) {
       // 预定下个新页面
       let newPage = {};
       const isCurrent = this.current === tagName;
@@ -267,7 +267,7 @@ export const usePageStore = defineStore({
      */
     async closeLeft(opts = {}) {
       await this.closeByCondition({
-        condition({ i, currentIndex }) {
+        condition({ i, currentIndex }: any) {
           return i >= currentIndex;
         },
         ...opts
@@ -280,7 +280,7 @@ export const usePageStore = defineStore({
      */
     async closeRight(opts = {}) {
       await this.closeByCondition({
-        condition({ i, currentIndex }) {
+        condition({ i, currentIndex }: any) {
           return currentIndex >= i;
         },
         ...opts
@@ -321,7 +321,7 @@ export const usePageStore = defineStore({
      */
     async closeOther(opts = {}) {
       await this.closeByCondition({
-        condition({ i, currentIndex }) {
+        condition({ i, currentIndex }: any) {
           return currentIndex === i;
         },
         ...opts
@@ -357,14 +357,13 @@ export const usePageStore = defineStore({
      */
     keepAliveRefresh() {
       this.keepAlive = this.opened.filter((item) => isKeepAlive(item)).map((e) => e.name);
-      console.log("keep alive:", this.keepAlive);
     },
     /**
      * @description 删除一个页面的缓存设置
      * @param {Object} state state
      * @param {String} name name
      */
-    keepAliveRemove(name) {
+    keepAliveRemove(name: string) {
       const list = cloneDeep(this.keepAlive);
       const index = list.findIndex((item) => item === name);
       if (index !== -1) {
@@ -377,7 +376,7 @@ export const usePageStore = defineStore({
      * @param {Object} state state
      * @param {String} name name
      */
-    keepAlivePush(name) {
+    keepAlivePush(name: string) {
       const keep = cloneDeep(this.keepAlive);
       keep.push(name);
       this.keepAlive = uniq(keep);
@@ -395,7 +394,7 @@ export const usePageStore = defineStore({
      * @param {Object} state state
      * @param {String} fullPath new fullPath
      */
-    currentSet(fullPath) {
+    currentSet(fullPath: string) {
       this.current = fullPath;
     },
     /**
@@ -404,7 +403,7 @@ export const usePageStore = defineStore({
      * @param {Object} state state
      * @param {Array} routes routes
      */
-    async init(routes) {
+    async init(routes: any) {
       if (this.inited) {
         return;
       }
@@ -414,9 +413,9 @@ export const usePageStore = defineStore({
         routes = frameworkRoutes;
       }
 
-      const pool = [];
+      const pool: any = [];
-      const push = function (routes) {
+      const push = function (routes: any) {
-        routes.forEach((route) => {
+        routes.forEach((route: any) => {
           if (route.children && route.children.length > 0) {
             push(route.children);
           } else {

packages/ui/certd-client/src/store/modules/resource.ts

@@ -39,7 +39,7 @@ export const useResourceStore = defineStore({
     getFrameworkMenus() {
       return this.frameworkMenus;
     }
-  },
+  } as any,
   actions: {
     clear() {
       this.inited = false;
@@ -54,17 +54,17 @@ export const useResourceStore = defineStore({
       this.inited = true;
 
       const showMenus = _.cloneDeep(frameworkMenus[0].children);
-      this.frameworkMenus = filterMenus(showMenus, (item) => {
+      this.frameworkMenus = filterMenus(showMenus, (item: any) => {
         return item?.meta?.showOnHeader !== false;
       });
 
-      this.fixedAsideMenus = findMenus(showMenus, (item) => {
+      this.fixedAsideMenus = findMenus(showMenus, (item: any) => {
         return item?.meta?.fixedAside === true;
       });
       this.headerMenus = headerMenus;
       this.setAsideMenu();
     },
-    setAsideMenu(topMenu?) {
+    setAsideMenu(topMenu?: any) {
       if (this.frameworkMenus.length === 0) {
         return;
       }
@@ -74,13 +74,13 @@ export const useResourceStore = defineStore({
       const asideMenus = topMenu?.children || [];
       this.asideMenus = [...this.fixedAsideMenus, ...asideMenus];
     },
-    setAsideMenuByCurrentRoute(matched) {
+    setAsideMenuByCurrentRoute(matched: any) {
       const menuHeader = this.frameworkMenus;
       if (matched?.length <= 1) {
         return;
       }
 
-      function findFromTree(tree, find) {
+      function findFromTree(tree: any, find: any) {
         const results: Array<any> = [];
         for (const item of tree) {
           if (find(item)) {
@@ -88,7 +88,7 @@ export const useResourceStore = defineStore({
             return results;
           }
           if (item.children && item.children.length > 0) {
-            const found = findFromTree(item.children, find);
+            const found: any = findFromTree(item.children, find);
             if (found) {
               results.push(item);
               return results.concat(found);
@@ -97,7 +97,7 @@ export const useResourceStore = defineStore({
         }
       }
       const matchedPath = matched[1].path;
-      const _side = findFromTree(menuHeader, (menu) => menu.path === matchedPath);
+      const _side = findFromTree(menuHeader, (menu: any) => menu.path === matchedPath);
       if (_side?.length > 0) {
         if (this.currentAsidePath === _side[0]) {
           return;
@@ -106,11 +106,11 @@ export const useResourceStore = defineStore({
         this.setAsideMenu(_side[0]);
       }
     },
-    filterByPermission(permissions) {
+    filterByPermission(permissions: any) {
       this.frameworkMenus = this.filterChildrenByPermission(this.frameworkMenus, permissions);
     },
-    filterChildrenByPermission(list, permissions) {
+    filterChildrenByPermission(list: any, permissions: any) {
-      const menus = list.filter((item) => {
+      const menus = list.filter((item: any) => {
         if (item?.meta?.permission) {
           return permissions.includes(item.meta.permission);
         }

packages/ui/certd-client/src/store/modules/settings.ts

@@ -51,7 +51,7 @@ export const useSettingStore = defineStore({
       this.persistTheme();
       // await changeTheme(this.theme.primaryColor);
     },
-    async setPrimaryColor(color) {
+    async setPrimaryColor(color: any) {
       const theme = this.theme;
       theme.primaryColor = color;
       await this.setTheme();

packages/ui/certd-client/src/style/common.less

@@ -42,3 +42,13 @@ h1, h2, h3, h4, h5, h6 {
 .anticon {
   vertical-align: 0 !important;
 }
+
+.flex{
+  display: flex;
+  align-items: center;
+}
+
+
+.ml-5{
+  margin-left:5px;
+}

packages/ui/certd-client/src/types/global.d.ts

@@ -1,10 +1,4 @@
-import type {
+import type { ComponentRenderProxy, VNode, ComponentPublicInstance, FunctionalComponent, PropType as VuePropType } from "vue";
-  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' {
+declare module "vue" {
-  export type JSXComponent<Props = any> =
+  export type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;
-    | { new (): ComponentPublicInstance<Props> }
-    | FunctionalComponent<Props>;
 }

packages/ui/certd-client/src/utils/util.common.ts

@@ -1,13 +1,13 @@
 import _ from "lodash-es";
 export default {
-  arrayToMap(array) {
+  arrayToMap(array: any) {
     if (!array) {
       return {};
     }
     if (!_.isArray(array)) {
       return array;
     }
-    const map = {};
+    const map: any = {};
     for (const item of array) {
       if (item.key) {
         map[item.key] = item;
@@ -15,7 +15,7 @@ export default {
     }
     return map;
   },
-  mapToArray(map) {
+  mapToArray(map: any) {
     if (!map) {
       return [];
     }

packages/ui/certd-client/src/utils/util.env.ts

@@ -1,15 +1,15 @@
 import _ from "lodash-es";
-export function getEnvValue(key) {
+export function getEnvValue(key: string) {
   // @ts-ignore
   return import.meta.env["VITE_APP_" + key];
 }
 
 export class EnvConfig {
-  API;
+  API: string;
-  MODE;
+  MODE: string;
-  STORAGE;
+  STORAGE: string;
-  TITLE;
+  TITLE: string;
-  PM_ENABLED;
+  PM_ENABLED: string;
   constructor() {
     this.init();
   }
@@ -19,6 +19,7 @@ export class EnvConfig {
     _.forEach(import.meta.env, (value, key) => {
       if (key.startsWith("VITE_APP")) {
         key = key.replace("VITE_APP_", "");
+        // @ts-ignore
         this[key] = value;
       }
     });
@@ -26,7 +27,8 @@ export class EnvConfig {
     this.MODE = import.meta.env.MODE;
   }
 
-  get(key, defaultValue) {
+  get(key: string, defaultValue: string) {
+    // @ts-ignore
     return this[key] ?? defaultValue;
   }
   isDev() {

packages/ui/certd-client/src/utils/util.site.ts

@@ -4,7 +4,7 @@ export const site = {
    * @description 更新标题
    * @param {String} title 标题
    */
-  title: function (titleText) {
+  title: function (titleText: string) {
     const processTitle = env.TITLE || "FsAdmin";
     window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ""}`;
   }

packages/ui/certd-client/src/utils/util.storage.ts

@@ -1,5 +1,5 @@
 import { env } from "./util.env";
-function isNullOrUnDef(value) {
+function isNullOrUnDef(value: any) {
   return value == null;
 }
 const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;

packages/ui/certd-client/src/views/crud/advanced/from-backend/crud-backend.ts

@@ -1,5 +1,5 @@
 export const crudOptions = `
- ({expose,dict}) => {
+ ({crudExpose,dict}) => {
   return {
       columns: {
         id: {

packages/ui/certd-client/src/views/crud/advanced/from-backend/crud.jsx

@@ -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
-      }
-    }
-  };
-}

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
+  };
+}

packages/ui/certd-client/src/views/crud/advanced/from-backend/index.vue

@@ -2,38 +2,27 @@
   <fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding" />
 </template>
 
-<script>
+<script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
+import { defineComponent, ref, onMounted, Ref } from "vue";
-import { useCrud, dict, useExpose } from "@fast-crud/fast-crud";
+import { useCrud, dict, useExpose, useFs, UseFsProps, CrudBinding, CreateCrudOptionsRet, 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 crudBinding: Ref<CrudBinding> = ref();
-    // 暴露的方法
+
-    const { expose } = useExpose({ crudRef, crudBinding });
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数
-    // 你的crud配置
+
-    const { crudOptions } = createCrudOptions({ expose });
     // 初始化crud配置
     // 页面打开后获取列表数据
     onMounted(async () => {
-      // 从后台获取crud配置
+      const customValue = {};
-      const ret = await GetCrud();
+      const { crudExpose, extraExport } = await useFsAsync({ crudRef, crudBinding, createCrudOptions, customValue });
-      // 编译
-      const crudBackend = eval(ret);
-      // 本示例返回的是一个方法字符串，所以要先执行这个方法，获取options
-      const crudOptionsFromBackend = crudBackend({ expose, dict });
-      // 与本地options合并
-      _.merge(crudOptions, crudOptionsFromBackend);
-      // useCrud
-      useCrud({ expose, crudOptions });
       // 刷新数据
-      expose.doRefresh();
+      await crudExpose.doRefresh();
     });
 
     return {

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",

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,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",

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";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, ScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-export default function ({ expose }) {
+export default function ({ expose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
-  const pageRequest = async (query) => {
+  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);
   };
 
@@ -51,7 +51,7 @@ export default function ({ expose }) {
             cache: true
           }),
           form: {
-            valueChange({ form, value, getComponentRef }) {
+            valueChange({ form, value, getComponentRef }: ScopeContext) {
               form.city = undefined; // 将“city”的值置空
               form.county = undefined; // 将“county”的值置空
               if (value) {
@@ -70,7 +70,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 +81,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 +104,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}`;
               }

packages/ui/certd-client/src/views/crud/advanced/linkage/index.vue

@@ -2,31 +2,20 @@
   <fs-crud ref="crudRef" v-bind="crudBinding" />
 </template>
 
-<script>
+<script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
+import { defineComponent, onMounted } from "vue";
-import { useCrud } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
+import createCrudOptions from "./crud.js";
-import { useExpose } from "@fast-crud/fast-crud";
+
 export default defineComponent({
   name: "FormLinkage",
   setup() {
-    // crud组件的ref
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
-    const crudRef = ref();
+    const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
-    // 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();
+      crudExpose.doRefresh();
     });
 
     return {

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) {
+function omitChildren(originalList: any) {
-  const list = [];
+  const list: any = [];
-  orignalListt.forEach((item) => {
+  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;

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,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",

packages/ui/certd-client/src/views/crud/basis/column-merge-plugin/crud.tsx

@@ -1,19 +1,19 @@
 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 }) {
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
-  const pageRequest = async (query) => {
+  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);
   };
 

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 customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
     // 页面打开后获取列表数据
     onMounted(() => {
       crudExpose.doRefresh();

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
 };

packages/ui/certd-client/src/views/crud/basis/columns-set/index.vue

@@ -1,8 +1,14 @@
 <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="列设置可以禁用或者隐藏某字段勾选 ，-------> 点击右侧最后一个按钮查看效果" />
         <a-button @click="columnsSetToggleMode()"> 切换简单模式 </a-button>
       </template>
     </fs-crud>
@@ -37,9 +43,8 @@ export default defineComponent({
     });
 
     function columnsSetToggleMode() {
-      crudBinding.value.toolbar.columnsFilter.mode =
+      crudBinding.value.toolbar.columnsFilter.mode = crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
-        crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
+      message.info("点击列设置按钮查看效果，当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
-      message.info("当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
     }
 
     return {

packages/ui/certd-client/src/views/crud/basis/compute-more/index.vue

@@ -2,6 +2,9 @@
   <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>

packages/ui/certd-client/src/views/crud/basis/compute/crud.jsx

@@ -177,9 +177,7 @@ export default function ({ expose }) {
                 },
                 async asyncFn(watchValue) {
                   message.info("监听switch,触发远程获取options");
-                  const url = watchValue
+                  const url = watchValue ? "/mock/dicts/OpenStatusEnum?remote" : "/mock/dicts/moreOpenStatusEnum?remote";
-                    ? "/mock/dicts/OpenStatusEnum?remote"
-                    : "/mock/dicts/moreOpenStatusEnum?remote";
                   return await requestForMock({ url });
                 }
               })

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">

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 + "/info",
+    method: "get",
+    params: { id }
+  });
+}

packages/ui/certd-client/src/views/crud/basis/first/crud.ts

@@ -0,0 +1,54 @@
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import * as api from "./api";
+export default function ({ crudExpose, customValue }: 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 {
+    //自定义变量返回
+    customExport: {},
+    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" }
+            ]
+          })
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/basis/first/index.vue

@@ -1,105 +1,46 @@
 <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>
+<script lang="ts">
-import { defineComponent, ref, onMounted } from "vue";
+import { defineComponent, onMounted } from "vue";
-import { dict, useCrud } from "@fast-crud/fast-crud";
+import { useFs } from "@fast-crud/fast-crud";
-import { useExpose } from "@fast-crud/fast-crud";
+import createCrudOptions from "./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: "停止" }
-            ]
-          })
-        }
-      }
-    }
-  };
-};
 
 //此处为组件定义
 export default defineComponent({
   name: "FsCrudFirst",
   setup() {
-    // crud组件的ref
+    // 演示自定义变量传递, 将会传递给createCrudOptions
-    const crudRef = ref();
+    const customValue: any = {};
-    // crud 配置的ref
+
-    const crudBinding = ref();
+    // // crud组件的ref
-    // 暴露的方法
+    // const crudRef: Ref = ref();
-    const { expose } = useExpose({ crudRef, crudBinding });
+    // // crud 配置的ref
-    // 你的crud配置
+    // const crudBinding: Ref<CrudBinding> = ref();
-    const { crudOptions } = createCrudOptions({ expose });
+    // // 暴露的方法
-    // 初始化crud配置
+    // const { crudExpose } = useExpose({ crudRef, crudBinding });
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    // // 你的crud配置
-    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // const { crudOptions, customExport } = createCrudOptions({ crudExpose, customValue });
-    // 你可以调用此方法，重新初始化crud配置
+    // // 初始化crud配置
-    // resetCrudOptions(options)
+    // const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
+
+    //  =======以上为fs的初始化代码=========
+    //  =======你可以简写为下面这一行========
+    const { crudRef, crudBinding, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
 
     // 页面打开后获取列表数据
     onMounted(() => {
-      expose.doRefresh();
+      crudExpose.doRefresh();
     });
-
     return {
       crudBinding,
       crudRef

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;

packages/ui/certd-client/src/views/crud/basis/helloworld/index.vue

@@ -0,0 +1,119 @@
+<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 } 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 ({ crudOptions, customValue }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  //本地模拟后台crud接口方法 ----开始
+  const records = [{ id: 1, name: "Hello World", type: 1 }];
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return {
+      records,
+      currentPage: 1,
+      pageSize: 20,
+      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() {
+    // 演示自定义变量传递, 将会传递给createCrudOptions
+    const customValue: any = {};
+
+    // // 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, customExport } = useFs({ createCrudOptions, customValue });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

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>
@@ -40,13 +42,9 @@ export default defineComponent({
       expose.doRefresh();
     });
 
-    function showDemo() {
-      message("演示按钮");
-    }
     return {
       crudBinding,
-      crudRef,
+      crudRef
-      showDemo
     };
   }
 });

packages/ui/certd-client/src/views/crud/basis/layout-card/crud.jsx

@@ -1,5 +1,7 @@
 import * as api from "./api";
 import { dict } from "@fast-crud/fast-crud";
+import { computed } from "vue";
+
 export default function ({ crudExpose }) {
   const pageRequest = async (query) => {
     return await api.GetList(query);
@@ -15,6 +17,17 @@ export default function ({ crudExpose }) {
   const addRequest = async ({ form }) => {
     return await api.AddObj(form);
   };
+  let 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: {
@@ -26,6 +39,16 @@ export default function ({ crudExpose }) {
         editRequest,
         delRequest
       },
+      tabs: {
+        name: "city",
+        show: true,
+        type: "card",
+        value: "id",
+        label: "text",
+        options: computed(() => {
+          return cityDictRef.data;
+        })
+      },
       columns: {
         id: {
           title: "ID",
@@ -47,17 +70,7 @@ export default function ({ crudExpose }) {
           title: "城市",
           type: "dict-select",
           search: { show: true },
-          dict: dict({
+          dict: cityDictRef
-            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: "单选",

packages/ui/certd-client/src/views/crud/basis/layout-card/index.vue

@@ -1,5 +1,11 @@
 <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>
@@ -42,5 +48,9 @@ export default defineComponent({
 <style lang="less">
 .page-layout-card {
   background-color: #eee;
+
+  .fs-page-header {
+    background-color: #fff;
+  }
 }
 </style>

packages/ui/certd-client/src/views/crud/basis/layout-custom/crud.jsx

@@ -22,6 +22,11 @@ export default function ({ crudExpose }) {
       container: {
         is: shallowRef(CustomLayout) //可以将自定义布局组件全局注册，这里只需要配置name即可
       },
+      tabs: {
+        show: true,
+        name: "city",
+        type: "card"
+      },
       request: {
         pageRequest,
         addRequest,
@@ -48,7 +53,7 @@ export default function ({ crudExpose }) {
         city: {
           title: "城市",
           type: "dict-select",
-          search: { show: false },
+          search: { show: true },
           dict: dict({
             value: "id",
             label: "text",

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>

packages/ui/certd-client/src/views/crud/basis/layout-custom/index.vue

@@ -1,17 +1,15 @@
 <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">
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-      <template #actionbar-right>
-        <a-alert
-          class="ml-1"
-          type="info"
-          message="通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条 -------->"
-        />
-      </template>
-    </fs-crud>
   </fs-page>
 </template>
 

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/BasisValueChange";
+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 + "/info",
+    method: "get",
+    params: { id }
+  });
+}

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: "关闭" }
+            ]
+          })
+        }
+      }
+    }
+  };
+}

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 { useFs, UseFsProps } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+import _ from "lodash-es";
+export default defineComponent({
+  name: "BasisReset",
+  setup() {
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport, crudOptions, resetCrudOptions, appendBindingOptions } = useFs({ createCrudOptions, customValue } as UseFsProps);
+
+    setTimeout(() => {
+      //合并新的crudOptions
+      const newOptions = _.merge(crudOptions, {
+        columns: {
+          text: {
+            title: "追加字段",
+            type: "text"
+          }
+        }
+      });
+      //重置crudBinding
+      resetCrudOptions(newOptions);
+      crudExpose.doRefresh();
+    }, 2000);
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

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: "BasisValueChange",
+  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;

packages/ui/certd-client/src/views/crud/basis/value-change/index.vue

@@ -2,6 +2,9 @@
   <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>

packages/ui/certd-client/src/views/crud/component/date/crud.jsx

@@ -27,7 +27,7 @@ export default function ({ expose }) {
         delRequest
       },
       table: {
-        scroll: { x: 2000 }
+        scroll: { x: 3000 }
       },
       rowHandle: { fixed: "right" },
       columns: {
@@ -71,6 +71,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: {
@@ -122,6 +133,42 @@ 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",

packages/ui/certd-client/src/views/crud/component/date/mock.js

@@ -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",

packages/ui/certd-client/src/views/crud/dict/cloneable/index.vue

@@ -1,12 +1,17 @@
 <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
+        <a-alert class="ml-1" type="warning" message="如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制；----点击switch看效果----↓↓↓↓↓↓" />
-          class="ml-1"
-          type="warning"
-          message="如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制；----点击switch看效果----↓↓↓↓↓↓"
-        />
       </template>
     </fs-crud>
   </fs-page>

packages/ui/certd-client/src/views/crud/dict/prototype/index.vue

@@ -1,12 +1,17 @@
 <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
+        <a-alert class="ml-1" type="warning" message="------点击switch看效果-------↓↓↓↓↓↓↓↓" />
-          class="ml-1"
-          type="warning"
-          message="dict配置作为原型，任何用到的地方都会clone一个新的实例例（同一个字段每一行的dict都是不一样的）------点击switch看效果-------↓↓↓↓↓↓↓↓"
-        />
       </template>
     </fs-crud>
   </fs-page>

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,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",

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 }) {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-  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);
   };
 

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 #header>
-      <template #actionbar-right>
+      <div class="title">
-        <a-alert class="ml-1" type="warning" message="管理共享字典，此处添加和修改字典，在使用时实时变化" />
+        管理共享字典
-      </template>
+        <span class="sub">此处添加和修改字典，在使用时实时变化</span>
-    </fs-crud>
+      </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 customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
 
     // 页面打开后获取列表数据
     onMounted(() => {

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

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() {

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,7 +33,7 @@ export function DelObj(id) {
   });
 }
 
-export function GetObj(id) {
+export function GetObj(id: any) {
   return request({
     url: apiPrefix + "/info",
     method: "get",

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 }) {
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-  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);
   };
 

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 #header>
-      <template #actionbar-right>
+      <div class="title">
-        <a-alert class="ml-1" type="warning" message="共享字典的使用" />
+        共享字典的使用
-      </template>
+        <span class="sub">在管理共享字典页面添加字典后，使用时会自动增加字典选项</span>
-    </fs-crud>
+      </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, customExport } = useFs({ createCrudOptions, customValue });
 
     // 页面打开后获取列表数据
     onMounted(() => {

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
 };

packages/ui/certd-client/src/views/crud/dict/single/index.vue

@@ -1,8 +1,17 @@
 <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>

packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue

@@ -1,8 +1,15 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" style="position: relative" v-bind="crudBinding">
+    <template #header>
-      <template #actionbar-right> 列头可以调整宽度 </template>
+      <div class="title">
-    </fs-crud>
+        列宽调整
+        <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>
 

packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue

@@ -1,12 +1,18 @@
 <template>
   <fs-page>
+    <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">
       <template #actionbar-right>
-        <a-alert
+        <a-alert class="ml-1" type="info" message="" />
-          class="ml-1"
-          type="info"
-          message="配置order即可控制字段的顺序，数字越小越靠前，默认为1，（配置0或负数排前面，配置2以上排后面）"
-        />
       </template>
     </fs-crud>
   </fs-page>

packages/ui/certd-client/src/views/crud/feature/columns-set/index.vue

@@ -1,12 +1,12 @@
 <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
+        <a-alert class="ml-1" type="warning" message="列设置支持简化模式 ------> 点击最右侧按钮查看效果" />
-            class="ml-1"
-            type="warning"
-            message="列设置支持简化模式"
-        />
       </template>
     </fs-crud>
   </fs-page>
@@ -42,7 +42,7 @@ export default defineComponent({
 
     return {
       crudBinding,
-      crudRef,
+      crudRef
     };
   }
 });

packages/ui/certd-client/src/views/crud/feature/editable-row/crud.jsx

@@ -66,21 +66,31 @@ export default function ({ expose }) {
           title: "姓名",
           type: "text"
         },
-        province: {
+        address: {
-          title: "省份",
+          title: "地址",
-          search: { show: true },
+          children: {
-          type: "dict-select",
+            province: {
-          dict: dict({
+              title: "省份",
-            value: "id",
+              search: { show: true },
-            label: "text",
+              type: "text"
-            data: [
+            },
-              { id: "sz", text: "深圳", color: "success" },
+            city: {
-              { id: "gz", text: "广州", color: "primary" },
+              title: "城市",
-              { id: "bj", text: "北京" },
+              search: { show: true },
-              { id: "wh", text: "武汉" },
+              type: "dict-select",
-              { id: "sh", text: "上海" }
+              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: "上海" }
+                ]
+              })
+            }
+          }
         }
       }
     }

packages/ui/certd-client/src/views/crud/feature/editable-row/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" />
   </fs-page>
 </template>

packages/ui/certd-client/src/views/crud/feature/editable/crud.jsx

@@ -83,21 +83,31 @@ export default function ({ expose }) {
           title: "姓名",
           type: "text"
         },
-        province: {
+        address: {
-          title: "省份",
+          title: "地址",
-          search: { show: true },
+          children: {
-          type: "dict-select",
+            province: {
-          dict: dict({
+              title: "省份",
-            value: "id",
+              search: { show: true },
-            label: "text",
+              type: "text"
-            data: [
+            },
-              { id: "sz", text: "深圳", color: "success" },
+            city: {
-              { id: "gz", text: "广州", color: "primary" },
+              title: "城市",
-              { id: "bj", text: "北京" },
+              search: { show: true },
-              { id: "wh", text: "武汉" },
+              type: "dict-select",
-              { id: "sh", text: "上海" }
+              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: "上海" }
+                ]
+              })
+            }
+          }
         }
       }
     }

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>-->

packages/ui/certd-client/src/views/crud/feature/expand/crud.jsx

@@ -26,7 +26,7 @@ export default function ({ expose }) {
       },
       table: {
         //默认展开第一行
-        defaultExpandedRowKeys:[1],
+        defaultExpandedRowKeys: [1],
         slots: {
           expandedRowRender: (scope) => {
             return (

packages/ui/certd-client/src/views/crud/feature/expand/index.vue

@@ -1,12 +1,10 @@
 <template>
   <fs-page>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
+    <template #header>
-      <template #pagination-left>
+      <div class="title">行展开</div>
-        <a-tooltip title="批量删除">
+      <div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/table.html#对应ui库的table组件的参数">文档</a></div>
-          <fs-button icon="DeleteOutlined" @click="handleBatchDelete"></fs-button>
+    </template>
-        </a-tooltip>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-      </template>
-    </fs-crud>
   </fs-page>
 </template>
 
@@ -38,27 +36,9 @@ export default defineComponent({
       expose.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,
+      crudRef
-      handleBatchDelete
     };
   }
 });

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 + "/info",
+    method: "get",
+    params: { id }
+  });
+}
+
+export function BatchDelete(ids: any[]) {
+  return request({
+    url: apiPrefix + "/batchDelete",
+    method: "post",
+    data: { ids }
+  });
+}

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 }
+        }
+      }
+    }
+  };
+}

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>

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;

packages/ui/certd-client/src/views/crud/feature/search/crud.jsx

@@ -1,6 +1,6 @@
 import * as api from "./api";
 import { dict } from "@fast-crud/fast-crud";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 export default function ({ expose }) {
   const pageRequest = async (query) => {
     return await api.GetList(query);
@@ -16,6 +16,9 @@ export default function ({ expose }) {
   const addRequest = async ({ form }) => {
     return await api.AddObj(form);
   };
+  let statusRef = dict({
+    url: "/mock/dicts/OpenStatusEnum?single"
+  });
   return {
     crudOptions: {
       request: {
@@ -24,15 +27,9 @@ export default function ({ expose }) {
         editRequest,
         delRequest
       },
-      table: {
-        // 表头过滤改变事件
-        onFilterChange(e) {
-          console.log("onFilterChange", e);
-        }
-      },
       search: {
         initialForm: {
-          radio: "0"
+          radio: null
         },
         buttons: {
           custom: {
@@ -51,6 +48,14 @@ export default function ({ expose }) {
           }
         }
       },
+      tabs: {
+        name: "radio",
+        show: true,
+        type: "card",
+        options: computed(() => {
+          return statusRef.data;
+        })
+      },
       columns: {
         id: {
           title: "ID",
@@ -67,23 +72,7 @@ export default function ({ expose }) {
           title: "状态",
           search: { show: true },
           type: "dict-radio",
-          dict: dict({
+          dict: statusRef
-            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"]
-          }
         }
       }
     }

packages/ui/certd-client/src/views/crud/feature/search/index.vue

@@ -46,10 +46,10 @@ export default defineComponent({
         message.info(`searchForm:${JSON.stringify(form)}`);
       },
       setSearchFormData() {
-        expose.setSearchFormData({ form: { radio: "1", test: 2 }, mergeForm: true });
+        expose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
       },
       clearSearchForm() {
-        expose.setSearchFormData({ form: {}, mergeForm: false });
+        expose.setSearchFormData({ form: { radio: null }, mergeForm: false });
       }
     };
   }

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 + "/info",
+    method: "get",
+    params: { id }
+  });
+}

packages/ui/certd-client/src/views/crud/feature/tabs/crud.tsx

@@ -0,0 +1,85 @@
+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: {
+        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类型
+        // defaultOptions: { //第一个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
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/tabs/index.vue

@@ -0,0 +1,60 @@
+<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 } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import { useExpose } from "@fast-crud/fast-crud";
+import { message } from "ant-design-vue";
+export default defineComponent({
+  name: "FeatureTabs",
+  setup() {
+    // crud组件的ref
+    const crudRef = ref();
+    // crud 配置的ref
+    const crudBinding = ref();
+    // 暴露的方法
+    const { expose } = useExpose({ crudRef, crudBinding });
+    // 你的crud配置
+    const { crudOptions } = createCrudOptions({ expose });
+    // 初始化crud配置
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+    const { resetCrudOptions } = useCrud({ expose, crudOptions });
+    // 你可以调用此方法，重新初始化crud配置
+    // resetCrudOptions(options)
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      expose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef,
+      getSearchFormData() {
+        const form = expose.getSearchFormData();
+        message.info(`searchForm:${JSON.stringify(form)}`);
+      },
+      setSearchFormData() {
+        expose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
+      },
+      clearSearchForm() {
+        expose.setSearchFormData({ form: { radio: null }, mergeForm: false });
+      }
+    };
+  }
+});
+</script>

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;

packages/ui/certd-client/src/views/crud/form/base/crud.jsx

@@ -1,4 +1,6 @@
 import * as api from "./api";
+import { message } from "ant-design-vue";
+import { utils } from "@fast-crud/fast-crud";
 export default function ({ crudExpose }) {
   const pageRequest = async (query) => {
     return await api.GetList(query);
@@ -27,6 +29,15 @@ export default function ({ crudExpose }) {
           buttons: {
             ok: {
               text: "保存"
+            },
+            custom: {
+              text: "自定义按钮",
+              click: async (context) => {
+                utils.logger.info("btn context", context);
+                message.info({ content: "通过自定义按钮，触发保存" });
+                await context.submit();
+                message.info({ content: "保存成功" });
+              }
             }
           }
         }

packages/ui/certd-client/src/views/crud/form/base/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.jsx";
 export default defineComponent({
   name: "FormBase",
   setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
+    const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue } as UseFsProps);
 
     // 页面打开后获取列表数据
     onMounted(async () => {

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, customExport } = useFs({ createCrudOptions, customValue } as UseFsProps);
 
     // 页面打开后获取列表数据
     onMounted(async () => {

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",

packages/ui/certd-client/src/views/sys/authority/permission/crud.tsx

@@ -1,9 +1,9 @@
-import * as api from "./api";
+import * as api from "./api.js";
-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 }) {
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
-  const pageRequest = async (query) => {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
-    const list = await api.GetTree(query);
+    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 }]);
     }
   });

packages/ui/certd-client/src/views/sys/authority/permission/index.vue

@@ -8,15 +8,7 @@
         <fs-icon :icon="$fsui.icons.add"></fs-icon>
         添加</a-button
       >
-      <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>
-        class="permission-tree"
-        :tree="crudBinding.data"
-        :checkable="false"
-        :actions="permission"
-        @add="addHandle"
-        @edit="editHandle"
-        @remove="removeHandle"
-      ></fs-permission-tree>
     </fs-crud>
   </fs-page>
 </template>
@@ -24,7 +16,7 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted } from "vue";
 import { useCrud, useExpose, CrudExpose, useUi } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
+import createCrudOptions from "./crud.js";
 import FsPermissionTree from "./fs-permission-tree.vue";
 import { usePermission } from "/src/plugin/permission";
 export default defineComponent({
@@ -36,21 +28,20 @@ export default defineComponent({
     // crud 配置的ref
     const crudBinding = ref();
     // 暴露的方法
-    const exposeRet: { expose: CrudExpose } = useExpose({ crudRef, crudBinding });
+    const { crudExpose } = useExpose({ crudRef, crudBinding });
-    const expose: CrudExpose = exposeRet.expose;
     // 你的crud配置
-    const { crudOptions } = createCrudOptions({ expose });
+    const { crudOptions } = createCrudOptions({ crudExpose });
     // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
     // 初始化crud配置
     // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
     // 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
-    const { resetCrudOptions } = useCrud({ expose, crudOptions, permission: "sys:auth:per" });
+    const { resetCrudOptions } = useCrud({ crudExpose, crudOptions, permission: "sys:auth:per" });
     // 你可以调用此方法，重新初始化crud配置
     // resetCrudOptions(options)
 
     // 页面打开后获取列表数据
     onMounted(async () => {
-      await expose.doRefresh();
+      await crudExpose.doRefresh();
     });
 
     //用户业务代码

packages/ui/certd-client/tsconfig.json

@@ -19,7 +19,8 @@
     "types": [
       "mocha",
       "chai",
-      "node"
+      "node",
+      "unplugin-vue-define-options/macros-global"
     ],
     "paths": {
       "/@/*": ["src/*"],

packages/ui/certd-client/vite.config.ts

@@ -4,6 +4,7 @@ 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";
@@ -37,6 +38,7 @@ export default ({ command, mode }) => {
   return {
     base: "/antdv/",
     plugins: [
+      DefineOptions(),
       vueJsx(),
       vue(),
       // 压缩build后的代码