From 29193e47e2181bacc76bcd4516d1c049ea1a717e Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Sat, 27 Jun 2026 17:31:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20FaForm=20=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E7=BB=84=E4=BB=B6=E5=8F=8A=E7=A4=BA=E4=BE=8B=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E6=9B=B4=E6=96=B0=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../skills/fa-crud-page-generator/SKILL.md    | 147 +++--
 .../references/templates.md                   | 618 +++++++++++++-----
 .agents/skills/fa-form-builder/SKILL.md       |  17 +-
 .../fa-form-builder/references/templates.md   | 228 +++----
 .../AppAccountForm/edit-password.vue          | 111 ++--
 .../src/components/AppAccountForm/login.vue   | 118 ++--
 .../components/AppAccountForm/register.vue    | 117 ++--
 .../AppAccountForm/reset-password.vue         | 110 ++--
 .../AppAccountForm/edit-password.vue          | 111 ++--
 .../src/components/AppAccountForm/login.vue   | 118 ++--
 .../components/AppAccountForm/register.vue    | 117 ++--
 .../AppAccountForm/reset-password.vue         | 110 ++--
 .../AppAccountForm/edit-password.vue          | 111 ++--
 .../src/components/AppAccountForm/login.vue   | 118 ++--
 .../components/AppAccountForm/register.vue    | 117 ++--
 .../AppAccountForm/reset-password.vue         | 110 ++--
 .../AppAccountForm/edit-password.vue          | 111 ++--
 .../src/components/AppAccountForm/login.vue   | 118 ++--
 .../components/AppAccountForm/register.vue    | 117 ++--
 .../AppAccountForm/reset-password.vue         | 110 ++--
 .../AppAccountForm/edit-password.vue          | 111 ++--
 .../src/components/AppAccountForm/login.vue   | 118 ++--
 .../components/AppAccountForm/register.vue    | 117 ++--
 .../AppAccountForm/reset-password.vue         | 110 ++--
 .../AppAccountForm/edit-password.vue          | 111 ++--
 .../src/components/AppAccountForm/login.vue   | 118 ++--
 .../components/AppAccountForm/register.vue    | 117 ++--
 .../AppAccountForm/reset-password.vue         | 110 ++--
 .../AppAccountForm/edit-password.vue          | 111 ++--
 .../src/components/AppAccountForm/login.vue   | 118 ++--
 .../components/AppAccountForm/register.vue    | 117 ++--
 .../AppAccountForm/reset-password.vue         | 110 ++--
 .../AppAccountForm/edit-password.vue          | 111 ++--
 .../src/components/AppAccountForm/login.vue   | 118 ++--
 .../components/AppAccountForm/register.vue    | 117 ++--
 .../AppAccountForm/reset-password.vue         | 110 ++--
 .../src/router/modules/component.example.ts   |   8 +
 apps/example/src/types/components.d.ts        |   4 +
 .../src/views/component_example/form.vue      |  17 +
 packages/components/package.json              |   1 +
 packages/components/resolver.ts               |   2 +
 .../src/basic/checkbox/CheckboxGroup.vue      |   3 +-
 .../components/src/basic/form/FormItem.vue    | 312 +++++++++
 packages/components/src/basic/form/README.md  |  68 ++
 .../src/basic/form/_examples/_async.vue       |  74 +++
 .../src/basic/form/_examples/_basic.vue       |  68 ++
 .../src/basic/form/_examples/_composite.vue   |  90 +++
 .../src/basic/form/_examples/_disabled.vue    |  64 ++
 .../src/basic/form/_examples/_dynamic.vue     | 113 ++++
 .../src/basic/form/_examples/_layout.vue      |  60 ++
 .../src/basic/form/_examples/_methods.vue     |  84 +++
 .../src/basic/form/_examples/_slot.vue        |  66 ++
 .../src/basic/form/_examples/index.ts         |  59 ++
 packages/components/src/basic/form/context.ts |  13 +
 .../src/basic/form/form/FormControl.vue       |  17 +
 .../src/basic/form/form/FormDescription.vue   |  21 +
 .../src/basic/form/form/FormItem.vue          |  23 +
 .../src/basic/form/form/FormLabel.vue         |  25 +
 .../src/basic/form/form/FormMessage.vue       |  33 +
 .../components/src/basic/form/form/index.ts   |   7 +
 .../src/basic/form/form/injectionKeys.ts      |   3 +
 .../src/basic/form/form/useFormField.ts       |  31 +
 packages/components/src/basic/form/index.ts   |   5 +
 packages/components/src/basic/form/index.vue  | 319 +++++++++
 .../src/basic/radio-group/index.vue           |   3 +-
 packages/components/src/examples.ts           |   1 +
 packages/components/src/index.ts              |   2 +
 pnpm-lock.yaml                                |   3 +
 skills/fa-crud-page-generator/SKILL.md        |  13 +-
 .../references/templates.md                   | 151 +++--
 skills/fa-form-builder/SKILL.md               |  17 +-
 .../fa-form-builder/references/templates.md   | 228 +++----
 72 files changed, 4021 insertions(+), 2645 deletions(-)
 create mode 100644 apps/example/src/views/component_example/form.vue
 create mode 100644 packages/components/src/basic/form/FormItem.vue
 create mode 100644 packages/components/src/basic/form/README.md
 create mode 100644 packages/components/src/basic/form/_examples/_async.vue
 create mode 100644 packages/components/src/basic/form/_examples/_basic.vue
 create mode 100644 packages/components/src/basic/form/_examples/_composite.vue
 create mode 100644 packages/components/src/basic/form/_examples/_disabled.vue
 create mode 100644 packages/components/src/basic/form/_examples/_dynamic.vue
 create mode 100644 packages/components/src/basic/form/_examples/_layout.vue
 create mode 100644 packages/components/src/basic/form/_examples/_methods.vue
 create mode 100644 packages/components/src/basic/form/_examples/_slot.vue
 create mode 100644 packages/components/src/basic/form/_examples/index.ts
 create mode 100644 packages/components/src/basic/form/context.ts
 create mode 100644 packages/components/src/basic/form/form/FormControl.vue
 create mode 100644 packages/components/src/basic/form/form/FormDescription.vue
 create mode 100644 packages/components/src/basic/form/form/FormItem.vue
 create mode 100644 packages/components/src/basic/form/form/FormLabel.vue
 create mode 100644 packages/components/src/basic/form/form/FormMessage.vue
 create mode 100644 packages/components/src/basic/form/form/index.ts
 create mode 100644 packages/components/src/basic/form/form/injectionKeys.ts
 create mode 100644 packages/components/src/basic/form/form/useFormField.ts
 create mode 100644 packages/components/src/basic/form/index.ts
 create mode 100644 packages/components/src/basic/form/index.vue

diff --git a/.agents/skills/fa-crud-page-generator/SKILL.md b/.agents/skills/fa-crud-page-generator/SKILL.md
index 201b6645..75563660 100644
--- a/.agents/skills/fa-crud-page-generator/SKILL.md
+++ b/.agents/skills/fa-crud-page-generator/SKILL.md
@@ -1,72 +1,57 @@
 ---
 name: fa-crud-page-generator
-description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，包含列表页、详情/编辑页、表单组件、API 模块和 Mock 数据。当用户说：'帮我做一个商品管理页面'、'搭一个用户列表，能搜索、能分页、能新增编辑删除'、'生成一个订单模块'、'我需要一个带增删改查的页面'、'快速搭一个管理页面骨架'，即使用户只是说'新建一个 XX 管理模块'也应触发此技能。"
+description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，遵循框架标准模块结构和内建 Fa* 组件体系，使用 FaForm/FaFormItem 生成新增/编辑表单，产出列表页、详情/编辑页、DetailForm 表单组件、API 模块、fake mock 数据、可选路由。用户说：'帮我做一个商品管理页面'、'搭一个用户列表，能搜索分页新增编辑删除'、'生成订单模块'、'新建 XX 管理模块'、'快速搭一个标准模块/CRUD 页面' 时，即使没有明确说 CRUD，也应触发此技能。"
 ---
 
 # CRUD 页面生成器
 
-在 Fantastic-admin 框架中生成完整的 CRUD 业务模块，一次性生成所有相关文件，让开发者专注于业务逻辑而非重复代码。
+在 Fantastic-admin 框架中生成标准 CRUD 业务模块。生成时遵循框架当前标准模块结构：
+列表页、独立详情页、`DetailForm` 表单组件、API 模块、fake mock、可选路由和 route i18n
+要一次性配套生成。
 
-**生成的文件清单：**
-- `apps/<app>/src/views/{path}/{name}/list.vue` — 列表页（搜索栏 + 表格 + 分页）
-- `apps/<app>/src/views/{path}/{name}/detail.vue` — 详情/编辑页（仅 router 模式需要）
-- `apps/<app>/src/views/{path}/{name}/components/DetailForm/index.vue` — 表单组件
+优先复刻框架现有写法，而不是重新发明页面结构：列表页用 `FaSearchBar` + `FaTable` +
+`FaPagination`，详情表单抽成 `components/DetailForm/index.vue`，独立详情页用
+`FaFixedBar` 固定顶部标题和底部提交区。
+
+**生成文件清单：**
+- `apps/<app>/src/views/{path}/{module}/list.vue` — 列表页
+- `apps/<app>/src/views/{path}/{module}/detail.vue` — 独立详情页，仅 `router` 模式需要
+- `apps/<app>/src/views/{path}/{module}/components/DetailForm/index.vue` — 新增/编辑表单
 - `apps/<app>/src/api/modules/{fileName}.ts` — API 模块
-- `apps/<app>/src/api/modules/{fileName}.fake.ts` — Mock 数据（可选）
+- `apps/<app>/src/api/fake_modules/{fileName}.fake.ts` — fake mock 数据，可选
+- `apps/<app>/src/router/modules/{routeFileName}.ts` — 前端路由，可选
+- `apps/<app>/src/locales/lang/route/{locale}.json` — 路由标题 i18n，可选
 
 ---
 
-## 第一步：确认工作区（必须阻塞等待用户回复）
+## 先确认应用
 
-本项目是 monorepo 架构，`apps/` 目录下存放各应用。**在执行任何文件读写操作之前**，必须先确认目标应用：
+本项目是 pnpm monorepo。开始写文件前先确认目标应用：
 
-1. 执行 `ls apps/` 列出所有可用应用
-2. **立即向用户提问**，明确询问要在哪个应用中生成 CRUD 模块，并**停止等待回复**
-3. 收到用户明确回复后，才能继续后续步骤
+1. 如果用户已经明确写了 `apps/<app>`、`admin 应用`、`pro 应用` 等目标应用，直接使用该应用。
+2. 如果没有明确目标应用，先执行 `ls apps/` 查看可用应用，然后询问用户要生成到哪个应用，并等待回复。
+3. 后续所有路径都以 `apps/<app>/src/` 为根。
 
-> **严格规则**：如果用户没有在请求中明确说明目标应用（例如"在 example 应用中"、"apps/core"），则必须提问，不得自行猜测或默认选择任何应用。
-
-确认后，后续所有文件路径均以该应用目录为根。
+不要默认猜测应用；生成到错误应用的返工成本很高。
 
 ---
 
-## 工作流程
+## 信息收集
 
-### Step 1：收集基本信息
+尽量一次性收集会影响文件结构的信息：
 
-向用户询问以下内容（可合并为一次提问）：
+- **模块名**：英文，用于目录、API 文件和路由，如 `product`、`order`、`systemUser`
+- **模块中文名**：用于标题和提示，如 `商品`、`订单`、`用户`
+- **存放路径**：位于 `src/views/` 下的子路径，如 `mall`、`system/user`，可为空
+- **字段清单**：字段名、中文标签、类型、是否列表显示、是否搜索、是否表单显示、是否必填
+- **详情展示模式**：`router`、`modal`、`drawer`，默认 `router`
+- **是否启用批量删除**：默认启用
+- **是否支持列表高度自适应**：默认生成 `tableAutoHeight` 代码
+- **是否生成 fake mock**：开发阶段默认推荐生成
+- **是否生成路由和 route i18n**：仅当前端路由由本地配置维护时生成
 
-1. **模块名**（英文，用于文件名和路由，如 `user`、`product`、`order`）
-2. **模块中文名**（用于页面标题和提示文字，如 `用户`、`商品`、`订单`）
-3. **存放路径**（在 `apps/<app>/src/views/` 下的子目录，如 `system`、`mall/product`，留空则直接放在 `src/views/` 下）
-
-### Step 2：收集字段信息
-
-询问用户该模块有哪些字段，每个字段需要：
-- **字段名**（英文，如 `name`、`status`、`createdAt`）
-- **中文标签**（如 `姓名`、`状态`、`创建时间`）
-- **字段类型**（`string` | `number` | `boolean` | `date`）
-- **是否在列表中显示**
-- **是否在搜索栏中显示**
-- **是否在表单中显示**（新增/编辑）
-- **是否必填**（表单验证）
-
-如果用户没有提供字段信息，使用默认字段 `title`（标题，string，必填）作为示例占位，并在生成后提示用户替换。
-
-### Step 3：收集功能选项
-
-以下三个选项会直接影响生成的文件结构，需要在同一轮提问中一起确认，避免后续重复生成：
-
-4. **详情展示模式**：
-   - `router` — 跳转到独立的详情页（默认，适合复杂表单）
-   - `modal` — 弹窗（适合简单表单）
-   - `drawer` — 抽屉（适合中等复杂度表单）
-5. **是否生成 Mock 数据**（是/否，开发阶段推荐开启）
-6. **是否同时生成路由配置**（是/否，仅 `app.routeBaseOn` 为 `frontend` 时有效；选是时需额外询问归属的主导航分组名称）
-
-### Step 4：确认并生成
-
-汇总信息，展示将要生成的文件列表，确认后写入文件。
+如果用户只给出模块名和很少字段，使用一个最小可运行字段：
+`title`（标题，`string`，列表/搜索/表单显示，必填），并在完成后提醒用户继续替换业务字段。
 
 ---
 
@@ -74,38 +59,60 @@ description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，包
 
 给定模块名 `name` 和路径 `path`（相对于 `apps/<app>/src/views/`）：
 
-| 用途 | 规则 | 示例（path=system, name=user） |
-|------|------|-------------------------------|
-| 视图目录 | `apps/<app>/src/views/{path}/{snakeCase(name)}/` | `apps/<app>/src/views/system/user/` |
-| API 文件名 | path 非空时：`{camelCase(path)}_{camelCase(name)}`；path 为空时：`{camelCase(name)}` | `systemUser` |
-| 组件名 | `PascalCase({path}-{name}-list/detail)` | `SystemUserList` |
-| API URL 前缀 | `/{path}/{snakeCase(name)}/` | `/system/user/` |
+| 用途 | 规则 | 示例（path 为空，name=product） |
+|------|------|----------------------------------------|
+| 视图目录 | `src/views/{path}/{snake_case(name)}/` | `src/views/product/` |
+| API 文件名 | path 参与业务命名时使用 camelCase；普通模块用 `camelCase(name)` | `product` |
+| fake 文件名 | 与 API 文件名一致，放到 `src/api/fake_modules/` | `product.fake.ts` |
+| 列表组件名 | `PascalCase({path}-{name}-list)` | `ProductList` |
+| 详情组件名 | `PascalCase({path}-{name}-detail)` | `ProductDetail` |
+| 路由 name | `camelCase(name)List` / `camelCase(name)Detail` | `productList` |
+| API URL 前缀 | `snake_case(path/name)`，无前导斜杠 | `product` |
 
-**snakeCase 规则**：多个单词用下划线连接，如 `productCategory` → `product_category`
+`snake_case` 用下划线连接多个单词，如 `productCategory` -> `product_category`。
 
 ---
 
-## 代码模板
+## 代码生成规则
 
-详细的代码模板见 [references/templates.md](references/templates.md)，其中也包含 faker.js 字段类型映射表。
+详细模板见 [references/templates.md](references/templates.md)。生成时按这些规则填充模板：
 
-生成代码时，根据用户提供的字段信息替换模板中的占位符：
-- 列表页的 `ElTableColumn` 根据"列表显示"字段生成
-- 搜索栏的 `ElFormItem` 根据"搜索显示"字段生成
-- 表单组件的 `ElFormItem` 根据"表单显示"字段生成
-- API 模块的 TypeScript 类型根据字段定义生成
-- Mock 数据根据字段类型使用合适的 faker.js 方法生成（见 templates.md 中的映射表）
+- `list.vue` 使用 `<script setup lang="ts">`，导入 `type { TableColumn } from '@fantastic-admin/components'`。
+- 表格列使用 `computed<TableColumn<Item>[]>(...)` 定义，页面模板使用 `FaTable` 的 `:columns` 与 `#cell-xxx` 插槽。
+- 搜索区使用 `FaSearchBar` + `FaLabel`，按钮保持“重置 / 筛选 / 展开收起”的顺序。
+- 工具栏通过 `FaTable` 的 `#toolbar` 插槽放“新增”和批量操作。
+- 行操作用 `FaButton size="icon-sm"` 编辑按钮和 `FaDropdown` 删除菜单。
+- 删除确认统一使用 `useFaModal().confirm`，提示成功统一使用 `useFaToast().success`。
+- `router` 模式在列表页通过 `eventBus.on('get-data-list')` 接收详情页提交后的刷新事件；卸载时 `eventBus.off('get-data-list')`。
+- `modal` / `drawer` 模式通过 `useFaModal().create` 或 `useFaDrawer().create` 渲染 `DetailForm`，confirm 时调用表单暴露的 `submit()`；仅当返回 `true` 时刷新列表并关闭。
+- `DetailForm` 使用 `FaForm/FaFormItem`，表单对象使用 `const model = ref<...>({...})`，通过 `useTemplateRef<FormExpose>('formRef')` 获取表单引用，并只 `defineExpose({ submit })` 给外部调用。
+- `submit()` 必须返回 `Promise<boolean>`：校验失败返回 `false`，新增/编辑成功后提示并返回 `true`。父级页面、modal、drawer 都必须检查返回值，避免校验失败时关闭页面或弹窗。
+- fake mock 文件放在 `apps/<app>/src/api/fake_modules/`，不是 `api/modules/`。
+- API 模块开启 mock 时在每个请求配置中设置 `fake: true`；不生成 fake 时去掉 `fake: true`。
 
 ---
 
-## 路由生成（可选）
+## 路由生成
 
-如果用户选择同时生成路由，先读取 `apps/<app>/src/settings.ts` 确认 `app.routeBaseOn === 'frontend'`，然后使用 `fa-route-generator` 技能生成对应路由配置：
-- **router 模式**：生成列表路由 + 详情路由（详情路由带 `menu: false` 和 `activeMenu` 指向列表）
-- **modal/drawer 模式**：只生成列表路由
+如果用户选择生成路由，优先调用或参考 `fa-route-generator`，并遵循最新标准模块路由模式：
+
+- 父级路由指向 `Layout`，`meta.title` 使用 `$t('route.<module>.root')`，设置合适图标。
+- 列表子路由 `path: ''`，`name: '<module>List'`，组件指向 `list.vue`。
+- 当父级路由只作为菜单入口、列表页作为默认子页时，列表路由使用 `meta.menu: false` 和 `breadcrumb: false`；业务模块如需列表作为独立菜单项，可按用户需求保留菜单。
+- `router` 模式详情路由为 `detail/:id?`，`meta.menu: false`，`activeMenu` 指向列表/父菜单路径。
+- 为避免列表和详情标签页状态混乱，列表路由设置 `keepAlive: '<module>Detail'`，详情路由设置 `keepAlive: true` 与 `noKeepAlive: '<module>List'`。
+- route i18n 至少同步 `zh-cn`、`zh-tw`、`en` 三份 `src/locales/lang/route/*.json`。
 
 ---
 
-## 生成后提示用户
+## 生成前后检查
 
-文件生成完成后简要告知：如果未生成路由，可用 `fa-route-generator` 技能添加；生成了 `.fake.ts` 则 API 请求会自动走 mock；表单字段类型（Select、DatePicker 等）需根据业务自行替换。
+写文件前展示将生成/修改的文件列表，确认不会覆盖用户已有业务文件。若目标文件已存在，先读取并说明将如何合并。
+
+完成后简要说明：
+- 已生成哪些文件；
+- 若未生成路由，提示可继续用 `fa-route-generator` 添加；
+- 若生成 fake mock，说明请求已配置 `fake: true`；
+- 若字段是枚举、状态、日期、上传等复杂类型，提醒用户按业务替换控件和 mock 取值。
+
+不要修改 `packages/components/` 内建组件；确实需要改内建组件时先征得用户确认。
diff --git a/.agents/skills/fa-crud-page-generator/references/templates.md b/.agents/skills/fa-crud-page-generator/references/templates.md
index 1ec3720e..761411e1 100644
--- a/.agents/skills/fa-crud-page-generator/references/templates.md
+++ b/.agents/skills/fa-crud-page-generator/references/templates.md
@@ -1,14 +1,25 @@
 # CRUD 代码模板
 
-以下模板基于 `src/views/pages_example/manager` 真实模块提炼，使用以下占位符：
+生成业务模块时优先保持结构一致，再按字段和业务控件做替换。
 
-- `{cname}` — 模块中文名，如 `用户`
-- `{componentNameList}` — 列表页组件名（PascalCase），如 `SystemUserList`
-- `{componentNameDetail}` — 详情页组件名（PascalCase），如 `SystemUserDetail`
-- `{fileName}` — API 文件名（camelCase），如 `systemUser`
-- `{apiPrefix}` — API URL 前缀（无前导斜杠），如 `system/user`
-- `{routeListName}` — 列表路由 name，如 `systemUserList`
-- `{routeDetailName}` — 详情路由 name，如 `systemUserDetail`（仅 router 模式）
+## 占位符
+
+- `{cname}` — 模块中文名，如 `商品`
+- `{moduleName}` — 模块英文名 camelCase，如 `product`
+- `{ModuleName}` — 模块英文名 PascalCase，如 `Product`
+- `{fileName}` — API 文件名，如 `product`
+- `{apiPrefix}` — API URL 前缀，无前导斜杠，如 `product`
+- `{componentNameList}` — 列表页组件名，如 `ProductList`
+- `{componentNameDetail}` — 详情页组件名，如 `ProductDetail`
+- `{routeListName}` — 列表路由 name，如 `productList`
+- `{routeDetailName}` — 详情路由 name，如 `productDetail`
+- `{routeRootName}` — 父级路由 name，如 `product`
+- `{routePath}` — 父级路由 path，如 `/product`
+- `{routeTitle}` — 路由标题，如 `商品管理`
+- `{formMode}` — `router`、`modal` 或 `drawer`
+- `{firstField}` — 删除确认中展示的主字段，如 `title`
+- `{formModelTypes}` — `DetailFormModel` 中除 `id` 外的字段类型
+- `{formValidationSchema}` — `FaForm` 的 validation schema 对象字段
 
 ---
 
@@ -16,7 +27,8 @@
 
 ```vue
 <script setup lang="ts">
-import api{FileName} from '@/api/modules/{fileName}'
+import type { TableColumn } from '@fantastic-admin/components'
+import api{ModuleName} from '@/api/modules/{fileName}'
 import eventBus from '@/utils/eventBus'
 import DetailForm from './components/DetailForm/index.vue'
 
@@ -24,8 +36,13 @@ defineOptions({
   name: '{componentNameList}',
 })
 
+interface {ModuleName}Item {
+  id: number
+  {itemTypeFields}
+}
+
 const router = useRouter()
-const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } = usePagination()
+const { pagination, getParams, onSizeChange, onCurrentChange } = usePagination()
 
 // 表格是否自适应高度
 const tableAutoHeight = ref(false)
@@ -40,7 +57,7 @@ const formMode = ref<'router' | 'modal' | 'drawer'>('{formMode}')
 
 // 详情
 const formModeProps = ref({
-  id: '',
+  id: '' as number | string,
 })
 
 // 搜索
@@ -55,12 +72,30 @@ function searchReset() {
 // 批量操作
 const batch = ref({
   enable: true,
-  selectionDataList: [],
+  selectionDataList: [] as {ModuleName}Item[],
 })
 
 // 列表
 const loading = ref(false)
-const dataList = ref([])
+const dataList = ref<{ModuleName}Item[]>([])
+
+const tableColumns = computed<TableColumn<{ModuleName}Item>[]>(() => [
+  ...(batch.value.enable
+    ? [{
+      type: 'selection',
+      fixed: 'left',
+      width: 48,
+    } satisfies TableColumn<{ModuleName}Item>]
+    : []),
+  {tableColumns}
+  {
+    id: 'operation',
+    header: '操作',
+    width: 120,
+    align: 'center',
+    fixed: 'right',
+  },
+])
 
 onMounted(() => {
   getDataList()
@@ -83,7 +118,7 @@ function getDataList() {
     ...getParams(),
     {searchParams}
   }
-  api{FileName}.list(params).then((res: any) => {
+  api{ModuleName}.list(params).then((res: any) => {
     loading.value = false
     dataList.value = res.data.list
     pagination.value.total = res.data.total
@@ -100,11 +135,6 @@ function currentChange(page = 1) {
   onCurrentChange(page).then(() => getDataList())
 }
 
-// 字段排序
-function sortChange({ prop, order }: { prop: string, order: string }) {
-  onSortChange(prop, order).then(() => getDataList())
-}
-
 const formRef = ref<InstanceType<typeof DetailForm>>()
 
 const { open: openModal, update: updateModal } = useFaModal().create({
@@ -114,7 +144,11 @@ const { open: openModal, update: updateModal } = useFaModal().create({
   beforeClose: (action, done) => {
     if (action === 'confirm') {
       // 调用 DetailForm 组件内部 submit 方法
-      formRef.value?.submit().then(() => {
+      formRef.value?.submit().then((success) => {
+        if (!success) {
+          return
+        }
+
         getDataList()
         done()
       })
@@ -136,7 +170,11 @@ const { open: openDrawer, update: updateDrawer } = useFaDrawer().create({
   beforeClose: (action, done) => {
     if (action === 'confirm') {
       // 调用 DetailForm 组件内部 submit 方法
-      formRef.value?.submit().then(() => {
+      formRef.value?.submit().then((success) => {
+        if (!success) {
+          return
+        }
+
         getDataList()
         done()
       })
@@ -153,46 +191,79 @@ const { open: openDrawer, update: updateDrawer } = useFaDrawer().create({
 
 function onCreate() {
   if (formMode.value === 'router') {
-    router.push({ name: '{routeDetailName}' })
+    router.push({
+      name: '{routeDetailName}',
+    })
   }
   else {
     formModeProps.value.id = ''
     if (formMode.value === 'modal') {
-      updateModal({ title: '新增{cname}' })
+      updateModal({
+        title: '新增{cname}',
+      })
       openModal()
     }
     else {
-      updateDrawer({ title: '新增{cname}' })
+      updateDrawer({
+        title: '新增{cname}',
+      })
       openDrawer()
     }
   }
 }
 
-function onEdit(row: any) {
+function onEdit(row: {ModuleName}Item) {
   if (formMode.value === 'router') {
-    router.push({ name: '{routeDetailName}', params: { id: row.id } })
+    router.push({
+      name: '{routeDetailName}',
+      params: {
+        id: row.id,
+      },
+    })
   }
   else {
     formModeProps.value.id = row.id
     if (formMode.value === 'modal') {
-      updateModal({ title: '编辑{cname}' })
+      updateModal({
+        title: '编辑{cname}',
+      })
       openModal()
     }
     else {
-      updateDrawer({ title: '编辑{cname}' })
+      updateDrawer({
+        title: '编辑{cname}',
+      })
       openDrawer()
     }
   }
 }
 
-function onDel(row: any) {
+function onDel(row: {ModuleName}Item) {
   useFaModal().confirm({
     title: '确认信息',
     content: `确认删除「${row.{firstField}}」吗？`,
     onConfirm: () => {
-      api{FileName}.delete(row.id).then(() => {
+      api{ModuleName}.delete(row.id).then(() => {
         getDataList()
-        faToast.success('删除成功')
+        useFaToast().success('删除成功')
+      })
+    },
+  })
+}
+
+function onBatchDel() {
+  const rows = batch.value.selectionDataList
+  if (!rows.length) {
+    return
+  }
+
+  useFaModal().confirm({
+    title: '确认信息',
+    content: `确认删除选中的 ${rows.length} 条数据吗？`,
+    onConfirm: () => {
+      Promise.all(rows.map(row => api{ModuleName}.delete(row.id))).then(() => {
+        getDataList()
+        useFaToast().success('批量删除成功')
       })
     },
   })
@@ -206,7 +277,7 @@ function onDel(row: any) {
       <FaSearchBar :show-toggle="false">
         <template #default="{ fold, toggle }">
           <div class="gap-x-8 gap-y-2 grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))]">
-            {fields.search}
+            {searchFields}
             <div class="flex gap-2 col-end--1 justify-end">
               <FaButton variant="outline" @click="searchReset(); currentChange()">
                 重置
@@ -223,51 +294,72 @@ function onDel(row: any) {
           </div>
         </template>
       </FaSearchBar>
-      <div class="mx--5 my-4 border-t border-t-dashed" />
-      <div class="flex-center-between gap-2">
-        <FaButton v-if="batch.enable" variant="outline" :disabled="!batch.selectionDataList.length">
-          批量操作
-        </FaButton>
-        <FaButton @click="onCreate">
-          <FaIcon name="i-ri:add-line" />
-          新增
-        </FaButton>
-      </div>
-      <ElTable v-loading="loading" class="my-4" :data="dataList" stripe highlight-current-row border height="100%" @sort-change="sortChange" @selection-change="batch.selectionDataList = $event">
-        <ElTableColumn v-if="batch.enable" type="selection" align="center" fixed />
-        {fields.list}
-        <ElTableColumn label="操作" width="120" align="center" fixed="right">
-          <template #default="scope">
-            <div class="flex-center gap-2">
-              <FaButton variant="outline" size="icon-sm" @click="onEdit(scope.row)">
-                <FaIcon name="i-ri:edit-line" />
+      <div class="mx--4 my-3 border-t border-t-dashed" />
+      <FaTable
+        v-loading="loading"
+        table-root-class="rounded-lg overflow-hidden"
+        :class="{ 'min-h-0 flex-1': tableAutoHeight }"
+        row-key="id"
+        selectable
+        multiple
+        stripe
+        column-visibility
+        border
+        :columns="tableColumns"
+        :data="dataList"
+        @selection-change="batch.selectionDataList = $event"
+      >
+        <template #toolbar>
+          <div class="flex flex-1 gap-2 items-center">
+            <FaButton @click="onCreate">
+              新增
+            </FaButton>
+            <FaDropdown
+              v-if="batch.enable"
+              :items="[
+                [
+                  { label: '批量删除', variant: 'destructive', disabled: !batch.selectionDataList.length, handle: onBatchDel },
+                ],
+              ]"
+            >
+              <FaButton variant="outline" :disabled="!batch.selectionDataList.length">
+                批量操作
+                <FaIcon name="i-ep:arrow-down" />
               </FaButton>
-              <FaDropdown
-                :items="[
-                  [
-                    { label: '删除', variant: 'destructive', handle: () => onDel(scope.row) },
-                  ],
-                ]"
-              >
-                <FaButton variant="outline" size="icon-sm">
-                  <FaIcon name="i-ri:more-line" />
-                </FaButton>
-              </FaDropdown>
-            </div>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-      <FaPagination :page="pagination.page" :size="pagination.size" :total="pagination.total" @page-change="currentChange" @size-change="sizeChange" />
+            </FaDropdown>
+          </div>
+        </template>
+        {tableCellSlots}
+        <template #cell-operation="{ row }">
+          <div class="flex-center gap-2">
+            <FaButton variant="outline" size="icon-sm" @click="onEdit(row.original)">
+              <FaIcon name="i-ri:edit-line" />
+            </FaButton>
+            <FaDropdown
+              :items="[
+                [
+                  { label: '删除', variant: 'destructive', handle: () => onDel(row.original) },
+                ],
+              ]"
+            >
+              <FaButton variant="outline" size="icon-sm">
+                <FaIcon name="i-ri:more-line" />
+              </FaButton>
+            </FaDropdown>
+          </div>
+        </template>
+      </FaTable>
+      <FaPagination :page="pagination.page" :size="pagination.size" :total="pagination.total" class="mt-2" @page-change="currentChange" @size-change="sizeChange" />
     </FaPageMain>
   </div>
 </template>
 ```
 
-> 注意：`list.vue` 不需要 `<style scoped>` 块，所有样式均通过 UnoCSS 工具类实现。
+业务页面保持简洁标题即可，不要在 `FaPageHeader #description` 中加入解释技能或模板来源的说明文字。
 
 ---
 
-## detail.vue 模板（仅 router 模式）
+## detail.vue 模板（router 模式）
 
 ```vue
 <script setup lang="ts">
@@ -281,10 +373,23 @@ defineOptions({
 const route = useRoute()
 const router = useRouter()
 
+const appPage = useAppPage()
+
+onMounted(() => {
+  appPage.setCustomTitle(route.params.id ? '编辑' : '新增')
+})
+onUnmounted(() => {
+  appPage.resetCustomTitle()
+})
+
 const formRef = useTemplateRef('formRef')
 
 function onSubmit() {
-  formRef.value?.submit().then(() => {
+  formRef.value?.submit().then((success) => {
+    if (!success) {
+      return
+    }
+
     eventBus.emit('get-data-list')
     onCancel()
   })
@@ -306,11 +411,9 @@ function onCancel() {
       </FaPageHeader>
     </FaFixedBar>
     <FaPageMain>
-      <ElRow>
-        <ElCol :md="24" :lg="16">
-          <DetailForm :id="route.params.id as string" ref="formRef" />
-        </ElCol>
-      </ElRow>
+      <div class="max-w-4xl w-full">
+        <DetailForm :id="route.params.id as string" ref="formRef" />
+      </div>
     </FaPageMain>
     <FaFixedBar position="bottom" class="flex-center gap-4">
       <FaButton @click="onSubmit">
@@ -330,8 +433,9 @@ function onCancel() {
 
 ```vue
 <script setup lang="ts">
-import type { FormInstance, FormRules } from 'element-plus'
-import api{FileName} from '@/api/modules/{fileName}'
+import type { FormExpose } from '@fantastic-admin/components'
+import { ref } from 'vue'
+import api{ModuleName} from '@/api/modules/{fileName}'
 
 export interface Props {
   id?: number | string
@@ -344,67 +448,80 @@ const props = withDefaults(
 )
 
 const loading = ref(false)
-const formRef = useTemplateRef<FormInstance>('formRef')
-const form = ref({
+const formRef = useTemplateRef<FormExpose>('formRef')
+
+interface DetailFormModel {
+  id: number | string
+  {formModelTypes}
+}
+
+const model = ref<DetailFormModel>({
   id: props.id,
-  {fields.formInit}
-})
-const formRules = ref<FormRules>({
-  {fields.rules}
+  {formInitialValues}
 })
 
+const validationSchema = {
+  {formValidationSchema}
+}
+
 onMounted(() => {
-  if (form.value.id !== '') {
+  if (model.value.id !== '') {
     getInfo()
   }
 })
 
 function getInfo() {
   loading.value = true
-  api{FileName}.detail(form.value.id).then((res: any) => {
+  api{ModuleName}.detail(model.value.id).then((res: any) => {
     loading.value = false
-    {fields.formAssign}
+    {formAssign}
   }).catch(() => {
     loading.value = false
   })
 }
 
+async function submit() {
+  const result = await formRef.value?.validate()
+
+  if (!result?.valid) {
+    return false
+  }
+
+  if (model.value.id === '') {
+    await api{ModuleName}.create(model.value)
+    useFaToast().success('新增成功')
+  }
+  else {
+    await api{ModuleName}.edit(model.value)
+    useFaToast().success('编辑成功')
+  }
+
+  return true
+}
+
 defineExpose({
-  submit() {
-    return new Promise<void>((resolve) => {
-      formRef.value?.validate((valid) => {
-        if (valid) {
-          if (form.value.id === '') {
-            api{FileName}.create(form.value).then(() => {
-              faToast.success('新增成功')
-              resolve()
-            })
-          }
-          else {
-            api{FileName}.edit(form.value).then(() => {
-              faToast.success('编辑成功')
-              resolve()
-            })
-          }
-        }
-      })
-    })
-  },
+  submit,
 })
 </script>
 
 <template>
   <div v-loading="loading">
-    <ElForm ref="formRef" :model="form" :rules="formRules" label-width="120px" label-suffix="：">
-      {fields.form}
-    </ElForm>
+    <FaForm
+      ref="formRef"
+      :model="model"
+      :validation-schema="validationSchema"
+      label-placement="right"
+      :label-width="120"
+    >
+      {formFields}
+    </FaForm>
   </div>
 </template>
 ```
 
 ---
 
-## api.ts 模板
+## api/modules/{fileName}.ts 模板
 
 ```typescript
 import api from '../index'
@@ -420,7 +537,9 @@ export default {
   }),
 
   detail: (id: number | string) => api.get('{apiPrefix}/detail', {
-    params: { id },
+    params: {
+      id,
+    },
     fake: true,
   }),
 
@@ -432,27 +551,30 @@ export default {
     fake: true,
   }),
 
-  delete: (id: number | string) => api.post('{apiPrefix}/delete', { id }, {
+  delete: (id: number | string) => api.post('{apiPrefix}/delete', {
+    id,
+  }, {
     fake: true,
   }),
 }
 ```
 
-> 不需要 Mock 数据时，去掉所有 `fake: true` 选项即可。
+不生成 fake mock 时，去掉所有 `fake: true` 配置，并确保接口地址与真实后端约定一致。
 
 ---
 
-## fake.ts 模板
+## api/fake_modules/{fileName}.fake.ts 模板
 
 ```typescript
-import { faker } from '@faker-js/faker/locale/zh_CN'
+import { faker } from '@faker-js/faker'
 import { defineFakeRoute } from 'vite-plugin-fake-server/client'
 
+// {cname}
 const {moduleName}List: any[] = []
 for (let i = 0; i < 50; i++) {
   {moduleName}List.push({
     id: i + 1,
-    {fields.mock}
+    {mockFields}
   })
 }
 
@@ -462,8 +584,9 @@ export default defineFakeRoute([
     method: 'get',
     response: ({ query }) => {
       const { {searchQueryFields}, from, limit } = query
-      let list = {moduleName}List
-      {searchFilters}
+      const list = {moduleName}List.filter((item) => {
+        return {searchFilterExpression}
+      })
       const pageList = list.filter((_item, index) => {
         return index >= ~~from && index < (~~from + ~~limit)
       })
@@ -493,122 +616,257 @@ export default defineFakeRoute([
     url: '/fake/{apiPrefix}/create',
     method: 'post',
     response: () => {
-      return { error: '', status: 1, data: { isSuccess: true } }
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
     },
   },
   {
     url: '/fake/{apiPrefix}/edit',
     method: 'post',
     response: () => {
-      return { error: '', status: 1, data: { isSuccess: true } }
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
     },
   },
   {
     url: '/fake/{apiPrefix}/delete',
     method: 'post',
     response: () => {
-      return { error: '', status: 1, data: { isSuccess: true } }
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
     },
   },
 ])
 ```
 
+如果有多个搜索字段，可以用 `&&` 组合过滤条件：
+
+```typescript
+return (title ? item.title.includes(title) : true)
+  && (status !== undefined && status !== '' ? item.status === ~~status : true)
+```
+
+---
+
+## router/modules/{routeFileName}.ts 模板
+
+```typescript
+import type { RouteRecordRaw } from 'vue-router'
+import { $t } from '@/locales'
+
+function Layout() {
+  return import('@/layouts/index.vue')
+}
+
+const routes: RouteRecordRaw = {
+  path: '{routePath}',
+  component: Layout,
+  name: '{routeRootName}',
+  meta: {
+    title: '{routeTitle}',
+    icon: '{icon}',
+  },
+  children: [
+    {
+      path: '',
+      name: '{routeListName}',
+      component: () => import('@/views/{viewPath}/list.vue'),
+      meta: {
+        title: '{cname}列表',
+        menu: false,
+        breadcrumb: false,
+        keepAlive: '{routeDetailName}',
+      },
+    },
+    {
+      path: 'detail/:id?',
+      name: '{routeDetailName}',
+      component: () => import('@/views/{viewPath}/detail.vue'),
+      meta: {
+        title: '...',
+        menu: false,
+        activeMenu: '{routePath}',
+        keepAlive: true,
+        noKeepAlive: '{routeListName}',
+      },
+    },
+  ],
+}
+
+export default routes
+```
+
+`modal` / `drawer` 模式不需要详情路由，列表路由也不需要 `keepAlive: '{routeDetailName}'`。
+
 ---
 
 ## 字段生成规则
 
+### TypeScript item 字段
+
+```typescript
+title: string
+status: number
+createdAt: string
+```
+
+### 搜索默认值和查询参数
+
+```typescript
+const searchDefault = {
+  title: '',
+  status: '',
+}
+
+const params = {
+  ...getParams(),
+  ...(search.value.title && { title: search.value.title }),
+  ...(search.value.status !== '' && { status: search.value.status }),
+}
+```
+
 ### 搜索栏字段
 
-每个搜索字段用 `FaLabel` 包裹，内部控件根据字段类型自行选择合适的 Fa* 或 El* 组件。次要搜索条件加 `v-show="!fold"` 实现折叠。
+首个主要搜索字段直接显示，次要搜索条件使用 `v-show="!fold"`：
 
 ```vue
 <FaLabel label="{label}" class="col-span-1">
-  <!-- 内部放对应的输入控件，string 用 FaInput，枚举用 FaSelect，日期用 ElDatePicker 等 -->
+  <FaInput
+    v-model="search.{field}"
+    placeholder="请输入{label}，支持模糊查询"
+    clearable
+    class="w-full"
+    @keydown.enter="currentChange()"
+    @clear="currentChange()"
+  />
 </FaLabel>
 ```
 
-### 列表列
+### FaTable 列
 
-普通列直接用 `prop` 渲染，需要自定义展示时使用 `#default` slot：
+普通字段：
+
+```typescript
+{
+  accessorKey: '{field}',
+  header: '{label}',
+},
+```
+
+需要自定义展示的字段使用 `id`，并在模板里添加 `#cell-{id}` 插槽：
+
+```typescript
+{
+  id: 'status',
+  header: '状态',
+  width: 100,
+  align: 'center',
+},
+```
 
 ```vue
-<!-- 普通列 -->
-<ElTableColumn prop="{field}" label="{label}" />
-
-<!-- 需要自定义渲染时 -->
-<ElTableColumn prop="{field}" label="{label}" width="100" align="center">
-  <template #default="scope">
-    <!-- 根据字段含义选择合适的展示方式，如 ElTag、FaSwitch 等 -->
-  </template>
-</ElTableColumn>
+<template #cell-status="{ row }">
+  <FaBadge :variant="row.original.status ? 'default' : 'secondary'">
+    {{ row.original.status ? '启用' : '停用' }}
+  </FaBadge>
+</template>
 ```
 
 ### 表单字段
 
-每个表单字段用 `ElFormItem` 包裹，内部控件根据字段类型自行选择合适的 Fa* 或 El* 组件，注意加 `class="w-full"`。
-
 ```vue
-<ElFormItem label="{label}" prop="{field}">
-  <!-- 内部放对应的输入控件 -->
-</ElFormItem>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput placeholder="请输入{label}" class="w-full" />
+</FaFormItem>
 ```
 
-### 表单验证规则
+`FaFormItem` 会自动向第一个子控件注入 `modelValue` 和 `onUpdate:modelValue`，不要再手写
+`v-model="model.{field}"` 或 `v-model="model.value.{field}"`。
+
+### 表单 model 类型字段
 
 ```typescript
-// 必填文本
-{field}: [
-  { required: true, message: '请输入{label}', trigger: 'blur' },
-],
-// 必填选择
-{field}: [
-  { required: true, message: '请选择{label}', trigger: 'change' },
-],
+{field}: string
+status: number
+enabled: boolean
 ```
 
+### 表单初始值
+
+```typescript
+{field}: '',
+status: 0,
+enabled: true,
+```
+
+### 表单详情赋值
+
+```typescript
+model.value.{field} = res.data.{field}
+```
+
+### 表单验证 schema
+
+文本输入：
+
+```typescript
+{field}(value: string) {
+  return value?.trim() ? true : '请输入{label}'
+},
+```
+
+选择、开关、日期：
+
+```typescript
+{field}(value: string | number | boolean | undefined) {
+  return value !== undefined && value !== '' ? true : '请选择{label}'
+},
+```
+
+非必填字段不要生成 validation schema 项；生成必填字段时，在对应 `FaFormItem` 上同时加
+`required`。
+
 ### Mock 数据字段映射
 
-| 字段类型 | faker 方法 |
-|---------|-----------|
-| 姓名 | `faker.person.fullName()` |
-| 账号/用户名 | `faker.person.firstName()` |
-| 手机号 | `faker.phone.number({ style: 'international' })` |
+| 字段类型/含义 | faker 方法 |
+|---------------|------------|
+| 标题 | `faker.book.title()` 或 `faker.lorem.words(3)` |
+| 名称 | `faker.person.fullName()` 或 `faker.commerce.productName()` |
+| 用户名 | `faker.internet.username()` |
+| 手机号 | `faker.phone.number()` |
 | 邮箱 | `faker.internet.email()` |
-| 标题/名称 | `faker.lorem.words(3)` |
 | 描述 | `faker.lorem.sentence()` |
-| 数字（枚举） | `faker.number.int(2)` |
-| 布尔（状态） | `faker.datatype.boolean()` |
+| 数量 | `faker.number.int({ min: 1, max: 100 })` |
 | 金额 | `faker.number.float({ min: 10, max: 9999, fractionDigits: 2 })` |
+| 布尔状态 | `faker.datatype.boolean()` |
+| 枚举状态 | `faker.helpers.arrayElement([0, 1, 2])` |
 | 日期 | `faker.date.recent().toISOString()` |
 
-### Mock 搜索过滤模式
+### Mock 搜索过滤
+
+字符串模糊匹配：
 
-**string 模糊匹配：**
 ```typescript
-list = list.filter((item) => {
-  return {field} ? item.{field}.includes({field}) : true
-})
+title ? item.title.includes(title) : true
 ```
 
-**枚举/数字精确匹配（注意：query 参数均为字符串，`0` 是 falsy，不能直接用 `{field} ?` 判断）：**
+数字/枚举精确匹配。注意 query 参数是字符串，`0` 不能用普通 truthy 判断：
+
 ```typescript
-list = list.filter((item) => {
-  return {field} !== undefined && {field} !== '' ? item.{field} === ~~{field} : true
-})
+status !== undefined && status !== '' ? item.status === ~~status : true
 ```
-
----
-
-## faker.js 字段类型映射
-
-| 字段类型 | 推荐 faker 方法 |
-|---------|----------------|
-| string（名称类） | `faker.person.fullName()` 或 `faker.commerce.productName()` |
-| string（标题类） | `faker.lorem.words(3)` |
-| string（描述类） | `faker.lorem.sentence()` |
-| number（ID） | 自增 `i + 1` |
-| number（金额） | `faker.number.float({ min: 10, max: 9999, fractionDigits: 2 })` |
-| number（数量） | `faker.number.int({ min: 1, max: 100 })` |
-| boolean | `faker.datatype.boolean()` |
-| date | `faker.date.recent().toISOString()` |
-| status（枚举） | `faker.helpers.arrayElement([0, 1, 2])` |
diff --git a/.agents/skills/fa-form-builder/SKILL.md b/.agents/skills/fa-form-builder/SKILL.md
index fbd97ca4..b48222fe 100755
--- a/.agents/skills/fa-form-builder/SKILL.md
+++ b/.agents/skills/fa-form-builder/SKILL.md
@@ -1,11 +1,11 @@
 ---
 name: fa-form-builder
-description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee-validate + zod 验证，全部使用框架内建 Fa* 组件。当用户说：'帮我做一个用户信息填写页'、'我只需要一个提交表单，不需要列表'、'做个设置页面，有几个输入框和保存按钮'、'生成一个注册/编辑/配置表单页'、'只要表单页，不需要增删改查'，即使用户只是说'做个表单页面'也应触发此技能。"
+description: "为 Fantastic-admin 框架生成独立的表单页面，使用 FaForm/FaFormItem + vee-validate + zod 验证，表单 model 使用 ref，全部使用框架内建 Fa* 组件。当用户说：'帮我做一个用户信息填写页'、'我只需要一个提交表单，不需要列表'、'做个设置页面，有几个输入框和保存按钮'、'生成一个注册/编辑/配置表单页'、'只要表单页，不需要增删改查'，即使用户只是说'做个表单页面'也应触发此技能。"
 ---
 
 # 表单页面生成器
 
-在 Fantastic-admin 框架中生成独立的 Router 表单页面，使用 vee-validate + zod 完成表单验证，全部使用框架内建 Fa* 组件，不引入任何 Element Plus 组件。
+在 Fantastic-admin 框架中生成独立的 Router 表单页面，使用 `FaForm/FaFormItem` 承接 vee-validate + zod 表单验证。
 
 **生成的文件：**
 - `apps/<app>/src/views/{path}/{name}/index.vue` — 表单页面（含验证、提交骨架、固定操作栏）
@@ -50,14 +50,14 @@ description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee
 
 字段较多时单列会导致页面过长，双列更紧凑。根据字段数量和复杂度判断是否询问用户布局偏好：
 
-- **单列**：`max-w-600px`，`space-y-6`（字段少、字段较长时适合）
+- **单列**：`max-w-600px`，`grid gap-6`（字段少、字段较长时适合）
 - **双列**：`max-w-1200px`，`grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2`（字段多、字段较短时适合）
 
 ### Step 4：确认并生成
 
 汇总信息，展示将要生成的文件，确认后写入。
 
-生成完成后提示：如需配置路由，请使用 `fa-route-generator` 技能；如需 API 模块，请手动创建。
+生成完成后提示：如需配置路由，请使用 `fa-route-generator` 技能；如需 API 模块，请使用 `fa-crud-page-generator` 或手动创建。
 
 ---
 
@@ -80,9 +80,10 @@ description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee
 - `{cname}` → 模块中文名
 - `{componentName}` → PascalCase 组件名
 - `{zodSchema}` → zod 字段定义（每个必填字段对应一行 zod 规则）
-- `{initialValues}` → 字段初始值（string 默认 `''`，boolean 默认 `false`，number 默认 `0`，array 默认 `[]`）
-- `{formItems}` → 各字段对应的 FormField 代码片段
+- `{initialValues}` → `model` 字段初始值（string 默认 `''`，boolean 默认 `false`，number 默认 `0`，array 默认 `[]`）
+- `{formItems}` → 各字段对应的 FaFormItem 代码片段
+- `{imports}` → 必要的额外 import；默认留空，Fa* 组件通常由自动导入处理
 - `{maxWidth}` → 单列 `max-w-600px` / 双列 `max-w-1200px`
-- `{gridClass}` → 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `space-y-6`
+- `{gridClass}` → 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `grid gap-6`
 
-生成的代码是骨架：API 调用处用 `// TODO:` 注释标记，动态数据源（select options、upload action 等）用占位注释标记，用户根据实际接口替换。操作栏按钮使用 `FaButton`：取消用 `variant="outline"`，提交用默认 variant 并传 `:loading="isSubmitting"`。
+生成的代码是骨架：API 调用处用 `// TODO:` 注释标记，动态数据源（select options、upload action 等）用占位注释标记，用户根据实际接口替换。表单对象必须使用 `const model = ref({...})`，模板中直接 `:model="model"`；脚本里读写字段使用 `model.value.xxx`。操作栏按钮使用 `FaButton`：取消用 `variant="outline"`，提交用默认 variant 并传 `:loading="loading"`。
diff --git a/.agents/skills/fa-form-builder/references/templates.md b/.agents/skills/fa-form-builder/references/templates.md
index 2bc3d242..7d1ef15c 100755
--- a/.agents/skills/fa-form-builder/references/templates.md
+++ b/.agents/skills/fa-form-builder/references/templates.md
@@ -1,16 +1,16 @@
 # 表单页面代码模板
 
-使用 vee-validate + zod 验证，全部使用 Fa* 内建组件，不引入任何 Element Plus 组件。
+使用 FaForm/FaFormItem + vee-validate + zod 验证。
 
 占位符说明：
 - `{cname}` — 模块中文名
 - `{componentName}` — 组件名（PascalCase）
 - `{zodSchema}` — zod 字段定义
-- `{initialValues}` — 表单初始值
-- `{formItems}` — FormField 列表
+- `{initialValues}` — `model` 表单初始值
+- `{formItems}` — FaFormItem 列表
 - `{imports}` — 需要手动 import 的组件
 - `{maxWidth}` — 单列 `max-w-600px` / 双列 `max-w-1200px`
-- `{gridClass}` — 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `space-y-6`
+- `{gridClass}` — 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `grid gap-6`
 
 ---
 
@@ -18,10 +18,10 @@
 
 ```vue
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
+import { ref } from 'vue'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/ui/shadcn/ui/form'
 {imports}
 
 defineOptions({
@@ -30,22 +30,30 @@ defineOptions({
 
 const router = useRouter()
 
-const formSchema = toTypedSchema(z.object({
+const formRef = useTemplateRef<FormExpose>('formRef')
+const loading = ref(false)
+
+const model = ref({
+  {initialValues}
+})
+
+const validationSchema = toTypedSchema(z.object({
   {zodSchema}
 }))
 
-const { handleSubmit, isSubmitting } = useForm({
-  validationSchema: formSchema,
-  initialValues: {
-    {initialValues}
-  },
-})
+async function onSubmit(values: typeof model.value) {
+  loading.value = true
+  try {
+    // TODO: 调用 API，如 apiXxx.create(values) 或 apiXxx.edit(values)
+  }
+  finally {
+    loading.value = false
+  }
+}
 
-const loading = ref(false)
-
-const onSubmit = handleSubmit(async (values) => {
-  // TODO: 调用 API，如 apiXxx.create(values) 或 apiXxx.edit(values)
-})
+async function submit() {
+  await formRef.value?.submit()
+}
 
 function handleCancel() {
   router.back()
@@ -57,16 +65,22 @@ function handleCancel() {
     <FaPageHeader title="{cname}" />
     <FaPageMain>
       <div v-loading="loading" class="mx-auto {maxWidth}">
-        <form class="{gridClass}" @submit="onSubmit">
+        <FaForm
+          ref="formRef"
+          :model="model"
+          :validation-schema="validationSchema"
+          class="{gridClass}"
+          @submit="onSubmit"
+        >
           {formItems}
-        </form>
+        </FaForm>
       </div>
     </FaPageMain>
     <FaFixedBar position="bottom" class="flex gap-2 justify-center">
       <FaButton type="button" variant="outline" @click="handleCancel">
         取消
       </FaButton>
-      <FaButton type="submit" :loading="isSubmitting" @click="onSubmit">
+      <FaButton type="button" :loading="loading" @click="submit">
         提交
       </FaButton>
     </FaFixedBar>
@@ -76,146 +90,92 @@ function handleCancel() {
 
 ---
 
-## 各字段类型的 FormField 片段
+## 各字段类型的 FaFormItem 片段
 
 ```vue
 <!-- FaInput（文本） -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaInput v-bind="componentField" placeholder="请输入{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput placeholder="请输入{label}" class="w-full" />
+</FaFormItem>
 
 <!-- FaInput（密码）+ FaPasswordStrength -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <div class="w-full space-y-2">
-        <FaInput v-bind="componentField" type="password" placeholder="请输入{label}" class="w-full" />
-        <FaPasswordStrength :model-value="componentField.modelValue" />
-      </div>
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="password" placeholder="请输入{label}" class="w-full" />
+  <template #description="{ value }">
+    <FaPasswordStrength :password="(value as string) ?? ''" />
+  </template>
+</FaFormItem>
 
 <!-- FaTextarea -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaTextarea v-bind="componentField" placeholder="请输入{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaTextarea placeholder="请输入{label}" class="w-full" />
+</FaFormItem>
 
 <!-- FaSelect -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaSelect v-bind="componentField" :options="{field}Options" placeholder="请选择{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaSelect :options="{field}Options" placeholder="请选择{label}" class="w-full" />
+</FaFormItem>
 <!-- script 中同时生成 options 占位：const {field}Options = ref([{ label: '选项1', value: 1 }]) -->
 
-<!-- FaSwitch（componentField 会传字符串，需手动绑定 boolean） -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaSwitch :model-value="value" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<!-- FaSwitch -->
+<FaFormItem name="{field}" label="{label}">
+  <FaSwitch />
+</FaFormItem>
 
 <!-- FaCheckbox（多选，手动维护数组） -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
+<FaFormItem name="{field}" label="{label}">
+  <template #default="{ value, setValue }">
     <div class="flex flex-wrap gap-4">
       <FaCheckbox
         v-for="opt in {field}Options"
         :key="opt.value"
-        :model-value="value?.includes(opt.value)"
-        @update:model-value="(checked) => handleChange(checked ? [...(value || []), opt.value] : (value || []).filter(v => v !== opt.value))"
+        :model-value="((value as string[] | undefined) ?? []).includes(opt.value)"
+        @update:model-value="(checked) => setValue(checked ? [...((value as string[] | undefined) ?? []), opt.value] : ((value as string[] | undefined) ?? []).filter(v => v !== opt.value))"
       >
         {{ opt.label }}
       </FaCheckbox>
     </div>
-    <FormMessage />
-  </FormItem>
-</FormField>
+  </template>
+</FaFormItem>
 <!-- script 中同时生成 options 占位：const {field}Options = [{ label: '选项1', value: '1' }] -->
 
-<!-- 日期（原生 input） -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <input v-bind="componentField" type="date" class="w-full h-9 rounded-md border border-input bg-background px-3 py-1 text-sm" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<!-- 日期 -->
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="date" class="w-full" />
+</FaFormItem>
+
+<!-- 日期时间 -->
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="datetime-local" class="w-full" />
+</FaFormItem>
 
 <!-- FaImageUpload -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaImageUpload :model-value="value" action="/upload/image" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaImageUpload action="/upload/image" />
+</FaFormItem>
 
 <!-- FaFileUpload -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaFileUpload :model-value="value" action="/upload/file" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaFileUpload action="/upload/file" />
+</FaFormItem>
 
 <!-- FaIconPicker -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaIconPicker v-bind="componentField" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}">
+  <FaIconPicker />
+</FaFormItem>
 
 <!-- FaNumberField -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaNumberField :model-value="value" class="w-full" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaNumberField class="w-full" />
+</FaFormItem>
 
 <!-- 双列布局中需要占满整行的字段，加 md:col-span-2 -->
-<!-- <FormField ... class="md:col-span-2"><FormItem class="md:col-span-2"> -->
+<!-- <FaFormItem name="{field}" label="{label}" class="md:col-span-2"> -->
 ```
 
+`FaFormItem` 会自动向第一个子控件注入 `modelValue` 和 `onUpdate:modelValue`，默认不要手写
+`v-model`。只有多选、组合控件等非单一控件场景，才使用 slot props 手动调用 `setValue`。
+
 ---
 
 ## zod 验证规则片段
@@ -251,16 +211,10 @@ function handleCancel() {
 
 ---
 
-## 需要手动 import 的组件
+## 组件导入说明
 
-以下组件不在自动导入范围内，使用时需在 script 顶部添加 import：
-
-```typescript
-import FaImageUpload from '@/ui/components/FaImageUpload/index.vue'
-import FaFileUpload from '@/ui/components/FaFileUpload/index.vue'
-import FaIconPicker from '@/ui/components/FaIconPicker/index.vue'
-import FaNumberField from '@/ui/components/FaNumberField/index.vue'
-```
+Fantastic-admin 应用默认通过组件解析器自动导入 `Fa*` 组件，通常不需要手动 import。
+只有目标应用未启用自动导入或组件解析器缺少对应组件时，才按该应用本地约定补充 import。
 
 ---
 
@@ -276,8 +230,8 @@ import FaNumberField from '@/ui/components/FaNumberField/index.vue'
 | 下拉、选择、类型、分类、状态（枚举值） | `FaSelect` | 生成 options 数组占位 |
 | 开关、启用、禁用、是否、boolean | `FaSwitch` | |
 | 复选、多选 | `FaCheckbox`（多个） | 每个选项一个 FaCheckbox，手动维护数组 |
-| 日期 | 原生 `<input type="date">` | 暂无 Fa 内建日期选择器 |
-| 日期时间 | 原生 `<input type="datetime-local">` | |
+| 日期 | `FaInput type="date"` | |
+| 日期时间 | `FaInput type="datetime-local"` | |
 | 图片、头像、封面、缩略图 | `FaImageUpload` | |
 | 文件、附件 | `FaFileUpload` | |
 | 图标 | `FaIconPicker` | |
diff --git a/apps/core-ant-design-vue/src/components/AppAccountForm/edit-password.vue b/apps/core-ant-design-vue/src/components/AppAccountForm/edit-password.vue
index 7aff2400..07685377 100755
--- a/apps/core-ant-design-vue/src/components/AppAccountForm/edit-password.vue
+++ b/apps/core-ant-design-vue/src/components/AppAccountForm/edit-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'EditPasswordForm',
@@ -12,24 +10,30 @@ const appAccountStore = useAppAccountStore()
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      password: z.string().min(1, '请输入原密码'),
-      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请确认新密码'),
-    }).refine(data => data.newPassword === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    password: '',
-    newPassword: '',
-    checkPassword: '',
-  },
+interface EditPasswordModel {
+  password: string
+  newPassword: string
+  checkPassword: string
+}
+
+const model = ref<EditPasswordModel>({
+  password: '',
+  newPassword: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    password: z.string().min(1, '请输入原密码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请确认新密码'),
+  }).refine(data => data.newPassword === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: EditPasswordModel) {
   loading.value = true
   appAccountStore.editPassword(values).then(async () => {
     useFaToast().success('模拟修改成功，请重新登录')
@@ -37,7 +41,7 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 </script>
 
 <template>
@@ -50,52 +54,31 @@ const onSubmit = form.handleSubmit((values) => {
         请输入原密码、新密码和确认密码
       </p>
     </div>
-    <form @submit="onSubmit">
-      <FormField v-slot="{ componentField, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="原密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="原密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
         保存
       </FaButton>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-ant-design-vue/src/components/AppAccountForm/login.vue b/apps/core-ant-design-vue/src/components/AppAccountForm/login.vue
index 191b61d9..4a307afd 100755
--- a/apps/core-ant-design-vue/src/components/AppAccountForm/login.vue
+++ b/apps/core-ant-design-vue/src/components/AppAccountForm/login.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'LoginForm',
@@ -26,19 +25,27 @@ const loading = ref(false)
 // 登录方式，default 账号密码登录，qrcode 扫码登录
 const type = ref<'default' | 'qrcode'>('default')
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    password: z.string().min(1, '请输入密码'),
-    remember: z.boolean(),
-  })),
-  initialValues: {
-    account: props.account ?? localStorage.getItem('login_account') ?? '',
-    password: '',
-    remember: localStorage.getItem('login_account') !== null,
-  },
+interface LoginModel {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const formRef = useTemplateRef<FormExpose<LoginModel>>('formRef')
+
+const model = ref<LoginModel>({
+  account: props.account ?? localStorage.getItem('login_account') ?? '',
+  password: '',
+  remember: localStorage.getItem('login_account') !== null,
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+  remember: z.boolean(),
+}))
+
+function onSubmit(values: LoginModel) {
   loading.value = true
   appAccountStore.login(values).then(() => {
     if (values.remember) {
@@ -51,12 +58,12 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 
-function testAccount(account: string) {
-  form.setFieldValue('account', account)
-  form.setFieldValue('password', '123456')
-  onSubmit()
+async function testAccount(account: string) {
+  model.value.account = account
+  model.value.password = '123456'
+  await formRef.value?.submit()
 }
 </script>
 
@@ -79,48 +86,33 @@ function testAccount(account: string) {
       />
     </div>
     <div v-show="type === 'default'">
-      <form @submit="onSubmit">
-        <FormField v-slot="{ componentField, errors }" name="account">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:user" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField, errors }" name="password">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:lock" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <div class="mb-4 flex-center-between">
-          <div class="flex-center-start">
-            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
-              <FormItem>
-                <FormControl>
-                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
-                    记住我
-                  </FaCheckbox>
-                </FormControl>
-              </FormItem>
-            </FormField>
-          </div>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', form.values.account)">
+      <FaForm
+        ref="formRef"
+        :model="model"
+        :validation-schema="validationSchema"
+        @submit="onSubmit"
+      >
+        <FaFormItem name="account">
+          <FaInput type="text" placeholder="用户名" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:user" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <FaFormItem name="password">
+          <FaInput type="password" placeholder="密码" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:lock" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <div class="flex-start-between">
+          <FaFormItem name="remember" class="min-w-0">
+            <FaCheckbox>
+              记住我
+            </FaCheckbox>
+          </FaFormItem>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', model.account)">
             忘记密码了?
           </FaButton>
         </div>
@@ -129,11 +121,11 @@ function testAccount(account: string) {
         </FaButton>
         <div class="text-sm mt-4 flex-center gap-2">
           <span class="text-secondary-foreground op-50">还没有帐号?</span>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', form.values.account)">
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', model.account)">
             注册新帐号
           </FaButton>
         </div>
-      </form>
+      </FaForm>
       <div class="mt-4 text-center -mb-4">
         <FaDivider>演示账号一键登录</FaDivider>
         <div class="space-x-2">
diff --git a/apps/core-ant-design-vue/src/components/AppAccountForm/register.vue b/apps/core-ant-design-vue/src/components/AppAccountForm/register.vue
index e6f8fc09..66c84a21 100755
--- a/apps/core-ant-design-vue/src/components/AppAccountForm/register.vue
+++ b/apps/core-ant-design-vue/src/components/AppAccountForm/register.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'RegisterForm',
@@ -19,32 +17,38 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      account: z.string().min(1, '请输入用户名'),
-      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请再次输入密码'),
-    }).refine(data => data.password === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    account: props.account ?? '',
-    password: '',
-    checkPassword: '',
-  },
+interface RegisterModel {
+  account: string
+  password: string
+  checkPassword: string
+}
+
+const model = ref<RegisterModel>({
+  account: props.account ?? '',
+  password: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请再次输入密码'),
+  }).refine(data => data.password === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: RegisterModel) {
   loading.value = true
   emits('onRegister', values.account)
-})
+}
 </script>
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           探索从这里开始 🚀
@@ -53,60 +57,37 @@ const onSubmit = form.handleSubmit((values) => {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, value, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <FormDescription class="m-0">
-            <FaPasswordStrength :password="value" />
-          </FormDescription>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+        <FaPasswordStrength :password="model.password" />
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         注册
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
         <span class="text-secondary-foreground op-50">已经有帐号?</span>
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-ant-design-vue/src/components/AppAccountForm/reset-password.vue b/apps/core-ant-design-vue/src/components/AppAccountForm/reset-password.vue
index 7faa6321..2a2e06aa 100755
--- a/apps/core-ant-design-vue/src/components/AppAccountForm/reset-password.vue
+++ b/apps/core-ant-design-vue/src/components/AppAccountForm/reset-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'ResetPasswordForm',
@@ -19,22 +17,28 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    captcha: z.string().min(6, '请输入验证码'),
-    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-  })),
-  initialValues: {
-    account: props.account ?? '',
-    captcha: '',
-    newPassword: '',
-  },
+interface ResetPasswordModel {
+  account: string
+  captcha: string
+  newPassword: string
+}
+
+const model = ref<ResetPasswordModel>({
+  account: props.account ?? '',
+  captcha: '',
+  newPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  captcha: z.string().min(6, '请输入验证码'),
+  newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+}))
+
+function onSubmit(values: ResetPasswordModel) {
   loading.value = true
   emits('onResetPassword', values.account)
-})
+}
 
 const countdown = ref(0)
 const countdownInterval = ref(Number.NaN)
@@ -51,7 +55,7 @@ function handleSendCaptcha() {
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           忘记密码了? 🔒
@@ -60,57 +64,41 @@ function handleSendCaptcha() {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <div class="flex-start-between gap-2">
-        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInputOTP :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FaButton variant="outline" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
-          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
-        </FaButton>
-      </div>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="captcha" :auto-bind="false">
+        <div class="flex-start-between gap-2">
+          <FaInputOTP
+            v-model="model.captcha"
+            name="captcha"
+            :length="6"
+            class="border-destructive"
+          />
+          <FaButton variant="outline" type="button" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
+            {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         确认
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-antdv-next/src/components/AppAccountForm/edit-password.vue b/apps/core-antdv-next/src/components/AppAccountForm/edit-password.vue
index 7aff2400..07685377 100755
--- a/apps/core-antdv-next/src/components/AppAccountForm/edit-password.vue
+++ b/apps/core-antdv-next/src/components/AppAccountForm/edit-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'EditPasswordForm',
@@ -12,24 +10,30 @@ const appAccountStore = useAppAccountStore()
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      password: z.string().min(1, '请输入原密码'),
-      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请确认新密码'),
-    }).refine(data => data.newPassword === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    password: '',
-    newPassword: '',
-    checkPassword: '',
-  },
+interface EditPasswordModel {
+  password: string
+  newPassword: string
+  checkPassword: string
+}
+
+const model = ref<EditPasswordModel>({
+  password: '',
+  newPassword: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    password: z.string().min(1, '请输入原密码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请确认新密码'),
+  }).refine(data => data.newPassword === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: EditPasswordModel) {
   loading.value = true
   appAccountStore.editPassword(values).then(async () => {
     useFaToast().success('模拟修改成功，请重新登录')
@@ -37,7 +41,7 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 </script>
 
 <template>
@@ -50,52 +54,31 @@ const onSubmit = form.handleSubmit((values) => {
         请输入原密码、新密码和确认密码
       </p>
     </div>
-    <form @submit="onSubmit">
-      <FormField v-slot="{ componentField, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="原密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="原密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
         保存
       </FaButton>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-antdv-next/src/components/AppAccountForm/login.vue b/apps/core-antdv-next/src/components/AppAccountForm/login.vue
index 191b61d9..4a307afd 100755
--- a/apps/core-antdv-next/src/components/AppAccountForm/login.vue
+++ b/apps/core-antdv-next/src/components/AppAccountForm/login.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'LoginForm',
@@ -26,19 +25,27 @@ const loading = ref(false)
 // 登录方式，default 账号密码登录，qrcode 扫码登录
 const type = ref<'default' | 'qrcode'>('default')
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    password: z.string().min(1, '请输入密码'),
-    remember: z.boolean(),
-  })),
-  initialValues: {
-    account: props.account ?? localStorage.getItem('login_account') ?? '',
-    password: '',
-    remember: localStorage.getItem('login_account') !== null,
-  },
+interface LoginModel {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const formRef = useTemplateRef<FormExpose<LoginModel>>('formRef')
+
+const model = ref<LoginModel>({
+  account: props.account ?? localStorage.getItem('login_account') ?? '',
+  password: '',
+  remember: localStorage.getItem('login_account') !== null,
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+  remember: z.boolean(),
+}))
+
+function onSubmit(values: LoginModel) {
   loading.value = true
   appAccountStore.login(values).then(() => {
     if (values.remember) {
@@ -51,12 +58,12 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 
-function testAccount(account: string) {
-  form.setFieldValue('account', account)
-  form.setFieldValue('password', '123456')
-  onSubmit()
+async function testAccount(account: string) {
+  model.value.account = account
+  model.value.password = '123456'
+  await formRef.value?.submit()
 }
 </script>
 
@@ -79,48 +86,33 @@ function testAccount(account: string) {
       />
     </div>
     <div v-show="type === 'default'">
-      <form @submit="onSubmit">
-        <FormField v-slot="{ componentField, errors }" name="account">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:user" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField, errors }" name="password">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:lock" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <div class="mb-4 flex-center-between">
-          <div class="flex-center-start">
-            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
-              <FormItem>
-                <FormControl>
-                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
-                    记住我
-                  </FaCheckbox>
-                </FormControl>
-              </FormItem>
-            </FormField>
-          </div>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', form.values.account)">
+      <FaForm
+        ref="formRef"
+        :model="model"
+        :validation-schema="validationSchema"
+        @submit="onSubmit"
+      >
+        <FaFormItem name="account">
+          <FaInput type="text" placeholder="用户名" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:user" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <FaFormItem name="password">
+          <FaInput type="password" placeholder="密码" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:lock" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <div class="flex-start-between">
+          <FaFormItem name="remember" class="min-w-0">
+            <FaCheckbox>
+              记住我
+            </FaCheckbox>
+          </FaFormItem>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', model.account)">
             忘记密码了?
           </FaButton>
         </div>
@@ -129,11 +121,11 @@ function testAccount(account: string) {
         </FaButton>
         <div class="text-sm mt-4 flex-center gap-2">
           <span class="text-secondary-foreground op-50">还没有帐号?</span>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', form.values.account)">
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', model.account)">
             注册新帐号
           </FaButton>
         </div>
-      </form>
+      </FaForm>
       <div class="mt-4 text-center -mb-4">
         <FaDivider>演示账号一键登录</FaDivider>
         <div class="space-x-2">
diff --git a/apps/core-antdv-next/src/components/AppAccountForm/register.vue b/apps/core-antdv-next/src/components/AppAccountForm/register.vue
index e6f8fc09..66c84a21 100755
--- a/apps/core-antdv-next/src/components/AppAccountForm/register.vue
+++ b/apps/core-antdv-next/src/components/AppAccountForm/register.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'RegisterForm',
@@ -19,32 +17,38 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      account: z.string().min(1, '请输入用户名'),
-      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请再次输入密码'),
-    }).refine(data => data.password === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    account: props.account ?? '',
-    password: '',
-    checkPassword: '',
-  },
+interface RegisterModel {
+  account: string
+  password: string
+  checkPassword: string
+}
+
+const model = ref<RegisterModel>({
+  account: props.account ?? '',
+  password: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请再次输入密码'),
+  }).refine(data => data.password === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: RegisterModel) {
   loading.value = true
   emits('onRegister', values.account)
-})
+}
 </script>
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           探索从这里开始 🚀
@@ -53,60 +57,37 @@ const onSubmit = form.handleSubmit((values) => {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, value, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <FormDescription class="m-0">
-            <FaPasswordStrength :password="value" />
-          </FormDescription>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+        <FaPasswordStrength :password="model.password" />
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         注册
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
         <span class="text-secondary-foreground op-50">已经有帐号?</span>
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-antdv-next/src/components/AppAccountForm/reset-password.vue b/apps/core-antdv-next/src/components/AppAccountForm/reset-password.vue
index 7faa6321..2a2e06aa 100755
--- a/apps/core-antdv-next/src/components/AppAccountForm/reset-password.vue
+++ b/apps/core-antdv-next/src/components/AppAccountForm/reset-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'ResetPasswordForm',
@@ -19,22 +17,28 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    captcha: z.string().min(6, '请输入验证码'),
-    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-  })),
-  initialValues: {
-    account: props.account ?? '',
-    captcha: '',
-    newPassword: '',
-  },
+interface ResetPasswordModel {
+  account: string
+  captcha: string
+  newPassword: string
+}
+
+const model = ref<ResetPasswordModel>({
+  account: props.account ?? '',
+  captcha: '',
+  newPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  captcha: z.string().min(6, '请输入验证码'),
+  newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+}))
+
+function onSubmit(values: ResetPasswordModel) {
   loading.value = true
   emits('onResetPassword', values.account)
-})
+}
 
 const countdown = ref(0)
 const countdownInterval = ref(Number.NaN)
@@ -51,7 +55,7 @@ function handleSendCaptcha() {
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           忘记密码了? 🔒
@@ -60,57 +64,41 @@ function handleSendCaptcha() {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <div class="flex-start-between gap-2">
-        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInputOTP :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FaButton variant="outline" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
-          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
-        </FaButton>
-      </div>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="captcha" :auto-bind="false">
+        <div class="flex-start-between gap-2">
+          <FaInputOTP
+            v-model="model.captcha"
+            name="captcha"
+            :length="6"
+            class="border-destructive"
+          />
+          <FaButton variant="outline" type="button" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
+            {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         确认
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-arco-design-vue/src/components/AppAccountForm/edit-password.vue b/apps/core-arco-design-vue/src/components/AppAccountForm/edit-password.vue
index 7aff2400..07685377 100755
--- a/apps/core-arco-design-vue/src/components/AppAccountForm/edit-password.vue
+++ b/apps/core-arco-design-vue/src/components/AppAccountForm/edit-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'EditPasswordForm',
@@ -12,24 +10,30 @@ const appAccountStore = useAppAccountStore()
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      password: z.string().min(1, '请输入原密码'),
-      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请确认新密码'),
-    }).refine(data => data.newPassword === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    password: '',
-    newPassword: '',
-    checkPassword: '',
-  },
+interface EditPasswordModel {
+  password: string
+  newPassword: string
+  checkPassword: string
+}
+
+const model = ref<EditPasswordModel>({
+  password: '',
+  newPassword: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    password: z.string().min(1, '请输入原密码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请确认新密码'),
+  }).refine(data => data.newPassword === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: EditPasswordModel) {
   loading.value = true
   appAccountStore.editPassword(values).then(async () => {
     useFaToast().success('模拟修改成功，请重新登录')
@@ -37,7 +41,7 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 </script>
 
 <template>
@@ -50,52 +54,31 @@ const onSubmit = form.handleSubmit((values) => {
         请输入原密码、新密码和确认密码
       </p>
     </div>
-    <form @submit="onSubmit">
-      <FormField v-slot="{ componentField, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="原密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="原密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
         保存
       </FaButton>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-arco-design-vue/src/components/AppAccountForm/login.vue b/apps/core-arco-design-vue/src/components/AppAccountForm/login.vue
index 191b61d9..4a307afd 100755
--- a/apps/core-arco-design-vue/src/components/AppAccountForm/login.vue
+++ b/apps/core-arco-design-vue/src/components/AppAccountForm/login.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'LoginForm',
@@ -26,19 +25,27 @@ const loading = ref(false)
 // 登录方式，default 账号密码登录，qrcode 扫码登录
 const type = ref<'default' | 'qrcode'>('default')
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    password: z.string().min(1, '请输入密码'),
-    remember: z.boolean(),
-  })),
-  initialValues: {
-    account: props.account ?? localStorage.getItem('login_account') ?? '',
-    password: '',
-    remember: localStorage.getItem('login_account') !== null,
-  },
+interface LoginModel {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const formRef = useTemplateRef<FormExpose<LoginModel>>('formRef')
+
+const model = ref<LoginModel>({
+  account: props.account ?? localStorage.getItem('login_account') ?? '',
+  password: '',
+  remember: localStorage.getItem('login_account') !== null,
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+  remember: z.boolean(),
+}))
+
+function onSubmit(values: LoginModel) {
   loading.value = true
   appAccountStore.login(values).then(() => {
     if (values.remember) {
@@ -51,12 +58,12 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 
-function testAccount(account: string) {
-  form.setFieldValue('account', account)
-  form.setFieldValue('password', '123456')
-  onSubmit()
+async function testAccount(account: string) {
+  model.value.account = account
+  model.value.password = '123456'
+  await formRef.value?.submit()
 }
 </script>
 
@@ -79,48 +86,33 @@ function testAccount(account: string) {
       />
     </div>
     <div v-show="type === 'default'">
-      <form @submit="onSubmit">
-        <FormField v-slot="{ componentField, errors }" name="account">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:user" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField, errors }" name="password">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:lock" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <div class="mb-4 flex-center-between">
-          <div class="flex-center-start">
-            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
-              <FormItem>
-                <FormControl>
-                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
-                    记住我
-                  </FaCheckbox>
-                </FormControl>
-              </FormItem>
-            </FormField>
-          </div>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', form.values.account)">
+      <FaForm
+        ref="formRef"
+        :model="model"
+        :validation-schema="validationSchema"
+        @submit="onSubmit"
+      >
+        <FaFormItem name="account">
+          <FaInput type="text" placeholder="用户名" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:user" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <FaFormItem name="password">
+          <FaInput type="password" placeholder="密码" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:lock" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <div class="flex-start-between">
+          <FaFormItem name="remember" class="min-w-0">
+            <FaCheckbox>
+              记住我
+            </FaCheckbox>
+          </FaFormItem>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', model.account)">
             忘记密码了?
           </FaButton>
         </div>
@@ -129,11 +121,11 @@ function testAccount(account: string) {
         </FaButton>
         <div class="text-sm mt-4 flex-center gap-2">
           <span class="text-secondary-foreground op-50">还没有帐号?</span>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', form.values.account)">
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', model.account)">
             注册新帐号
           </FaButton>
         </div>
-      </form>
+      </FaForm>
       <div class="mt-4 text-center -mb-4">
         <FaDivider>演示账号一键登录</FaDivider>
         <div class="space-x-2">
diff --git a/apps/core-arco-design-vue/src/components/AppAccountForm/register.vue b/apps/core-arco-design-vue/src/components/AppAccountForm/register.vue
index e6f8fc09..66c84a21 100755
--- a/apps/core-arco-design-vue/src/components/AppAccountForm/register.vue
+++ b/apps/core-arco-design-vue/src/components/AppAccountForm/register.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'RegisterForm',
@@ -19,32 +17,38 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      account: z.string().min(1, '请输入用户名'),
-      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请再次输入密码'),
-    }).refine(data => data.password === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    account: props.account ?? '',
-    password: '',
-    checkPassword: '',
-  },
+interface RegisterModel {
+  account: string
+  password: string
+  checkPassword: string
+}
+
+const model = ref<RegisterModel>({
+  account: props.account ?? '',
+  password: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请再次输入密码'),
+  }).refine(data => data.password === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: RegisterModel) {
   loading.value = true
   emits('onRegister', values.account)
-})
+}
 </script>
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           探索从这里开始 🚀
@@ -53,60 +57,37 @@ const onSubmit = form.handleSubmit((values) => {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, value, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <FormDescription class="m-0">
-            <FaPasswordStrength :password="value" />
-          </FormDescription>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+        <FaPasswordStrength :password="model.password" />
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         注册
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
         <span class="text-secondary-foreground op-50">已经有帐号?</span>
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-arco-design-vue/src/components/AppAccountForm/reset-password.vue b/apps/core-arco-design-vue/src/components/AppAccountForm/reset-password.vue
index 7faa6321..2a2e06aa 100755
--- a/apps/core-arco-design-vue/src/components/AppAccountForm/reset-password.vue
+++ b/apps/core-arco-design-vue/src/components/AppAccountForm/reset-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'ResetPasswordForm',
@@ -19,22 +17,28 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    captcha: z.string().min(6, '请输入验证码'),
-    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-  })),
-  initialValues: {
-    account: props.account ?? '',
-    captcha: '',
-    newPassword: '',
-  },
+interface ResetPasswordModel {
+  account: string
+  captcha: string
+  newPassword: string
+}
+
+const model = ref<ResetPasswordModel>({
+  account: props.account ?? '',
+  captcha: '',
+  newPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  captcha: z.string().min(6, '请输入验证码'),
+  newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+}))
+
+function onSubmit(values: ResetPasswordModel) {
   loading.value = true
   emits('onResetPassword', values.account)
-})
+}
 
 const countdown = ref(0)
 const countdownInterval = ref(Number.NaN)
@@ -51,7 +55,7 @@ function handleSendCaptcha() {
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           忘记密码了? 🔒
@@ -60,57 +64,41 @@ function handleSendCaptcha() {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <div class="flex-start-between gap-2">
-        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInputOTP :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FaButton variant="outline" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
-          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
-        </FaButton>
-      </div>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="captcha" :auto-bind="false">
+        <div class="flex-start-between gap-2">
+          <FaInputOTP
+            v-model="model.captcha"
+            name="captcha"
+            :length="6"
+            class="border-destructive"
+          />
+          <FaButton variant="outline" type="button" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
+            {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         确认
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-naive-ui/src/components/AppAccountForm/edit-password.vue b/apps/core-naive-ui/src/components/AppAccountForm/edit-password.vue
index 7aff2400..07685377 100755
--- a/apps/core-naive-ui/src/components/AppAccountForm/edit-password.vue
+++ b/apps/core-naive-ui/src/components/AppAccountForm/edit-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'EditPasswordForm',
@@ -12,24 +10,30 @@ const appAccountStore = useAppAccountStore()
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      password: z.string().min(1, '请输入原密码'),
-      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请确认新密码'),
-    }).refine(data => data.newPassword === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    password: '',
-    newPassword: '',
-    checkPassword: '',
-  },
+interface EditPasswordModel {
+  password: string
+  newPassword: string
+  checkPassword: string
+}
+
+const model = ref<EditPasswordModel>({
+  password: '',
+  newPassword: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    password: z.string().min(1, '请输入原密码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请确认新密码'),
+  }).refine(data => data.newPassword === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: EditPasswordModel) {
   loading.value = true
   appAccountStore.editPassword(values).then(async () => {
     useFaToast().success('模拟修改成功，请重新登录')
@@ -37,7 +41,7 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 </script>
 
 <template>
@@ -50,52 +54,31 @@ const onSubmit = form.handleSubmit((values) => {
         请输入原密码、新密码和确认密码
       </p>
     </div>
-    <form @submit="onSubmit">
-      <FormField v-slot="{ componentField, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="原密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="原密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
         保存
       </FaButton>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-naive-ui/src/components/AppAccountForm/login.vue b/apps/core-naive-ui/src/components/AppAccountForm/login.vue
index 191b61d9..4a307afd 100755
--- a/apps/core-naive-ui/src/components/AppAccountForm/login.vue
+++ b/apps/core-naive-ui/src/components/AppAccountForm/login.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'LoginForm',
@@ -26,19 +25,27 @@ const loading = ref(false)
 // 登录方式，default 账号密码登录，qrcode 扫码登录
 const type = ref<'default' | 'qrcode'>('default')
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    password: z.string().min(1, '请输入密码'),
-    remember: z.boolean(),
-  })),
-  initialValues: {
-    account: props.account ?? localStorage.getItem('login_account') ?? '',
-    password: '',
-    remember: localStorage.getItem('login_account') !== null,
-  },
+interface LoginModel {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const formRef = useTemplateRef<FormExpose<LoginModel>>('formRef')
+
+const model = ref<LoginModel>({
+  account: props.account ?? localStorage.getItem('login_account') ?? '',
+  password: '',
+  remember: localStorage.getItem('login_account') !== null,
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+  remember: z.boolean(),
+}))
+
+function onSubmit(values: LoginModel) {
   loading.value = true
   appAccountStore.login(values).then(() => {
     if (values.remember) {
@@ -51,12 +58,12 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 
-function testAccount(account: string) {
-  form.setFieldValue('account', account)
-  form.setFieldValue('password', '123456')
-  onSubmit()
+async function testAccount(account: string) {
+  model.value.account = account
+  model.value.password = '123456'
+  await formRef.value?.submit()
 }
 </script>
 
@@ -79,48 +86,33 @@ function testAccount(account: string) {
       />
     </div>
     <div v-show="type === 'default'">
-      <form @submit="onSubmit">
-        <FormField v-slot="{ componentField, errors }" name="account">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:user" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField, errors }" name="password">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:lock" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <div class="mb-4 flex-center-between">
-          <div class="flex-center-start">
-            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
-              <FormItem>
-                <FormControl>
-                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
-                    记住我
-                  </FaCheckbox>
-                </FormControl>
-              </FormItem>
-            </FormField>
-          </div>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', form.values.account)">
+      <FaForm
+        ref="formRef"
+        :model="model"
+        :validation-schema="validationSchema"
+        @submit="onSubmit"
+      >
+        <FaFormItem name="account">
+          <FaInput type="text" placeholder="用户名" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:user" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <FaFormItem name="password">
+          <FaInput type="password" placeholder="密码" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:lock" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <div class="flex-start-between">
+          <FaFormItem name="remember" class="min-w-0">
+            <FaCheckbox>
+              记住我
+            </FaCheckbox>
+          </FaFormItem>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', model.account)">
             忘记密码了?
           </FaButton>
         </div>
@@ -129,11 +121,11 @@ function testAccount(account: string) {
         </FaButton>
         <div class="text-sm mt-4 flex-center gap-2">
           <span class="text-secondary-foreground op-50">还没有帐号?</span>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', form.values.account)">
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', model.account)">
             注册新帐号
           </FaButton>
         </div>
-      </form>
+      </FaForm>
       <div class="mt-4 text-center -mb-4">
         <FaDivider>演示账号一键登录</FaDivider>
         <div class="space-x-2">
diff --git a/apps/core-naive-ui/src/components/AppAccountForm/register.vue b/apps/core-naive-ui/src/components/AppAccountForm/register.vue
index e6f8fc09..66c84a21 100755
--- a/apps/core-naive-ui/src/components/AppAccountForm/register.vue
+++ b/apps/core-naive-ui/src/components/AppAccountForm/register.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'RegisterForm',
@@ -19,32 +17,38 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      account: z.string().min(1, '请输入用户名'),
-      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请再次输入密码'),
-    }).refine(data => data.password === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    account: props.account ?? '',
-    password: '',
-    checkPassword: '',
-  },
+interface RegisterModel {
+  account: string
+  password: string
+  checkPassword: string
+}
+
+const model = ref<RegisterModel>({
+  account: props.account ?? '',
+  password: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请再次输入密码'),
+  }).refine(data => data.password === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: RegisterModel) {
   loading.value = true
   emits('onRegister', values.account)
-})
+}
 </script>
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           探索从这里开始 🚀
@@ -53,60 +57,37 @@ const onSubmit = form.handleSubmit((values) => {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, value, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <FormDescription class="m-0">
-            <FaPasswordStrength :password="value" />
-          </FormDescription>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+        <FaPasswordStrength :password="model.password" />
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         注册
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
         <span class="text-secondary-foreground op-50">已经有帐号?</span>
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-naive-ui/src/components/AppAccountForm/reset-password.vue b/apps/core-naive-ui/src/components/AppAccountForm/reset-password.vue
index 7faa6321..2a2e06aa 100755
--- a/apps/core-naive-ui/src/components/AppAccountForm/reset-password.vue
+++ b/apps/core-naive-ui/src/components/AppAccountForm/reset-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'ResetPasswordForm',
@@ -19,22 +17,28 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    captcha: z.string().min(6, '请输入验证码'),
-    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-  })),
-  initialValues: {
-    account: props.account ?? '',
-    captcha: '',
-    newPassword: '',
-  },
+interface ResetPasswordModel {
+  account: string
+  captcha: string
+  newPassword: string
+}
+
+const model = ref<ResetPasswordModel>({
+  account: props.account ?? '',
+  captcha: '',
+  newPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  captcha: z.string().min(6, '请输入验证码'),
+  newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+}))
+
+function onSubmit(values: ResetPasswordModel) {
   loading.value = true
   emits('onResetPassword', values.account)
-})
+}
 
 const countdown = ref(0)
 const countdownInterval = ref(Number.NaN)
@@ -51,7 +55,7 @@ function handleSendCaptcha() {
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           忘记密码了? 🔒
@@ -60,57 +64,41 @@ function handleSendCaptcha() {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <div class="flex-start-between gap-2">
-        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInputOTP :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FaButton variant="outline" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
-          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
-        </FaButton>
-      </div>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="captcha" :auto-bind="false">
+        <div class="flex-start-between gap-2">
+          <FaInputOTP
+            v-model="model.captcha"
+            name="captcha"
+            :length="6"
+            class="border-destructive"
+          />
+          <FaButton variant="outline" type="button" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
+            {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         确认
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-tdesign/src/components/AppAccountForm/edit-password.vue b/apps/core-tdesign/src/components/AppAccountForm/edit-password.vue
index 7aff2400..07685377 100755
--- a/apps/core-tdesign/src/components/AppAccountForm/edit-password.vue
+++ b/apps/core-tdesign/src/components/AppAccountForm/edit-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'EditPasswordForm',
@@ -12,24 +10,30 @@ const appAccountStore = useAppAccountStore()
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      password: z.string().min(1, '请输入原密码'),
-      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请确认新密码'),
-    }).refine(data => data.newPassword === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    password: '',
-    newPassword: '',
-    checkPassword: '',
-  },
+interface EditPasswordModel {
+  password: string
+  newPassword: string
+  checkPassword: string
+}
+
+const model = ref<EditPasswordModel>({
+  password: '',
+  newPassword: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    password: z.string().min(1, '请输入原密码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请确认新密码'),
+  }).refine(data => data.newPassword === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: EditPasswordModel) {
   loading.value = true
   appAccountStore.editPassword(values).then(async () => {
     useFaToast().success('模拟修改成功，请重新登录')
@@ -37,7 +41,7 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 </script>
 
 <template>
@@ -50,52 +54,31 @@ const onSubmit = form.handleSubmit((values) => {
         请输入原密码、新密码和确认密码
       </p>
     </div>
-    <form @submit="onSubmit">
-      <FormField v-slot="{ componentField, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="原密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="原密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
         保存
       </FaButton>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-tdesign/src/components/AppAccountForm/login.vue b/apps/core-tdesign/src/components/AppAccountForm/login.vue
index 191b61d9..4a307afd 100755
--- a/apps/core-tdesign/src/components/AppAccountForm/login.vue
+++ b/apps/core-tdesign/src/components/AppAccountForm/login.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'LoginForm',
@@ -26,19 +25,27 @@ const loading = ref(false)
 // 登录方式，default 账号密码登录，qrcode 扫码登录
 const type = ref<'default' | 'qrcode'>('default')
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    password: z.string().min(1, '请输入密码'),
-    remember: z.boolean(),
-  })),
-  initialValues: {
-    account: props.account ?? localStorage.getItem('login_account') ?? '',
-    password: '',
-    remember: localStorage.getItem('login_account') !== null,
-  },
+interface LoginModel {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const formRef = useTemplateRef<FormExpose<LoginModel>>('formRef')
+
+const model = ref<LoginModel>({
+  account: props.account ?? localStorage.getItem('login_account') ?? '',
+  password: '',
+  remember: localStorage.getItem('login_account') !== null,
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+  remember: z.boolean(),
+}))
+
+function onSubmit(values: LoginModel) {
   loading.value = true
   appAccountStore.login(values).then(() => {
     if (values.remember) {
@@ -51,12 +58,12 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 
-function testAccount(account: string) {
-  form.setFieldValue('account', account)
-  form.setFieldValue('password', '123456')
-  onSubmit()
+async function testAccount(account: string) {
+  model.value.account = account
+  model.value.password = '123456'
+  await formRef.value?.submit()
 }
 </script>
 
@@ -79,48 +86,33 @@ function testAccount(account: string) {
       />
     </div>
     <div v-show="type === 'default'">
-      <form @submit="onSubmit">
-        <FormField v-slot="{ componentField, errors }" name="account">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:user" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField, errors }" name="password">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:lock" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <div class="mb-4 flex-center-between">
-          <div class="flex-center-start">
-            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
-              <FormItem>
-                <FormControl>
-                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
-                    记住我
-                  </FaCheckbox>
-                </FormControl>
-              </FormItem>
-            </FormField>
-          </div>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', form.values.account)">
+      <FaForm
+        ref="formRef"
+        :model="model"
+        :validation-schema="validationSchema"
+        @submit="onSubmit"
+      >
+        <FaFormItem name="account">
+          <FaInput type="text" placeholder="用户名" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:user" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <FaFormItem name="password">
+          <FaInput type="password" placeholder="密码" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:lock" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <div class="flex-start-between">
+          <FaFormItem name="remember" class="min-w-0">
+            <FaCheckbox>
+              记住我
+            </FaCheckbox>
+          </FaFormItem>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', model.account)">
             忘记密码了?
           </FaButton>
         </div>
@@ -129,11 +121,11 @@ function testAccount(account: string) {
         </FaButton>
         <div class="text-sm mt-4 flex-center gap-2">
           <span class="text-secondary-foreground op-50">还没有帐号?</span>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', form.values.account)">
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', model.account)">
             注册新帐号
           </FaButton>
         </div>
-      </form>
+      </FaForm>
       <div class="mt-4 text-center -mb-4">
         <FaDivider>演示账号一键登录</FaDivider>
         <div class="space-x-2">
diff --git a/apps/core-tdesign/src/components/AppAccountForm/register.vue b/apps/core-tdesign/src/components/AppAccountForm/register.vue
index e6f8fc09..66c84a21 100755
--- a/apps/core-tdesign/src/components/AppAccountForm/register.vue
+++ b/apps/core-tdesign/src/components/AppAccountForm/register.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'RegisterForm',
@@ -19,32 +17,38 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      account: z.string().min(1, '请输入用户名'),
-      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请再次输入密码'),
-    }).refine(data => data.password === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    account: props.account ?? '',
-    password: '',
-    checkPassword: '',
-  },
+interface RegisterModel {
+  account: string
+  password: string
+  checkPassword: string
+}
+
+const model = ref<RegisterModel>({
+  account: props.account ?? '',
+  password: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请再次输入密码'),
+  }).refine(data => data.password === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: RegisterModel) {
   loading.value = true
   emits('onRegister', values.account)
-})
+}
 </script>
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           探索从这里开始 🚀
@@ -53,60 +57,37 @@ const onSubmit = form.handleSubmit((values) => {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, value, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <FormDescription class="m-0">
-            <FaPasswordStrength :password="value" />
-          </FormDescription>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+        <FaPasswordStrength :password="model.password" />
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         注册
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
         <span class="text-secondary-foreground op-50">已经有帐号?</span>
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-tdesign/src/components/AppAccountForm/reset-password.vue b/apps/core-tdesign/src/components/AppAccountForm/reset-password.vue
index 7faa6321..2a2e06aa 100755
--- a/apps/core-tdesign/src/components/AppAccountForm/reset-password.vue
+++ b/apps/core-tdesign/src/components/AppAccountForm/reset-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'ResetPasswordForm',
@@ -19,22 +17,28 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    captcha: z.string().min(6, '请输入验证码'),
-    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-  })),
-  initialValues: {
-    account: props.account ?? '',
-    captcha: '',
-    newPassword: '',
-  },
+interface ResetPasswordModel {
+  account: string
+  captcha: string
+  newPassword: string
+}
+
+const model = ref<ResetPasswordModel>({
+  account: props.account ?? '',
+  captcha: '',
+  newPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  captcha: z.string().min(6, '请输入验证码'),
+  newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+}))
+
+function onSubmit(values: ResetPasswordModel) {
   loading.value = true
   emits('onResetPassword', values.account)
-})
+}
 
 const countdown = ref(0)
 const countdownInterval = ref(Number.NaN)
@@ -51,7 +55,7 @@ function handleSendCaptcha() {
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           忘记密码了? 🔒
@@ -60,57 +64,41 @@ function handleSendCaptcha() {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <div class="flex-start-between gap-2">
-        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInputOTP :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FaButton variant="outline" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
-          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
-        </FaButton>
-      </div>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="captcha" :auto-bind="false">
+        <div class="flex-start-between gap-2">
+          <FaInputOTP
+            v-model="model.captcha"
+            name="captcha"
+            :length="6"
+            class="border-destructive"
+          />
+          <FaButton variant="outline" type="button" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
+            {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         确认
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-vexip-ui/src/components/AppAccountForm/edit-password.vue b/apps/core-vexip-ui/src/components/AppAccountForm/edit-password.vue
index 7aff2400..07685377 100755
--- a/apps/core-vexip-ui/src/components/AppAccountForm/edit-password.vue
+++ b/apps/core-vexip-ui/src/components/AppAccountForm/edit-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'EditPasswordForm',
@@ -12,24 +10,30 @@ const appAccountStore = useAppAccountStore()
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      password: z.string().min(1, '请输入原密码'),
-      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请确认新密码'),
-    }).refine(data => data.newPassword === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    password: '',
-    newPassword: '',
-    checkPassword: '',
-  },
+interface EditPasswordModel {
+  password: string
+  newPassword: string
+  checkPassword: string
+}
+
+const model = ref<EditPasswordModel>({
+  password: '',
+  newPassword: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    password: z.string().min(1, '请输入原密码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请确认新密码'),
+  }).refine(data => data.newPassword === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: EditPasswordModel) {
   loading.value = true
   appAccountStore.editPassword(values).then(async () => {
     useFaToast().success('模拟修改成功，请重新登录')
@@ -37,7 +41,7 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 </script>
 
 <template>
@@ -50,52 +54,31 @@ const onSubmit = form.handleSubmit((values) => {
         请输入原密码、新密码和确认密码
       </p>
     </div>
-    <form @submit="onSubmit">
-      <FormField v-slot="{ componentField, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="原密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="原密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
         保存
       </FaButton>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-vexip-ui/src/components/AppAccountForm/login.vue b/apps/core-vexip-ui/src/components/AppAccountForm/login.vue
index 191b61d9..4a307afd 100755
--- a/apps/core-vexip-ui/src/components/AppAccountForm/login.vue
+++ b/apps/core-vexip-ui/src/components/AppAccountForm/login.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'LoginForm',
@@ -26,19 +25,27 @@ const loading = ref(false)
 // 登录方式，default 账号密码登录，qrcode 扫码登录
 const type = ref<'default' | 'qrcode'>('default')
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    password: z.string().min(1, '请输入密码'),
-    remember: z.boolean(),
-  })),
-  initialValues: {
-    account: props.account ?? localStorage.getItem('login_account') ?? '',
-    password: '',
-    remember: localStorage.getItem('login_account') !== null,
-  },
+interface LoginModel {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const formRef = useTemplateRef<FormExpose<LoginModel>>('formRef')
+
+const model = ref<LoginModel>({
+  account: props.account ?? localStorage.getItem('login_account') ?? '',
+  password: '',
+  remember: localStorage.getItem('login_account') !== null,
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+  remember: z.boolean(),
+}))
+
+function onSubmit(values: LoginModel) {
   loading.value = true
   appAccountStore.login(values).then(() => {
     if (values.remember) {
@@ -51,12 +58,12 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 
-function testAccount(account: string) {
-  form.setFieldValue('account', account)
-  form.setFieldValue('password', '123456')
-  onSubmit()
+async function testAccount(account: string) {
+  model.value.account = account
+  model.value.password = '123456'
+  await formRef.value?.submit()
 }
 </script>
 
@@ -79,48 +86,33 @@ function testAccount(account: string) {
       />
     </div>
     <div v-show="type === 'default'">
-      <form @submit="onSubmit">
-        <FormField v-slot="{ componentField, errors }" name="account">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:user" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField, errors }" name="password">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:lock" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <div class="mb-4 flex-center-between">
-          <div class="flex-center-start">
-            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
-              <FormItem>
-                <FormControl>
-                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
-                    记住我
-                  </FaCheckbox>
-                </FormControl>
-              </FormItem>
-            </FormField>
-          </div>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', form.values.account)">
+      <FaForm
+        ref="formRef"
+        :model="model"
+        :validation-schema="validationSchema"
+        @submit="onSubmit"
+      >
+        <FaFormItem name="account">
+          <FaInput type="text" placeholder="用户名" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:user" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <FaFormItem name="password">
+          <FaInput type="password" placeholder="密码" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:lock" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <div class="flex-start-between">
+          <FaFormItem name="remember" class="min-w-0">
+            <FaCheckbox>
+              记住我
+            </FaCheckbox>
+          </FaFormItem>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', model.account)">
             忘记密码了?
           </FaButton>
         </div>
@@ -129,11 +121,11 @@ function testAccount(account: string) {
         </FaButton>
         <div class="text-sm mt-4 flex-center gap-2">
           <span class="text-secondary-foreground op-50">还没有帐号?</span>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', form.values.account)">
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', model.account)">
             注册新帐号
           </FaButton>
         </div>
-      </form>
+      </FaForm>
       <div class="mt-4 text-center -mb-4">
         <FaDivider>演示账号一键登录</FaDivider>
         <div class="space-x-2">
diff --git a/apps/core-vexip-ui/src/components/AppAccountForm/register.vue b/apps/core-vexip-ui/src/components/AppAccountForm/register.vue
index e6f8fc09..66c84a21 100755
--- a/apps/core-vexip-ui/src/components/AppAccountForm/register.vue
+++ b/apps/core-vexip-ui/src/components/AppAccountForm/register.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'RegisterForm',
@@ -19,32 +17,38 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      account: z.string().min(1, '请输入用户名'),
-      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请再次输入密码'),
-    }).refine(data => data.password === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    account: props.account ?? '',
-    password: '',
-    checkPassword: '',
-  },
+interface RegisterModel {
+  account: string
+  password: string
+  checkPassword: string
+}
+
+const model = ref<RegisterModel>({
+  account: props.account ?? '',
+  password: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请再次输入密码'),
+  }).refine(data => data.password === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: RegisterModel) {
   loading.value = true
   emits('onRegister', values.account)
-})
+}
 </script>
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           探索从这里开始 🚀
@@ -53,60 +57,37 @@ const onSubmit = form.handleSubmit((values) => {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, value, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <FormDescription class="m-0">
-            <FaPasswordStrength :password="value" />
-          </FormDescription>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+        <FaPasswordStrength :password="model.password" />
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         注册
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
         <span class="text-secondary-foreground op-50">已经有帐号?</span>
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core-vexip-ui/src/components/AppAccountForm/reset-password.vue b/apps/core-vexip-ui/src/components/AppAccountForm/reset-password.vue
index 7faa6321..2a2e06aa 100755
--- a/apps/core-vexip-ui/src/components/AppAccountForm/reset-password.vue
+++ b/apps/core-vexip-ui/src/components/AppAccountForm/reset-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'ResetPasswordForm',
@@ -19,22 +17,28 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    captcha: z.string().min(6, '请输入验证码'),
-    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-  })),
-  initialValues: {
-    account: props.account ?? '',
-    captcha: '',
-    newPassword: '',
-  },
+interface ResetPasswordModel {
+  account: string
+  captcha: string
+  newPassword: string
+}
+
+const model = ref<ResetPasswordModel>({
+  account: props.account ?? '',
+  captcha: '',
+  newPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  captcha: z.string().min(6, '请输入验证码'),
+  newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+}))
+
+function onSubmit(values: ResetPasswordModel) {
   loading.value = true
   emits('onResetPassword', values.account)
-})
+}
 
 const countdown = ref(0)
 const countdownInterval = ref(Number.NaN)
@@ -51,7 +55,7 @@ function handleSendCaptcha() {
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           忘记密码了? 🔒
@@ -60,57 +64,41 @@ function handleSendCaptcha() {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <div class="flex-start-between gap-2">
-        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInputOTP :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FaButton variant="outline" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
-          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
-        </FaButton>
-      </div>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="captcha" :auto-bind="false">
+        <div class="flex-start-between gap-2">
+          <FaInputOTP
+            v-model="model.captcha"
+            name="captcha"
+            :length="6"
+            class="border-destructive"
+          />
+          <FaButton variant="outline" type="button" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
+            {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         确认
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core/src/components/AppAccountForm/edit-password.vue b/apps/core/src/components/AppAccountForm/edit-password.vue
index 7aff2400..07685377 100755
--- a/apps/core/src/components/AppAccountForm/edit-password.vue
+++ b/apps/core/src/components/AppAccountForm/edit-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'EditPasswordForm',
@@ -12,24 +10,30 @@ const appAccountStore = useAppAccountStore()
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      password: z.string().min(1, '请输入原密码'),
-      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请确认新密码'),
-    }).refine(data => data.newPassword === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    password: '',
-    newPassword: '',
-    checkPassword: '',
-  },
+interface EditPasswordModel {
+  password: string
+  newPassword: string
+  checkPassword: string
+}
+
+const model = ref<EditPasswordModel>({
+  password: '',
+  newPassword: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    password: z.string().min(1, '请输入原密码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请确认新密码'),
+  }).refine(data => data.newPassword === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: EditPasswordModel) {
   loading.value = true
   appAccountStore.editPassword(values).then(async () => {
     useFaToast().success('模拟修改成功，请重新登录')
@@ -37,7 +41,7 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 </script>
 
 <template>
@@ -50,52 +54,31 @@ const onSubmit = form.handleSubmit((values) => {
         请输入原密码、新密码和确认密码
       </p>
     </div>
-    <form @submit="onSubmit">
-      <FormField v-slot="{ componentField, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="原密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="原密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
         保存
       </FaButton>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core/src/components/AppAccountForm/login.vue b/apps/core/src/components/AppAccountForm/login.vue
index 191b61d9..4a307afd 100755
--- a/apps/core/src/components/AppAccountForm/login.vue
+++ b/apps/core/src/components/AppAccountForm/login.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'LoginForm',
@@ -26,19 +25,27 @@ const loading = ref(false)
 // 登录方式，default 账号密码登录，qrcode 扫码登录
 const type = ref<'default' | 'qrcode'>('default')
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    password: z.string().min(1, '请输入密码'),
-    remember: z.boolean(),
-  })),
-  initialValues: {
-    account: props.account ?? localStorage.getItem('login_account') ?? '',
-    password: '',
-    remember: localStorage.getItem('login_account') !== null,
-  },
+interface LoginModel {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const formRef = useTemplateRef<FormExpose<LoginModel>>('formRef')
+
+const model = ref<LoginModel>({
+  account: props.account ?? localStorage.getItem('login_account') ?? '',
+  password: '',
+  remember: localStorage.getItem('login_account') !== null,
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+  remember: z.boolean(),
+}))
+
+function onSubmit(values: LoginModel) {
   loading.value = true
   appAccountStore.login(values).then(() => {
     if (values.remember) {
@@ -51,12 +58,12 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 
-function testAccount(account: string) {
-  form.setFieldValue('account', account)
-  form.setFieldValue('password', '123456')
-  onSubmit()
+async function testAccount(account: string) {
+  model.value.account = account
+  model.value.password = '123456'
+  await formRef.value?.submit()
 }
 </script>
 
@@ -79,48 +86,33 @@ function testAccount(account: string) {
       />
     </div>
     <div v-show="type === 'default'">
-      <form @submit="onSubmit">
-        <FormField v-slot="{ componentField, errors }" name="account">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:user" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField, errors }" name="password">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:lock" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <div class="mb-4 flex-center-between">
-          <div class="flex-center-start">
-            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
-              <FormItem>
-                <FormControl>
-                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
-                    记住我
-                  </FaCheckbox>
-                </FormControl>
-              </FormItem>
-            </FormField>
-          </div>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', form.values.account)">
+      <FaForm
+        ref="formRef"
+        :model="model"
+        :validation-schema="validationSchema"
+        @submit="onSubmit"
+      >
+        <FaFormItem name="account">
+          <FaInput type="text" placeholder="用户名" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:user" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <FaFormItem name="password">
+          <FaInput type="password" placeholder="密码" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:lock" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <div class="flex-start-between">
+          <FaFormItem name="remember" class="min-w-0">
+            <FaCheckbox>
+              记住我
+            </FaCheckbox>
+          </FaFormItem>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', model.account)">
             忘记密码了?
           </FaButton>
         </div>
@@ -129,11 +121,11 @@ function testAccount(account: string) {
         </FaButton>
         <div class="text-sm mt-4 flex-center gap-2">
           <span class="text-secondary-foreground op-50">还没有帐号?</span>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', form.values.account)">
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', model.account)">
             注册新帐号
           </FaButton>
         </div>
-      </form>
+      </FaForm>
       <div class="mt-4 text-center -mb-4">
         <FaDivider>演示账号一键登录</FaDivider>
         <div class="space-x-2">
diff --git a/apps/core/src/components/AppAccountForm/register.vue b/apps/core/src/components/AppAccountForm/register.vue
index e6f8fc09..66c84a21 100755
--- a/apps/core/src/components/AppAccountForm/register.vue
+++ b/apps/core/src/components/AppAccountForm/register.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'RegisterForm',
@@ -19,32 +17,38 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      account: z.string().min(1, '请输入用户名'),
-      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请再次输入密码'),
-    }).refine(data => data.password === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    account: props.account ?? '',
-    password: '',
-    checkPassword: '',
-  },
+interface RegisterModel {
+  account: string
+  password: string
+  checkPassword: string
+}
+
+const model = ref<RegisterModel>({
+  account: props.account ?? '',
+  password: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请再次输入密码'),
+  }).refine(data => data.password === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: RegisterModel) {
   loading.value = true
   emits('onRegister', values.account)
-})
+}
 </script>
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           探索从这里开始 🚀
@@ -53,60 +57,37 @@ const onSubmit = form.handleSubmit((values) => {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, value, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <FormDescription class="m-0">
-            <FaPasswordStrength :password="value" />
-          </FormDescription>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+        <FaPasswordStrength :password="model.password" />
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         注册
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
         <span class="text-secondary-foreground op-50">已经有帐号?</span>
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/core/src/components/AppAccountForm/reset-password.vue b/apps/core/src/components/AppAccountForm/reset-password.vue
index 7faa6321..2a2e06aa 100755
--- a/apps/core/src/components/AppAccountForm/reset-password.vue
+++ b/apps/core/src/components/AppAccountForm/reset-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'ResetPasswordForm',
@@ -19,22 +17,28 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    captcha: z.string().min(6, '请输入验证码'),
-    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-  })),
-  initialValues: {
-    account: props.account ?? '',
-    captcha: '',
-    newPassword: '',
-  },
+interface ResetPasswordModel {
+  account: string
+  captcha: string
+  newPassword: string
+}
+
+const model = ref<ResetPasswordModel>({
+  account: props.account ?? '',
+  captcha: '',
+  newPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  captcha: z.string().min(6, '请输入验证码'),
+  newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+}))
+
+function onSubmit(values: ResetPasswordModel) {
   loading.value = true
   emits('onResetPassword', values.account)
-})
+}
 
 const countdown = ref(0)
 const countdownInterval = ref(Number.NaN)
@@ -51,7 +55,7 @@ function handleSendCaptcha() {
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           忘记密码了? 🔒
@@ -60,57 +64,41 @@ function handleSendCaptcha() {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <div class="flex-start-between gap-2">
-        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInputOTP :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FaButton variant="outline" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
-          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
-        </FaButton>
-      </div>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="captcha" :auto-bind="false">
+        <div class="flex-start-between gap-2">
+          <FaInputOTP
+            v-model="model.captcha"
+            name="captcha"
+            :length="6"
+            class="border-destructive"
+          />
+          <FaButton variant="outline" type="button" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
+            {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         确认
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/example/src/components/AppAccountForm/edit-password.vue b/apps/example/src/components/AppAccountForm/edit-password.vue
index 7aff2400..07685377 100755
--- a/apps/example/src/components/AppAccountForm/edit-password.vue
+++ b/apps/example/src/components/AppAccountForm/edit-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'EditPasswordForm',
@@ -12,24 +10,30 @@ const appAccountStore = useAppAccountStore()
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      password: z.string().min(1, '请输入原密码'),
-      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请确认新密码'),
-    }).refine(data => data.newPassword === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    password: '',
-    newPassword: '',
-    checkPassword: '',
-  },
+interface EditPasswordModel {
+  password: string
+  newPassword: string
+  checkPassword: string
+}
+
+const model = ref<EditPasswordModel>({
+  password: '',
+  newPassword: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    password: z.string().min(1, '请输入原密码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请确认新密码'),
+  }).refine(data => data.newPassword === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: EditPasswordModel) {
   loading.value = true
   appAccountStore.editPassword(values).then(async () => {
     useFaToast().success('模拟修改成功，请重新登录')
@@ -37,7 +41,7 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 </script>
 
 <template>
@@ -50,52 +54,31 @@ const onSubmit = form.handleSubmit((values) => {
         请输入原密码、新密码和确认密码
       </p>
     </div>
-    <form @submit="onSubmit">
-      <FormField v-slot="{ componentField, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="原密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="原密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
         保存
       </FaButton>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/example/src/components/AppAccountForm/login.vue b/apps/example/src/components/AppAccountForm/login.vue
index 191b61d9..4a307afd 100755
--- a/apps/example/src/components/AppAccountForm/login.vue
+++ b/apps/example/src/components/AppAccountForm/login.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'LoginForm',
@@ -26,19 +25,27 @@ const loading = ref(false)
 // 登录方式，default 账号密码登录，qrcode 扫码登录
 const type = ref<'default' | 'qrcode'>('default')
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    password: z.string().min(1, '请输入密码'),
-    remember: z.boolean(),
-  })),
-  initialValues: {
-    account: props.account ?? localStorage.getItem('login_account') ?? '',
-    password: '',
-    remember: localStorage.getItem('login_account') !== null,
-  },
+interface LoginModel {
+  account: string
+  password: string
+  remember: boolean
+}
+
+const formRef = useTemplateRef<FormExpose<LoginModel>>('formRef')
+
+const model = ref<LoginModel>({
+  account: props.account ?? localStorage.getItem('login_account') ?? '',
+  password: '',
+  remember: localStorage.getItem('login_account') !== null,
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  password: z.string().min(1, '请输入密码'),
+  remember: z.boolean(),
+}))
+
+function onSubmit(values: LoginModel) {
   loading.value = true
   appAccountStore.login(values).then(() => {
     if (values.remember) {
@@ -51,12 +58,12 @@ const onSubmit = form.handleSubmit((values) => {
   }).finally(() => {
     loading.value = false
   })
-})
+}
 
-function testAccount(account: string) {
-  form.setFieldValue('account', account)
-  form.setFieldValue('password', '123456')
-  onSubmit()
+async function testAccount(account: string) {
+  model.value.account = account
+  model.value.password = '123456'
+  await formRef.value?.submit()
 }
 </script>
 
@@ -79,48 +86,33 @@ function testAccount(account: string) {
       />
     </div>
     <div v-show="type === 'default'">
-      <form @submit="onSubmit">
-        <FormField v-slot="{ componentField, errors }" name="account">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:user" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField, errors }" name="password">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-                <template #start>
-                  <FaIcon name="i-lucide:lock" />
-                </template>
-              </FaInput>
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <div class="mb-4 flex-center-between">
-          <div class="flex-center-start">
-            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
-              <FormItem>
-                <FormControl>
-                  <FaCheckbox :model-value="componentField.modelValue" @update:model-value="componentField['onUpdate:modelValue']?.($event)">
-                    记住我
-                  </FaCheckbox>
-                </FormControl>
-              </FormItem>
-            </FormField>
-          </div>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', form.values.account)">
+      <FaForm
+        ref="formRef"
+        :model="model"
+        :validation-schema="validationSchema"
+        @submit="onSubmit"
+      >
+        <FaFormItem name="account">
+          <FaInput type="text" placeholder="用户名" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:user" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <FaFormItem name="password">
+          <FaInput type="password" placeholder="密码" class="w-full">
+            <template #start>
+              <FaIcon name="i-lucide:lock" />
+            </template>
+          </FaInput>
+        </FaFormItem>
+        <div class="flex-start-between">
+          <FaFormItem name="remember" class="min-w-0">
+            <FaCheckbox>
+              记住我
+            </FaCheckbox>
+          </FaFormItem>
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onResetPassword', model.account)">
             忘记密码了?
           </FaButton>
         </div>
@@ -129,11 +121,11 @@ function testAccount(account: string) {
         </FaButton>
         <div class="text-sm mt-4 flex-center gap-2">
           <span class="text-secondary-foreground op-50">还没有帐号?</span>
-          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', form.values.account)">
+          <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onRegister', model.account)">
             注册新帐号
           </FaButton>
         </div>
-      </form>
+      </FaForm>
       <div class="mt-4 text-center -mb-4">
         <FaDivider>演示账号一键登录</FaDivider>
         <div class="space-x-2">
diff --git a/apps/example/src/components/AppAccountForm/register.vue b/apps/example/src/components/AppAccountForm/register.vue
index e6f8fc09..66c84a21 100755
--- a/apps/example/src/components/AppAccountForm/register.vue
+++ b/apps/example/src/components/AppAccountForm/register.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'RegisterForm',
@@ -19,32 +17,38 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(
-    z.object({
-      account: z.string().min(1, '请输入用户名'),
-      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-      checkPassword: z.string().min(1, '请再次输入密码'),
-    }).refine(data => data.password === data.checkPassword, {
-      message: '两次输入的密码不一致',
-      path: ['checkPassword'],
-    }),
-  ),
-  initialValues: {
-    account: props.account ?? '',
-    password: '',
-    checkPassword: '',
-  },
+interface RegisterModel {
+  account: string
+  password: string
+  checkPassword: string
+}
+
+const model = ref<RegisterModel>({
+  account: props.account ?? '',
+  password: '',
+  checkPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(
+  z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+    checkPassword: z.string().min(1, '请再次输入密码'),
+  }).refine(data => data.password === data.checkPassword, {
+    message: '两次输入的密码不一致',
+    path: ['checkPassword'],
+  }),
+)
+
+function onSubmit(values: RegisterModel) {
   loading.value = true
   emits('onRegister', values.account)
-})
+}
 </script>
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           探索从这里开始 🚀
@@ -53,60 +57,37 @@ const onSubmit = form.handleSubmit((values) => {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, value, errors }" name="password">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <FormDescription class="m-0">
-            <FaPasswordStrength :password="value" />
-          </FormDescription>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <FormField v-slot="{ componentField, errors }" name="checkPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="确认密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="password">
+        <FaInput type="password" placeholder="密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+        <FaPasswordStrength :password="model.password" />
+      </FaFormItem>
+      <FaFormItem name="checkPassword">
+        <FaInput type="password" placeholder="确认密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         注册
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
         <span class="text-secondary-foreground op-50">已经有帐号?</span>
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/example/src/components/AppAccountForm/reset-password.vue b/apps/example/src/components/AppAccountForm/reset-password.vue
index 7faa6321..2a2e06aa 100755
--- a/apps/example/src/components/AppAccountForm/reset-password.vue
+++ b/apps/example/src/components/AppAccountForm/reset-password.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({
   name: 'ResetPasswordForm',
@@ -19,22 +17,28 @@ const emits = defineEmits<{
 
 const loading = ref(false)
 
-const form = useForm({
-  validationSchema: toTypedSchema(z.object({
-    account: z.string().min(1, '请输入用户名'),
-    captcha: z.string().min(6, '请输入验证码'),
-    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
-  })),
-  initialValues: {
-    account: props.account ?? '',
-    captcha: '',
-    newPassword: '',
-  },
+interface ResetPasswordModel {
+  account: string
+  captcha: string
+  newPassword: string
+}
+
+const model = ref<ResetPasswordModel>({
+  account: props.account ?? '',
+  captcha: '',
+  newPassword: '',
 })
-const onSubmit = form.handleSubmit((values) => {
+
+const validationSchema = toTypedSchema(z.object({
+  account: z.string().min(1, '请输入用户名'),
+  captcha: z.string().min(6, '请输入验证码'),
+  newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+}))
+
+function onSubmit(values: ResetPasswordModel) {
   loading.value = true
   emits('onResetPassword', values.account)
-})
+}
 
 const countdown = ref(0)
 const countdownInterval = ref(Number.NaN)
@@ -51,7 +55,7 @@ function handleSendCaptcha() {
 
 <template>
   <div class="p-12 flex-col-stretch-center min-h-500px w-full">
-    <form @submit="onSubmit">
+    <FaForm :model="model" :validation-schema="validationSchema" @submit="onSubmit">
       <div class="mb-8 space-y-2">
         <h3 class="text-4xl font-bold">
           忘记密码了? 🔒
@@ -60,57 +64,41 @@ function handleSendCaptcha() {
           演示系统未提供该功能
         </p>
       </div>
-      <FormField v-slot="{ componentField, errors }" name="account">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="text" placeholder="用户名" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:user" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
-      <div class="flex-start-between gap-2">
-        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
-          <FormItem class="pb-6 relative space-y-0">
-            <FormControl>
-              <FaInputOTP :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
-            </FormControl>
-            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-              <FormMessage class="text-xs m-0 bottom-1 absolute" />
-            </Transition>
-          </FormItem>
-        </FormField>
-        <FaButton variant="outline" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
-          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
-        </FaButton>
-      </div>
-      <FormField v-slot="{ componentField, errors }" name="newPassword">
-        <FormItem class="pb-6 relative space-y-0">
-          <FormControl>
-            <FaInput type="password" placeholder="新密码" class="w-full" :class="{ 'border-destructive': errors.length }" v-bind="componentField">
-              <template #start>
-                <FaIcon name="i-lucide:lock" />
-              </template>
-            </FaInput>
-          </FormControl>
-          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
-            <FormMessage class="text-xs m-0 bottom-1 absolute" />
-          </Transition>
-        </FormItem>
-      </FormField>
+      <FaFormItem name="account">
+        <FaInput type="text" placeholder="用户名" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:user" />
+          </template>
+        </FaInput>
+      </FaFormItem>
+      <FaFormItem name="captcha" :auto-bind="false">
+        <div class="flex-start-between gap-2">
+          <FaInputOTP
+            v-model="model.captcha"
+            name="captcha"
+            :length="6"
+            class="border-destructive"
+          />
+          <FaButton variant="outline" type="button" :disabled="countdown > 0" class="px-4 flex-1" @click="handleSendCaptcha">
+            {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后重发` }}
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaFormItem name="newPassword">
+        <FaInput type="password" placeholder="新密码" class="w-full">
+          <template #start>
+            <FaIcon name="i-lucide:lock" />
+          </template>
+        </FaInput>
+      </FaFormItem>
       <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
         确认
       </FaButton>
       <div class="text-sm mt-4 flex-center gap-2">
-        <FaButton variant="link" class="p-0 h-auto" @click="emits('onLogin', form.values.account)">
+        <FaButton variant="link" class="p-0 h-auto" type="button" @click="emits('onLogin', model.account)">
           去登录
         </FaButton>
       </div>
-    </form>
+    </FaForm>
   </div>
 </template>
diff --git a/apps/example/src/router/modules/component.example.ts b/apps/example/src/router/modules/component.example.ts
index d1f885c7..2f7a198d 100755
--- a/apps/example/src/router/modules/component.example.ts
+++ b/apps/example/src/router/modules/component.example.ts
@@ -126,6 +126,14 @@ const routes: RouteRecordRaw = {
         copyright: false,
       },
     },
+    {
+      path: 'form',
+      name: 'componentExampleForm',
+      component: () => import('@/views/component_example/form.vue'),
+      meta: {
+        title: '表单',
+      },
+    },
     {
       path: 'hover_card',
       name: 'componentExampleHoverCard',
diff --git a/apps/example/src/types/components.d.ts b/apps/example/src/types/components.d.ts
index 13f933c6..cbaff825 100644
--- a/apps/example/src/types/components.d.ts
+++ b/apps/example/src/types/components.d.ts
@@ -35,6 +35,8 @@ declare module 'vue' {
     FaDropdown: typeof import('@fantastic-admin/components')['FaDropdown']
     FaFileUpload: typeof import('@fantastic-admin/components')['FaFileUpload']
     FaFixedBar: typeof import('@fantastic-admin/components')['FaFixedBar']
+    FaForm: typeof import('@fantastic-admin/components')['FaForm']
+    FaFormItem: typeof import('@fantastic-admin/components')['FaFormItem']
     FaHoverCard: typeof import('@fantastic-admin/components')['FaHoverCard']
     FaIcon: typeof import('@fantastic-admin/components')['FaIcon']
     FaImagePreview: typeof import('@fantastic-admin/components')['FaImagePreview']
@@ -93,6 +95,8 @@ declare global {
   const FaDropdown: typeof import('@fantastic-admin/components')['FaDropdown']
   const FaFileUpload: typeof import('@fantastic-admin/components')['FaFileUpload']
   const FaFixedBar: typeof import('@fantastic-admin/components')['FaFixedBar']
+  const FaForm: typeof import('@fantastic-admin/components')['FaForm']
+  const FaFormItem: typeof import('@fantastic-admin/components')['FaFormItem']
   const FaHoverCard: typeof import('@fantastic-admin/components')['FaHoverCard']
   const FaIcon: typeof import('@fantastic-admin/components')['FaIcon']
   const FaImagePreview: typeof import('@fantastic-admin/components')['FaImagePreview']
diff --git a/apps/example/src/views/component_example/form.vue b/apps/example/src/views/component_example/form.vue
new file mode 100644
index 00000000..b388b7d3
--- /dev/null
+++ b/apps/example/src/views/component_example/form.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { form } from '@fantastic-admin/components/examples'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="表单" description="FaForm / FaFormItem" />
+    <FaPageMain
+      v-for="example in form"
+      :key="example.title"
+      :code="example.componentRaw"
+      :title="example.title"
+    >
+      <component :is="example.component" />
+    </FaPageMain>
+  </div>
+</template>
diff --git a/packages/components/package.json b/packages/components/package.json
index 3f802cf3..8afa6acd 100755
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -37,6 +37,7 @@
     "filesize": "catalog:",
     "reka-ui": "catalog:",
     "tailwind-merge": "catalog:",
+    "vee-validate": "catalog:",
     "vue-input-otp": "catalog:",
     "vue-sonner": "catalog:"
   }
diff --git a/packages/components/resolver.ts b/packages/components/resolver.ts
index e8651585..f3baa6df 100755
--- a/packages/components/resolver.ts
+++ b/packages/components/resolver.ts
@@ -22,6 +22,8 @@ const BASIC_COMPONENT_NAMES = [
   'FaDropdown',
   'FaFileUpload',
   'FaFixedBar',
+  'FaForm',
+  'FaFormItem',
   'FaHoverCard',
   'FaIcon',
   'FaImagePreview',
diff --git a/packages/components/src/basic/checkbox/CheckboxGroup.vue b/packages/components/src/basic/checkbox/CheckboxGroup.vue
index 5878fdda..c44592bf 100755
--- a/packages/components/src/basic/checkbox/CheckboxGroup.vue
+++ b/packages/components/src/basic/checkbox/CheckboxGroup.vue
@@ -167,11 +167,10 @@ function handleCustomOptionKeydown(option: TOption) {
       @keydown.space.prevent="handleCustomOptionKeydown(option)"
     >
       <Checkbox
-        v-show="!slots.option"
         :id="getOptionId(option, index)"
         :model-value="isOptionChecked(option)"
         :disabled="isOptionDisabled(option)"
-        :class="props.itemClass"
+        :class="cn(props.itemClass, slots.option && 'hidden')"
         @update:model-value="handleOptionModelValueChange(option, $event)"
       />
       <Label
diff --git a/packages/components/src/basic/form/FormItem.vue b/packages/components/src/basic/form/FormItem.vue
new file mode 100644
index 00000000..31cde24d
--- /dev/null
+++ b/packages/components/src/basic/form/FormItem.vue
@@ -0,0 +1,312 @@
+<script lang="ts">
+import type {
+  ComponentFieldBindingObject,
+  RuleExpression,
+} from 'vee-validate'
+import type { CSSProperties, HTMLAttributes, VNode, VNodeChild } from 'vue'
+import type { FormLabelPlacement } from './context'
+</script>
+
+<script setup lang="ts" generic="TValue = unknown">
+import { useId } from 'reka-ui'
+import { useField } from 'vee-validate'
+import { cloneVNode, Comment, computed, defineComponent, Fragment, h, inject, isVNode, onBeforeUnmount, onMounted, provide, toRef, useTemplateRef, watch } from 'vue'
+import { cn } from '#utils'
+import { FORM_LAYOUT_INJECTION_KEY } from './context'
+import FormControl from './form/FormControl.vue'
+import FormDescription from './form/FormDescription.vue'
+import FormLabel from './form/FormLabel.vue'
+import FormMessage from './form/FormMessage.vue'
+import { FORM_ITEM_INJECTION_KEY } from './form/injectionKeys'
+
+export interface FormItemProps<TValue = unknown> {
+  name: string
+  label?: string
+  description?: string
+  rules?: RuleExpression<TValue>
+  required?: boolean
+  autoBind?: boolean
+  labelPlacement?: FormLabelPlacement
+  labelWidth?: string | number
+  class?: HTMLAttributes['class']
+  labelClass?: HTMLAttributes['class']
+  contentClass?: HTMLAttributes['class']
+  messageClass?: HTMLAttributes['class']
+  descriptionClass?: HTMLAttributes['class']
+}
+
+export interface FormItemSlotProps<TValue = unknown> {
+  componentField: ComponentFieldBindingObject<TValue>
+}
+
+type EventHandler = ((...args: any[]) => unknown) | ((...args: any[]) => unknown)[]
+
+defineOptions({
+  name: 'BuiltInFormItem',
+})
+
+const props = withDefaults(defineProps<FormItemProps<TValue>>(), {
+  autoBind: true,
+})
+
+const slots = defineSlots<{
+  default?: (props: FormItemSlotProps<TValue>) => any
+  label?: (props: FormItemSlotProps<TValue>) => any
+  description?: (props: FormItemSlotProps<TValue>) => any
+  message?: (props: FormItemSlotProps<TValue>) => any
+}>()
+
+const injectedFormContext = inject(FORM_LAYOUT_INJECTION_KEY)
+
+if (!injectedFormContext) {
+  throw new Error('FaFormItem should be used within <FaForm>.')
+}
+
+const formContext = injectedFormContext
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+
+const itemRef = useTemplateRef<HTMLElement>('itemRef')
+const field = useField<TValue>(toRef(props, 'name'), toRef(props, 'rules'), {
+  label: toRef(props, 'label'),
+  validateOnValueUpdate: true,
+})
+
+const resolvedLabelPlacement = computed(() => props.labelPlacement ?? formContext.labelPlacement.value)
+const resolvedLabelWidth = computed(() => props.labelWidth ?? formContext.labelWidth.value)
+const resolvedDisabled = computed(() => formContext.disabled.value)
+
+const rootClass = computed(() => cn(
+  'min-w-0',
+  resolvedLabelPlacement.value === 'top'
+    ? 'grid gap-2'
+    : 'grid gap-2 sm:grid-cols-[var(--fa-form-label-width)_minmax(0,1fr)] sm:items-start sm:gap-x-3',
+  props.class,
+))
+
+const rootStyle = computed<CSSProperties>(() => ({
+  '--fa-form-label-width': resolveSize(resolvedLabelWidth.value),
+}))
+
+const labelClass = computed(() => cn(
+  'text-sm font-medium leading-none',
+  resolvedLabelPlacement.value === 'top'
+    ? 'inline-flex items-center gap-1 px-1'
+    : 'flex min-h-9 items-center gap-1 sm:pt-0',
+  resolvedLabelPlacement.value === 'right' && 'sm:justify-end sm:text-right',
+  resolvedLabelPlacement.value === 'left' && 'sm:justify-start sm:text-left',
+  props.labelClass,
+))
+
+const contentClass = computed(() => cn(
+  'grid min-w-0 gap-1',
+  resolvedLabelPlacement.value !== 'top' && 'sm:col-start-2',
+  props.contentClass,
+))
+
+const hasMessage = computed(() => Boolean(field.errorMessage.value))
+const hasDescription = computed(() => Boolean(props.description || slots.description))
+const feedbackClass = computed(() => cn('grid min-h-4 px-1'))
+const messageClass = computed(() => cn('col-start-1 row-start-1 text-xs', props.messageClass))
+const descriptionClass = computed(() => cn(
+  'col-start-1 row-start-1 text-xs',
+  hasMessage.value && 'invisible',
+  props.descriptionClass,
+))
+
+function handleUpdateModelValue(value: TValue) {
+  field.handleChange(value, true)
+}
+
+function handleBlur(event: Event) {
+  field.handleBlur(event, true)
+}
+
+function handleInput(event: Event | unknown) {
+  field.handleChange(event, true)
+}
+
+function handleChange(event: Event | unknown) {
+  field.handleChange(event, true)
+}
+
+const componentField = computed<ComponentFieldBindingObject<TValue>>(() => ({
+  'name': props.name,
+  'modelValue': field.value.value,
+  'onBlur': handleBlur,
+  'onInput': handleInput,
+  'onChange': handleChange,
+  'onUpdate:modelValue': handleUpdateModelValue,
+}))
+
+const slotProps = computed<FormItemSlotProps<TValue>>(() => ({
+  componentField: componentField.value,
+}))
+
+const ControlSlot = defineComponent({
+  name: 'BuiltInFormItemControlSlot',
+  setup() {
+    return () => {
+      const nodes = normalizeSlotNodes(slots.default?.(slotProps.value) ?? [])
+
+      if (!nodes.length) {
+        return null
+      }
+
+      const [firstNode, ...restNodes] = nodes
+      const controlNode = cloneVNode(firstNode, resolveControlProps(firstNode))
+
+      return h(FormControl, null, {
+        default: () => [controlNode, ...restNodes],
+      })
+    }
+  },
+})
+
+function resolveSize(size?: string | number) {
+  if (size == null || size === '') {
+    return '96px'
+  }
+
+  return typeof size === 'number' ? `${size}px` : size
+}
+
+function normalizeSlotNodes(nodes: VNodeChild): VNode[] {
+  const result: VNode[] = []
+  const source = Array.isArray(nodes) ? nodes : [nodes]
+
+  source.forEach((node) => {
+    if (Array.isArray(node)) {
+      result.push(...normalizeSlotNodes(node))
+      return
+    }
+
+    if (!isVNode(node) || node.type === Comment) {
+      return
+    }
+
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      result.push(...normalizeSlotNodes(node.children as VNodeChild[]))
+      return
+    }
+
+    result.push(node)
+  })
+
+  return result
+}
+
+function resolveControlProps(vnode: VNode) {
+  if (!props.autoBind) {
+    return {}
+  }
+
+  const vnodeProps = vnode.props ?? {}
+  const nextProps: Record<string, unknown> = {
+    'name': props.name,
+    'disabled': resolvedDisabled.value || Boolean(vnodeProps.disabled),
+    'aria-required': props.required ? 'true' : undefined,
+    'onBlur': chainHandlers(vnodeProps.onBlur as EventHandler | undefined, componentField.value.onBlur),
+    'onInput': chainHandlers(vnodeProps.onInput as EventHandler | undefined, componentField.value.onInput),
+    'onChange': chainHandlers(vnodeProps.onChange as EventHandler | undefined, componentField.value.onChange),
+    'onUpdate:modelValue': chainHandlers(vnodeProps['onUpdate:modelValue'] as EventHandler | undefined, componentField.value['onUpdate:modelValue']!),
+  }
+
+  if (!Object.hasOwn(vnodeProps, 'modelValue')) {
+    nextProps.modelValue = componentField.value.modelValue
+  }
+
+  return nextProps
+}
+
+function chainHandlers<T extends (...args: any[]) => unknown>(existing: EventHandler | undefined, next: T) {
+  if (!existing || existing === next) {
+    return next
+  }
+
+  return (...args: Parameters<T>) => {
+    next(...args)
+    callHandler(existing, ...args)
+  }
+}
+
+function callHandler(handler: EventHandler, ...args: any[]) {
+  if (Array.isArray(handler)) {
+    handler.forEach(item => item(...args))
+    return
+  }
+
+  handler(...args)
+}
+
+function registerCurrentField() {
+  if (itemRef.value) {
+    formContext.registerField(props.name, itemRef.value)
+  }
+}
+
+function unregisterCurrentField(name = props.name) {
+  formContext.unregisterField(name, itemRef.value ?? undefined)
+}
+
+onMounted(() => {
+  registerCurrentField()
+})
+
+watch(() => props.name, (name, oldName) => {
+  if (oldName) {
+    unregisterCurrentField(oldName)
+  }
+  if (name) {
+    registerCurrentField()
+  }
+})
+
+onBeforeUnmount(() => {
+  unregisterCurrentField()
+})
+</script>
+
+<template>
+  <div
+    ref="itemRef"
+    data-slot="form-item"
+    :class="rootClass"
+    :style="rootStyle"
+  >
+    <FormLabel
+      v-if="props.label || $slots.label"
+      :class="labelClass"
+    >
+      <slot name="label" v-bind="slotProps">
+        <span>{{ props.label }}</span>
+        <span v-if="props.required" class="text-destructive" aria-hidden="true">*</span>
+      </slot>
+    </FormLabel>
+    <div :class="contentClass">
+      <ControlSlot />
+      <div :class="feedbackClass">
+        <FormDescription
+          v-if="hasDescription"
+          :class="descriptionClass"
+          :aria-hidden="hasMessage ? 'true' : undefined"
+        >
+          <slot name="description" v-bind="slotProps">
+            {{ props.description }}
+          </slot>
+        </FormDescription>
+        <FormMessage
+          v-if="hasMessage"
+          :class="messageClass"
+        >
+          <template #default="{ message }">
+            <slot name="message" v-bind="slotProps">
+              {{ message }}
+            </slot>
+          </template>
+        </FormMessage>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/form/README.md b/packages/components/src/basic/form/README.md
new file mode 100644
index 00000000..fa72b215
--- /dev/null
+++ b/packages/components/src/basic/form/README.md
@@ -0,0 +1,68 @@
+# FaForm 表单
+
+基于 `vee-validate` 的表单组件，提供接近 Element Plus / Naive UI 的声明式写法。
+
+## 基础用法
+
+```vue
+<FaForm :validation-schema="schema" :model="model" @submit="onSubmit">
+  <FaFormItem name="account" label="账号" required>
+    <FaInput />
+  </FaFormItem>
+  <FaButton type="submit">
+    提交
+  </FaButton>
+</FaForm>
+```
+
+## model 与 initialValues
+
+常规业务表单推荐使用 `model` 传入整个表单对象。字段变化会同步回该对象，也可以使用 `v-model:model` 接收完整表单对象更新。
+
+`initialValues` 仍然保留，适合只需要初始化表单、不关心外部表单对象同步的非受控用法。`model` 和 `initialValues` 同时传入时，以 `model` 为准。
+
+## FaForm Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `as` | `'form' \| 'div'` | `'form'` | 根节点类型 |
+| `model` | `FormOptions['initialValues']` | - | 表单数据对象，推荐用法，字段变化会同步回该对象 |
+| `validationSchema` | `Partial<Record<Path, Rule>> \| TypedSchema \| YupSchema` | - | vee-validate 校验 schema |
+| `initialValues` | `FormOptions['initialValues']` | - | 非受控表单初始值；同时传入 `model` 时以 `model` 为准 |
+| `labelPlacement` | `'top' \| 'left' \| 'right'` | `'top'` | 标签位置 |
+| `labelWidth` | `string \| number` | `'96px'` | 横向布局标签宽度 |
+| `disabled` | `boolean` | `false` | 是否禁用表单控件 |
+| `scrollToError` | `boolean` | `false` | 提交失败时滚动到首个错误字段 |
+
+## FaFormItem Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `name` | `string` | - | 字段路径，支持 vee-validate 路径语法 |
+| `label` | `string` | - | 标签 |
+| `description` | `string` | - | 辅助说明 |
+| `rules` | `RuleExpression` | - | 字段级校验规则 |
+| `required` | `boolean` | `false` | 是否显示必填标记 |
+| `autoBind` | `boolean` | `true` | 是否自动向默认插槽第一个节点注入字段值、事件、禁用状态等绑定 |
+| `labelPlacement` | `'top' \| 'left' \| 'right'` | - | 局部覆盖标签位置 |
+| `labelWidth` | `string \| number` | - | 局部覆盖标签宽度 |
+
+## 复合输入
+
+`FaFormItem` 默认会向默认插槽的第一个节点自动注入表单绑定，让普通输入控件无需手写 `v-model`。
+
+当字段由多个控件共同维护，或默认插槽第一个节点只是布局容器时，可设置 `auto-bind="false"` 关闭自动绑定。关闭后，`FaFormItem` 不会自动向默认插槽第一个节点注入字段值、事件、禁用状态和 `name` 等属性，仅保留表单项的说明、错误信息和无障碍状态关联。
+
+默认插槽仅暴露 `componentField`。普通自定义控件可手动 `v-bind="componentField"`，复合输入在 `auto-bind="false"` 时直接维护传入 `FaForm` 的 `model`。
+
+## Expose
+
+| 方法 | 说明 |
+|------|------|
+| `submit()` | 触发表单提交 |
+| `validate()` | 校验整个表单 |
+| `resetFields()` | 重置表单 |
+| `clearValidate(name?)` | 清空单个或全部字段错误 |
+| `setFieldValue(name, value, shouldValidate?)` | 设置字段值 |
+| `setFieldError(name, message?)` | 设置字段错误 |
+| `scrollToField(name)` | 滚动并聚焦到字段 |
diff --git a/packages/components/src/basic/form/_examples/_async.vue b/packages/components/src/basic/form/_examples/_async.vue
new file mode 100644
index 00000000..b353fc56
--- /dev/null
+++ b/packages/components/src/basic/form/_examples/_async.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaInput from '../../input/index.vue'
+import FaFormItem from '../FormItem.vue'
+import FaForm from '../index.vue'
+
+const submitted = shallowRef('')
+
+const model = ref({
+  username: '',
+  email: '',
+})
+
+const unavailableNames = ['admin', 'root', 'fantastic']
+
+const validationSchema = {
+  async username(value: string) {
+    if (!value) {
+      return '请输入用户名'
+    }
+
+    if (value.length < 3) {
+      return '用户名至少 3 个字符'
+    }
+
+    const available = await checkUsernameAvailable(value)
+    return available ? true : '该用户名已被占用'
+  },
+  email(value: string) {
+    return /^\S[^\s@]*@\S[^\s.]*\.\S+$/.test(value) ? true : '请输入有效邮箱'
+  },
+}
+
+async function checkUsernameAvailable(value: string) {
+  await wait(2000)
+  return !unavailableNames.includes(value.trim().toLowerCase())
+}
+
+function wait(ms: number) {
+  return new Promise(resolve => window.setTimeout(resolve, ms))
+}
+
+function handleSubmit(values: Record<string, unknown>) {
+  submitted.value = JSON.stringify(values, null, 2)
+}
+</script>
+
+<template>
+  <div class="gap-4 grid max-w-160">
+    <FaForm
+      v-slot="{ isSubmitting }"
+      :model="model"
+      :validation-schema="validationSchema"
+      @submit="handleSubmit"
+    >
+      <FaFormItem
+        name="username"
+        label="用户名"
+        required
+        description="输入 admin / root / fantastic 会返回占用错误"
+      >
+        <FaInput placeholder="请输入用户名" class="w-full" />
+      </FaFormItem>
+      <FaFormItem name="email" label="邮箱" required>
+        <FaInput type="email" placeholder="name@example.com" class="w-full" />
+      </FaFormItem>
+      <FaButton type="submit" :loading="isSubmitting">
+        提交
+      </FaButton>
+    </FaForm>
+    <pre v-if="submitted" class="text-sm m-0 p-4 rounded-md bg-muted">{{ submitted }}</pre>
+  </div>
+</template>
diff --git a/packages/components/src/basic/form/_examples/_basic.vue b/packages/components/src/basic/form/_examples/_basic.vue
new file mode 100644
index 00000000..c6690eef
--- /dev/null
+++ b/packages/components/src/basic/form/_examples/_basic.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaInput from '../../input/index.vue'
+import FaSelect from '../../select/index.vue'
+import FaTextarea from '../../textarea/index.vue'
+import FaFormItem from '../FormItem.vue'
+import FaForm from '../index.vue'
+
+const submitted = shallowRef('')
+
+const model = ref({
+  account: '',
+  role: '',
+  remark: '',
+})
+
+const roleOptions = [
+  { label: '管理员', value: 'admin' },
+  { label: '运营', value: 'operator' },
+  { label: '访客', value: 'guest' },
+]
+
+const validationSchema = {
+  account(value: string) {
+    return value ? true : '请输入账号'
+  },
+  role(value: string) {
+    return value ? true : '请选择角色'
+  },
+  remark(value: string) {
+    return !value || value.length >= 6 ? true : '备注至少 6 个字符'
+  },
+}
+
+function handleSubmit(values: Record<string, unknown>) {
+  submitted.value = JSON.stringify(values, null, 2)
+}
+</script>
+
+<template>
+  <div class="gap-4 grid max-w-160">
+    <FaForm
+      :model="model"
+      :validation-schema="validationSchema"
+      @submit="handleSubmit"
+    >
+      <FaFormItem name="account" label="账号" required description="账号将作为登录名使用">
+        <FaInput placeholder="请输入账号" class="w-full" />
+      </FaFormItem>
+      <FaFormItem name="role" label="角色" required>
+        <FaSelect :options="roleOptions" placeholder="请选择角色" class="w-full" />
+      </FaFormItem>
+      <FaFormItem name="remark" label="备注">
+        <FaTextarea placeholder="请输入至少 6 个字符" class="w-full" />
+      </FaFormItem>
+      <div class="flex gap-2">
+        <FaButton type="submit">
+          提交
+        </FaButton>
+        <FaButton type="reset" variant="outline">
+          重置
+        </FaButton>
+      </div>
+    </FaForm>
+    <pre v-if="submitted" class="text-sm m-0 p-4 rounded-md bg-muted">{{ submitted }}</pre>
+  </div>
+</template>
diff --git a/packages/components/src/basic/form/_examples/_composite.vue b/packages/components/src/basic/form/_examples/_composite.vue
new file mode 100644
index 00000000..1457f80a
--- /dev/null
+++ b/packages/components/src/basic/form/_examples/_composite.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaIcon from '../../icon/index.vue'
+import FaInput from '../../input/index.vue'
+import FaFormItem from '../FormItem.vue'
+import FaForm from '../index.vue'
+
+const result = shallowRef('')
+const inputAuth = shallowRef('')
+
+const model = ref({
+  auths: [] as string[],
+})
+
+const validationSchema = {
+  auths(value: string[]) {
+    return value.length ? true : '请至少添加一个权限标识'
+  },
+}
+
+function addAuth() {
+  const auth = inputAuth.value.trim()
+  if (!auth) {
+    return
+  }
+
+  if (model.value.auths.includes(auth)) {
+    inputAuth.value = ''
+    return
+  }
+
+  model.value.auths = [...model.value.auths, auth]
+  inputAuth.value = ''
+}
+
+function removeAuth(auth: string) {
+  model.value.auths = model.value.auths.filter(item => item !== auth)
+}
+
+function handleSubmit(values: Record<string, unknown>) {
+  result.value = JSON.stringify(values, null, 2)
+}
+</script>
+
+<template>
+  <div class="gap-4 grid max-w-160">
+    <FaForm
+      :model="model"
+      :validation-schema="validationSchema"
+      @submit="handleSubmit"
+    >
+      <FaFormItem name="auths" label="权限标识" required :auto-bind="false">
+        <div class="flex flex-wrap gap-2 max-w-full items-center">
+          <div
+            v-for="item in model.auths"
+            :key="item"
+            class="text-xs text-secondary-foreground px-2.5 py-2 border rounded-lg bg-secondary inline-flex gap-1.5 max-w-full items-center"
+          >
+            <span class="truncate" :title="item">{{ item }}</span>
+            <button
+              type="button"
+              class="flex-center size-4"
+              @click="removeAuth(item)"
+            >
+              <FaIcon name="i-ep:close" />
+            </button>
+          </div>
+          <FaInput
+            v-model="inputAuth"
+            placeholder="请输入权限标识"
+            class="w-50"
+            @keyup.enter="addAuth"
+          />
+          <FaButton
+            type="button"
+            variant="outline"
+            @click="addAuth"
+          >
+            新增
+          </FaButton>
+        </div>
+      </FaFormItem>
+      <FaButton type="submit">
+        提交
+      </FaButton>
+    </FaForm>
+    <pre v-if="result" class="text-sm m-0 p-4 rounded-md bg-muted">{{ result }}</pre>
+  </div>
+</template>
diff --git a/packages/components/src/basic/form/_examples/_disabled.vue b/packages/components/src/basic/form/_examples/_disabled.vue
new file mode 100644
index 00000000..1d3d2ffc
--- /dev/null
+++ b/packages/components/src/basic/form/_examples/_disabled.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaInput from '../../input/index.vue'
+import FaSelect from '../../select/index.vue'
+import FaSwitch from '../../switch/index.vue'
+import FaTextarea from '../../textarea/index.vue'
+import FaFormItem from '../FormItem.vue'
+import FaForm from '../index.vue'
+
+const disabled = shallowRef(true)
+const submitted = shallowRef('')
+
+const model = ref({
+  name: 'Fantastic-admin',
+  role: 'admin',
+  remark: '禁用状态下，表单项内的控件会同步不可编辑。',
+})
+
+const roleOptions = [
+  { label: '管理员', value: 'admin' },
+  { label: '运营', value: 'operator' },
+  { label: '访客', value: 'guest' },
+]
+
+function handleSubmit(values: Record<string, unknown>) {
+  submitted.value = JSON.stringify(values, null, 2)
+}
+</script>
+
+<template>
+  <div class="gap-4 grid max-w-160">
+    <div class="flex gap-2 items-center">
+      <FaSwitch v-model="disabled" />
+      <span class="text-sm">禁用表单</span>
+    </div>
+
+    <FaForm
+      :disabled="disabled"
+      :model="model"
+      @submit="handleSubmit"
+    >
+      <FaFormItem name="name" label="项目名称">
+        <FaInput class="w-full" />
+      </FaFormItem>
+      <FaFormItem name="role" label="角色">
+        <FaSelect :options="roleOptions" class="w-full" />
+      </FaFormItem>
+      <FaFormItem name="remark" label="备注">
+        <FaTextarea class="w-full" />
+      </FaFormItem>
+      <div class="flex gap-2">
+        <FaButton type="submit" :disabled="disabled">
+          提交
+        </FaButton>
+        <FaButton type="reset" variant="outline" :disabled="disabled">
+          重置
+        </FaButton>
+      </div>
+    </FaForm>
+
+    <pre v-if="submitted" class="text-sm m-0 p-4 rounded-md bg-muted">{{ submitted }}</pre>
+  </div>
+</template>
diff --git a/packages/components/src/basic/form/_examples/_dynamic.vue b/packages/components/src/basic/form/_examples/_dynamic.vue
new file mode 100644
index 00000000..f20ee1c0
--- /dev/null
+++ b/packages/components/src/basic/form/_examples/_dynamic.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { FormExpose } from '../index'
+import { ref, shallowRef, useTemplateRef } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaInput from '../../input/index.vue'
+import FaFormItem from '../FormItem.vue'
+import FaForm from '../index.vue'
+
+interface ContactValue {
+  name: string
+  phone: string
+}
+
+const formRef = useTemplateRef<FormExpose>('formRef')
+const submitted = shallowRef('')
+const model = ref<{ contacts: ContactValue[] }>({
+  contacts: [
+    createContact('张三', '13800138000'),
+  ],
+})
+
+function createContact(name = '', phone = ''): ContactValue {
+  return { name, phone }
+}
+
+function addContact() {
+  model.value.contacts.push(createContact())
+  formRef.value?.clearValidate()
+  submitted.value = ''
+}
+
+function removeContact(index: number) {
+  if (model.value.contacts.length <= 1) {
+    return
+  }
+
+  model.value.contacts.splice(index, 1)
+  formRef.value?.clearValidate()
+  submitted.value = ''
+}
+
+function validateName(value?: string) {
+  return value?.trim() ? true : '请输入联系人姓名'
+}
+
+function validatePhone(value?: string) {
+  return /^1[3-9]\d{9}$/.test(value ?? '') ? true : '请输入有效手机号'
+}
+
+function handleSubmit(values: Record<string, unknown>) {
+  submitted.value = JSON.stringify(values, null, 2)
+}
+</script>
+
+<template>
+  <div class="gap-4 grid max-w-170">
+    <FaForm
+      ref="formRef"
+      :model="model"
+      @submit="handleSubmit"
+    >
+      <div
+        v-for="(_contact, index) in model.contacts"
+        :key="index"
+        class="p-3 border rounded-md gap-3 grid"
+      >
+        <div class="flex gap-3 items-center justify-between">
+          <div class="text-sm font-medium">
+            联系人 {{ index + 1 }}
+          </div>
+          <FaButton
+            type="button"
+            variant="outline"
+            size="sm"
+            :disabled="model.contacts.length <= 1"
+            @click="removeContact(index)"
+          >
+            删除
+          </FaButton>
+        </div>
+
+        <FaFormItem
+          :name="`contacts[${index}].name`"
+          label="姓名"
+          required
+          :rules="validateName"
+        >
+          <FaInput placeholder="请输入姓名" class="w-full" />
+        </FaFormItem>
+
+        <FaFormItem
+          :name="`contacts[${index}].phone`"
+          label="手机号"
+          required
+          :rules="validatePhone"
+        >
+          <FaInput type="tel" placeholder="请输入手机号" class="w-full" />
+        </FaFormItem>
+      </div>
+
+      <div class="flex flex-wrap gap-2">
+        <FaButton type="button" variant="outline" @click="addContact">
+          新增联系人
+        </FaButton>
+        <FaButton type="submit">
+          提交
+        </FaButton>
+      </div>
+    </FaForm>
+
+    <pre v-if="submitted" class="text-sm m-0 p-4 rounded-md bg-muted">{{ submitted }}</pre>
+  </div>
+</template>
diff --git a/packages/components/src/basic/form/_examples/_layout.vue b/packages/components/src/basic/form/_examples/_layout.vue
new file mode 100644
index 00000000..9f001d4e
--- /dev/null
+++ b/packages/components/src/basic/form/_examples/_layout.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { FormLabelPlacement } from '../context'
+import { ref, shallowRef } from 'vue'
+import FaInput from '../../input/index.vue'
+import FaNumberField from '../../number-field/index.vue'
+import FaRadioGroup from '../../radio-group/index.vue'
+import FaFormItem from '../FormItem.vue'
+import FaForm from '../index.vue'
+
+const labelPlacement = shallowRef<FormLabelPlacement>('left')
+const labelWidth = shallowRef(150)
+
+const model = ref({
+  name: 'Fantastic-admin',
+  email: 'admin@example.com',
+  phone: '13800138000',
+})
+
+const labelPlacementOptions: { label: string, value: FormLabelPlacement }[] = [
+  { label: 'top', value: 'top' },
+  { label: 'left', value: 'left' },
+  { label: 'right', value: 'right' },
+]
+</script>
+
+<template>
+  <div class="gap-4 grid max-w-170">
+    <div class="gap-4 grid sm:grid-cols-[minmax(0,1fr)_200px]">
+      <div class="gap-2 grid">
+        <div class="text-sm font-medium">
+          label-placement
+        </div>
+        <FaRadioGroup v-model="labelPlacement" :options="labelPlacementOptions" class="flex flex-wrap gap-4" />
+      </div>
+
+      <div class="gap-2 grid">
+        <div class="text-sm font-medium">
+          label-width
+        </div>
+        <FaNumberField v-model="labelWidth" :min="80" :max="240" :step="10" class="w-full" />
+      </div>
+    </div>
+
+    <FaForm
+      :model="model"
+      :label-placement="labelPlacement"
+      :label-width="labelWidth"
+    >
+      <FaFormItem name="name" label="项目名称">
+        <FaInput class="w-full" />
+      </FaFormItem>
+      <FaFormItem name="email" label="邮箱地址">
+        <FaInput type="email" class="w-full" />
+      </FaFormItem>
+      <FaFormItem name="phone" label="联系电话">
+        <FaInput type="tel" class="w-full" />
+      </FaFormItem>
+    </FaForm>
+  </div>
+</template>
diff --git a/packages/components/src/basic/form/_examples/_methods.vue b/packages/components/src/basic/form/_examples/_methods.vue
new file mode 100644
index 00000000..347f1cf7
--- /dev/null
+++ b/packages/components/src/basic/form/_examples/_methods.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { FormExpose } from '../index'
+import { ref, shallowRef, useTemplateRef } from 'vue'
+import FaButton from '../../button/index.vue'
+import FaInput from '../../input/index.vue'
+import FaFormItem from '../FormItem.vue'
+import FaForm from '../index.vue'
+
+const formRef = useTemplateRef<FormExpose>('formRef')
+const message = shallowRef('')
+
+const model = ref({
+  email: '',
+  nickname: '',
+})
+
+const validationSchema = {
+  email(value: string) {
+    return /^\S[^\s@]*@\S[^\s.]*\.\S+$/.test(value) ? true : '请输入有效邮箱'
+  },
+  nickname(value: string) {
+    return value.length >= 2 ? true : '昵称至少 2 个字符'
+  },
+}
+
+async function submit() {
+  await formRef.value?.submit()
+}
+
+function handleSubmit() {
+  message.value = '提交成功'
+}
+
+async function validate() {
+  const result = await formRef.value?.validate()
+  message.value = result?.valid ? '校验通过' : '校验未通过'
+}
+
+function fillDemo() {
+  formRef.value?.setFieldValue('email', 'admin@example.com')
+  formRef.value?.setFieldValue('nickname', 'Fantastic')
+}
+
+function resetFields() {
+  formRef.value?.resetFields()
+  message.value = ''
+}
+</script>
+
+<template>
+  <div class="gap-4 grid max-w-160">
+    <FaForm
+      ref="formRef"
+      :model="model"
+      :validation-schema="validationSchema"
+      scroll-to-error
+      @submit="handleSubmit"
+    >
+      <FaFormItem name="email" label="邮箱" required>
+        <FaInput type="email" class="w-full" />
+      </FaFormItem>
+      <FaFormItem name="nickname" label="昵称" required>
+        <FaInput class="w-full" />
+      </FaFormItem>
+      <div class="flex flex-wrap gap-2">
+        <FaButton type="button" @click="submit">
+          提交
+        </FaButton>
+        <FaButton type="button" @click="validate">
+          校验
+        </FaButton>
+        <FaButton type="button" variant="outline" @click="fillDemo">
+          填充
+        </FaButton>
+        <FaButton type="button" variant="outline" @click="resetFields">
+          重置
+        </FaButton>
+      </div>
+    </FaForm>
+    <div v-if="message" class="text-sm text-muted-foreground">
+      {{ message }}
+    </div>
+  </div>
+</template>
diff --git a/packages/components/src/basic/form/_examples/_slot.vue b/packages/components/src/basic/form/_examples/_slot.vue
new file mode 100644
index 00000000..0d78b89c
--- /dev/null
+++ b/packages/components/src/basic/form/_examples/_slot.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue'
+import FaButton from '../../button/index.vue'
+import { Checkbox as FaCheckbox } from '../../checkbox/checkbox'
+import FaInput from '../../input/index.vue'
+import FaFormItem from '../FormItem.vue'
+import FaForm from '../index.vue'
+
+const result = shallowRef('')
+
+const model = ref({
+  email: '',
+  agreement: false,
+})
+
+const validationSchema = {
+  email(value: string) {
+    return /^\S[^\s@]*@\S[^\s.]*\.\S+$/.test(value) ? true : '请输入有效邮箱'
+  },
+  agreement(value: boolean) {
+    return value ? true : '请先同意服务协议'
+  },
+}
+
+function handleSubmit(values: Record<string, unknown>) {
+  result.value = JSON.stringify(values, null, 2)
+}
+</script>
+
+<template>
+  <div class="gap-4 grid max-w-160">
+    <FaForm
+      :model="model"
+      :validation-schema="validationSchema"
+      @submit="handleSubmit"
+    >
+      <FaFormItem name="email" required>
+        <template #label>
+          <span>邮箱</span>
+          <span class="text-destructive">*</span>
+        </template>
+        <FaInput type="email" placeholder="name@example.com" class="w-full" />
+        <template #description>
+          用于接收账号通知和安全提醒
+        </template>
+      </FaFormItem>
+
+      <FaFormItem name="agreement">
+        <template #default="{ componentField }">
+          <div class="flex gap-2 items-center">
+            <FaCheckbox
+              :model-value="componentField.modelValue as boolean"
+              @update:model-value="componentField['onUpdate:modelValue']?.($event as boolean)"
+            />
+            <span class="text-sm">我已阅读并同意服务协议</span>
+          </div>
+        </template>
+      </FaFormItem>
+
+      <FaButton type="submit">
+        提交
+      </FaButton>
+    </FaForm>
+    <pre v-if="result" class="text-sm m-0 p-4 rounded-md bg-muted">{{ result }}</pre>
+  </div>
+</template>
diff --git a/packages/components/src/basic/form/_examples/index.ts b/packages/components/src/basic/form/_examples/index.ts
new file mode 100644
index 00000000..356590a8
--- /dev/null
+++ b/packages/components/src/basic/form/_examples/index.ts
@@ -0,0 +1,59 @@
+import AsyncValidation from './_async.vue'
+import AsyncValidationRaw from './_async.vue?raw'
+import Basic from './_basic.vue'
+import BasicRaw from './_basic.vue?raw'
+import Composite from './_composite.vue'
+import CompositeRaw from './_composite.vue?raw'
+import Disabled from './_disabled.vue'
+import DisabledRaw from './_disabled.vue?raw'
+import Dynamic from './_dynamic.vue'
+import DynamicRaw from './_dynamic.vue?raw'
+import Layout from './_layout.vue'
+import LayoutRaw from './_layout.vue?raw'
+import Methods from './_methods.vue'
+import MethodsRaw from './_methods.vue?raw'
+import Slot from './_slot.vue'
+import SlotRaw from './_slot.vue?raw'
+
+export default [
+  {
+    title: '基础',
+    component: Basic,
+    componentRaw: BasicRaw,
+  },
+  {
+    title: '禁用',
+    component: Disabled,
+    componentRaw: DisabledRaw,
+  },
+  {
+    title: '异步验证',
+    component: AsyncValidation,
+    componentRaw: AsyncValidationRaw,
+  },
+  {
+    title: '动态表单',
+    component: Dynamic,
+    componentRaw: DynamicRaw,
+  },
+  {
+    title: '复合输入',
+    component: Composite,
+    componentRaw: CompositeRaw,
+  },
+  {
+    title: '布局',
+    component: Layout,
+    componentRaw: LayoutRaw,
+  },
+  {
+    title: '插槽',
+    component: Slot,
+    componentRaw: SlotRaw,
+  },
+  {
+    title: '方法',
+    component: Methods,
+    componentRaw: MethodsRaw,
+  },
+]
diff --git a/packages/components/src/basic/form/context.ts b/packages/components/src/basic/form/context.ts
new file mode 100644
index 00000000..29e7fc88
--- /dev/null
+++ b/packages/components/src/basic/form/context.ts
@@ -0,0 +1,13 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export type FormLabelPlacement = 'top' | 'left' | 'right'
+
+export interface FormLayoutContext {
+  labelPlacement: ComputedRef<FormLabelPlacement>
+  labelWidth: ComputedRef<string | number | undefined>
+  disabled: ComputedRef<boolean>
+  registerField: (name: string, el: HTMLElement) => void
+  unregisterField: (name: string, el?: HTMLElement) => void
+}
+
+export const FORM_LAYOUT_INJECTION_KEY: InjectionKey<FormLayoutContext> = Symbol('form-layout')
diff --git a/packages/components/src/basic/form/form/FormControl.vue b/packages/components/src/basic/form/form/FormControl.vue
new file mode 100644
index 00000000..089168ad
--- /dev/null
+++ b/packages/components/src/basic/form/form/FormControl.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Slot } from 'reka-ui'
+import { useFormField } from './useFormField'
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    data-slot="form-control"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>
diff --git a/packages/components/src/basic/form/form/FormDescription.vue b/packages/components/src/basic/form/form/FormDescription.vue
new file mode 100644
index 00000000..c60155ce
--- /dev/null
+++ b/packages/components/src/basic/form/form/FormDescription.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#utils'
+import { useFormField } from './useFormField'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    data-slot="form-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/packages/components/src/basic/form/form/FormItem.vue b/packages/components/src/basic/form/form/FormItem.vue
new file mode 100644
index 00000000..4a3ee4de
--- /dev/null
+++ b/packages/components/src/basic/form/form/FormItem.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useId } from 'reka-ui'
+import { provide } from 'vue'
+import { cn } from '#utils'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div
+    data-slot="form-item"
+    :class="cn('grid gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/components/src/basic/form/form/FormLabel.vue b/packages/components/src/basic/form/form/FormLabel.vue
new file mode 100644
index 00000000..a5c6f11d
--- /dev/null
+++ b/packages/components/src/basic/form/form/FormLabel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { LabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#utils'
+import { Label } from '../../label/label'
+import { useFormField } from './useFormField'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    data-slot="form-label"
+    :data-error="!!error"
+    :class="cn(
+      'data-[error=true]:text-destructive',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/packages/components/src/basic/form/form/FormMessage.vue b/packages/components/src/basic/form/form/FormMessage.vue
new file mode 100644
index 00000000..35105d4c
--- /dev/null
+++ b/packages/components/src/basic/form/form/FormMessage.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { ErrorMessage } from 'vee-validate'
+import { toValue } from 'vue'
+import { cn } from '#utils'
+import { useFormField } from './useFormField'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+defineSlots<{
+  default?: (props: { message: string | undefined }) => any
+}>()
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    data-slot="form-message"
+    as="p"
+    :name="toValue(name)"
+    :class="cn('text-destructive text-sm', props.class)"
+  >
+    <template #default="{ message }">
+      <slot :message="message">
+        {{ message }}
+      </slot>
+    </template>
+  </ErrorMessage>
+</template>
diff --git a/packages/components/src/basic/form/form/index.ts b/packages/components/src/basic/form/form/index.ts
new file mode 100644
index 00000000..1a3be118
--- /dev/null
+++ b/packages/components/src/basic/form/form/index.ts
@@ -0,0 +1,7 @@
+export { default as FormControl } from './FormControl.vue'
+export { default as FormDescription } from './FormDescription.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'
diff --git a/packages/components/src/basic/form/form/injectionKeys.ts b/packages/components/src/basic/form/form/injectionKeys.ts
new file mode 100644
index 00000000..0352a551
--- /dev/null
+++ b/packages/components/src/basic/form/form/injectionKeys.ts
@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY: InjectionKey<string> = Symbol('form-item')
diff --git a/packages/components/src/basic/form/form/useFormField.ts b/packages/components/src/basic/form/form/useFormField.ts
new file mode 100644
index 00000000..dba81fe3
--- /dev/null
+++ b/packages/components/src/basic/form/form/useFormField.ts
@@ -0,0 +1,31 @@
+import { FieldContextKey } from 'vee-validate'
+import { computed, inject } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { name, errorMessage: error, meta } = fieldContext
+  const id = fieldItemContext
+
+  const fieldState = {
+    valid: computed(() => meta.valid),
+    isDirty: computed(() => meta.dirty),
+    isTouched: computed(() => meta.touched),
+    error,
+  }
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
diff --git a/packages/components/src/basic/form/index.ts b/packages/components/src/basic/form/index.ts
new file mode 100644
index 00000000..92196a17
--- /dev/null
+++ b/packages/components/src/basic/form/index.ts
@@ -0,0 +1,5 @@
+export type { FormLabelPlacement } from './context'
+export { default as FormItem } from './FormItem.vue'
+export type { FormItemProps, FormItemSlotProps } from './FormItem.vue'
+export { default as Form } from './index.vue'
+export type { FormEmits, FormExpose, FormProps, FormSlotProps } from './index.vue'
diff --git a/packages/components/src/basic/form/index.vue b/packages/components/src/basic/form/index.vue
new file mode 100644
index 00000000..cd3e503d
--- /dev/null
+++ b/packages/components/src/basic/form/index.vue
@@ -0,0 +1,319 @@
+<script lang="ts">
+import type {
+  FormErrors,
+  FormMeta,
+  FormOptions,
+  FormState,
+  FormValidationResult,
+  GenericObject,
+  GenericValidateFunction,
+  InvalidSubmissionContext,
+  Path,
+  ResetFormOpts,
+  SubmissionContext,
+  TypedSchema,
+  YupSchema,
+} from 'vee-validate'
+import type { HTMLAttributes, MaybeRef } from 'vue'
+import type { FormLabelPlacement } from './context'
+</script>
+
+<script setup lang="ts" generic="TValues extends GenericObject = GenericObject, TOutput extends GenericObject = TValues">
+import { cloneDeep, isEqual, isPlainObject } from 'es-toolkit'
+import { useForm } from 'vee-validate'
+import { computed, nextTick, provide, toRaw, toRef, watch } from 'vue'
+import { cn } from '#utils'
+import { FORM_LAYOUT_INJECTION_KEY } from './context'
+
+export interface FormProps<
+  TValues extends GenericObject = GenericObject,
+  TOutput extends GenericObject = TValues,
+> {
+  as?: 'form' | 'div'
+  model?: FormOptions<TValues, TOutput>['initialValues']
+  validationSchema?: FormValidationSchema<TValues, TOutput>
+  initialValues?: FormOptions<TValues, TOutput>['initialValues']
+  initialErrors?: FormOptions<TValues, TOutput>['initialErrors']
+  initialTouched?: FormOptions<TValues, TOutput>['initialTouched']
+  validateOnMount?: FormOptions<TValues, TOutput>['validateOnMount']
+  keepValuesOnUnmount?: FormOptions<TValues, TOutput>['keepValuesOnUnmount']
+  name?: FormOptions<TValues, TOutput>['name']
+  labelPlacement?: FormLabelPlacement
+  labelWidth?: string | number
+  disabled?: boolean
+  scrollToError?: boolean
+  class?: HTMLAttributes['class']
+}
+
+export type FormValidationSchema<
+  TValues extends GenericObject = GenericObject,
+  TOutput extends GenericObject = TValues,
+> = MaybeRef<
+  | Partial<Record<Path<TValues>, string | GenericValidateFunction<any> | GenericObject>>
+  | TypedSchema<TValues, TOutput>
+  | YupSchema<TValues>
+  | undefined
+>
+
+export interface FormEmits<
+  TValues extends GenericObject = GenericObject,
+  TOutput extends GenericObject = TValues,
+> {
+  'update:model': [model: TValues]
+  'submit': [values: TOutput, ctx: SubmissionContext<TValues>]
+  'invalidSubmit': [ctx: InvalidSubmissionContext<TValues, TOutput>]
+}
+
+export interface FormSlotProps<
+  TValues extends GenericObject = GenericObject,
+  TOutput extends GenericObject = TValues,
+> {
+  values: TValues
+  errors: FormErrors<TValues>
+  meta: FormMeta<TValues>
+  isSubmitting: boolean
+  submitCount: number
+  submit: () => Promise<void>
+  validate: () => Promise<FormValidationResult<TValues, TOutput>>
+  resetFields: (state?: Partial<FormState<TValues>>, opts?: ResetFormOpts) => void
+  clearValidate: (name?: Path<TValues> | string) => void
+  scrollToField: (name: Path<TValues> | string) => boolean
+}
+
+export interface FormExpose<
+  TValues extends GenericObject = GenericObject,
+  TOutput extends GenericObject = TValues,
+> {
+  submit: () => Promise<void>
+  validate: () => Promise<FormValidationResult<TValues, TOutput>>
+  resetFields: (state?: Partial<FormState<TValues>>, opts?: ResetFormOpts) => void
+  clearValidate: (name?: Path<TValues> | string) => void
+  setFieldValue: (name: Path<TValues> | string, value: unknown, shouldValidate?: boolean) => void
+  setFieldError: (name: Path<TValues> | string, message?: string) => void
+  scrollToField: (name: Path<TValues> | string) => boolean
+}
+
+defineOptions({
+  name: 'BuiltInForm',
+})
+
+const props = withDefaults(defineProps<FormProps<TValues, TOutput>>(), {
+  as: 'form',
+  labelPlacement: 'top',
+})
+
+const emit = defineEmits<FormEmits<TValues, TOutput>>()
+
+const fieldElements = new Map<string, HTMLElement>()
+
+const form = useForm<TValues, TOutput>({
+  validationSchema: toRef(props, 'validationSchema') as FormProps<TValues, TOutput>['validationSchema'],
+  initialValues: cloneFormValue(props.model ?? props.initialValues),
+  initialErrors: props.initialErrors,
+  initialTouched: props.initialTouched,
+  validateOnMount: props.validateOnMount,
+  keepValuesOnUnmount: props.keepValuesOnUnmount,
+  name: props.name,
+})
+
+let syncingFromModel = false
+let syncingToModel = false
+
+const resolvedLabelPlacement = computed(() => props.labelPlacement)
+const resolvedLabelWidth = computed(() => props.labelWidth ?? '96px')
+const resolvedDisabled = computed(() => Boolean(props.disabled))
+const rootClass = computed(() => cn('grid gap-1', props.class))
+
+const slotProps = computed<FormSlotProps<TValues, TOutput>>(() => ({
+  values: form.values,
+  errors: form.errors.value,
+  meta: form.meta.value,
+  isSubmitting: form.isSubmitting.value,
+  submitCount: form.submitCount.value,
+  submit,
+  validate,
+  resetFields,
+  clearValidate,
+  scrollToField,
+}))
+
+function registerField(name: string, el: HTMLElement) {
+  fieldElements.set(name, el)
+}
+
+function unregisterField(name: string, el?: HTMLElement) {
+  if (!el || fieldElements.get(name) === el) {
+    fieldElements.delete(name)
+  }
+}
+
+watch(
+  () => props.model,
+  (model) => {
+    if (!model || syncingToModel) {
+      return
+    }
+
+    const nextValues = cloneFormValue(model) as NonNullable<FormProps<TValues, TOutput>['model']>
+    if (isEqual(toRaw(form.values), nextValues)) {
+      return
+    }
+
+    syncingFromModel = true
+    form.setValues(nextValues, false)
+    void nextTick(() => {
+      syncingFromModel = false
+    })
+  },
+  { deep: true },
+)
+
+watch(
+  form.values,
+  (values) => {
+    if (!props.model || syncingFromModel) {
+      return
+    }
+
+    const nextModel = cloneFormValue(values) as TValues
+    if (isEqual(toRaw(props.model), nextModel)) {
+      return
+    }
+
+    syncingToModel = true
+    syncModel(props.model as GenericObject, nextModel)
+    emit('update:model', nextModel)
+    void nextTick(() => {
+      syncingToModel = false
+    })
+  },
+  { deep: true },
+)
+
+provide(FORM_LAYOUT_INJECTION_KEY, {
+  labelPlacement: resolvedLabelPlacement,
+  labelWidth: resolvedLabelWidth,
+  disabled: resolvedDisabled,
+  registerField,
+  unregisterField,
+})
+
+function validate() {
+  return form.validate()
+}
+
+function resetFields(state?: Partial<FormState<TValues>>, opts?: ResetFormOpts) {
+  form.resetForm(state, opts)
+}
+
+function clearValidate(name?: Path<TValues> | string) {
+  if (name) {
+    form.setFieldError(name as Path<TValues>, undefined)
+    return
+  }
+
+  form.setErrors({})
+}
+
+function setFieldValue(name: Path<TValues> | string, value: unknown, shouldValidate = true) {
+  form.setFieldValue(name as Path<TValues>, value as never, shouldValidate)
+}
+
+function setFieldError(name: Path<TValues> | string, message?: string) {
+  form.setFieldError(name as Path<TValues>, message)
+}
+
+function cloneFormValue<T>(value: T): T {
+  return cloneDeep(toRaw(value)) as T
+}
+
+function syncModel(target: GenericObject, source: GenericObject) {
+  Object.keys(target).forEach((key) => {
+    if (!Object.hasOwn(source, key)) {
+      delete target[key]
+    }
+  })
+
+  Object.entries(source).forEach(([key, value]) => {
+    const currentValue = target[key]
+    const rawCurrentValue = toRaw(currentValue)
+
+    if (isPlainObject(rawCurrentValue) && isPlainObject(value)) {
+      syncModel(currentValue as GenericObject, value as GenericObject)
+      return
+    }
+
+    if (!isEqual(rawCurrentValue, value)) {
+      target[key] = value
+    }
+  })
+}
+
+function scrollToField(name: Path<TValues> | string) {
+  const el = fieldElements.get(String(name))
+
+  if (!el) {
+    return false
+  }
+
+  el.scrollIntoView({
+    block: 'center',
+    behavior: 'smooth',
+  })
+  focusFieldControl(el)
+  return true
+}
+
+function focusFieldControl(el: HTMLElement) {
+  const focusable = el.querySelector<HTMLElement>(
+    '[data-slot="form-control"], input, textarea, select, button, [tabindex]:not([tabindex="-1"])',
+  )
+
+  focusable?.focus?.({ preventScroll: true })
+}
+
+async function handleInvalidSubmit(ctx: InvalidSubmissionContext<TValues, TOutput>) {
+  emit('invalidSubmit', ctx)
+
+  if (!props.scrollToError) {
+    return
+  }
+
+  await nextTick()
+  const [firstFieldName] = Object.keys(ctx.errors)
+
+  if (firstFieldName) {
+    scrollToField(firstFieldName)
+  }
+}
+
+const submitForm = form.handleSubmit(
+  (values, ctx) => emit('submit', values, ctx),
+  ctx => void handleInvalidSubmit(ctx),
+)
+
+function submit() {
+  return submitForm()
+}
+
+defineExpose<FormExpose<TValues, TOutput>>({
+  submit,
+  validate,
+  resetFields,
+  clearValidate,
+  setFieldValue,
+  setFieldError,
+  scrollToField,
+})
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    data-slot="form"
+    :class="rootClass"
+    @submit.prevent="submitForm"
+  >
+    <slot v-bind="slotProps" />
+  </component>
+</template>
diff --git a/packages/components/src/basic/radio-group/index.vue b/packages/components/src/basic/radio-group/index.vue
index 24503716..27a7ec03 100644
--- a/packages/components/src/basic/radio-group/index.vue
+++ b/packages/components/src/basic/radio-group/index.vue
@@ -95,11 +95,10 @@ function isOptionChecked(option: TOption) {
       "
     >
       <RadioGroupItem
-        v-show="!slots.option"
         :id="getOptionId(option, index)"
         :value="option.value"
         :disabled="isOptionDisabled(option)"
-        :class="props.itemClass"
+        :class="cn(props.itemClass, slots.option && 'hidden')"
       />
       <Label
         :for="getOptionId(option, index)"
diff --git a/packages/components/src/examples.ts b/packages/components/src/examples.ts
index 396fafaf..4188b506 100644
--- a/packages/components/src/examples.ts
+++ b/packages/components/src/examples.ts
@@ -12,6 +12,7 @@ export { default as drawer } from './basic/drawer/_examples'
 export { default as dropdown } from './basic/dropdown/_examples'
 export { default as fileUpload } from './basic/file-upload/_examples'
 export { default as fixedBar } from './basic/fixed-bar/_examples'
+export { default as form } from './basic/form/_examples'
 export { default as hoverCard } from './basic/hover-card/_examples'
 export { default as icon } from './basic/icon/_examples'
 export { default as imagePreview } from './basic/image-preview/_examples'
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 42814fce..41a2e267 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -17,6 +17,8 @@ export { Dropdown as FaDropdown } from './basic/dropdown'
 export { FileUpload as FaFileUpload } from './basic/file-upload'
 export type { FileItem, FileUploadRequestOptions } from './basic/file-upload'
 export { FixedBar as FaFixedBar } from './basic/fixed-bar'
+export { Form as FaForm, FormItem as FaFormItem } from './basic/form'
+export type { FormEmits, FormExpose, FormItemProps, FormItemSlotProps, FormLabelPlacement, FormProps, FormSlotProps } from './basic/form'
 export { HoverCard as FaHoverCard } from './basic/hover-card'
 export { Icon as FaIcon } from './basic/icon'
 export { ImagePreview as FaImagePreview } from './basic/image-preview'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1c85f612..8c48a2b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2053,6 +2053,9 @@ importers:
       unplugin-vue-components:
         specifier: 'catalog:'
         version: 32.1.0(vue@3.5.38(typescript@6.0.3))
+      vee-validate:
+        specifier: 'catalog:'
+        version: 4.15.1(vue@3.5.38(typescript@6.0.3))
       vite:
         specifier: 'catalog:'
         version: 8.0.16(@types/node@25.9.3)(esbuild@0.28.0)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.100.0)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0)
diff --git a/skills/fa-crud-page-generator/SKILL.md b/skills/fa-crud-page-generator/SKILL.md
index 8c98ba7a..75563660 100644
--- a/skills/fa-crud-page-generator/SKILL.md
+++ b/skills/fa-crud-page-generator/SKILL.md
@@ -1,12 +1,12 @@
 ---
 name: fa-crud-page-generator
-description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，遵循框架标准模块结构和内建 Fa* 组件体系，产出列表页、详情/编辑页、DetailForm 表单组件、API 模块、fake mock 数据、可选路由。用户说：'帮我做一个商品管理页面'、'搭一个用户列表，能搜索分页新增编辑删除'、'生成订单模块'、'新建 XX 管理模块'、'快速搭一个标准模块/CRUD 页面' 时，即使没有明确说 CRUD，也应触发此技能。"
+description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，遵循框架标准模块结构和内建 Fa* 组件体系，使用 FaForm/FaFormItem 生成新增/编辑表单，产出列表页、详情/编辑页、DetailForm 表单组件、API 模块、fake mock 数据、可选路由。用户说：'帮我做一个商品管理页面'、'搭一个用户列表，能搜索分页新增编辑删除'、'生成订单模块'、'新建 XX 管理模块'、'快速搭一个标准模块/CRUD 页面' 时，即使没有明确说 CRUD，也应触发此技能。"
 ---
 
 # CRUD 页面生成器
 
 在 Fantastic-admin 框架中生成标准 CRUD 业务模块。生成时遵循框架当前标准模块结构：
-列表页、独立详情页、`DetailForm` 表单组件、API 模块、fake mock、可选路由
+列表页、独立详情页、`DetailForm` 表单组件、API 模块、fake mock、可选路由和 route i18n
 要一次性配套生成。
 
 优先复刻框架现有写法，而不是重新发明页面结构：列表页用 `FaSearchBar` + `FaTable` +
@@ -20,6 +20,7 @@ description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，遵
 - `apps/<app>/src/api/modules/{fileName}.ts` — API 模块
 - `apps/<app>/src/api/fake_modules/{fileName}.fake.ts` — fake mock 数据，可选
 - `apps/<app>/src/router/modules/{routeFileName}.ts` — 前端路由，可选
+- `apps/<app>/src/locales/lang/route/{locale}.json` — 路由标题 i18n，可选
 
 ---
 
@@ -47,7 +48,7 @@ description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，遵
 - **是否启用批量删除**：默认启用
 - **是否支持列表高度自适应**：默认生成 `tableAutoHeight` 代码
 - **是否生成 fake mock**：开发阶段默认推荐生成
-- **是否生成路由**：仅当前端路由由本地配置维护时生成
+- **是否生成路由和 route i18n**：仅当前端路由由本地配置维护时生成
 
 如果用户只给出模块名和很少字段，使用一个最小可运行字段：
 `title`（标题，`string`，列表/搜索/表单显示，必填），并在完成后提醒用户继续替换业务字段。
@@ -83,8 +84,9 @@ description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，遵
 - 行操作用 `FaButton size="icon-sm"` 编辑按钮和 `FaDropdown` 删除菜单。
 - 删除确认统一使用 `useFaModal().confirm`，提示成功统一使用 `useFaToast().success`。
 - `router` 模式在列表页通过 `eventBus.on('get-data-list')` 接收详情页提交后的刷新事件；卸载时 `eventBus.off('get-data-list')`。
-- `modal` / `drawer` 模式通过 `useFaModal().create` 或 `useFaDrawer().create` 渲染 `DetailForm`，confirm 时调用表单暴露的 `submit()`，成功后刷新列表并关闭。
-- `DetailForm` 使用 Element Plus `FormInstance` / `FormRules`，通过 `useTemplateRef<FormInstance>('formRef')` 获取表单引用，并 `defineExpose({ submit() { ... } })` 给外部调用。
+- `modal` / `drawer` 模式通过 `useFaModal().create` 或 `useFaDrawer().create` 渲染 `DetailForm`，confirm 时调用表单暴露的 `submit()`；仅当返回 `true` 时刷新列表并关闭。
+- `DetailForm` 使用 `FaForm/FaFormItem`，表单对象使用 `const model = ref<...>({...})`，通过 `useTemplateRef<FormExpose>('formRef')` 获取表单引用，并只 `defineExpose({ submit })` 给外部调用。
+- `submit()` 必须返回 `Promise<boolean>`：校验失败返回 `false`，新增/编辑成功后提示并返回 `true`。父级页面、modal、drawer 都必须检查返回值，避免校验失败时关闭页面或弹窗。
 - fake mock 文件放在 `apps/<app>/src/api/fake_modules/`，不是 `api/modules/`。
 - API 模块开启 mock 时在每个请求配置中设置 `fake: true`；不生成 fake 时去掉 `fake: true`。
 
@@ -99,6 +101,7 @@ description: "为 Fantastic-admin 框架生成完整的 CRUD 业务模块，遵
 - 当父级路由只作为菜单入口、列表页作为默认子页时，列表路由使用 `meta.menu: false` 和 `breadcrumb: false`；业务模块如需列表作为独立菜单项，可按用户需求保留菜单。
 - `router` 模式详情路由为 `detail/:id?`，`meta.menu: false`，`activeMenu` 指向列表/父菜单路径。
 - 为避免列表和详情标签页状态混乱，列表路由设置 `keepAlive: '<module>Detail'`，详情路由设置 `keepAlive: true` 与 `noKeepAlive: '<module>List'`。
+- route i18n 至少同步 `zh-cn`、`zh-tw`、`en` 三份 `src/locales/lang/route/*.json`。
 
 ---
 
diff --git a/skills/fa-crud-page-generator/references/templates.md b/skills/fa-crud-page-generator/references/templates.md
index 012000b9..761411e1 100644
--- a/skills/fa-crud-page-generator/references/templates.md
+++ b/skills/fa-crud-page-generator/references/templates.md
@@ -18,6 +18,8 @@
 - `{routeTitle}` — 路由标题，如 `商品管理`
 - `{formMode}` — `router`、`modal` 或 `drawer`
 - `{firstField}` — 删除确认中展示的主字段，如 `title`
+- `{formModelTypes}` — `DetailFormModel` 中除 `id` 外的字段类型
+- `{formValidationSchema}` — `FaForm` 的 validation schema 对象字段
 
 ---
 
@@ -142,7 +144,11 @@ const { open: openModal, update: updateModal } = useFaModal().create({
   beforeClose: (action, done) => {
     if (action === 'confirm') {
       // 调用 DetailForm 组件内部 submit 方法
-      formRef.value?.submit().then(() => {
+      formRef.value?.submit().then((success) => {
+        if (!success) {
+          return
+        }
+
         getDataList()
         done()
       })
@@ -164,7 +170,11 @@ const { open: openDrawer, update: updateDrawer } = useFaDrawer().create({
   beforeClose: (action, done) => {
     if (action === 'confirm') {
       // 调用 DetailForm 组件内部 submit 方法
-      formRef.value?.submit().then(() => {
+      formRef.value?.submit().then((success) => {
+        if (!success) {
+          return
+        }
+
         getDataList()
         done()
       })
@@ -375,7 +385,11 @@ onUnmounted(() => {
 const formRef = useTemplateRef('formRef')
 
 function onSubmit() {
-  formRef.value?.submit().then(() => {
+  formRef.value?.submit().then((success) => {
+    if (!success) {
+      return
+    }
+
     eventBus.emit('get-data-list')
     onCancel()
   })
@@ -397,11 +411,9 @@ function onCancel() {
       </FaPageHeader>
     </FaFixedBar>
     <FaPageMain>
-      <ElRow>
-        <ElCol :md="24" :lg="16">
-          <DetailForm :id="route.params.id as string" ref="formRef" />
-        </ElCol>
-      </ElRow>
+      <div class="max-w-4xl w-full">
+        <DetailForm :id="route.params.id as string" ref="formRef" />
+      </div>
     </FaPageMain>
     <FaFixedBar position="bottom" class="flex-center gap-4">
       <FaButton @click="onSubmit">
@@ -421,7 +433,8 @@ function onCancel() {
 
 ```vue
 <script setup lang="ts">
-import type { FormInstance, FormRules } from 'element-plus'
+import type { FormExpose } from '@fantastic-admin/components'
+import { ref } from 'vue'
 import api{ModuleName} from '@/api/modules/{fileName}'
 
 export interface Props {
@@ -435,24 +448,31 @@ const props = withDefaults(
 )
 
 const loading = ref(false)
-const formRef = useTemplateRef<FormInstance>('formRef')
-const form = ref({
+const formRef = useTemplateRef<FormExpose>('formRef')
+
+interface DetailFormModel {
+  id: number | string
+  {formModelTypes}
+}
+
+const model = ref<DetailFormModel>({
   id: props.id,
   {formInitialValues}
 })
-const formRules = ref<FormRules>({
-  {formRules}
-})
+
+const validationSchema = {
+  {formValidationSchema}
+}
 
 onMounted(() => {
-  if (form.value.id !== '') {
+  if (model.value.id !== '') {
     getInfo()
   }
 })
 
 function getInfo() {
   loading.value = true
-  api{ModuleName}.detail(form.value.id).then((res: any) => {
+  api{ModuleName}.detail(model.value.id).then((res: any) => {
     loading.value = false
     {formAssign}
   }).catch(() => {
@@ -460,35 +480,41 @@ function getInfo() {
   })
 }
 
+async function submit() {
+  const result = await formRef.value?.validate()
+
+  if (!result?.valid) {
+    return false
+  }
+
+  if (model.value.id === '') {
+    await api{ModuleName}.create(model.value)
+    useFaToast().success('新增成功')
+  }
+  else {
+    await api{ModuleName}.edit(model.value)
+    useFaToast().success('编辑成功')
+  }
+
+  return true
+}
+
 defineExpose({
-  submit() {
-    return new Promise<void>((resolve) => {
-      formRef.value?.validate((valid) => {
-        if (valid) {
-          if (form.value.id === '') {
-            api{ModuleName}.create(form.value).then(() => {
-              useFaToast().success('新增成功')
-              resolve()
-            })
-          }
-          else {
-            api{ModuleName}.edit(form.value).then(() => {
-              useFaToast().success('编辑成功')
-              resolve()
-            })
-          }
-        }
-      })
-    })
-  },
+  submit,
 })
 </script>
 
 <template>
   <div v-loading="loading">
-    <ElForm ref="formRef" :model="form" :rules="formRules" label-width="120px" label-suffix="：">
+    <FaForm
+      ref="formRef"
+      :model="model"
+      :validation-schema="validationSchema"
+      label-placement="right"
+      :label-width="120"
+    >
       {formFields}
-    </ElForm>
+    </FaForm>
   </div>
 </template>
 ```
@@ -641,6 +667,7 @@ return (title ? item.title.includes(title) : true)
 
 ```typescript
 import type { RouteRecordRaw } from 'vue-router'
+import { $t } from '@/locales'
 
 function Layout() {
   return import('@/layouts/index.vue')
@@ -763,29 +790,57 @@ const params = {
 ### 表单字段
 
 ```vue
-<ElFormItem label="{label}" prop="{field}">
-  <FaInput v-model="form.{field}" placeholder="请输入{label}" class="w-full" />
-</ElFormItem>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput placeholder="请输入{label}" class="w-full" />
+</FaFormItem>
 ```
 
-### 表单验证规则
+`FaFormItem` 会自动向第一个子控件注入 `modelValue` 和 `onUpdate:modelValue`，不要再手写
+`v-model="model.{field}"` 或 `v-model="model.value.{field}"`。
+
+### 表单 model 类型字段
+
+```typescript
+{field}: string
+status: number
+enabled: boolean
+```
+
+### 表单初始值
+
+```typescript
+{field}: '',
+status: 0,
+enabled: true,
+```
+
+### 表单详情赋值
+
+```typescript
+model.value.{field} = res.data.{field}
+```
+
+### 表单验证 schema
 
 文本输入：
 
 ```typescript
-{field}: [
-  { required: true, message: '请输入{label}', trigger: 'blur' },
-],
+{field}(value: string) {
+  return value?.trim() ? true : '请输入{label}'
+},
 ```
 
 选择、开关、日期：
 
 ```typescript
-{field}: [
-  { required: true, message: '请选择{label}', trigger: 'change' },
-],
+{field}(value: string | number | boolean | undefined) {
+  return value !== undefined && value !== '' ? true : '请选择{label}'
+},
 ```
 
+非必填字段不要生成 validation schema 项；生成必填字段时，在对应 `FaFormItem` 上同时加
+`required`。
+
 ### Mock 数据字段映射
 
 | 字段类型/含义 | faker 方法 |
diff --git a/skills/fa-form-builder/SKILL.md b/skills/fa-form-builder/SKILL.md
index fbd97ca4..b48222fe 100755
--- a/skills/fa-form-builder/SKILL.md
+++ b/skills/fa-form-builder/SKILL.md
@@ -1,11 +1,11 @@
 ---
 name: fa-form-builder
-description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee-validate + zod 验证，全部使用框架内建 Fa* 组件。当用户说：'帮我做一个用户信息填写页'、'我只需要一个提交表单，不需要列表'、'做个设置页面，有几个输入框和保存按钮'、'生成一个注册/编辑/配置表单页'、'只要表单页，不需要增删改查'，即使用户只是说'做个表单页面'也应触发此技能。"
+description: "为 Fantastic-admin 框架生成独立的表单页面，使用 FaForm/FaFormItem + vee-validate + zod 验证，表单 model 使用 ref，全部使用框架内建 Fa* 组件。当用户说：'帮我做一个用户信息填写页'、'我只需要一个提交表单，不需要列表'、'做个设置页面，有几个输入框和保存按钮'、'生成一个注册/编辑/配置表单页'、'只要表单页，不需要增删改查'，即使用户只是说'做个表单页面'也应触发此技能。"
 ---
 
 # 表单页面生成器
 
-在 Fantastic-admin 框架中生成独立的 Router 表单页面，使用 vee-validate + zod 完成表单验证，全部使用框架内建 Fa* 组件，不引入任何 Element Plus 组件。
+在 Fantastic-admin 框架中生成独立的 Router 表单页面，使用 `FaForm/FaFormItem` 承接 vee-validate + zod 表单验证。
 
 **生成的文件：**
 - `apps/<app>/src/views/{path}/{name}/index.vue` — 表单页面（含验证、提交骨架、固定操作栏）
@@ -50,14 +50,14 @@ description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee
 
 字段较多时单列会导致页面过长，双列更紧凑。根据字段数量和复杂度判断是否询问用户布局偏好：
 
-- **单列**：`max-w-600px`，`space-y-6`（字段少、字段较长时适合）
+- **单列**：`max-w-600px`，`grid gap-6`（字段少、字段较长时适合）
 - **双列**：`max-w-1200px`，`grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2`（字段多、字段较短时适合）
 
 ### Step 4：确认并生成
 
 汇总信息，展示将要生成的文件，确认后写入。
 
-生成完成后提示：如需配置路由，请使用 `fa-route-generator` 技能；如需 API 模块，请手动创建。
+生成完成后提示：如需配置路由，请使用 `fa-route-generator` 技能；如需 API 模块，请使用 `fa-crud-page-generator` 或手动创建。
 
 ---
 
@@ -80,9 +80,10 @@ description: "为 Fantastic-admin 框架生成独立的表单页面，使用 vee
 - `{cname}` → 模块中文名
 - `{componentName}` → PascalCase 组件名
 - `{zodSchema}` → zod 字段定义（每个必填字段对应一行 zod 规则）
-- `{initialValues}` → 字段初始值（string 默认 `''`，boolean 默认 `false`，number 默认 `0`，array 默认 `[]`）
-- `{formItems}` → 各字段对应的 FormField 代码片段
+- `{initialValues}` → `model` 字段初始值（string 默认 `''`，boolean 默认 `false`，number 默认 `0`，array 默认 `[]`）
+- `{formItems}` → 各字段对应的 FaFormItem 代码片段
+- `{imports}` → 必要的额外 import；默认留空，Fa* 组件通常由自动导入处理
 - `{maxWidth}` → 单列 `max-w-600px` / 双列 `max-w-1200px`
-- `{gridClass}` → 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `space-y-6`
+- `{gridClass}` → 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `grid gap-6`
 
-生成的代码是骨架：API 调用处用 `// TODO:` 注释标记，动态数据源（select options、upload action 等）用占位注释标记，用户根据实际接口替换。操作栏按钮使用 `FaButton`：取消用 `variant="outline"`，提交用默认 variant 并传 `:loading="isSubmitting"`。
+生成的代码是骨架：API 调用处用 `// TODO:` 注释标记，动态数据源（select options、upload action 等）用占位注释标记，用户根据实际接口替换。表单对象必须使用 `const model = ref({...})`，模板中直接 `:model="model"`；脚本里读写字段使用 `model.value.xxx`。操作栏按钮使用 `FaButton`：取消用 `variant="outline"`，提交用默认 variant 并传 `:loading="loading"`。
diff --git a/skills/fa-form-builder/references/templates.md b/skills/fa-form-builder/references/templates.md
index 2bc3d242..7d1ef15c 100755
--- a/skills/fa-form-builder/references/templates.md
+++ b/skills/fa-form-builder/references/templates.md
@@ -1,16 +1,16 @@
 # 表单页面代码模板
 
-使用 vee-validate + zod 验证，全部使用 Fa* 内建组件，不引入任何 Element Plus 组件。
+使用 FaForm/FaFormItem + vee-validate + zod 验证。
 
 占位符说明：
 - `{cname}` — 模块中文名
 - `{componentName}` — 组件名（PascalCase）
 - `{zodSchema}` — zod 字段定义
-- `{initialValues}` — 表单初始值
-- `{formItems}` — FormField 列表
+- `{initialValues}` — `model` 表单初始值
+- `{formItems}` — FaFormItem 列表
 - `{imports}` — 需要手动 import 的组件
 - `{maxWidth}` — 单列 `max-w-600px` / 双列 `max-w-1200px`
-- `{gridClass}` — 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `space-y-6`
+- `{gridClass}` — 双列时 `grid grid-cols-1 gap-x-8 gap-y-6 items-start md:grid-cols-2` / 单列时 `grid gap-6`
 
 ---
 
@@ -18,10 +18,10 @@
 
 ```vue
 <script setup lang="ts">
+import type { FormExpose } from '@fantastic-admin/components'
 import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
+import { ref } from 'vue'
 import * as z from 'zod'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/ui/shadcn/ui/form'
 {imports}
 
 defineOptions({
@@ -30,22 +30,30 @@ defineOptions({
 
 const router = useRouter()
 
-const formSchema = toTypedSchema(z.object({
+const formRef = useTemplateRef<FormExpose>('formRef')
+const loading = ref(false)
+
+const model = ref({
+  {initialValues}
+})
+
+const validationSchema = toTypedSchema(z.object({
   {zodSchema}
 }))
 
-const { handleSubmit, isSubmitting } = useForm({
-  validationSchema: formSchema,
-  initialValues: {
-    {initialValues}
-  },
-})
+async function onSubmit(values: typeof model.value) {
+  loading.value = true
+  try {
+    // TODO: 调用 API，如 apiXxx.create(values) 或 apiXxx.edit(values)
+  }
+  finally {
+    loading.value = false
+  }
+}
 
-const loading = ref(false)
-
-const onSubmit = handleSubmit(async (values) => {
-  // TODO: 调用 API，如 apiXxx.create(values) 或 apiXxx.edit(values)
-})
+async function submit() {
+  await formRef.value?.submit()
+}
 
 function handleCancel() {
   router.back()
@@ -57,16 +65,22 @@ function handleCancel() {
     <FaPageHeader title="{cname}" />
     <FaPageMain>
       <div v-loading="loading" class="mx-auto {maxWidth}">
-        <form class="{gridClass}" @submit="onSubmit">
+        <FaForm
+          ref="formRef"
+          :model="model"
+          :validation-schema="validationSchema"
+          class="{gridClass}"
+          @submit="onSubmit"
+        >
           {formItems}
-        </form>
+        </FaForm>
       </div>
     </FaPageMain>
     <FaFixedBar position="bottom" class="flex gap-2 justify-center">
       <FaButton type="button" variant="outline" @click="handleCancel">
         取消
       </FaButton>
-      <FaButton type="submit" :loading="isSubmitting" @click="onSubmit">
+      <FaButton type="button" :loading="loading" @click="submit">
         提交
       </FaButton>
     </FaFixedBar>
@@ -76,146 +90,92 @@ function handleCancel() {
 
 ---
 
-## 各字段类型的 FormField 片段
+## 各字段类型的 FaFormItem 片段
 
 ```vue
 <!-- FaInput（文本） -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaInput v-bind="componentField" placeholder="请输入{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput placeholder="请输入{label}" class="w-full" />
+</FaFormItem>
 
 <!-- FaInput（密码）+ FaPasswordStrength -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <div class="w-full space-y-2">
-        <FaInput v-bind="componentField" type="password" placeholder="请输入{label}" class="w-full" />
-        <FaPasswordStrength :model-value="componentField.modelValue" />
-      </div>
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="password" placeholder="请输入{label}" class="w-full" />
+  <template #description="{ value }">
+    <FaPasswordStrength :password="(value as string) ?? ''" />
+  </template>
+</FaFormItem>
 
 <!-- FaTextarea -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaTextarea v-bind="componentField" placeholder="请输入{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaTextarea placeholder="请输入{label}" class="w-full" />
+</FaFormItem>
 
 <!-- FaSelect -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaSelect v-bind="componentField" :options="{field}Options" placeholder="请选择{label}" class="w-full" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaSelect :options="{field}Options" placeholder="请选择{label}" class="w-full" />
+</FaFormItem>
 <!-- script 中同时生成 options 占位：const {field}Options = ref([{ label: '选项1', value: 1 }]) -->
 
-<!-- FaSwitch（componentField 会传字符串，需手动绑定 boolean） -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaSwitch :model-value="value" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<!-- FaSwitch -->
+<FaFormItem name="{field}" label="{label}">
+  <FaSwitch />
+</FaFormItem>
 
 <!-- FaCheckbox（多选，手动维护数组） -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
+<FaFormItem name="{field}" label="{label}">
+  <template #default="{ value, setValue }">
     <div class="flex flex-wrap gap-4">
       <FaCheckbox
         v-for="opt in {field}Options"
         :key="opt.value"
-        :model-value="value?.includes(opt.value)"
-        @update:model-value="(checked) => handleChange(checked ? [...(value || []), opt.value] : (value || []).filter(v => v !== opt.value))"
+        :model-value="((value as string[] | undefined) ?? []).includes(opt.value)"
+        @update:model-value="(checked) => setValue(checked ? [...((value as string[] | undefined) ?? []), opt.value] : ((value as string[] | undefined) ?? []).filter(v => v !== opt.value))"
       >
         {{ opt.label }}
       </FaCheckbox>
     </div>
-    <FormMessage />
-  </FormItem>
-</FormField>
+  </template>
+</FaFormItem>
 <!-- script 中同时生成 options 占位：const {field}Options = [{ label: '选项1', value: '1' }] -->
 
-<!-- 日期（原生 input） -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <input v-bind="componentField" type="date" class="w-full h-9 rounded-md border border-input bg-background px-3 py-1 text-sm" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<!-- 日期 -->
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="date" class="w-full" />
+</FaFormItem>
+
+<!-- 日期时间 -->
+<FaFormItem name="{field}" label="{label}" required>
+  <FaInput type="datetime-local" class="w-full" />
+</FaFormItem>
 
 <!-- FaImageUpload -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaImageUpload :model-value="value" action="/upload/image" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaImageUpload action="/upload/image" />
+</FaFormItem>
 
 <!-- FaFileUpload -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaFileUpload :model-value="value" action="/upload/file" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaFileUpload action="/upload/file" />
+</FaFormItem>
 
 <!-- FaIconPicker -->
-<FormField v-slot="{ componentField }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaIconPicker v-bind="componentField" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}">
+  <FaIconPicker />
+</FaFormItem>
 
 <!-- FaNumberField -->
-<FormField v-slot="{ value, handleChange }" name="{field}">
-  <FormItem>
-    <FormLabel>{label}</FormLabel>
-    <FormControl>
-      <FaNumberField :model-value="value" class="w-full" @update:model-value="handleChange" />
-    </FormControl>
-    <FormMessage />
-  </FormItem>
-</FormField>
+<FaFormItem name="{field}" label="{label}" required>
+  <FaNumberField class="w-full" />
+</FaFormItem>
 
 <!-- 双列布局中需要占满整行的字段，加 md:col-span-2 -->
-<!-- <FormField ... class="md:col-span-2"><FormItem class="md:col-span-2"> -->
+<!-- <FaFormItem name="{field}" label="{label}" class="md:col-span-2"> -->
 ```
 
+`FaFormItem` 会自动向第一个子控件注入 `modelValue` 和 `onUpdate:modelValue`，默认不要手写
+`v-model`。只有多选、组合控件等非单一控件场景，才使用 slot props 手动调用 `setValue`。
+
 ---
 
 ## zod 验证规则片段
@@ -251,16 +211,10 @@ function handleCancel() {
 
 ---
 
-## 需要手动 import 的组件
+## 组件导入说明
 
-以下组件不在自动导入范围内，使用时需在 script 顶部添加 import：
-
-```typescript
-import FaImageUpload from '@/ui/components/FaImageUpload/index.vue'
-import FaFileUpload from '@/ui/components/FaFileUpload/index.vue'
-import FaIconPicker from '@/ui/components/FaIconPicker/index.vue'
-import FaNumberField from '@/ui/components/FaNumberField/index.vue'
-```
+Fantastic-admin 应用默认通过组件解析器自动导入 `Fa*` 组件，通常不需要手动 import。
+只有目标应用未启用自动导入或组件解析器缺少对应组件时，才按该应用本地约定补充 import。
 
 ---
 
@@ -276,8 +230,8 @@ import FaNumberField from '@/ui/components/FaNumberField/index.vue'
 | 下拉、选择、类型、分类、状态（枚举值） | `FaSelect` | 生成 options 数组占位 |
 | 开关、启用、禁用、是否、boolean | `FaSwitch` | |
 | 复选、多选 | `FaCheckbox`（多个） | 每个选项一个 FaCheckbox，手动维护数组 |
-| 日期 | 原生 `<input type="date">` | 暂无 Fa 内建日期选择器 |
-| 日期时间 | 原生 `<input type="datetime-local">` | |
+| 日期 | `FaInput type="date"` | |
+| 日期时间 | `FaInput type="datetime-local"` | |
 | 图片、头像、封面、缩略图 | `FaImageUpload` | |
 | 文件、附件 | `FaFileUpload` | |
 | 图标 | `FaIconPicker` | |