{"id":23864566,"url":"https://github.com/zlinni/zod-admin","last_synced_at":"2026-02-07T17:05:22.459Z","repository":{"id":260393130,"uuid":"881161948","full_name":"Zlinni/zod-admin","owner":"Zlinni","description":"基于Zod封装实现的快速后台管理系统","archived":false,"fork":false,"pushed_at":"2024-11-11T02:46:14.000Z","size":3050,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-08T12:49:06.014Z","etag":null,"topics":["cms-backend","naive-ui","typescript","vue3","zod"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/p/github/Zlinni/zod-admin/master?import=true","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Zlinni.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-31T02:27:30.000Z","updated_at":"2025-07-09T07:51:44.000Z","dependencies_parsed_at":"2024-10-31T04:18:12.546Z","dependency_job_id":"65355340-8b76-4988-b3f1-a10a9a8da1e6","html_url":"https://github.com/Zlinni/zod-admin","commit_stats":null,"previous_names":["zlinni/zod-admin"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Zlinni/zod-admin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zlinni%2Fzod-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zlinni%2Fzod-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zlinni%2Fzod-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zlinni%2Fzod-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zlinni","download_url":"https://codeload.github.com/Zlinni/zod-admin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zlinni%2Fzod-admin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29200843,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T16:28:23.579Z","status":"ssl_error","status_checked_at":"2026-02-07T16:28:22.566Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms-backend","naive-ui","typescript","vue3","zod"],"created_at":"2025-01-03T08:26:40.143Z","updated_at":"2026-02-07T17:05:22.440Z","avatar_url":"https://github.com/Zlinni.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e Zod Admin \u003c/h1\u003e\n\u003cp align=\"center\"\u003e一个基于 Zod 封装实现的快速后台管理系统\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"static/BwEFbOxJBo1TlNxc0vWcRxE1nWf.png\" alt=\"curve-logo\" /\u003e\n\u003c/p\u003e\n\n---\n\n# 核心\n\n- 核心实现流程，仅需定义两个 api 文件，一个 column 文件，一个 table 文件即可实现一个 CRUD 表格\n  ![](static/Jk8XbiqPXoykU6xN6o6c1DH7ngc.png)\n\n![](static/QcxKbgHePoOOYox4g9dc0ORZnbg.png)\n\n- zod admin 分为 `core` 和 `views` 以及配置文件三部分，其中 `src\\core` 是 zod admin 的核心部分，它实现了如下的功能：\n  - 涵盖了整体项目的框架\n  - 实现了项目的账号密码登录，登录重定向，错误页面重定向，路由守卫\n  - 实现了项目的用户信息模块\n  - 实现了文件路由系统，菜单路由系统\n  - 实现了依据 zod 的表单，表格，弹窗生成\n  - 实现了主题色切换\n  - 实现了实时环境切换，系统配置\n  - 实现了基于 Apex Charts 的图表\n\n## 主题\n\n## 支持主题切换\n\n- Light：\n  ![](static/Ks0HbndbuoAcXhxH35EcF7Gtnsb.jpg)\n- Dark：\n  ![](static/EMaCbxzYfovn1tx9ItBc91yBnYc.jpg)\n\n## 自动识别路由\n\nzod admin 增加了自动识别路由功能，在 `src\\views\\Module\\Admin\\pages` 下，创建文件夹视为文件目录，在文件目录中创建文件视为视图路由；\n\n```sql\n- pages\n    - Announcement\n        - AnnounceMsg.vue\n    - User\n        - UserMsg.vue\n```\n\n注意\n\n- 文件识别仅支持.vue 文件\n- 仅支持一级目录\n\n### 为自动路由添加名称、icon\n\n自动路由目前是根据路由的名称来创建视图上的名称，但也提供了额外的选项支持用户自定义路由名称；\n\n在 `zod-admin.config.ts` 中可以配置\n\n参考：\n\n```sql\nrouters: {\n    User: {\n      title: '用户管理',\n      icon: 'tabler:user',\n    },\n    UserMsg: {\n      title: '用户信息',\n    },\n    Announcement: {\n      title: '公告管理',\n      icon: 'tabler:article-filled-filled',\n    },\n    AnnounceMsg: {\n      title: '公告信息',\n    },\n  },\n```\n\n注意\n\n- key 值必须和原始路由名称相同\n- icon 参考：[https://icones.js.org/collection/tabler](https://icones.js.org/collection/tabler)\n\n## 配置环境\n\n![](static/S77Gb6EW9oQ8H8xxeUVcwN1rnBg.png)\n\nzod admin 支持环境配置，可以配置\n\n- git 仓库地址\n- 环境存储的 key(用于防止在本地启动同个继承自 zod admin 环境冲突)\n- 环境配置\n\n在 `zod-admin.config.ts` 中可以配置\n\n参考：\n\n```sql\nenv: {\n    git: '',\n    storageKey: 'Your Keys Here',\n    option: [\n      {\n        i18n: {\n          cn: '开发环境',\n          en: 'DEV',\n        },\n        key: import.meta.env.VITE_APP_ADMIN_DEV,\n      },\n      {\n        i18n: {\n          cn: '海外开发环境',\n          en: 'DEV_OVERSEA',\n        },\n        key: import.meta.env.VITE_APP_ADMIN_DEV_OVERSEA,\n      },\n      {\n        i18n: {\n          cn: '测试环境',\n          en: 'TEST',\n        },\n        key: import.meta.env.VITE_APP_ADMIN_TEST,\n      },\n      {\n        i18n: {\n          cn: '海外测试环境',\n          en: 'TEST_OVERSEA',\n        },\n        key: import.meta.env.VITE_APP_ADMIN_TEST_OVERSEA,\n      },\n      {\n        i18n: {\n          cn: '生产环境',\n          en: 'PROD',\n        },\n        key: import.meta.env.VITE_APP_ADMIN_PROD,\n      },\n      {\n        i18n: {\n          cn: '海外生产环境',\n          en: 'PROD_OVERSEA',\n        },\n        key: import.meta.env.VITE_APP_ADMIN_PROD_OVERSEA,\n      },\n      {\n        i18n: {\n          cn: '本地Mock环境',\n          en: 'Mock',\n        },\n        key: import.meta.env.VITE_APP_ADMIN_MOCK,\n      },\n    ],\n  },\n```\n\n- 当 key 在环境变量中不存在时会自动过滤\n\n### 本地环境配置\n\nzod admin 同时支持无代码的本地项目环境配置，用户点击系统设置后可以进行本地环境 URL 的替换，用于后端快速调试且不修改前端代码\n\n![](static/KtwmbWiiCo6p8CxXi54cgZMAndd.png)\n\n![](static/QiYobIjamo6uGwx2BercF3rKnhf.png)\n\n## 配置登录模块\n\nzod admin 支持登录模块配置，目前仅支持账号密码登录；\n\n在 `zod-admin.config.ts` 中可以配置\n\n参考：\n\n```typescript\nlogin: {\n    default: {\n      url: 'http://47.113.106.234:8001/api/admin/admin_user/login',\n      method: 'GET',\n      schema: z.object({\n        email: z.string().min(1),\n        password: z.string().min(1),\n      }),\n      tokenKey: 'token',\n    },\n  },\n```\n\n![](static/UyFNbZgwTotmGmxnVsGc9hFgnXb.jpg)\n\n## 配置请求\n\nzod admin 支持配置请求相关，可以配置 token 前缀，mock token\n\n在 `zod-admin.config.ts` 中可以配置\n\n参考：\n\n```typescript\nrequest: {\n    token: {\n      prefix: 'Bearer ',\n      mock: '',\n    },\n  },\n```\n\n## 配置用户登录模块\n\nzod admin 支持配置用户登录信息，可以配置用户名称，用户邮箱，用户头像\n\n在 `zod-admin.config.ts` 中可以配置\n\n参考：\n\n```sql\nuser: {\n    default: {\n      url: '/mock/admin/user/info',\n      method: 'GET',\n      apiKeyAdapter: {\n        nickName: 'nick_name',\n        email: 'email',\n      },\n    },\n  },\n```\n\n- 当不存在用户头像的时候，用户头像会以用户的第一个字符自动生成\n\n## 网站信息\n\nzod admin 支持配置网站相关主题信息\n\n在 `zod-admin.config.ts` 中可以配置\n\n参考：\n\n```typescript\nsite: {\n    title: 'lmc cms',\n    logoName: 'LMC CMS',\n    theme: {\n      primaryColor: 'rgba(35, 92, 222, 1)',\n    },\n  },\n```\n\n## 系统配置\n\nzod admin 支持进行一些无代码的系统配置，目前可以配置的行为有\n\n- 本地环境 URL\n- 点击 Table 的默认行为\n\n![](static/HMGzb8iWRoZYgCxiu3tcpnIgnRc.png)\n\n## Schema 组件\n\n- 见：/examples/schema/schemas\n\n1. 数据来源于外部的组件\n\n![](static/B0qGbTR7FoiBunxGEMHci2KAn9c.jpg)\n\n1. 常规组件\n\n![](static/TblbbrPlNoTI3exM0x6cmY3znfd.jpg)\n\n1. 组件配置\n\n![](static/ZgJObfSQRosYqKxe7S6cFqdcnnf.jpg)\n\n1. 枚举组件\n\n![](static/F9HLbcbTeoQ0tmxdPm3c7SHXnuc.jpg)\n\n1. 对象嵌套组件\n\n![](static/NwTRb65r0orK9LxA6bacFLo1n4e.jpg)\n\n1. 数组对象嵌套组件\n\n![](static/Vdn5bFuDSo3lwzxbHfdcc189nUb.jpg)\n\n1. 文件上传组件\n\n![](static/WE09bcqEloRMwbxwAOIcfkGxnTc.jpg)\n\n## Dialog\n\n- 见：/examples/dialog/autoformdialog\n\n1. AutoFormDialog\n\n![](static/ZlFxb6gYZoAK9nxQfgGcXFT9nnb.jpg)\n\n1. MultipleDialog\n\n![](static/X9sKbiTDcoCcGhx1lZRcVKFAnVb.jpg)\n\n## Config\n\n- 见：/examples/config/config\n\n1. Config\n\n![](static/NnB1bNVkMobtiVxqm4Nco59Nnxf.jpg)\n\n## Table\n\n- 见：/examples/table/crudtable\n\n1. CRUDTable\n\n![](static/AuvnbnNdTo1qmrxdRq7cGLHGnIg.jpg)\n\n## Examples\n\n- 所有的样例数据均已完成 mock\n- 所有的样例不会出现在非开发环境\n\n完整示例参考：\n\n`src\\core\\examples`\n\n- Api 参考\n\n  - `src\\core\\examples\\views\\Table\\api` 为 api 相关定义\n  - `application.api.ts`\n    - 集成了 axios 相关 httpClient，在此处定义接口 api\n  - ~~applicationTableQuery.ts~~~~（已废弃，合并更新到 useRushTableV2 中）~~\n    - ~~集成了 tanstackquery 相关 query 库，在此处定义自动请求 api(对于表格为查询用 api)~~\n  - `application.zod.ts`\n    - 集成了 zod 相关，在此处定义 api 相关 zod schema\n  - ~~application.type.ts~~\n    - 集成了 ts 相关，在此处定义 api 相关类型\n\n- columns 参考\n\n  - `src\\core\\examples\\views\\Table\\columns`\n    - 表格字段相关定义\n    - 特殊操作（编辑，删除，查看）相关定义\n\n- CRUDTable.vue 参考\n\n  - `src\\core\\examples\\views\\Table\\CRUDTable.vue`\n    - 查询，重置，新增相关定义\n    - 表格数据，表格分页相关定义\n\n# Apis\n\n## useRushTableV2\n\n- 说明:获取表单的查询函数，重置函数，表单绑定值，分页 Props，AutoFormProps\n- 类型定义：\n\n```typescript\ninterface Transform\u003cT extends GenericObject, K extends unknown\u003e {\n  transform: (v: T) =\u003e K\n}\ninterface UseRushTable\u003c\n  T extends GenericObject,\n  K extends GenericObject,\n  U extends Record\u003ckeyof T, z.ZodTypeAny\u003e,\n\u003e {\n  /**\n   * schema\n   */\n  schema: z.ZodObject\u003cU\u003e\n  /**\n   * api\n   * @param args\n   * @returns\n   */\n  api: (...args: T[]) =\u003e Promise\u003cK\u003e\n  /**\n   * api适配器\n   */\n  apiKeyAdapter: {\n    params: {\n      page: keyof T\n      size: keyof T\n    }\n    data: {\n      total: keyof K\n    }\n  }\n  /**\n   * form field配置\n   */\n  fieldConfig?: (\n    values: UnwrapZod\u003cT\u003e\n  ) =\u003e Partial\u003cRecord\u003ckeyof T, FieldConfigItem\u003e\u003e\n}\ntype UseRushTableWithTransform\u003c\n  T extends GenericObject,\n  K extends GenericObject,\n  U extends Record\u003ckeyof T, z.ZodTypeAny\u003e,\n  E extends unknown,\n\u003e = UseRushTable\u003cT, K, U\u003e \u0026 Transform\u003cK, E\u003e\n\ntype UseRushTableWithPartialTransform\u003c\n  T extends GenericObject,\n  K extends GenericObject,\n  U extends Record\u003ckeyof T, z.ZodTypeAny\u003e,\n  E extends unknown,\n\u003e = UseRushTable\u003cT, K, U\u003e \u0026 Partial\u003cTransform\u003cK, E\u003e\u003e\n\ntype RushTableReturnType\u003c\n  T extends GenericObject,\n  U extends Record\u003ckeyof T, z.ZodTypeAny\u003e,\n\u003e = {\n  /**\n   * 搜索函数\n   * @param e\n   * @returns\n   */\n  onSearch: (e?: Event | undefined) =\u003e Promise\u003cvoid | undefined\u003e\n  /**\n   * 重置函数\n   * @param state\n   * @param opts\n   * @returns\n   */\n  onReset: (\n    state?: Partial\u003cFormState\u003cGenericObject\u003e\u003e | undefined,\n    opts?: Partial\u003cResetFormOpts\u003e | undefined\n  ) =\u003e void\n  /**\n   * 分页Props\n   */\n  paginationProps: globalThis.ComputedRef\u003cPaginationProps\u003e\n  /**\n   * schema values\n   */\n  values: UnwrapZod\u003cT\u003e\n  /**\n   * AutoForm props\n   */\n  formProps: MaybeRefOrGetter\u003c{\n    schema: z.ZodObject\u003cU\u003e\n    fieldConfig?: Partial\u003cRecord\u003ckeyof T, FieldConfigItem\u003e\u003e\n  }\u003e\n}\n```\n\n## useRushTable（已废弃，合并到 useRushTableV2）\n\n- 说明：获取表单的查询函数，重置函数，表单绑定值\n- 类型定义：\n\n```typescript\nexport const useRushTable = \u003cT extends GenericObject\u003e(option: {\n  schema: z.ZodObject\u003cRecord\u003ckeyof T, z.ZodTypeAny\u003e\u003e\n}) =\u003e {\n  //\n  return {\n    onSearch,\n    onReset,\n    values: values as T,\n  }\n}\n```\n\n### createFormSearchQueryOption\n\n- 说明：获取自动查询接口所需配置项\n- 类型定义：\n\n```typescript\nexport const createFormSearchQueryOption = () =\u003e {\n  //\n  return {\n    placeholderData: keepPreviousData,\n    enabled: () =\u003e\n      !isFormDirty.value || (isFormValid.value \u0026\u0026 isSubmitting.value),\n  }\n}\n```\n\n## useRushTablePagination(已废弃，合并到 useRushTableV2)\n\n- 说明：获取分页参数\n- 类型定义：\n\n```typescript\nexport const useRushTablePagination = \u003cT extends GenericObject\u003e(option: {\n  /**\n   * schema中定义的page的键名称\n   */\n  page?: keyof T\n  /**\n   * schema中定义的pageSize的键名称\n   */\n  pageSize?: keyof T\n  /**\n   * 接口返回的分页总数\n   */\n  total: MaybeRefOrGetter\u003cnumber\u003e\n  /**\n   * 自动请求所需的refetch函数\n   * @returns\n   */\n  onRefetch: () =\u003e void\n}) =\u003e {\n  //\n  return {\n    /**\n     * 分页所需props\n     */\n    paginationProps,\n  }\n}\n```\n\n## useRushColumns\n\n- 说明：获取表格 columns\n- 类型定义：\n\n  - fieldConfig\n    - render，可以通过 Helper 自定义\n\n```typescript\ntype UnwrapZod\u003cT extends Record\u003cstring, z.ZodTypeAny\u003e\u003e = z.infer\u003cz.ZodObject\u003cT\u003e\u003e\nexport const useRushColumns = \u003cT extends Record\u003cstring, z.ZodTypeAny\u003e\u003e({\n  /**\n   * schema\n   */\n  schema,\n  /**\n   * autoform的fieldConfig\n   */\n  fieldConfig,\n  /**\n   * 自定义操作栏\n   */\n  suffix,\n}: {\n  schema: z.ZodObject\u003cT\u003e\n  fieldConfig?: Partial\u003c\n    Record\u003c\n      keyof T,\n      {\n        render?: Helper\u003cUnwrapZod\u003cT\u003e\u003e\n        colName?: string\n        ignore?: boolean\n      }\n    \u003e\n  \u003e\n  suffix?: Helper\u003cUnwrapZod\u003cT\u003e\u003e\n}) =\u003e {\n  return columns as ColumnDef\u003cUnwrapZod\u003cT\u003e, any\u003e[]\n}\n```\n\n### Helpers\n\n- 说明：Column 的一系列渲染函数\n- 类型定义：\n\n```typescript\nexport type Helper\u003cT extends any\u003e = (\n  props: CellContext\u003cT, any | undefined\u003e\n) =\u003e any\n```\n\n#### EllipsisHelper\n\n- 说明：带省略号的渲染函数\n- 类型定义：\n\n```typescript\nexport const EllipsisHelper = \u003cT extends any\u003e(\n  props: CellContext\u003cT, any | undefined\u003e\n) =\u003e \u003cNEllipsis\u003e{props.getValue()}\u003c/NEllipsis\u003e\n```\n\n#### DateHelper\n\n- 说明：格式化日期的渲染函数\n- 类型定义：\n\n```typescript\nexport const DateHelper = \u003cT extends any\u003e(\n  props: CellContext\u003cT, Date | undefined\u003e\n) =\u003e dayjs(props.getValue()).format('YYYY-MM-DD HH:mm:ss')\n```\n\n#### AvatarHelper\n\n- 说明：用户头像的渲染函数\n- 类型定义：\n\n```typescript\nexport const AvatarHelper = ({\n  avatar,\n  name,\n  description,\n}: {\n  /**\n   * 用户头像url\n   */\n  avatar?: string\n  /**\n   * 用户名称\n   */\n  name?: string\n  /**\n   * 用户描述\n   */\n  description?: string\n}) =\u003e (\n  \u003cNFlex align=\"center\" wrap={false}\u003e\n    \u003cNAvatar src={avatar} round class={'size-9 min-w-9'} /\u003e\n    \u003cNFlex vertical class={'min-w-0'}\u003e\n      {name \u0026\u0026 \u003cNEllipsis\u003e{name}\u003c/NEllipsis\u003e}\n      {description \u0026\u0026 \u003cNEllipsis\u003e{description}\u003c/NEllipsis\u003e}\n    \u003c/NFlex\u003e\n  \u003c/NFlex\u003e\n)\n```\n\n#### createOptionHelper\n\n- 说明：根据 object 创建 optionHelper\n- 类型定义：\n\n```typescript\nexport const createOptionHelper =\n  (options: Record\u003cstring, VNode | string\u003e) =\u003e\n  \u003cT extends any\u003e(props: CellContext\u003cT, any | undefined\u003e) =\u003e (\n    \u003cNEllipsis\u003e\n      {{\n        default: () =\u003e options[props.getValue() + ''],\n      }}\n    \u003c/NEllipsis\u003e\n  )\n```\n\n#### BooleanHelper\n\n- 说明：布尔值渲染函数\n- 类型定义：\n\n```typescript\nexport const BooleanHelper = createOptionHelper({\n  true: \u003cIconTool icon={'tabler:check'} /\u003e,\n  false: \u003cIconTool icon={'tabler:x'} /\u003e,\n})\n```\n\n## useAutoFormDialog\n\n- 说明：获取表格 dialog 函数\n- 类型定义：\n\n```typescript\nexport type UnwrapZod\u003cT extends Record\u003cstring, z.ZodTypeAny\u003e\u003e = z.infer\u003c\n  z.ZodObject\u003cT\u003e\n\u003e\n\ninterface AutoFormDialogOption\u003cT extends Record\u003cstring, z.ZodTypeAny\u003e\u003e {\n  /**\n   * 接口返回data\n   */\n  data?: MaybeRefOrGetter\u003cUnwrapZod\u003cT\u003e\u003e\n  /**\n   * 标题\n   */\n  title: string\n  /**\n   * 提交按钮文本\n   */\n  submitText?: MaybeRefOrGetter\u003cstring\u003e\n  /**\n   * 提交回调函数\n   * @param option 返回原始值和提交函数\n   * @returns\n   */\n  onSubmit?: (option: {\n    originValues: UnwrapZod\u003cT\u003e\n    form: FormContext\u003c\n      {\n        [k in keyof z.objectUtil.addQuestionMarks\u003c\n          z.baseObjectOutputType\u003cT\u003e,\n          any\n        \u003e]: z.objectUtil.addQuestionMarks\u003cz.baseObjectOutputType\u003cT\u003e, any\u003e[k]\n      },\n      {\n        [k in keyof z.objectUtil.addQuestionMarks\u003c\n          z.baseObjectOutputType\u003cT\u003e,\n          any\n        \u003e]: z.objectUtil.addQuestionMarks\u003cz.baseObjectOutputType\u003cT\u003e, any\u003e[k]\n      }\n    \u003e\n    /**\n     * 返回带表单值的回调函数\n     */\n    handleSubmit: HandleSubmit\u003cUnwrapZod\u003cT\u003e\u003e\n    /**\n     * 结束回调函数\n     */\n    onFinish: () =\u003e void\n  }) =\u003e Promise\u003cvoid\u003e\n  fieldConfig?: (\n    values: UnwrapZod\u003cT\u003e\n  ) =\u003e Partial\u003cRecord\u003ckeyof T, FieldConfigItem\u003e\u003e\n  schema: z.ZodObject\u003cT\u003e\n  autoOpen?: boolean\n}\ntype HandleSubmit\u003cT extends GenericObject\u003e = (\n  cb: SubmissionHandler\u003cT, T, any\u003e\n) =\u003e Promise\u003cany\u003e\nexport const useAutoFormDialog = () =\u003e {\n  const openAutoFormDialog = \u003cT extends Record\u003cstring, z.ZodTypeAny\u003e\u003e(\n    dialogOption: AutoFormDialogOption\u003cT\u003e\n  ) =\u003e {\n //\n    return {\n      component: \u003cAutoFormModal /\u003e,\n    }\n  }\n  return {\n    openAutoFormDialog,\n  }\n}\n```\n\n### openAutoFormDialog\n\n- 说明：继承自 `useAutoFormDialog`，打开表格 dialog，并返回 component\n- 类型定义：\n\n```typescript\nexport const useAutoFormDialog = () =\u003e {\n  const openAutoFormDialog = \u003cT extends Record\u003cstring, z.ZodTypeAny\u003e\u003e(\n    dialogOption: AutoFormDialogOption\u003cT\u003e\n  ) =\u003e {\n //\n    return {\n      component: \u003cAutoFormModal /\u003e,\n    }\n  }\n  return {\n    openAutoFormDialog,\n  }\n}\n```\n\n# Components\n\n## MicroContainer\n\n- 说明：内容卡片组件\n- 类型定义：\n\n  - 卡片标题\n  - 插槽：右侧栏\n\n```typescript\nconst props = withDefaults(\n  defineProps\u003c{\n    title?: string\n  }\u003e(),\n  {}\n)\n\ndefineSlots\u003c{\n  suffix(): any\n  default(): any\n}\u003e()\n```\n\n## TableContainer\n\n- 说明：表格容器组件\n- 类型定义：无\n\n## AutoForm\n\n- 说明：表单组件\n- 类型定义：\n\n```typescript\nexport type FieldConfigItem = {\n  /**\n   * 是否忽略显示\n   */\n  ignore?: boolean\n  inputProps?: any \u0026 {\n    /**\n     * 是否展示label\n     */\n    showLabel?: boolean\n    /**\n     * placeholder\n     */\n    placeholder?: string\n    /**\n     * 是否disabled\n     */\n    disabled?: boolean\n  }\n  /**\n   * 字段渲染的组件类型\n   */\n  fieldType?: keyof typeof INPUT_COMPONENTS\n}\n\nexport type FieldConfig\u003cSchemaType extends z.infer\u003cz.ZodObject\u003cany, any\u003e\u003e\u003e = {\n  [Key in keyof SchemaType]?: SchemaType[Key] extends object ?\n    FieldConfig\u003cz.infer\u003cSchemaType[Key]\u003e\u003e\n  : FieldConfigItem\n}\n\nexport type AutoFormInputComponentProps = {\n  fieldConfigItem?: FieldConfigItem\n  fieldProps: any\n  zodItem: z.ZodAny\n  className?: string\n}\nconst AutoForm = defineComponent({\n  emits: {\n    submit: () =\u003e true,\n  },\n    ／／\n  props: {\n    schema: {\n      type: Object as PropType\u003cZodObjectOrWrapped\u003e,\n    },\n    fieldConfig: {\n      type: Object as PropType\u003c\n        MaybeRefOrGetter\u003cFieldConfig\u003cz.infer\u003cZodObjectOrWrapped\u003e\u003e\u003e\n      \u003e,\n    },\n    // 表单class\n    formClass: {\n      type: String,\n    },\n  },\n})\n```\n\n## RushTable\n\n- 说明：表格组件\n- 类型定义：\n\n  - 表格所需要的接口值\n  - 表格 columns\n  - 表格分页所需参数\n\n```typescript\nconst props = defineProps\u003c{\n  value: T[]\n  columns: ColumnDef\u003cT, any\u003e[]\n  paginationProps: PaginationProps\n}\u003e()\n```\n\n## Operations\n\n- 说明：表格编辑，详情，删除，更多相关组件\n- 类型定义：\n\n  - buttons 种类（编辑，详情，删除, 下载，重试）\n  - 点击对应 button 触发的函数\n\n```typescript\nexport enum OperationKeys {\n  detail = 'detail',\n  update = 'update',\n  delete = 'delete',\n  download = 'download',\n  retry = 'retry',\n}\n//\n  emits: {\n    select: (key: OperationKeys) =\u003e true,\n  },\n  props: {\n    buttons: {\n      type: Array as PropType\u003cArray\u003ckeyof typeof OperationKeys\u003e\u003e,\n      required: false,\n      default: () =\u003e [\n        OperationKeys.detail,\n        OperationKeys.update,\n        OperationKeys.delete,\n      ],\n    },\n  },\n```\n\n# 核心函数\n\n- 本部分和使用无关\n- 本部分记录了 zod 定义如何转义类型组件的实现\n\n## AutoFormObject\n\n## autoFormFields\n\n# legacy\n\n这部分内容可以不看，是历史遗留产物\n\n## auto-form-naiveui\n\n#### zod 定义对应组件\n\nzod admin 有如下几种 auto 组件；\n\n```sql\nexport const INPUT_COMPONENTS = {\n  checkbox: AutoFormCheckbox,\n  date: AutoFormDate,\n  select: AutoFormEnum,\n  radio: AutoFormRadioGroup,\n  switch: AutoFormSwitch,\n  textarea: AutoFormTextarea,\n  number: AutoFormNumber,\n  fallback: AutoFormInput,\n}\n```\n\n其中，当 zod 定义为如下条件的时候，会生成对应的组件；\n\n##### 数字选择器组件\n\nnumber 类型，且可选；默认对应数字选择器组件\n\n```sql\nnumber: z.coerce.number().optional().describe('数字输入')\n```\n\n![](static/HsAsb8G5Mors03xKreWco7VunKh.png)\n\n##### 文本输入组件\n\nstring 类型，且可选；默认对应文本输入组件，可以被修改为文本区(textarea)输入组件\n\n```sql\nfallback: z.string().optional().describe('文本输入')\n\n//修改为文本区(textarea)输入组件\n\u003cAutoForm\n  inline\n  label-placement={'left'}\n  schema={schema}\n  fieldConfig={{\n    fallback: {\n      fieldType: 'textarea',\n    }\n  }}\u003e\n\u003c/AutoForm\u003e\n```\n\n![](static/NmJzbA8XWoT6C7xmZNicXPYkneQ.png)\n\n![](static/RqTNbJrQ4oYr3uxAIV2cFzn2nYg.png)\n\n##### 复选框组件，开关组件\n\nboolean 类型，且可选；默认对应复选框组件，可以被修改为开关组件\n\n```sql\ncheckbox: z.boolean().optional().describe('复选框')\n\n//修改为开关组件\n\u003cAutoForm\n  inline\n  label-placement={'left'}\n  schema={schema}\n  fieldConfig={{\n    checkbox: {\n      fieldType: 'switch',\n    }\n  }}\u003e\n\u003c/AutoForm\u003e\n```\n\n![](static/OxbebHJrWozdyxxhBN2cRLU1n1T.png)\n\n##### 日期选择器组件\n\ndate 类型，且可选；默认对应日期选择器\n\n```sql\ndate: z.coerce.date().optional().describe('日期选择器')\n```\n\n![](static/DeeubapA0oOWdBxUKB7cxDTnnng.png)\n\n##### 选择器组件\n\nenum 类型\n\n```sql\nconst options = ['option1', 'option2', 'option3'] as const\nselect: z.enum(options).optional().describe('选择器')\n```\n\n![](static/S9Utb8xVrokkgmxhWCZcQ3pPnnd.png)\n\n##### 单选组件\n\n由于 enum 类型常用于选择器组件使用，但是特殊情况下，也需要将其作为单选组件使用；\n\n```sql\nradio: z.enum(options).optional().describe('单选'),\n\n//修改为单选组件\n\u003cAutoForm\n  inline\n  label-placement={'left'}\n  schema={schema}\n  fieldConfig={{\n    radio: {\n      fieldType: 'radio',\n    }\n  }}\u003e\n\u003c/AutoForm\u003e\n```\n\n![](static/JdsibeUYioW6j0xEm6EcTnnXnUh.png)\n\n##### 嵌套组件\n\n有时候需要传递一些嵌套字段，auto-form 同时也支持解析生成\n\n```sql\naddress: z.object({\n    street: z.string(),\n    city: z.string(),\n    zip: z.string(),\n  }),\n```\n\n![](static/Orimbrsa8o43v3xX3EZcCg5InQg.png)\n\n##### nativeEnum\n\nauto-form 在默认情况下，选择器的键值对是 enum 定义时候的键值\n\n```sql\nconst options = ['option1', 'option2', 'option3'] as const\nselect: z.enum(options).optional().describe('选择器')\n```\n\n![](static/C5OHbv6JOo0LFqxO2Kjc5O1Snac.png)\n\n但有时候需要中文的 key，那么就可以使用 nativeEnum 进行定义\n\n```sql\nenum Options {\n  选项1 = 'option1',\n  选项2 = 'option2',\n  选项3 = 'option3',\n}\nselect: z.nativeEnum(Options).optional().describe('选择器'),\n```\n\n![](static/Czb9b9OfzoD3zrxOsZecFgzqn2K.png)\n\n## 类型和接口定义\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzlinni%2Fzod-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzlinni%2Fzod-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzlinni%2Fzod-admin/lists"}