chore: release v6.3.0

- 移除 unbuild --stub 模式
- faToast -> useFaToast

.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/` 内建组件；确实需要改内建组件时先征得用户确认。

.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])` |

.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"`。

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

README.md

@@ -24,8 +24,8 @@
 
 - AI 友好的工程底座，内置多个 Skills
 - 一流的技术栈：Vue 3.6 / Vite 8 / Pinia / UnoCSS / VueUse / TypeScript / ESLint / Stylelint / ...
-- 自由选择喜爱的 UI 库，默认 Element Plus
-- 8 套默认主题方案且可扩展，给不同行业提供专属品牌气质
+- 自由选择喜爱的三方 UI 库
+- 18 套默认主题方案且可扩展，给不同行业提供专属品牌气质
 - 7 款导航菜单模式，匹配产品发展的各个阶段
 - 精细可控的页面保活策略
 - 全方位权限验证
@@ -58,4 +58,4 @@
 
 - [`Fantastic-startkit`](https://hooray.github.io/fantastic-startkit/) - 简单好用的 Vue3 项目启动套件
 - [`Fantastic-mobile`](https://fantastic-mobile.hurui.me/) - 让你的 H5 项目拥有稳固的工程底座
-- [`One-step-admin`](https://one-step-admin.hurui.me) - 干啥都快人一步的 Vue 中后台管理系统框架
+- [`One-step Console`](https://one-step-admin.hurui.me) - 像导播一样编排你的工作现场

apps/core-ant-design-vue/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@fantastic-admin/components": "workspace:*",
     "@fantastic-admin/composables": "workspace:*",
+    "@fantastic-admin/hotkeys": "workspace:*",
     "@fantastic-admin/settings": "workspace:*",
     "@fantastic-admin/types": "workspace:*",
     "@vee-validate/zod": "catalog:",
@@ -28,8 +29,6 @@
     "dayjs": "catalog:",
     "eruda": "catalog:",
     "es-toolkit": "catalog:",
-    "hotkeys-js": "catalog:",
-    "lucide-vue-next": "catalog:",
     "mitt": "catalog:",
     "nprogress": "catalog:",
     "path-browserify": "catalog:",

apps/core-ant-design-vue/src/api/index.ts

@@ -51,7 +51,7 @@ function handleError(error: any) {
     useAppAccountStore().requestLogout()
   }
   else {
-    faToast.error('Error', {
+    useFaToast().error('Error', {
       description: error.message,
     })
   }
@@ -70,7 +70,7 @@ api.interceptors.response.use(
     if (typeof response.data === 'object') {
       if (response.data.status === 1) {
         if (response.data.error) {
-          faToast.warning('Warning', {
+          useFaToast().warning('Warning', {
             description: response.data.error,
           })
           return Promise.reject(response.data)

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,32 +10,38 @@ 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 () => {
-    faToast.success('模拟修改成功，请重新登录')
+    useFaToast().success('模拟修改成功，请重新登录')
     appAccountStore.logout()
   }).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 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 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 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>

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

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

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

apps/core-ant-design-vue/src/composables/app/tabbar.ts

@@ -80,13 +80,13 @@ export function useAppTabbar() {
     const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
     if (index < 0) {
       flag = false
-      !checkOnly && faToast.warning('关闭的标签页不存在', {
+      !checkOnly && useFaToast().warning('关闭的标签页不存在', {
         position: 'top-center',
       })
     }
     else if (appTabbarStore.list.length <= 1) {
       flag = false
-      !checkOnly && faToast.warning('当前只有一个标签页，不可关闭', {
+      !checkOnly && useFaToast().warning('当前只有一个标签页，不可关闭', {
         position: 'top-center',
       })
     }

apps/core-ant-design-vue/src/hotkeys/README.md

@@ -1,107 +0,0 @@
-# Hotkeys 设计说明
-
-这个目录参考 `fantastic-admin/v6-dev/apps/example/src/hotkeys` 的设计，目标是把当前项目里分散在各组件中的快捷键逻辑收拢成一套轻量方案。
-
-## 设计目标
-
-当前方案只解决 4 件事：
-
-1. 快捷键定义不要散落在多个组件里重复写
-2. 快捷键帮助面板不要再手写一份展示文案
-3. 业务组件不要反复手写 `hotkeys()` / `unbind()`
-4. 不引入过重的 command system
-
-所以采用：
-
-- `registry.ts` 统一定义
-- `useHotkeys.ts` 统一注册
-- 业务 handler 仍留在业务组件
-
-这是一种“集中定义 + 就地执行”的轻量折中方案。
-
-## 目录职责
-
-### `registry.ts`
-
-统一维护当前项目的快捷键元数据：
-
-- id
-- keys
-- enabled
-- help
-
-这里负责：
-
-- 统一的 id 常量
-- 真实键位
-- 是否启用的条件
-- 帮助面板展示文案
-- 聚合业务扩展
-
-> 注意：这里不放业务逻辑 handler。
-
-### `registry.extend.ts`
-
-用于放置项目自定义扩展快捷键，避免把业务项全部堆进内建定义中。
-
-### `types.ts`
-
-定义快捷键系统的基础类型，包括：
-
-- `HotkeyBinding`
-- `HotkeyContext`
-- `HotkeyHelpMeta`
-- `HotkeyHandler`
-
-### `useHotkeys.ts`
-
-对 `hotkeys-js` 的薄封装，提供：
-
-- `useHotkey`：注册单个快捷键
-- `useHotkeyBindings`：批量注册快捷键
-
-并统一处理：
-
-- 注册 / 卸载
-- `active` 启停
-- `binding.enabled` 可用性判断
-- 默认 `preventDefault`
-
-## 当前项目已落地的快捷键
-
-### 全局
-
-- `system.info.open`
-- `menuSearch.open`
-- `page.reload`
-
-### 主导航
-
-- `menu.next`
-- `menu.prev`
-
-### 标签栏
-
-- `tabbar.prev`
-- `tabbar.next`
-- `tabbar.closeCurrent`
-- `tabbar.gotoVisibleIndex`
-- `tabbar.gotoLast`
-
-### 菜单搜索弹窗
-
-- `menuSearch.moveUp`
-- `menuSearch.moveDown`
-- `menuSearch.confirm`
-- `menuSearch.close`
-
-## 使用约定
-
-1. 新增快捷键，优先在 `registry.ts` 或 `registry.extend.ts` 补定义
-2. 展示在帮助面板中的快捷键，必须配置 `help`
-3. handler 尽量保留在最了解业务的组件中
-4. 不直接在业务组件里继续散写 `hotkeys('xxx')`
-
-## 现阶段差异
-
-参考项目里还有页面最大化相关快捷键；当前项目暂未引入对应页面最大化能力，所以本次迁移只保留当前项目已有功能，并把原有 `F5` 页面刷新也纳入统一 registry 管理。

apps/core-ant-design-vue/src/hotkeys/extend.ts

@@ -0,0 +1,57 @@
+import type { HotkeyBinding } from '@fantastic-admin/hotkeys'
+
+/**
+ * 业务扩展快捷键 id
+ *
+ * 使用方式：
+ *
+ * export const EXT_HOTKEY_ID = {
+ *   demoOpen: 'demo.open',
+ * } as const
+ */
+export const EXT_HOTKEY_ID = {} as const
+
+type ExtendHotkeyId = typeof EXT_HOTKEY_ID[keyof typeof EXT_HOTKEY_ID]
+
+/**
+ * 业务扩展全局快捷键
+ *
+ * 示例：
+ *
+ * export const extendGlobalHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoOpen,
+ *     keys: ['command+j', 'ctrl+j'],
+ *     enabled: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *     help: {
+ *       group: 'global',
+ *       titleKey: 'global.demoOpen',
+ *       order: 90,
+ *       visible: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *       displayKeys: {
+ *         default: ['Ctrl', 'J'],
+ *         mac: ['⌘', 'J'],
+ *       },
+ *     },
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendGlobalHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]
+
+/**
+ * 业务扩展局部快捷键
+ *
+ * 示例：
+ *
+ * export const extendScopedHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoConfirm,
+ *     keys: ['enter'],
+ *   },
+ *   {
+ *     id: EXT_HOTKEY_ID.demoClose,
+ *     keys: ['esc'],
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendScopedHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]

apps/core-ant-design-vue/src/hotkeys/index.ts

@@ -0,0 +1,41 @@
+import type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+} from '@fantastic-admin/hotkeys'
+import { createHotkeys } from '@fantastic-admin/hotkeys'
+import { EXT_HOTKEY_ID, extendGlobalHotkeyBindings, extendScopedHotkeyBindings } from './extend'
+
+const appHotkeys = createHotkeys({
+  extendIds: EXT_HOTKEY_ID,
+  extendGlobalHotkeyBindings,
+  extendScopedHotkeyBindings,
+  getContext: () => ({
+    settings: useAppSettingsStore().settings,
+  }),
+})
+
+export const HOTKEY_ID = appHotkeys.HOTKEY_ID
+export const hotkeyIds = appHotkeys.hotkeyIds
+export const globalHotkeyBindings = appHotkeys.globalHotkeyBindings
+export const menuSearchHotkeyBindings = appHotkeys.menuSearchHotkeyBindings
+export const hotkeyBindings = appHotkeys.hotkeyBindings
+export const useHotkey = appHotkeys.useHotkey
+export const useHotkeyBindings = appHotkeys.useHotkeyBindings
+
+export type HotkeyId = typeof HOTKEY_ID[keyof typeof HOTKEY_ID]
+export type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+}

apps/core-ant-design-vue/src/hotkeys/registry.extend.ts

@@ -1,22 +0,0 @@
-import type { HotkeyBinding } from './types'
-
-/**
- * 业务扩展快捷键 id
- *
- * 使用方式：
- *
- * export const EXT_HOTKEY_ID = {
- *   demoOpen: 'demo.open',
- * } as const
- */
-export const EXT_HOTKEY_ID = {} as const
-
-/**
- * 业务扩展全局快捷键
- */
-export const extendGlobalHotkeyBindings: HotkeyBinding[] = []
-
-/**
- * 业务扩展局部快捷键
- */
-export const extendScopedHotkeyBindings: HotkeyBinding[] = []

apps/core-ant-design-vue/src/hotkeys/registry.ts

@@ -1,210 +0,0 @@
-import type { HotkeyBinding } from './types'
-import { EXT_HOTKEY_ID, extendGlobalHotkeyBindings, extendScopedHotkeyBindings } from './registry.extend'
-
-export const HOTKEY_ID = {
-  systemInfoOpen: 'system.info.open',
-  menuSearchOpen: 'menuSearch.open',
-  menuNext: 'menu.next',
-  menuPrev: 'menu.prev',
-  tabbarPrev: 'tabbar.prev',
-  tabbarNext: 'tabbar.next',
-  tabbarCloseCurrent: 'tabbar.closeCurrent',
-  tabbarGotoVisibleIndex: 'tabbar.gotoVisibleIndex',
-  tabbarGotoLast: 'tabbar.gotoLast',
-  pageReload: 'page.reload',
-  menuSearchMoveUp: 'menuSearch.moveUp',
-  menuSearchMoveDown: 'menuSearch.moveDown',
-  menuSearchConfirm: 'menuSearch.confirm',
-  menuSearchClose: 'menuSearch.close',
-  ...EXT_HOTKEY_ID,
-} as const
-
-export const hotkeyIds = Object.values(HOTKEY_ID)
-
-/**
- * Hotkeys registry 维护约定
- *
- * 1. 新增快捷键优先在这里补充定义，不要在业务组件里直接写死键位字符串
- * 2. 这里仅维护“定义”和“展示元数据”，不要把业务 handler 塞进 registry
- * 3. 配置类开关尽量写在 enabled / help.visible 中，避免帮助面板与真实行为不一致
- * 4. 需要展示在快捷键帮助面板中的项，必须补充 help
- * 5. 仅局部场景使用的快捷键，也建议在这里定义，再由对应组件按需注册
- */
-export const globalHotkeyBindings: HotkeyBinding[] = [
-  {
-    id: HOTKEY_ID.systemInfoOpen,
-    keys: ['command+i', 'ctrl+i'],
-    help: {
-      group: 'global',
-      titleKey: 'global.system',
-      order: 10,
-      displayKeys: {
-        default: ['Ctrl', 'I'],
-        mac: ['⌘', 'I'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuSearchOpen,
-    keys: ['command+k', 'ctrl+k'],
-    enabled: ctx => ctx.settings.toolbar.menuSearch.enable && ctx.settings.toolbar.menuSearch.hotkeys,
-    help: {
-      group: 'global',
-      titleKey: 'global.search',
-      order: 20,
-      visible: ctx => ctx.settings.toolbar.menuSearch.enable && ctx.settings.toolbar.menuSearch.hotkeys,
-      displayKeys: {
-        default: ['Ctrl', 'K'],
-        mac: ['⌘', 'K'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuNext,
-    keys: ['alt+`'],
-    enabled: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-    help: {
-      group: 'nav',
-      titleKey: 'nav.next',
-      order: 10,
-      visible: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-      displayKeys: {
-        default: ['Alt', '`'],
-        mac: ['⌥', '`'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuPrev,
-    keys: ['alt+shift+`'],
-    enabled: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-    help: {
-      group: 'nav',
-      titleKey: 'nav.prev',
-      order: 20,
-      visible: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-      displayKeys: {
-        default: ['Alt', 'Shift', '`'],
-        mac: ['⌥', '⇧', '`'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarPrev,
-    keys: ['alt+left'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.prev',
-      order: 10,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '←'],
-        mac: ['⌥', '←'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarNext,
-    keys: ['alt+right'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.next',
-      order: 20,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '→'],
-        mac: ['⌥', '→'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarCloseCurrent,
-    keys: ['alt+w'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.close',
-      order: 30,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', 'W'],
-        mac: ['⌥', 'W'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarGotoVisibleIndex,
-    keys: ['alt+1', 'alt+2', 'alt+3', 'alt+4', 'alt+5', 'alt+6', 'alt+7', 'alt+8', 'alt+9'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.n',
-      order: 40,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '1~9'],
-        mac: ['⌥', '1~9'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarGotoLast,
-    keys: ['alt+0'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.last',
-      order: 50,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '0'],
-        mac: ['⌥', '0'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.pageReload,
-    keys: ['f5'],
-  },
-  ...extendGlobalHotkeyBindings,
-]
-
-export const menuSearchHotkeyBindings: HotkeyBinding[] = [
-  {
-    id: HOTKEY_ID.menuSearchMoveUp,
-    keys: ['up'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchMoveDown,
-    keys: ['down'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchConfirm,
-    keys: ['enter'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchClose,
-    keys: ['esc'],
-  },
-]
-
-export const hotkeyBindings: HotkeyBinding[] = [
-  ...globalHotkeyBindings,
-  ...menuSearchHotkeyBindings,
-  ...extendScopedHotkeyBindings,
-]
-
-if (import.meta.env.DEV) {
-  const registeredIds = hotkeyBindings.map(item => item.id)
-  const missingIds = hotkeyIds.filter(id => !registeredIds.includes(id))
-  const duplicateIds = registeredIds.filter((id, index) => registeredIds.indexOf(id) !== index)
-
-  if (missingIds.length || duplicateIds.length) {
-    console.warn('[hotkeys] registry consistency check failed', {
-      missingIds,
-      duplicateIds: [...new Set(duplicateIds)],
-    })
-  }
-}

apps/core-ant-design-vue/src/hotkeys/types.ts

@@ -1,38 +0,0 @@
-import type { useAppSettingsStore } from '@/store/modules/app/settings'
-
-export type HotkeyHelpGroup = 'global' | 'nav' | 'tabbar' | 'page'
-export type HotkeyId = typeof import('./registry').HOTKEY_ID[keyof typeof import('./registry').HOTKEY_ID]
-
-export interface HotkeyContext {
-  settings: ReturnType<typeof useAppSettingsStore>['settings']
-}
-
-export interface HotkeyDisplayKeys {
-  default: string[]
-  mac?: string[]
-}
-
-export interface HotkeyHelpMeta {
-  group: HotkeyHelpGroup
-  titleKey: string
-  order?: number
-  visible?: (ctx: HotkeyContext) => boolean
-  displayKeys: HotkeyDisplayKeys
-}
-
-export interface HotkeyBinding {
-  id: HotkeyId
-  keys: string[]
-  preventDefault?: boolean
-  enabled?: (ctx: HotkeyContext) => boolean
-  help?: HotkeyHelpMeta
-}
-
-export interface HotkeyHandlerArgs {
-  event: KeyboardEvent
-  hotkey: string
-}
-
-export type HotkeyHandler = (args: HotkeyHandlerArgs) => void
-
-export type HotkeyHandlersMap = Partial<Record<HotkeyId, HotkeyHandler>>

apps/core-ant-design-vue/src/hotkeys/useHotkeys.ts

@@ -1,69 +0,0 @@
-import type { HotkeyHandler, HotkeyHandlersMap, HotkeyId } from './types'
-import hotkeys from 'hotkeys-js'
-import { hotkeyBindings, hotkeyIds } from './registry'
-
-export function useHotkey(id: HotkeyId, handler: HotkeyHandler, active: MaybeRefOrGetter<boolean> = true) {
-  const binding = hotkeyBindings.find(item => item.id === id)
-  const appSettingsStore = useAppSettingsStore()
-  const hotkeyContext = {
-    settings: appSettingsStore.settings,
-  }
-  let currentHandler: ((event: KeyboardEvent, hotkeyHandler: { key: string }) => void) | undefined
-
-  function bind() {
-    if (currentHandler || !binding) {
-      return
-    }
-    const currentBinding = binding
-
-    currentHandler = (event, hotkeyHandler) => {
-      if (currentBinding.enabled && !currentBinding.enabled(hotkeyContext)) {
-        return
-      }
-
-      if (currentBinding.preventDefault !== false) {
-        event.preventDefault()
-      }
-
-      handler({
-        event,
-        hotkey: hotkeyHandler.key,
-      })
-    }
-
-    hotkeys(currentBinding.keys.join(','), currentHandler)
-  }
-
-  function unbind() {
-    if (!currentHandler || !binding) {
-      return
-    }
-
-    hotkeys.unbind(binding.keys.join(','), currentHandler)
-    currentHandler = undefined
-  }
-
-  watch(() => toValue(active), (val) => {
-    if (val) {
-      bind()
-    }
-    else {
-      unbind()
-    }
-  }, {
-    immediate: true,
-  })
-
-  onUnmounted(() => {
-    unbind()
-  })
-}
-
-export function useHotkeyBindings(handlers: HotkeyHandlersMap, active: MaybeRefOrGetter<boolean> = true) {
-  hotkeyIds.forEach((id) => {
-    const handler = handlers[id]
-    if (handler) {
-      useHotkey(id, handler, active)
-    }
-  })
-}

apps/core-ant-design-vue/src/layouts/components/AppSetting/index.vue

@@ -38,7 +38,7 @@ onMounted(() => {
   })
 })
 
-const { copy, copied, isSupported } = useClipboard()
+const { copy, copied, isSupported } = useClipboard({ legacy: true })
 
 function handleCopy() {
   copy(JSON.stringify(diffTwoObj(settingsDefault, appSettingsStore.settings), null, 2))

apps/core-ant-design-vue/src/layouts/components/Hotkeys/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { globalHotkeyBindings } from '@/hotkeys/registry'
+import { hotkeyBindings } from '@/hotkeys'
 import eventBus from '@/utils/eventBus'
 
 defineOptions({
@@ -11,10 +11,10 @@ const hotkeyContext = {
   settings: appSettingsStore.settings,
 }
 
-const groupTitleMap = {
-  global: '全局',
-  nav: '主导航',
-  tabbar: '标签栏',
+const helpGroupMeta = {
+  global: { title: '全局', order: 10 },
+  nav: { title: '主导航', order: 20 },
+  tabbar: { title: '标签栏', order: 30 },
 } as const
 
 const itemTitleMap: Record<string, string> = {
@@ -32,42 +32,52 @@ const itemTitleMap: Record<string, string> = {
 const isShow = ref(false)
 
 const helpGroups = computed(() => {
-  const groups = [
-    { id: 'global', title: groupTitleMap.global },
-    { id: 'nav', title: groupTitleMap.nav },
-    { id: 'tabbar', title: groupTitleMap.tabbar },
-  ] as const
+  const groups = new Map<string, {
+    id: string
+    title: string
+    order: number
+    items: {
+      id: string
+      title: string
+      order: number
+      displayKeys: string[]
+    }[]
+  }>()
 
-  return groups.map((group) => {
-    const items = globalHotkeyBindings
-      .filter(binding => binding.help?.group === group.id)
-      .filter((binding) => {
-        if (!binding.help) {
-          return false
-        }
-        if (binding.help.visible) {
-          return binding.help.visible(hotkeyContext)
-        }
-        return true
-      })
-      .sort((a, b) => (a.help?.order ?? 0) - (b.help?.order ?? 0))
-      .map((binding) => {
-        const displayKeys = appSettingsStore.os === 'mac' && binding.help?.displayKeys.mac
-          ? binding.help.displayKeys.mac
-          : binding.help?.displayKeys.default ?? []
-
-        return {
-          id: binding.id,
-          title: binding.help?.titleKey ? itemTitleMap[binding.help.titleKey] : '',
-          displayKeys,
-        }
-      })
-
-    return {
-      ...group,
-      items,
+  hotkeyBindings.forEach((binding) => {
+    const help = binding.help
+    if (!help) {
+      return
     }
-  }).filter(group => group.items.length > 0)
+    if (help.visible && !help.visible(hotkeyContext)) {
+      return
+    }
+
+    const meta = helpGroupMeta[help.group as keyof typeof helpGroupMeta]
+    const group = groups.get(help.group) ?? {
+      id: help.group,
+      title: help.groupTitleKey ? itemTitleMap[help.groupTitleKey] ?? help.groupTitleKey : meta?.title ?? help.group,
+      order: meta?.order ?? 100,
+      items: [],
+    }
+
+    group.items.push({
+      id: binding.id,
+      title: itemTitleMap[help.titleKey] ?? help.titleKey,
+      order: help.order ?? 0,
+      displayKeys: appSettingsStore.os === 'mac' && help.displayKeys.mac
+        ? help.displayKeys.mac
+        : help.displayKeys.default,
+    })
+    groups.set(help.group, group)
+  })
+
+  return Array.from(groups.values())
+    .map(group => ({
+      ...group,
+      items: [...group.items].sort((a, b) => a.order - b.order),
+    }))
+    .sort((a, b) => a.order - b.order)
 })
 
 onMounted(() => {

apps/core-ant-design-vue/src/layouts/components/MainSidebar/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 import Logo from '../Logo/index.vue'
 

apps/core-ant-design-vue/src/layouts/components/Topbar/Tabbar/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TabbarRecordRaw } from '@fantastic-admin/types'
 import { useMagicKeys } from '@vueuse/core'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 
 defineOptions({
@@ -72,13 +72,13 @@ watch(() => route, (val) => {
 function tabbarScrollTip() {
   if (tabContainerRef.value?.$el.clientWidth > (tabsRef.value?.ref?.$el.clientWidth ?? 0) && !localStorage.has('tabbarScrollTip')) {
     localStorage.setItem('tabbarScrollTip', '')
-    const tips = faToast.info('温馨提示', {
+    const tips = useFaToast().info('温馨提示', {
       description: '标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览',
       position: 'top-center',
       duration: Infinity,
       action: {
         label: '知道了',
-        onClick: () => faToast.dismiss(tips),
+        onClick: () => useFaToast().dismiss(tips),
       },
     })
   }

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/MenuSearch/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import Search from './search.vue'
 
 defineOptions({

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/MenuSearch/search.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MenuRecordRaw } from '@fantastic-admin/types'
 import { match } from 'pinyin-pro'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue'
 import BreadcrumbItem from '@/layouts/components/Breadcrumb/item.vue'
 import { resolveRoutePath } from '@/utils'

apps/core-ant-design-vue/src/layouts/components/Topbar/Toolbar/PageReload/index.vue

@@ -8,13 +8,15 @@ const mainPage = useAppPage()
 
 const isAnimating = ref(false)
 
-function handleClick() {
-  isAnimating.value = true
-  mainPage.reload()
-}
-
-function handleCtrlClick() {
-  location.reload()
+function handleClick(event: MouseEvent) {
+  if (event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey) {
+    location.reload()
+    return
+  }
+  if (!event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey) {
+    isAnimating.value = true
+    mainPage.reload()
+  }
 }
 </script>
 
@@ -28,7 +30,7 @@ function handleCtrlClick() {
         <p>可切换为浏览器原生刷新</p>
       </div>
     </template>
-    <FaButton variant="ghost" size="icon-sm" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
+    <FaButton variant="ghost" size="icon-sm" @click="handleClick" @animationend="isAnimating = false">
       <FaIcon name="i-iconoir:refresh-double" class="size-4" :class="{ animation: isAnimating }" />
     </FaButton>
   </FaTooltip>

apps/core-ant-design-vue/src/layouts/components/views/link.vue

@@ -6,9 +6,9 @@ defineOptions({
 })
 
 const route = useRoute()
-const { copy, copied } = useClipboard()
+const { copy, copied } = useClipboard({ legacy: true })
 watch(copied, (val) => {
-  val && faToast.success('复制成功')
+  val && useFaToast().success('复制成功')
 })
 
 function open() {

apps/core-ant-design-vue/src/layouts/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useElementSize, useScroll } from '@vueuse/core'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 import { cn } from '@/utils'
 import eventBus from '@/utils/eventBus'

apps/core-ant-design-vue/src/router/extensions.ts

@@ -110,7 +110,7 @@ function extendClose(router: Router) {
 }
 
 declare module 'vue-router' {
-  interface Router {
+  interface _RouterClassic {
     /**
      * 本方法为框架扩展语法，会同时关闭当前标签页
      *

apps/core-ant-design-vue/src/router/modules/ant.design.vue.example.ts

@@ -1,29 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router'
-
-function Layout() {
-  return import('@/layouts/index.vue')
-}
-
-const routes: RouteRecordRaw = {
-  path: '/ant_design_vue_example',
-  component: Layout,
-  meta: {
-    title: 'Ant Design Vue',
-    icon: 'https://antdv.com/favicon.ico',
-    menu: false,
-  },
-  children: [
-    {
-      path: '',
-      name: 'antDesignVueExample',
-      component: () => import('@/views/ant_design_vue_example/index.vue'),
-      meta: {
-        title: 'Ant Design Vue',
-        menu: false,
-        breadcrumb: false,
-      },
-    },
-  ],
-}
-
-export default routes

apps/core-ant-design-vue/src/router/modules/ui.example.ts

@@ -5,20 +5,19 @@ function Layout() {
 }
 
 const routes: RouteRecordRaw = {
-  path: '/naive_ui_example',
+  path: '/ui_example',
   component: Layout,
   meta: {
-    title: 'Naive UI',
-    icon: 'i-logos:naiveui',
+    title: 'UI',
     menu: false,
   },
   children: [
     {
       path: '',
-      name: 'naiveUiExample',
-      component: () => import('@/views/naive_ui_example/index.vue'),
+      name: 'uiExample',
+      component: () => import('@/views/ui_example/index.vue'),
       meta: {
-        title: 'Naive UI',
+        title: 'UI',
         menu: false,
         breadcrumb: false,
       },

apps/core-ant-design-vue/src/router/routes.ts

@@ -1,8 +1,8 @@
 import type { RouteRecordMainRaw } from '@fantastic-admin/types'
 import type { RouteRecordRaw } from 'vue-router'
 import pinia from '@/store'
-import AntDesignVueExample from './modules/ant.design.vue.example'
 import MultilevelMenuExample from './modules/multilevel.menu.example'
+import UiExample from './modules/ui.example'
 
 // 固定路由（默认路由）
 const constantRoutes: RouteRecordRaw[] = [
@@ -72,7 +72,7 @@ const asyncRoutes: RouteRecordMainRaw[] = [
       icon: 'i-whh:jqueryui',
     },
     children: [
-      AntDesignVueExample,
+      UiExample,
     ],
   },
 ]

apps/core-ant-design-vue/src/store/modules/app/account.ts

@@ -94,16 +94,6 @@ export const useAppAccountStore = defineStore('appAccount', () => {
     await apiApp.passwordEdit(data)
   }
 
-  // 锁屏
-  function lock() {
-    localStorage.removeItem('token')
-  }
-
-  // 解锁
-  function unlock() {
-    localStorage.setItem('token', token.value)
-  }
-
   return {
     token,
     account,
@@ -115,7 +105,5 @@ export const useAppAccountStore = defineStore('appAccount', () => {
     requestLogout,
     getPermissions,
     editPassword,
-    lock,
-    unlock,
   }
 })

apps/core-ant-design-vue/src/store/modules/app/menu.ts

@@ -180,7 +180,7 @@ export const useAppMenuStore = defineStore(
         if (item.children) {
           return isPathInMenus(item.children, path)
         }
-        return path.indexOf(`${item.path}/`) === 0 || path === item.path
+        return path.startsWith(`${item.path}/`) || path === item.path
       })
       return flag
     }

apps/core-ant-design-vue/src/types/auto-imports.d.ts

@@ -16,7 +16,6 @@ declare global {
   const defineComponent: typeof import('vue').defineComponent
   const defineStore: typeof import('pinia').defineStore
   const effectScope: typeof import('vue').effectScope
-  const faToast: typeof import('@fantastic-admin/components').faToast
   const getActivePinia: typeof import('pinia').getActivePinia
   const getCurrentInstance: typeof import('vue').getCurrentInstance
   const getCurrentScope: typeof import('vue').getCurrentScope
@@ -84,6 +83,7 @@ declare global {
   const useFaDrawer: typeof import('@fantastic-admin/components').useFaDrawer
   const useFaImagePreview: typeof import('@fantastic-admin/components').useFaImagePreview
   const useFaModal: typeof import('@fantastic-admin/components').useFaModal
+  const useFaToast: typeof import('@fantastic-admin/components').useFaToast
   const useId: typeof import('vue').useId
   const useLink: typeof import('vue-router').useLink
   const useModel: typeof import('vue').useModel

apps/core-ant-design-vue/src/types/components.d.ts

@@ -19,7 +19,9 @@ declare module 'vue' {
     AppNotAllowed: typeof import('./../components/AppNotAllowed/index.vue')['default']
     AppNotSupportedMobile: typeof import('./../components/AppNotSupportedMobile/index.vue')['default']
     AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
+    FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
     FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
     FaButton: typeof import('@fantastic-admin/components')['FaButton']
     FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
     FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -27,11 +29,14 @@ declare module 'vue' {
     FaCheckboxGroup: typeof import('@fantastic-admin/components')['FaCheckboxGroup']
     FaCollapsible: typeof import('@fantastic-admin/components')['FaCollapsible']
     FaContextMenu: typeof import('@fantastic-admin/components')['FaContextMenu']
+    FaDescriptions: typeof import('@fantastic-admin/components')['FaDescriptions']
     FaDivider: typeof import('@fantastic-admin/components')['FaDivider']
     FaDrawer: typeof import('@fantastic-admin/components')['FaDrawer']
     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']
@@ -55,7 +60,9 @@ declare module 'vue' {
     FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
     FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
     FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
     FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
     FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
     FaToast: typeof import('@fantastic-admin/components')['FaToast']
     FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -72,7 +79,9 @@ declare global {
   const AppNotAllowed: typeof import('./../components/AppNotAllowed/index.vue')['default']
   const AppNotSupportedMobile: typeof import('./../components/AppNotSupportedMobile/index.vue')['default']
   const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
+  const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
   const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
   const FaButton: typeof import('@fantastic-admin/components')['FaButton']
   const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
   const FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -80,11 +89,14 @@ declare global {
   const FaCheckboxGroup: typeof import('@fantastic-admin/components')['FaCheckboxGroup']
   const FaCollapsible: typeof import('@fantastic-admin/components')['FaCollapsible']
   const FaContextMenu: typeof import('@fantastic-admin/components')['FaContextMenu']
+  const FaDescriptions: typeof import('@fantastic-admin/components')['FaDescriptions']
   const FaDivider: typeof import('@fantastic-admin/components')['FaDivider']
   const FaDrawer: typeof import('@fantastic-admin/components')['FaDrawer']
   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']
@@ -108,7 +120,9 @@ declare global {
   const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
   const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
   const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
   const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
   const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
   const FaToast: typeof import('@fantastic-admin/components')['FaToast']
   const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']

apps/core-ant-design-vue/src/views/index.vue

@@ -33,12 +33,12 @@ const products = ref([
     ],
   },
   {
-    name: 'One-step-admin',
-    tagline: '干啥都快人一步的 Vue 中后台系统框架',
+    name: 'One-step Console',
+    tagline: '像导播一样编排你的工作现场',
     logo: 'https://one-step-admin.hurui.me/logo.png',
     url: 'https://one-step-admin.hurui.me',
     images: [
-      'https://one-step-admin.hurui.me/preview1.png',
+      'https://one-step-admin.hurui.me/hero_preview.png',
     ],
   },
 ])
@@ -193,46 +193,48 @@ function open(url: string) {
             class="group card-enter border rounded-xl bg-neutral-950/[.012] dark:bg-white/5"
             :style="{ animationDelay: `${i * 80}ms` }"
           >
-            <div class="flex flex-col h-full">
-              <div class="p-6 border-b flex gap-4 items-start">
-                <img :src="product.logo" :alt="product.name" class="shrink-0 h-10 w-10 object-contain">
-                <div>
-                  <div class="text-sm tracking-tight font-semibold">
-                    {{ product.name }}
-                  </div>
-                  <div class="text-xs text-muted-foreground leading-relaxed mt-1">
-                    {{ product.tagline }}
+            <div>
+              <div class="flex flex-col h-full">
+                <div class="p-6 border-b flex gap-4 items-start">
+                  <img :src="product.logo" :alt="product.name" class="shrink-0 h-10 w-10 object-contain">
+                  <div>
+                    <div class="text-sm tracking-tight font-semibold">
+                      {{ product.name }}
+                    </div>
+                    <div class="text-xs text-muted-foreground leading-relaxed mt-1">
+                      {{ product.tagline }}
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div class="p-6 flex-col-start flex-1">
-                <div v-if="product.features" class="mb-5 flex-1">
-                  <ul class="space-y-1.5">
-                    <li
-                      v-for="feature in product.features"
-                      :key="feature"
-                      class="text-xs text-muted-foreground flex gap-2 items-start"
+                <div class="p-6 flex-col-start flex-1">
+                  <div v-if="product.features" class="mb-5 flex-1">
+                    <ul class="space-y-1.5">
+                      <li
+                        v-for="feature in product.features"
+                        :key="feature"
+                        class="text-xs text-muted-foreground flex gap-2 items-start"
+                      >
+                        <span class="text-primary mt-0.5 shrink-0">·</span>
+                        <span>{{ feature }}</span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div v-if="product.images" class="mb-5 border rounded-lg flex-1 overflow-hidden">
+                    <img
+                      :src="product.images[0]"
+                      :alt="product.name"
+                      class="opacity-50 h-full w-full transition-opacity duration-500 object-cover group-hover-opacity-100"
                     >
-                      <span class="text-primary mt-0.5 shrink-0">·</span>
-                      <span>{{ feature }}</span>
-                    </li>
-                  </ul>
-                </div>
-                <div v-if="product.images" class="mb-5 border rounded-lg flex-1 overflow-hidden">
-                  <img
-                    :src="product.images[0]"
-                    :alt="product.name"
-                    class="opacity-50 h-full w-full transition-opacity duration-500 object-cover group-hover-opacity-100"
+                  </div>
+                  <FaButton
+                    variant="link"
+                    size="sm"
+                    class="mt-auto active-scale-98"
+                    @click="open(product.url)"
                   >
+                    探索 →
+                  </FaButton>
                 </div>
-                <FaButton
-                  variant="link"
-                  size="sm"
-                  class="mt-auto active-scale-98"
-                  @click="open(product.url)"
-                >
-                  探索 →
-                </FaButton>
               </div>
             </div>
           </div>

apps/core-ant-design-vue/src/views/ui_example/index.vue

@@ -56,7 +56,13 @@ function open(url: string) {
 
 <template>
   <div>
-    <FaPageHeader title="Ant Design Vue" description="框架内置 Ant Design Vue 组件库，本页仅展示部分组件，更多组件及使用说明请查看 Ant Design Vue 官网。">
+    <FaPageHeader description="框架提供已集成 Ant Design Vue 组件库的模板，支持开箱即用。本页仅展示部分组件，更多组件及使用说明请查看 Ant Design Vue 官网。">
+      <template #title>
+        <div class="flex gap-2 items-center">
+          <FaIcon name="https://antdv.com/favicon.ico" />
+          Ant Design Vue
+        </div>
+      </template>
       <FaButton variant="outline" @click="open('https://antdv.com/components/overview-cn')">
         <FaIcon name="i-ant-design:link-outlined" />
         Ant Design Vue 官网

apps/core-ant-design-vue/vite.config.ts

@@ -47,7 +47,10 @@ export default defineConfig(({ mode, command }) => {
     },
     plugins: createVitePlugins(mode, command === 'build'),
     optimizeDeps: {
-      exclude: ['@fantastic-admin/components'],
+      exclude: [
+        '@fantastic-admin/components',
+        '@fantastic-admin/composables',
+      ],
     },
     resolve: {
       alias: {

apps/core-antdv-next/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@fantastic-admin/components": "workspace:*",
     "@fantastic-admin/composables": "workspace:*",
+    "@fantastic-admin/hotkeys": "workspace:*",
     "@fantastic-admin/settings": "workspace:*",
     "@fantastic-admin/types": "workspace:*",
     "@vee-validate/zod": "catalog:",
@@ -28,8 +29,6 @@
     "dayjs": "catalog:",
     "eruda": "catalog:",
     "es-toolkit": "catalog:",
-    "hotkeys-js": "catalog:",
-    "lucide-vue-next": "catalog:",
     "mitt": "catalog:",
     "nprogress": "catalog:",
     "path-browserify": "catalog:",

apps/core-antdv-next/src/api/index.ts

@@ -51,7 +51,7 @@ function handleError(error: any) {
     useAppAccountStore().requestLogout()
   }
   else {
-    faToast.error('Error', {
+    useFaToast().error('Error', {
       description: error.message,
     })
   }
@@ -70,7 +70,7 @@ api.interceptors.response.use(
     if (typeof response.data === 'object') {
       if (response.data.status === 1) {
         if (response.data.error) {
-          faToast.warning('Warning', {
+          useFaToast().warning('Warning', {
             description: response.data.error,
           })
           return Promise.reject(response.data)

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,32 +10,38 @@ 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 () => {
-    faToast.success('模拟修改成功，请重新登录')
+    useFaToast().success('模拟修改成功，请重新登录')
     appAccountStore.logout()
   }).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 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 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 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>

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

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

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

apps/core-antdv-next/src/composables/app/tabbar.ts

@@ -80,13 +80,13 @@ export function useAppTabbar() {
     const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
     if (index < 0) {
       flag = false
-      !checkOnly && faToast.warning('关闭的标签页不存在', {
+      !checkOnly && useFaToast().warning('关闭的标签页不存在', {
         position: 'top-center',
       })
     }
     else if (appTabbarStore.list.length <= 1) {
       flag = false
-      !checkOnly && faToast.warning('当前只有一个标签页，不可关闭', {
+      !checkOnly && useFaToast().warning('当前只有一个标签页，不可关闭', {
         position: 'top-center',
       })
     }

apps/core-antdv-next/src/hotkeys/README.md

@@ -1,107 +0,0 @@
-# Hotkeys 设计说明
-
-这个目录参考 `fantastic-admin/v6-dev/apps/example/src/hotkeys` 的设计，目标是把当前项目里分散在各组件中的快捷键逻辑收拢成一套轻量方案。
-
-## 设计目标
-
-当前方案只解决 4 件事：
-
-1. 快捷键定义不要散落在多个组件里重复写
-2. 快捷键帮助面板不要再手写一份展示文案
-3. 业务组件不要反复手写 `hotkeys()` / `unbind()`
-4. 不引入过重的 command system
-
-所以采用：
-
-- `registry.ts` 统一定义
-- `useHotkeys.ts` 统一注册
-- 业务 handler 仍留在业务组件
-
-这是一种“集中定义 + 就地执行”的轻量折中方案。
-
-## 目录职责
-
-### `registry.ts`
-
-统一维护当前项目的快捷键元数据：
-
-- id
-- keys
-- enabled
-- help
-
-这里负责：
-
-- 统一的 id 常量
-- 真实键位
-- 是否启用的条件
-- 帮助面板展示文案
-- 聚合业务扩展
-
-> 注意：这里不放业务逻辑 handler。
-
-### `registry.extend.ts`
-
-用于放置项目自定义扩展快捷键，避免把业务项全部堆进内建定义中。
-
-### `types.ts`
-
-定义快捷键系统的基础类型，包括：
-
-- `HotkeyBinding`
-- `HotkeyContext`
-- `HotkeyHelpMeta`
-- `HotkeyHandler`
-
-### `useHotkeys.ts`
-
-对 `hotkeys-js` 的薄封装，提供：
-
-- `useHotkey`：注册单个快捷键
-- `useHotkeyBindings`：批量注册快捷键
-
-并统一处理：
-
-- 注册 / 卸载
-- `active` 启停
-- `binding.enabled` 可用性判断
-- 默认 `preventDefault`
-
-## 当前项目已落地的快捷键
-
-### 全局
-
-- `system.info.open`
-- `menuSearch.open`
-- `page.reload`
-
-### 主导航
-
-- `menu.next`
-- `menu.prev`
-
-### 标签栏
-
-- `tabbar.prev`
-- `tabbar.next`
-- `tabbar.closeCurrent`
-- `tabbar.gotoVisibleIndex`
-- `tabbar.gotoLast`
-
-### 菜单搜索弹窗
-
-- `menuSearch.moveUp`
-- `menuSearch.moveDown`
-- `menuSearch.confirm`
-- `menuSearch.close`
-
-## 使用约定
-
-1. 新增快捷键，优先在 `registry.ts` 或 `registry.extend.ts` 补定义
-2. 展示在帮助面板中的快捷键，必须配置 `help`
-3. handler 尽量保留在最了解业务的组件中
-4. 不直接在业务组件里继续散写 `hotkeys('xxx')`
-
-## 现阶段差异
-
-参考项目里还有页面最大化相关快捷键；当前项目暂未引入对应页面最大化能力，所以本次迁移只保留当前项目已有功能，并把原有 `F5` 页面刷新也纳入统一 registry 管理。

apps/core-antdv-next/src/hotkeys/extend.ts

@@ -0,0 +1,57 @@
+import type { HotkeyBinding } from '@fantastic-admin/hotkeys'
+
+/**
+ * 业务扩展快捷键 id
+ *
+ * 使用方式：
+ *
+ * export const EXT_HOTKEY_ID = {
+ *   demoOpen: 'demo.open',
+ * } as const
+ */
+export const EXT_HOTKEY_ID = {} as const
+
+type ExtendHotkeyId = typeof EXT_HOTKEY_ID[keyof typeof EXT_HOTKEY_ID]
+
+/**
+ * 业务扩展全局快捷键
+ *
+ * 示例：
+ *
+ * export const extendGlobalHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoOpen,
+ *     keys: ['command+j', 'ctrl+j'],
+ *     enabled: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *     help: {
+ *       group: 'global',
+ *       titleKey: 'global.demoOpen',
+ *       order: 90,
+ *       visible: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *       displayKeys: {
+ *         default: ['Ctrl', 'J'],
+ *         mac: ['⌘', 'J'],
+ *       },
+ *     },
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendGlobalHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]
+
+/**
+ * 业务扩展局部快捷键
+ *
+ * 示例：
+ *
+ * export const extendScopedHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoConfirm,
+ *     keys: ['enter'],
+ *   },
+ *   {
+ *     id: EXT_HOTKEY_ID.demoClose,
+ *     keys: ['esc'],
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendScopedHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]

apps/core-antdv-next/src/hotkeys/index.ts

@@ -0,0 +1,41 @@
+import type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+} from '@fantastic-admin/hotkeys'
+import { createHotkeys } from '@fantastic-admin/hotkeys'
+import { EXT_HOTKEY_ID, extendGlobalHotkeyBindings, extendScopedHotkeyBindings } from './extend'
+
+const appHotkeys = createHotkeys({
+  extendIds: EXT_HOTKEY_ID,
+  extendGlobalHotkeyBindings,
+  extendScopedHotkeyBindings,
+  getContext: () => ({
+    settings: useAppSettingsStore().settings,
+  }),
+})
+
+export const HOTKEY_ID = appHotkeys.HOTKEY_ID
+export const hotkeyIds = appHotkeys.hotkeyIds
+export const globalHotkeyBindings = appHotkeys.globalHotkeyBindings
+export const menuSearchHotkeyBindings = appHotkeys.menuSearchHotkeyBindings
+export const hotkeyBindings = appHotkeys.hotkeyBindings
+export const useHotkey = appHotkeys.useHotkey
+export const useHotkeyBindings = appHotkeys.useHotkeyBindings
+
+export type HotkeyId = typeof HOTKEY_ID[keyof typeof HOTKEY_ID]
+export type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+}

apps/core-antdv-next/src/hotkeys/registry.extend.ts

@@ -1,22 +0,0 @@
-import type { HotkeyBinding } from './types'
-
-/**
- * 业务扩展快捷键 id
- *
- * 使用方式：
- *
- * export const EXT_HOTKEY_ID = {
- *   demoOpen: 'demo.open',
- * } as const
- */
-export const EXT_HOTKEY_ID = {} as const
-
-/**
- * 业务扩展全局快捷键
- */
-export const extendGlobalHotkeyBindings: HotkeyBinding[] = []
-
-/**
- * 业务扩展局部快捷键
- */
-export const extendScopedHotkeyBindings: HotkeyBinding[] = []

apps/core-antdv-next/src/hotkeys/registry.ts

@@ -1,210 +0,0 @@
-import type { HotkeyBinding } from './types'
-import { EXT_HOTKEY_ID, extendGlobalHotkeyBindings, extendScopedHotkeyBindings } from './registry.extend'
-
-export const HOTKEY_ID = {
-  systemInfoOpen: 'system.info.open',
-  menuSearchOpen: 'menuSearch.open',
-  menuNext: 'menu.next',
-  menuPrev: 'menu.prev',
-  tabbarPrev: 'tabbar.prev',
-  tabbarNext: 'tabbar.next',
-  tabbarCloseCurrent: 'tabbar.closeCurrent',
-  tabbarGotoVisibleIndex: 'tabbar.gotoVisibleIndex',
-  tabbarGotoLast: 'tabbar.gotoLast',
-  pageReload: 'page.reload',
-  menuSearchMoveUp: 'menuSearch.moveUp',
-  menuSearchMoveDown: 'menuSearch.moveDown',
-  menuSearchConfirm: 'menuSearch.confirm',
-  menuSearchClose: 'menuSearch.close',
-  ...EXT_HOTKEY_ID,
-} as const
-
-export const hotkeyIds = Object.values(HOTKEY_ID)
-
-/**
- * Hotkeys registry 维护约定
- *
- * 1. 新增快捷键优先在这里补充定义，不要在业务组件里直接写死键位字符串
- * 2. 这里仅维护“定义”和“展示元数据”，不要把业务 handler 塞进 registry
- * 3. 配置类开关尽量写在 enabled / help.visible 中，避免帮助面板与真实行为不一致
- * 4. 需要展示在快捷键帮助面板中的项，必须补充 help
- * 5. 仅局部场景使用的快捷键，也建议在这里定义，再由对应组件按需注册
- */
-export const globalHotkeyBindings: HotkeyBinding[] = [
-  {
-    id: HOTKEY_ID.systemInfoOpen,
-    keys: ['command+i', 'ctrl+i'],
-    help: {
-      group: 'global',
-      titleKey: 'global.system',
-      order: 10,
-      displayKeys: {
-        default: ['Ctrl', 'I'],
-        mac: ['⌘', 'I'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuSearchOpen,
-    keys: ['command+k', 'ctrl+k'],
-    enabled: ctx => ctx.settings.toolbar.menuSearch.enable && ctx.settings.toolbar.menuSearch.hotkeys,
-    help: {
-      group: 'global',
-      titleKey: 'global.search',
-      order: 20,
-      visible: ctx => ctx.settings.toolbar.menuSearch.enable && ctx.settings.toolbar.menuSearch.hotkeys,
-      displayKeys: {
-        default: ['Ctrl', 'K'],
-        mac: ['⌘', 'K'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuNext,
-    keys: ['alt+`'],
-    enabled: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-    help: {
-      group: 'nav',
-      titleKey: 'nav.next',
-      order: 10,
-      visible: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-      displayKeys: {
-        default: ['Alt', '`'],
-        mac: ['⌥', '`'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.menuPrev,
-    keys: ['alt+shift+`'],
-    enabled: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-    help: {
-      group: 'nav',
-      titleKey: 'nav.prev',
-      order: 20,
-      visible: ctx => ctx.settings.menu.hotkeys && ['side', 'head'].includes(ctx.settings.menu.mode),
-      displayKeys: {
-        default: ['Alt', 'Shift', '`'],
-        mac: ['⌥', '⇧', '`'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarPrev,
-    keys: ['alt+left'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.prev',
-      order: 10,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '←'],
-        mac: ['⌥', '←'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarNext,
-    keys: ['alt+right'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.next',
-      order: 20,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '→'],
-        mac: ['⌥', '→'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarCloseCurrent,
-    keys: ['alt+w'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.close',
-      order: 30,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', 'W'],
-        mac: ['⌥', 'W'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarGotoVisibleIndex,
-    keys: ['alt+1', 'alt+2', 'alt+3', 'alt+4', 'alt+5', 'alt+6', 'alt+7', 'alt+8', 'alt+9'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.n',
-      order: 40,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '1~9'],
-        mac: ['⌥', '1~9'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.tabbarGotoLast,
-    keys: ['alt+0'],
-    enabled: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-    help: {
-      group: 'tabbar',
-      titleKey: 'tabbar.last',
-      order: 50,
-      visible: ctx => ctx.settings.topbar.tabbar && ctx.settings.tabbar.hotkeys,
-      displayKeys: {
-        default: ['Alt', '0'],
-        mac: ['⌥', '0'],
-      },
-    },
-  },
-  {
-    id: HOTKEY_ID.pageReload,
-    keys: ['f5'],
-  },
-  ...extendGlobalHotkeyBindings,
-]
-
-export const menuSearchHotkeyBindings: HotkeyBinding[] = [
-  {
-    id: HOTKEY_ID.menuSearchMoveUp,
-    keys: ['up'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchMoveDown,
-    keys: ['down'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchConfirm,
-    keys: ['enter'],
-  },
-  {
-    id: HOTKEY_ID.menuSearchClose,
-    keys: ['esc'],
-  },
-]
-
-export const hotkeyBindings: HotkeyBinding[] = [
-  ...globalHotkeyBindings,
-  ...menuSearchHotkeyBindings,
-  ...extendScopedHotkeyBindings,
-]
-
-if (import.meta.env.DEV) {
-  const registeredIds = hotkeyBindings.map(item => item.id)
-  const missingIds = hotkeyIds.filter(id => !registeredIds.includes(id))
-  const duplicateIds = registeredIds.filter((id, index) => registeredIds.indexOf(id) !== index)
-
-  if (missingIds.length || duplicateIds.length) {
-    console.warn('[hotkeys] registry consistency check failed', {
-      missingIds,
-      duplicateIds: [...new Set(duplicateIds)],
-    })
-  }
-}

apps/core-antdv-next/src/hotkeys/types.ts

@@ -1,38 +0,0 @@
-import type { useAppSettingsStore } from '@/store/modules/app/settings'
-
-export type HotkeyHelpGroup = 'global' | 'nav' | 'tabbar' | 'page'
-export type HotkeyId = typeof import('./registry').HOTKEY_ID[keyof typeof import('./registry').HOTKEY_ID]
-
-export interface HotkeyContext {
-  settings: ReturnType<typeof useAppSettingsStore>['settings']
-}
-
-export interface HotkeyDisplayKeys {
-  default: string[]
-  mac?: string[]
-}
-
-export interface HotkeyHelpMeta {
-  group: HotkeyHelpGroup
-  titleKey: string
-  order?: number
-  visible?: (ctx: HotkeyContext) => boolean
-  displayKeys: HotkeyDisplayKeys
-}
-
-export interface HotkeyBinding {
-  id: HotkeyId
-  keys: string[]
-  preventDefault?: boolean
-  enabled?: (ctx: HotkeyContext) => boolean
-  help?: HotkeyHelpMeta
-}
-
-export interface HotkeyHandlerArgs {
-  event: KeyboardEvent
-  hotkey: string
-}
-
-export type HotkeyHandler = (args: HotkeyHandlerArgs) => void
-
-export type HotkeyHandlersMap = Partial<Record<HotkeyId, HotkeyHandler>>

apps/core-antdv-next/src/hotkeys/useHotkeys.ts

@@ -1,69 +0,0 @@
-import type { HotkeyHandler, HotkeyHandlersMap, HotkeyId } from './types'
-import hotkeys from 'hotkeys-js'
-import { hotkeyBindings, hotkeyIds } from './registry'
-
-export function useHotkey(id: HotkeyId, handler: HotkeyHandler, active: MaybeRefOrGetter<boolean> = true) {
-  const binding = hotkeyBindings.find(item => item.id === id)
-  const appSettingsStore = useAppSettingsStore()
-  const hotkeyContext = {
-    settings: appSettingsStore.settings,
-  }
-  let currentHandler: ((event: KeyboardEvent, hotkeyHandler: { key: string }) => void) | undefined
-
-  function bind() {
-    if (currentHandler || !binding) {
-      return
-    }
-    const currentBinding = binding
-
-    currentHandler = (event, hotkeyHandler) => {
-      if (currentBinding.enabled && !currentBinding.enabled(hotkeyContext)) {
-        return
-      }
-
-      if (currentBinding.preventDefault !== false) {
-        event.preventDefault()
-      }
-
-      handler({
-        event,
-        hotkey: hotkeyHandler.key,
-      })
-    }
-
-    hotkeys(currentBinding.keys.join(','), currentHandler)
-  }
-
-  function unbind() {
-    if (!currentHandler || !binding) {
-      return
-    }
-
-    hotkeys.unbind(binding.keys.join(','), currentHandler)
-    currentHandler = undefined
-  }
-
-  watch(() => toValue(active), (val) => {
-    if (val) {
-      bind()
-    }
-    else {
-      unbind()
-    }
-  }, {
-    immediate: true,
-  })
-
-  onUnmounted(() => {
-    unbind()
-  })
-}
-
-export function useHotkeyBindings(handlers: HotkeyHandlersMap, active: MaybeRefOrGetter<boolean> = true) {
-  hotkeyIds.forEach((id) => {
-    const handler = handlers[id]
-    if (handler) {
-      useHotkey(id, handler, active)
-    }
-  })
-}

apps/core-antdv-next/src/layouts/components/AppSetting/index.vue

@@ -38,7 +38,7 @@ onMounted(() => {
   })
 })
 
-const { copy, copied, isSupported } = useClipboard()
+const { copy, copied, isSupported } = useClipboard({ legacy: true })
 
 function handleCopy() {
   copy(JSON.stringify(diffTwoObj(settingsDefault, appSettingsStore.settings), null, 2))

apps/core-antdv-next/src/layouts/components/Hotkeys/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { globalHotkeyBindings } from '@/hotkeys/registry'
+import { hotkeyBindings } from '@/hotkeys'
 import eventBus from '@/utils/eventBus'
 
 defineOptions({
@@ -11,10 +11,10 @@ const hotkeyContext = {
   settings: appSettingsStore.settings,
 }
 
-const groupTitleMap = {
-  global: '全局',
-  nav: '主导航',
-  tabbar: '标签栏',
+const helpGroupMeta = {
+  global: { title: '全局', order: 10 },
+  nav: { title: '主导航', order: 20 },
+  tabbar: { title: '标签栏', order: 30 },
 } as const
 
 const itemTitleMap: Record<string, string> = {
@@ -32,42 +32,52 @@ const itemTitleMap: Record<string, string> = {
 const isShow = ref(false)
 
 const helpGroups = computed(() => {
-  const groups = [
-    { id: 'global', title: groupTitleMap.global },
-    { id: 'nav', title: groupTitleMap.nav },
-    { id: 'tabbar', title: groupTitleMap.tabbar },
-  ] as const
+  const groups = new Map<string, {
+    id: string
+    title: string
+    order: number
+    items: {
+      id: string
+      title: string
+      order: number
+      displayKeys: string[]
+    }[]
+  }>()
 
-  return groups.map((group) => {
-    const items = globalHotkeyBindings
-      .filter(binding => binding.help?.group === group.id)
-      .filter((binding) => {
-        if (!binding.help) {
-          return false
-        }
-        if (binding.help.visible) {
-          return binding.help.visible(hotkeyContext)
-        }
-        return true
-      })
-      .sort((a, b) => (a.help?.order ?? 0) - (b.help?.order ?? 0))
-      .map((binding) => {
-        const displayKeys = appSettingsStore.os === 'mac' && binding.help?.displayKeys.mac
-          ? binding.help.displayKeys.mac
-          : binding.help?.displayKeys.default ?? []
-
-        return {
-          id: binding.id,
-          title: binding.help?.titleKey ? itemTitleMap[binding.help.titleKey] : '',
-          displayKeys,
-        }
-      })
-
-    return {
-      ...group,
-      items,
+  hotkeyBindings.forEach((binding) => {
+    const help = binding.help
+    if (!help) {
+      return
     }
-  }).filter(group => group.items.length > 0)
+    if (help.visible && !help.visible(hotkeyContext)) {
+      return
+    }
+
+    const meta = helpGroupMeta[help.group as keyof typeof helpGroupMeta]
+    const group = groups.get(help.group) ?? {
+      id: help.group,
+      title: help.groupTitleKey ? itemTitleMap[help.groupTitleKey] ?? help.groupTitleKey : meta?.title ?? help.group,
+      order: meta?.order ?? 100,
+      items: [],
+    }
+
+    group.items.push({
+      id: binding.id,
+      title: itemTitleMap[help.titleKey] ?? help.titleKey,
+      order: help.order ?? 0,
+      displayKeys: appSettingsStore.os === 'mac' && help.displayKeys.mac
+        ? help.displayKeys.mac
+        : help.displayKeys.default,
+    })
+    groups.set(help.group, group)
+  })
+
+  return Array.from(groups.values())
+    .map(group => ({
+      ...group,
+      items: [...group.items].sort((a, b) => a.order - b.order),
+    }))
+    .sort((a, b) => a.order - b.order)
 })
 
 onMounted(() => {

apps/core-antdv-next/src/layouts/components/MainSidebar/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 import Logo from '../Logo/index.vue'
 

apps/core-antdv-next/src/layouts/components/Topbar/Tabbar/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TabbarRecordRaw } from '@fantastic-admin/types'
 import { useMagicKeys } from '@vueuse/core'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 
 defineOptions({
@@ -72,13 +72,13 @@ watch(() => route, (val) => {
 function tabbarScrollTip() {
   if (tabContainerRef.value?.$el.clientWidth > (tabsRef.value?.ref?.$el.clientWidth ?? 0) && !localStorage.has('tabbarScrollTip')) {
     localStorage.setItem('tabbarScrollTip', '')
-    const tips = faToast.info('温馨提示', {
+    const tips = useFaToast().info('温馨提示', {
       description: '标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览',
       position: 'top-center',
       duration: Infinity,
       action: {
         label: '知道了',
-        onClick: () => faToast.dismiss(tips),
+        onClick: () => useFaToast().dismiss(tips),
       },
     })
   }

apps/core-antdv-next/src/layouts/components/Topbar/Toolbar/MenuSearch/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import Search from './search.vue'
 
 defineOptions({

apps/core-antdv-next/src/layouts/components/Topbar/Toolbar/MenuSearch/search.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MenuRecordRaw } from '@fantastic-admin/types'
 import { match } from 'pinyin-pro'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue'
 import BreadcrumbItem from '@/layouts/components/Breadcrumb/item.vue'
 import { resolveRoutePath } from '@/utils'

apps/core-antdv-next/src/layouts/components/Topbar/Toolbar/PageReload/index.vue

@@ -8,13 +8,15 @@ const mainPage = useAppPage()
 
 const isAnimating = ref(false)
 
-function handleClick() {
-  isAnimating.value = true
-  mainPage.reload()
-}
-
-function handleCtrlClick() {
-  location.reload()
+function handleClick(event: MouseEvent) {
+  if (event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey) {
+    location.reload()
+    return
+  }
+  if (!event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey) {
+    isAnimating.value = true
+    mainPage.reload()
+  }
 }
 </script>
 
@@ -28,7 +30,7 @@ function handleCtrlClick() {
         <p>可切换为浏览器原生刷新</p>
       </div>
     </template>
-    <FaButton variant="ghost" size="icon-sm" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
+    <FaButton variant="ghost" size="icon-sm" @click="handleClick" @animationend="isAnimating = false">
       <FaIcon name="i-iconoir:refresh-double" class="size-4" :class="{ animation: isAnimating }" />
     </FaButton>
   </FaTooltip>

apps/core-antdv-next/src/layouts/components/views/link.vue

@@ -6,9 +6,9 @@ defineOptions({
 })
 
 const route = useRoute()
-const { copy, copied } = useClipboard()
+const { copy, copied } = useClipboard({ legacy: true })
 watch(copied, (val) => {
-  val && faToast.success('复制成功')
+  val && useFaToast().success('复制成功')
 })
 
 function open() {

apps/core-antdv-next/src/layouts/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useElementSize, useScroll } from '@vueuse/core'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 import { cn } from '@/utils'
 import eventBus from '@/utils/eventBus'

apps/core-antdv-next/src/router/extensions.ts

@@ -110,7 +110,7 @@ function extendClose(router: Router) {
 }
 
 declare module 'vue-router' {
-  interface Router {
+  interface _RouterClassic {
     /**
      * 本方法为框架扩展语法，会同时关闭当前标签页
      *

apps/core-antdv-next/src/router/modules/antdv.next.example.ts

@@ -1,29 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router'
-
-function Layout() {
-  return import('@/layouts/index.vue')
-}
-
-const routes: RouteRecordRaw = {
-  path: '/antdv_next_example',
-  component: Layout,
-  meta: {
-    title: 'Antdv Next',
-    icon: 'https://www.antdv-next.com/antdv-next.svg',
-    menu: false,
-  },
-  children: [
-    {
-      path: '',
-      name: 'antdvNextExample',
-      component: () => import('@/views/antdv_next_example/index.vue'),
-      meta: {
-        title: 'Antdv Next',
-        menu: false,
-        breadcrumb: false,
-      },
-    },
-  ],
-}
-
-export default routes

apps/core-antdv-next/src/router/modules/ui.example.ts

@@ -5,20 +5,19 @@ function Layout() {
 }
 
 const routes: RouteRecordRaw = {
-  path: '/vexip_ui_example',
+  path: '/ui_example',
   component: Layout,
   meta: {
-    title: 'Vexip UI',
-    icon: 'https://www.vexipui.com/vexip-ui.svg',
+    title: 'UI',
     menu: false,
   },
   children: [
     {
       path: '',
-      name: 'vexipUiExample',
-      component: () => import('@/views/vexip_ui_example/index.vue'),
+      name: 'uiExample',
+      component: () => import('@/views/ui_example/index.vue'),
       meta: {
-        title: 'Vexip UI',
+        title: 'UI',
         menu: false,
         breadcrumb: false,
       },

apps/core-antdv-next/src/router/routes.ts

@@ -1,8 +1,8 @@
 import type { RouteRecordMainRaw } from '@fantastic-admin/types'
 import type { RouteRecordRaw } from 'vue-router'
 import pinia from '@/store'
-import AntdvNextExample from './modules/antdv.next.example'
 import MultilevelMenuExample from './modules/multilevel.menu.example'
+import UiExample from './modules/ui.example'
 
 // 固定路由（默认路由）
 const constantRoutes: RouteRecordRaw[] = [
@@ -72,7 +72,7 @@ const asyncRoutes: RouteRecordMainRaw[] = [
       icon: 'i-whh:jqueryui',
     },
     children: [
-      AntdvNextExample,
+      UiExample,
     ],
   },
 ]

apps/core-antdv-next/src/store/modules/app/account.ts

@@ -94,16 +94,6 @@ export const useAppAccountStore = defineStore('appAccount', () => {
     await apiApp.passwordEdit(data)
   }
 
-  // 锁屏
-  function lock() {
-    localStorage.removeItem('token')
-  }
-
-  // 解锁
-  function unlock() {
-    localStorage.setItem('token', token.value)
-  }
-
   return {
     token,
     account,
@@ -115,7 +105,5 @@ export const useAppAccountStore = defineStore('appAccount', () => {
     requestLogout,
     getPermissions,
     editPassword,
-    lock,
-    unlock,
   }
 })

apps/core-antdv-next/src/store/modules/app/menu.ts

@@ -180,7 +180,7 @@ export const useAppMenuStore = defineStore(
         if (item.children) {
           return isPathInMenus(item.children, path)
         }
-        return path.indexOf(`${item.path}/`) === 0 || path === item.path
+        return path.startsWith(`${item.path}/`) || path === item.path
       })
       return flag
     }

apps/core-antdv-next/src/types/auto-imports.d.ts

@@ -16,7 +16,6 @@ declare global {
   const defineComponent: typeof import('vue').defineComponent
   const defineStore: typeof import('pinia').defineStore
   const effectScope: typeof import('vue').effectScope
-  const faToast: typeof import('@fantastic-admin/components').faToast
   const getActivePinia: typeof import('pinia').getActivePinia
   const getCurrentInstance: typeof import('vue').getCurrentInstance
   const getCurrentScope: typeof import('vue').getCurrentScope
@@ -84,6 +83,7 @@ declare global {
   const useFaDrawer: typeof import('@fantastic-admin/components').useFaDrawer
   const useFaImagePreview: typeof import('@fantastic-admin/components').useFaImagePreview
   const useFaModal: typeof import('@fantastic-admin/components').useFaModal
+  const useFaToast: typeof import('@fantastic-admin/components').useFaToast
   const useId: typeof import('vue').useId
   const useLink: typeof import('vue-router').useLink
   const useModel: typeof import('vue').useModel

apps/core-antdv-next/src/types/components.d.ts

@@ -19,7 +19,9 @@ declare module 'vue' {
     AppNotAllowed: typeof import('./../components/AppNotAllowed/index.vue')['default']
     AppNotSupportedMobile: typeof import('./../components/AppNotSupportedMobile/index.vue')['default']
     AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
+    FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
     FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+    FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
     FaButton: typeof import('@fantastic-admin/components')['FaButton']
     FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
     FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -27,11 +29,14 @@ declare module 'vue' {
     FaCheckboxGroup: typeof import('@fantastic-admin/components')['FaCheckboxGroup']
     FaCollapsible: typeof import('@fantastic-admin/components')['FaCollapsible']
     FaContextMenu: typeof import('@fantastic-admin/components')['FaContextMenu']
+    FaDescriptions: typeof import('@fantastic-admin/components')['FaDescriptions']
     FaDivider: typeof import('@fantastic-admin/components')['FaDivider']
     FaDrawer: typeof import('@fantastic-admin/components')['FaDrawer']
     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']
@@ -55,7 +60,9 @@ declare module 'vue' {
     FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
     FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
     FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+    FaTable: typeof import('@fantastic-admin/components')['FaTable']
     FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+    FaTag: typeof import('@fantastic-admin/components')['FaTag']
     FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
     FaToast: typeof import('@fantastic-admin/components')['FaToast']
     FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']
@@ -72,7 +79,9 @@ declare global {
   const AppNotAllowed: typeof import('./../components/AppNotAllowed/index.vue')['default']
   const AppNotSupportedMobile: typeof import('./../components/AppNotSupportedMobile/index.vue')['default']
   const AppSystemInfo: typeof import('./../components/AppSystemInfo/index.vue')['default']
+  const FaAlert: typeof import('@fantastic-admin/components')['FaAlert']
   const FaAvatar: typeof import('@fantastic-admin/components')['FaAvatar']
+  const FaBadge: typeof import('@fantastic-admin/components')['FaBadge']
   const FaButton: typeof import('@fantastic-admin/components')['FaButton']
   const FaButtonGroup: typeof import('@fantastic-admin/components')['FaButtonGroup']
   const FaCard: typeof import('@fantastic-admin/components')['FaCard']
@@ -80,11 +89,14 @@ declare global {
   const FaCheckboxGroup: typeof import('@fantastic-admin/components')['FaCheckboxGroup']
   const FaCollapsible: typeof import('@fantastic-admin/components')['FaCollapsible']
   const FaContextMenu: typeof import('@fantastic-admin/components')['FaContextMenu']
+  const FaDescriptions: typeof import('@fantastic-admin/components')['FaDescriptions']
   const FaDivider: typeof import('@fantastic-admin/components')['FaDivider']
   const FaDrawer: typeof import('@fantastic-admin/components')['FaDrawer']
   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']
@@ -108,7 +120,9 @@ declare global {
   const FaSelect: typeof import('@fantastic-admin/components')['FaSelect']
   const FaSlider: typeof import('@fantastic-admin/components')['FaSlider']
   const FaSwitch: typeof import('@fantastic-admin/components')['FaSwitch']
+  const FaTable: typeof import('@fantastic-admin/components')['FaTable']
   const FaTabs: typeof import('@fantastic-admin/components')['FaTabs']
+  const FaTag: typeof import('@fantastic-admin/components')['FaTag']
   const FaTextarea: typeof import('@fantastic-admin/components')['FaTextarea']
   const FaToast: typeof import('@fantastic-admin/components')['FaToast']
   const FaTooltip: typeof import('@fantastic-admin/components')['FaTooltip']

apps/core-antdv-next/src/ui/provider/index.vue

@@ -4,13 +4,87 @@ import antdvNextLocaleZhCN from 'antdv-next/locale/zh_CN'
 
 const appSettingsStore = useAppSettingsStore()
 
+function toHexChannel(value: number) {
+  return Math.round(Math.min(Math.max(value, 0), 1) * 255).toString(16).padStart(2, '0')
+}
+
+function linearSrgbToSrgb(value: number) {
+  if (value <= 0.0031308) {
+    return 12.92 * value
+  }
+  return 1.055 * value ** (1 / 2.4) - 0.055
+}
+
+function oklchToHex(value: string) {
+  const normalizedValue = value
+    .trim()
+    .replace(/^oklch\(/, '')
+    .replace(/\)$/, '')
+
+  const [colorValue] = normalizedValue.split('/')
+  const [lightnessValue, chromaValue, hueValue] = colorValue.trim().split(/\s+/)
+
+  if (!lightnessValue || !chromaValue || !hueValue) {
+    return '#000000'
+  }
+
+  const lightness = lightnessValue.endsWith('%')
+    ? Number.parseFloat(lightnessValue) / 100
+    : Number.parseFloat(lightnessValue)
+  const chroma = Number.parseFloat(chromaValue)
+  const hue = Number.parseFloat(hueValue.replace(/deg$/, ''))
+
+  if ([lightness, chroma, hue].some(Number.isNaN)) {
+    return '#000000'
+  }
+
+  const hueInRadians = hue * Math.PI / 180
+  const a = chroma * Math.cos(hueInRadians)
+  const b = chroma * Math.sin(hueInRadians)
+
+  const l = lightness + 0.3963377774 * a + 0.2158037573 * b
+  const m = lightness - 0.1055613458 * a - 0.0638541728 * b
+  const s = lightness - 0.0894841775 * a - 1.291485548 * b
+
+  const l3 = l ** 3
+  const m3 = m ** 3
+  const s3 = s ** 3
+
+  const red = linearSrgbToSrgb(+4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3)
+  const green = linearSrgbToSrgb(-1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3)
+  const blue = linearSrgbToSrgb(-0.0041960863 * l3 - 0.7034186147 * m3 + 1.707614701 * s3)
+
+  return `#${toHexChannel(red)}${toHexChannel(green)}${toHexChannel(blue)}`
+}
+
+const token = ref({
+  colorPrimary: '',
+  borderRadius: 0,
+})
+
+watch([
+  () => appSettingsStore.settings.theme.colorScheme,
+  () => appSettingsStore.settings.theme.radius,
+], () => {
+  const rootStyles = getComputedStyle(document.documentElement)
+  token.value = {
+    colorPrimary: oklchToHex(rootStyles.getPropertyValue('--primary')),
+    borderRadius: Number.parseFloat(rootStyles.getPropertyValue('--radius')) * 16,
+  }
+}, {
+  immediate: true,
+})
+
 const themeConfig = computed(() => ({
   algorithm: appSettingsStore.currentColorScheme === 'dark' ? [theme.darkAlgorithm] : [theme.defaultAlgorithm],
+  token: token.value,
 }))
 </script>
 
 <template>
   <AConfigProvider :locale="antdvNextLocaleZhCN" :theme="themeConfig">
-    <slot />
+    <AApp class="size-full">
+      <slot />
+    </AApp>
   </AConfigProvider>
 </template>

apps/core-antdv-next/src/views/index.vue

@@ -33,12 +33,12 @@ const products = ref([
     ],
   },
   {
-    name: 'One-step-admin',
-    tagline: '干啥都快人一步的 Vue 中后台系统框架',
+    name: 'One-step Console',
+    tagline: '像导播一样编排你的工作现场',
     logo: 'https://one-step-admin.hurui.me/logo.png',
     url: 'https://one-step-admin.hurui.me',
     images: [
-      'https://one-step-admin.hurui.me/preview1.png',
+      'https://one-step-admin.hurui.me/hero_preview.png',
     ],
   },
 ])
@@ -193,46 +193,48 @@ function open(url: string) {
             class="group card-enter border rounded-xl bg-neutral-950/[.012] dark:bg-white/5"
             :style="{ animationDelay: `${i * 80}ms` }"
           >
-            <div class="flex flex-col h-full">
-              <div class="p-6 border-b flex gap-4 items-start">
-                <img :src="product.logo" :alt="product.name" class="shrink-0 h-10 w-10 object-contain">
-                <div>
-                  <div class="text-sm tracking-tight font-semibold">
-                    {{ product.name }}
-                  </div>
-                  <div class="text-xs text-muted-foreground leading-relaxed mt-1">
-                    {{ product.tagline }}
+            <div>
+              <div class="flex flex-col h-full">
+                <div class="p-6 border-b flex gap-4 items-start">
+                  <img :src="product.logo" :alt="product.name" class="shrink-0 h-10 w-10 object-contain">
+                  <div>
+                    <div class="text-sm tracking-tight font-semibold">
+                      {{ product.name }}
+                    </div>
+                    <div class="text-xs text-muted-foreground leading-relaxed mt-1">
+                      {{ product.tagline }}
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div class="p-6 flex-col-start flex-1">
-                <div v-if="product.features" class="mb-5 flex-1">
-                  <ul class="space-y-1.5">
-                    <li
-                      v-for="feature in product.features"
-                      :key="feature"
-                      class="text-xs text-muted-foreground flex gap-2 items-start"
+                <div class="p-6 flex-col-start flex-1">
+                  <div v-if="product.features" class="mb-5 flex-1">
+                    <ul class="space-y-1.5">
+                      <li
+                        v-for="feature in product.features"
+                        :key="feature"
+                        class="text-xs text-muted-foreground flex gap-2 items-start"
+                      >
+                        <span class="text-primary mt-0.5 shrink-0">·</span>
+                        <span>{{ feature }}</span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div v-if="product.images" class="mb-5 border rounded-lg flex-1 overflow-hidden">
+                    <img
+                      :src="product.images[0]"
+                      :alt="product.name"
+                      class="opacity-50 h-full w-full transition-opacity duration-500 object-cover group-hover-opacity-100"
                     >
-                      <span class="text-primary mt-0.5 shrink-0">·</span>
-                      <span>{{ feature }}</span>
-                    </li>
-                  </ul>
-                </div>
-                <div v-if="product.images" class="mb-5 border rounded-lg flex-1 overflow-hidden">
-                  <img
-                    :src="product.images[0]"
-                    :alt="product.name"
-                    class="opacity-50 h-full w-full transition-opacity duration-500 object-cover group-hover-opacity-100"
+                  </div>
+                  <FaButton
+                    variant="link"
+                    size="sm"
+                    class="mt-auto active-scale-98"
+                    @click="open(product.url)"
                   >
+                    探索 →
+                  </FaButton>
                 </div>
-                <FaButton
-                  variant="link"
-                  size="sm"
-                  class="mt-auto active-scale-98"
-                  @click="open(product.url)"
-                >
-                  探索 →
-                </FaButton>
               </div>
             </div>
           </div>

apps/core-antdv-next/src/views/ui_example/index.vue

@@ -56,7 +56,13 @@ function open(url: string) {
 
 <template>
   <div>
-    <FaPageHeader title="Antdv Next" description="框架内置 Antdv Next 组件库，本页仅展示部分组件，更多组件及使用说明请查看 Antdv Next 官网。">
+    <FaPageHeader description="框架提供已集成 Antdv Next 组件库的模板，支持开箱即用。本页仅展示部分组件，更多组件及使用说明请查看 Antdv Next 官网。">
+      <template #title>
+        <div class="flex gap-2 items-center">
+          <FaIcon name="https://www.antdv-next.com/antdv-next.svg" />
+          Antdv Next
+        </div>
+      </template>
       <FaButton variant="outline" @click="open('https://www.antdv-next.com/')">
         <FaIcon name="i-ant-design:link-outlined" />
         Antdv Next 官网

apps/core-antdv-next/vite.config.ts

@@ -47,7 +47,10 @@ export default defineConfig(({ mode, command }) => {
     },
     plugins: createVitePlugins(mode, command === 'build'),
     optimizeDeps: {
-      exclude: ['@fantastic-admin/components'],
+      exclude: [
+        '@fantastic-admin/components',
+        '@fantastic-admin/composables',
+      ],
     },
     resolve: {
       alias: {

apps/core-arco-design-vue/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@fantastic-admin/components": "workspace:*",
     "@fantastic-admin/composables": "workspace:*",
+    "@fantastic-admin/hotkeys": "workspace:*",
     "@fantastic-admin/settings": "workspace:*",
     "@fantastic-admin/types": "workspace:*",
     "@vee-validate/zod": "catalog:",
@@ -27,8 +28,6 @@
     "dayjs": "catalog:",
     "eruda": "catalog:",
     "es-toolkit": "catalog:",
-    "hotkeys-js": "catalog:",
-    "lucide-vue-next": "catalog:",
     "mitt": "catalog:",
     "nprogress": "catalog:",
     "path-browserify": "catalog:",

apps/core-arco-design-vue/src/api/index.ts

@@ -51,7 +51,7 @@ function handleError(error: any) {
     useAppAccountStore().requestLogout()
   }
   else {
-    faToast.error('Error', {
+    useFaToast().error('Error', {
       description: error.message,
     })
   }
@@ -70,7 +70,7 @@ api.interceptors.response.use(
     if (typeof response.data === 'object') {
       if (response.data.status === 1) {
         if (response.data.error) {
-          faToast.warning('Warning', {
+          useFaToast().warning('Warning', {
             description: response.data.error,
           })
           return Promise.reject(response.data)

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,32 +10,38 @@ 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 () => {
-    faToast.success('模拟修改成功，请重新登录')
+    useFaToast().success('模拟修改成功，请重新登录')
     appAccountStore.logout()
   }).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 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 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 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>

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

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

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

apps/core-arco-design-vue/src/composables/app/tabbar.ts

@@ -80,13 +80,13 @@ export function useAppTabbar() {
     const index = appTabbarStore.list.findIndex(item => item.tabId === tabId)
     if (index < 0) {
       flag = false
-      !checkOnly && faToast.warning('关闭的标签页不存在', {
+      !checkOnly && useFaToast().warning('关闭的标签页不存在', {
         position: 'top-center',
       })
     }
     else if (appTabbarStore.list.length <= 1) {
       flag = false
-      !checkOnly && faToast.warning('当前只有一个标签页，不可关闭', {
+      !checkOnly && useFaToast().warning('当前只有一个标签页，不可关闭', {
         position: 'top-center',
       })
     }

apps/core-arco-design-vue/src/hotkeys/README.md

@@ -1,107 +0,0 @@
-# Hotkeys 设计说明
-
-这个目录参考 `fantastic-admin/v6-dev/apps/example/src/hotkeys` 的设计，目标是把当前项目里分散在各组件中的快捷键逻辑收拢成一套轻量方案。
-
-## 设计目标
-
-当前方案只解决 4 件事：
-
-1. 快捷键定义不要散落在多个组件里重复写
-2. 快捷键帮助面板不要再手写一份展示文案
-3. 业务组件不要反复手写 `hotkeys()` / `unbind()`
-4. 不引入过重的 command system
-
-所以采用：
-
-- `registry.ts` 统一定义
-- `useHotkeys.ts` 统一注册
-- 业务 handler 仍留在业务组件
-
-这是一种“集中定义 + 就地执行”的轻量折中方案。
-
-## 目录职责
-
-### `registry.ts`
-
-统一维护当前项目的快捷键元数据：
-
-- id
-- keys
-- enabled
-- help
-
-这里负责：
-
-- 统一的 id 常量
-- 真实键位
-- 是否启用的条件
-- 帮助面板展示文案
-- 聚合业务扩展
-
-> 注意：这里不放业务逻辑 handler。
-
-### `registry.extend.ts`
-
-用于放置项目自定义扩展快捷键，避免把业务项全部堆进内建定义中。
-
-### `types.ts`
-
-定义快捷键系统的基础类型，包括：
-
-- `HotkeyBinding`
-- `HotkeyContext`
-- `HotkeyHelpMeta`
-- `HotkeyHandler`
-
-### `useHotkeys.ts`
-
-对 `hotkeys-js` 的薄封装，提供：
-
-- `useHotkey`：注册单个快捷键
-- `useHotkeyBindings`：批量注册快捷键
-
-并统一处理：
-
-- 注册 / 卸载
-- `active` 启停
-- `binding.enabled` 可用性判断
-- 默认 `preventDefault`
-
-## 当前项目已落地的快捷键
-
-### 全局
-
-- `system.info.open`
-- `menuSearch.open`
-- `page.reload`
-
-### 主导航
-
-- `menu.next`
-- `menu.prev`
-
-### 标签栏
-
-- `tabbar.prev`
-- `tabbar.next`
-- `tabbar.closeCurrent`
-- `tabbar.gotoVisibleIndex`
-- `tabbar.gotoLast`
-
-### 菜单搜索弹窗
-
-- `menuSearch.moveUp`
-- `menuSearch.moveDown`
-- `menuSearch.confirm`
-- `menuSearch.close`
-
-## 使用约定
-
-1. 新增快捷键，优先在 `registry.ts` 或 `registry.extend.ts` 补定义
-2. 展示在帮助面板中的快捷键，必须配置 `help`
-3. handler 尽量保留在最了解业务的组件中
-4. 不直接在业务组件里继续散写 `hotkeys('xxx')`
-
-## 现阶段差异
-
-参考项目里还有页面最大化相关快捷键；当前项目暂未引入对应页面最大化能力，所以本次迁移只保留当前项目已有功能，并把原有 `F5` 页面刷新也纳入统一 registry 管理。

apps/core-arco-design-vue/src/hotkeys/extend.ts

@@ -0,0 +1,57 @@
+import type { HotkeyBinding } from '@fantastic-admin/hotkeys'
+
+/**
+ * 业务扩展快捷键 id
+ *
+ * 使用方式：
+ *
+ * export const EXT_HOTKEY_ID = {
+ *   demoOpen: 'demo.open',
+ * } as const
+ */
+export const EXT_HOTKEY_ID = {} as const
+
+type ExtendHotkeyId = typeof EXT_HOTKEY_ID[keyof typeof EXT_HOTKEY_ID]
+
+/**
+ * 业务扩展全局快捷键
+ *
+ * 示例：
+ *
+ * export const extendGlobalHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoOpen,
+ *     keys: ['command+j', 'ctrl+j'],
+ *     enabled: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *     help: {
+ *       group: 'global',
+ *       titleKey: 'global.demoOpen',
+ *       order: 90,
+ *       visible: ctx => ctx.settings.toolbar.menuSearch.enable,
+ *       displayKeys: {
+ *         default: ['Ctrl', 'J'],
+ *         mac: ['⌘', 'J'],
+ *       },
+ *     },
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendGlobalHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]
+
+/**
+ * 业务扩展局部快捷键
+ *
+ * 示例：
+ *
+ * export const extendScopedHotkeyBindings = [
+ *   {
+ *     id: EXT_HOTKEY_ID.demoConfirm,
+ *     keys: ['enter'],
+ *   },
+ *   {
+ *     id: EXT_HOTKEY_ID.demoClose,
+ *     keys: ['esc'],
+ *   },
+ * ] satisfies HotkeyBinding<ExtendHotkeyId>[]
+ */
+export const extendScopedHotkeyBindings = [] satisfies HotkeyBinding<ExtendHotkeyId>[]

apps/core-arco-design-vue/src/hotkeys/index.ts

@@ -0,0 +1,41 @@
+import type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+} from '@fantastic-admin/hotkeys'
+import { createHotkeys } from '@fantastic-admin/hotkeys'
+import { EXT_HOTKEY_ID, extendGlobalHotkeyBindings, extendScopedHotkeyBindings } from './extend'
+
+const appHotkeys = createHotkeys({
+  extendIds: EXT_HOTKEY_ID,
+  extendGlobalHotkeyBindings,
+  extendScopedHotkeyBindings,
+  getContext: () => ({
+    settings: useAppSettingsStore().settings,
+  }),
+})
+
+export const HOTKEY_ID = appHotkeys.HOTKEY_ID
+export const hotkeyIds = appHotkeys.hotkeyIds
+export const globalHotkeyBindings = appHotkeys.globalHotkeyBindings
+export const menuSearchHotkeyBindings = appHotkeys.menuSearchHotkeyBindings
+export const hotkeyBindings = appHotkeys.hotkeyBindings
+export const useHotkey = appHotkeys.useHotkey
+export const useHotkeyBindings = appHotkeys.useHotkeyBindings
+
+export type HotkeyId = typeof HOTKEY_ID[keyof typeof HOTKEY_ID]
+export type {
+  HotkeyBinding,
+  HotkeyContextBase,
+  HotkeyDisplayKeys,
+  HotkeyHandler,
+  HotkeyHandlerArgs,
+  HotkeyHandlersMap,
+  HotkeyHelpGroup,
+  HotkeyHelpMeta,
+}

apps/core-arco-design-vue/src/hotkeys/registry.extend.ts

@@ -1,22 +0,0 @@
-import type { HotkeyBinding } from './types'
-
-/**
- * 业务扩展快捷键 id
- *
- * 使用方式：
- *
- * export const EXT_HOTKEY_ID = {
- *   demoOpen: 'demo.open',
- * } as const
- */
-export const EXT_HOTKEY_ID = {} as const
-
-/**
- * 业务扩展全局快捷键
- */
-export const extendGlobalHotkeyBindings: HotkeyBinding[] = []
-
-/**
- * 业务扩展局部快捷键
- */
-export const extendScopedHotkeyBindings: HotkeyBinding[] = []

apps/core-arco-design-vue/src/hotkeys/types.ts

@@ -1,38 +0,0 @@
-import type { useAppSettingsStore } from '@/store/modules/app/settings'
-
-export type HotkeyHelpGroup = 'global' | 'nav' | 'tabbar' | 'page'
-export type HotkeyId = typeof import('./registry').HOTKEY_ID[keyof typeof import('./registry').HOTKEY_ID]
-
-export interface HotkeyContext {
-  settings: ReturnType<typeof useAppSettingsStore>['settings']
-}
-
-export interface HotkeyDisplayKeys {
-  default: string[]
-  mac?: string[]
-}
-
-export interface HotkeyHelpMeta {
-  group: HotkeyHelpGroup
-  titleKey: string
-  order?: number
-  visible?: (ctx: HotkeyContext) => boolean
-  displayKeys: HotkeyDisplayKeys
-}
-
-export interface HotkeyBinding {
-  id: HotkeyId
-  keys: string[]
-  preventDefault?: boolean
-  enabled?: (ctx: HotkeyContext) => boolean
-  help?: HotkeyHelpMeta
-}
-
-export interface HotkeyHandlerArgs {
-  event: KeyboardEvent
-  hotkey: string
-}
-
-export type HotkeyHandler = (args: HotkeyHandlerArgs) => void
-
-export type HotkeyHandlersMap = Partial<Record<HotkeyId, HotkeyHandler>>

apps/core-arco-design-vue/src/hotkeys/useHotkeys.ts

@@ -1,69 +0,0 @@
-import type { HotkeyHandler, HotkeyHandlersMap, HotkeyId } from './types'
-import hotkeys from 'hotkeys-js'
-import { hotkeyBindings, hotkeyIds } from './registry'
-
-export function useHotkey(id: HotkeyId, handler: HotkeyHandler, active: MaybeRefOrGetter<boolean> = true) {
-  const binding = hotkeyBindings.find(item => item.id === id)
-  const appSettingsStore = useAppSettingsStore()
-  const hotkeyContext = {
-    settings: appSettingsStore.settings,
-  }
-  let currentHandler: ((event: KeyboardEvent, hotkeyHandler: { key: string }) => void) | undefined
-
-  function bind() {
-    if (currentHandler || !binding) {
-      return
-    }
-    const currentBinding = binding
-
-    currentHandler = (event, hotkeyHandler) => {
-      if (currentBinding.enabled && !currentBinding.enabled(hotkeyContext)) {
-        return
-      }
-
-      if (currentBinding.preventDefault !== false) {
-        event.preventDefault()
-      }
-
-      handler({
-        event,
-        hotkey: hotkeyHandler.key,
-      })
-    }
-
-    hotkeys(currentBinding.keys.join(','), currentHandler)
-  }
-
-  function unbind() {
-    if (!currentHandler || !binding) {
-      return
-    }
-
-    hotkeys.unbind(binding.keys.join(','), currentHandler)
-    currentHandler = undefined
-  }
-
-  watch(() => toValue(active), (val) => {
-    if (val) {
-      bind()
-    }
-    else {
-      unbind()
-    }
-  }, {
-    immediate: true,
-  })
-
-  onUnmounted(() => {
-    unbind()
-  })
-}
-
-export function useHotkeyBindings(handlers: HotkeyHandlersMap, active: MaybeRefOrGetter<boolean> = true) {
-  hotkeyIds.forEach((id) => {
-    const handler = handlers[id]
-    if (handler) {
-      useHotkey(id, handler, active)
-    }
-  })
-}

apps/core-arco-design-vue/src/layouts/components/AppSetting/index.vue

@@ -38,7 +38,7 @@ onMounted(() => {
   })
 })
 
-const { copy, copied, isSupported } = useClipboard()
+const { copy, copied, isSupported } = useClipboard({ legacy: true })
 
 function handleCopy() {
   copy(JSON.stringify(diffTwoObj(settingsDefault, appSettingsStore.settings), null, 2))

apps/core-arco-design-vue/src/layouts/components/Hotkeys/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { globalHotkeyBindings } from '@/hotkeys/registry'
+import { hotkeyBindings } from '@/hotkeys'
 import eventBus from '@/utils/eventBus'
 
 defineOptions({
@@ -11,10 +11,10 @@ const hotkeyContext = {
   settings: appSettingsStore.settings,
 }
 
-const groupTitleMap = {
-  global: '全局',
-  nav: '主导航',
-  tabbar: '标签栏',
+const helpGroupMeta = {
+  global: { title: '全局', order: 10 },
+  nav: { title: '主导航', order: 20 },
+  tabbar: { title: '标签栏', order: 30 },
 } as const
 
 const itemTitleMap: Record<string, string> = {
@@ -32,42 +32,52 @@ const itemTitleMap: Record<string, string> = {
 const isShow = ref(false)
 
 const helpGroups = computed(() => {
-  const groups = [
-    { id: 'global', title: groupTitleMap.global },
-    { id: 'nav', title: groupTitleMap.nav },
-    { id: 'tabbar', title: groupTitleMap.tabbar },
-  ] as const
+  const groups = new Map<string, {
+    id: string
+    title: string
+    order: number
+    items: {
+      id: string
+      title: string
+      order: number
+      displayKeys: string[]
+    }[]
+  }>()
 
-  return groups.map((group) => {
-    const items = globalHotkeyBindings
-      .filter(binding => binding.help?.group === group.id)
-      .filter((binding) => {
-        if (!binding.help) {
-          return false
-        }
-        if (binding.help.visible) {
-          return binding.help.visible(hotkeyContext)
-        }
-        return true
-      })
-      .sort((a, b) => (a.help?.order ?? 0) - (b.help?.order ?? 0))
-      .map((binding) => {
-        const displayKeys = appSettingsStore.os === 'mac' && binding.help?.displayKeys.mac
-          ? binding.help.displayKeys.mac
-          : binding.help?.displayKeys.default ?? []
-
-        return {
-          id: binding.id,
-          title: binding.help?.titleKey ? itemTitleMap[binding.help.titleKey] : '',
-          displayKeys,
-        }
-      })
-
-    return {
-      ...group,
-      items,
+  hotkeyBindings.forEach((binding) => {
+    const help = binding.help
+    if (!help) {
+      return
     }
-  }).filter(group => group.items.length > 0)
+    if (help.visible && !help.visible(hotkeyContext)) {
+      return
+    }
+
+    const meta = helpGroupMeta[help.group as keyof typeof helpGroupMeta]
+    const group = groups.get(help.group) ?? {
+      id: help.group,
+      title: help.groupTitleKey ? itemTitleMap[help.groupTitleKey] ?? help.groupTitleKey : meta?.title ?? help.group,
+      order: meta?.order ?? 100,
+      items: [],
+    }
+
+    group.items.push({
+      id: binding.id,
+      title: itemTitleMap[help.titleKey] ?? help.titleKey,
+      order: help.order ?? 0,
+      displayKeys: appSettingsStore.os === 'mac' && help.displayKeys.mac
+        ? help.displayKeys.mac
+        : help.displayKeys.default,
+    })
+    groups.set(help.group, group)
+  })
+
+  return Array.from(groups.values())
+    .map(group => ({
+      ...group,
+      items: [...group.items].sort((a, b) => a.order - b.order),
+    }))
+    .sort((a, b) => a.order - b.order)
 })
 
 onMounted(() => {

apps/core-arco-design-vue/src/layouts/components/MainSidebar/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 import Logo from '../Logo/index.vue'
 

apps/core-arco-design-vue/src/layouts/components/Topbar/Tabbar/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TabbarRecordRaw } from '@fantastic-admin/types'
 import { useMagicKeys } from '@vueuse/core'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 
 defineOptions({
@@ -72,13 +72,13 @@ watch(() => route, (val) => {
 function tabbarScrollTip() {
   if (tabContainerRef.value?.$el.clientWidth > (tabsRef.value?.ref?.$el.clientWidth ?? 0) && !localStorage.has('tabbarScrollTip')) {
     localStorage.setItem('tabbarScrollTip', '')
-    const tips = faToast.info('温馨提示', {
+    const tips = useFaToast().info('温馨提示', {
       description: '标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览',
       position: 'top-center',
       duration: Infinity,
       action: {
         label: '知道了',
-        onClick: () => faToast.dismiss(tips),
+        onClick: () => useFaToast().dismiss(tips),
       },
     })
   }

apps/core-arco-design-vue/src/layouts/components/Topbar/Toolbar/MenuSearch/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import Search from './search.vue'
 
 defineOptions({

apps/core-arco-design-vue/src/layouts/components/Topbar/Toolbar/MenuSearch/search.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MenuRecordRaw } from '@fantastic-admin/types'
 import { match } from 'pinyin-pro'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue'
 import BreadcrumbItem from '@/layouts/components/Breadcrumb/item.vue'
 import { resolveRoutePath } from '@/utils'

apps/core-arco-design-vue/src/layouts/components/Topbar/Toolbar/PageReload/index.vue

@@ -8,13 +8,15 @@ const mainPage = useAppPage()
 
 const isAnimating = ref(false)
 
-function handleClick() {
-  isAnimating.value = true
-  mainPage.reload()
-}
-
-function handleCtrlClick() {
-  location.reload()
+function handleClick(event: MouseEvent) {
+  if (event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey) {
+    location.reload()
+    return
+  }
+  if (!event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey) {
+    isAnimating.value = true
+    mainPage.reload()
+  }
 }
 </script>
 
@@ -28,7 +30,7 @@ function handleCtrlClick() {
         <p>可切换为浏览器原生刷新</p>
       </div>
     </template>
-    <FaButton variant="ghost" size="icon-sm" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
+    <FaButton variant="ghost" size="icon-sm" @click="handleClick" @animationend="isAnimating = false">
       <FaIcon name="i-iconoir:refresh-double" class="size-4" :class="{ animation: isAnimating }" />
     </FaButton>
   </FaTooltip>

apps/core-arco-design-vue/src/layouts/components/views/link.vue

@@ -6,9 +6,9 @@ defineOptions({
 })
 
 const route = useRoute()
-const { copy, copied } = useClipboard()
+const { copy, copied } = useClipboard({ legacy: true })
 watch(copied, (val) => {
-  val && faToast.success('复制成功')
+  val && useFaToast().success('复制成功')
 })
 
 function open() {

apps/core-arco-design-vue/src/layouts/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useElementSize, useScroll } from '@vueuse/core'
-import { useHotkeyBindings } from '@/hotkeys/useHotkeys'
+import { useHotkeyBindings } from '@/hotkeys'
 import { useSlots } from '@/slots'
 import { cn } from '@/utils'
 import eventBus from '@/utils/eventBus'

apps/core-arco-design-vue/src/router/extensions.ts

@@ -110,7 +110,7 @@ function extendClose(router: Router) {
 }
 
 declare module 'vue-router' {
-  interface Router {
+  interface _RouterClassic {
     /**
      * 本方法为框架扩展语法，会同时关闭当前标签页
      *

apps/core-arco-design-vue/src/router/modules/arco.design.vue.example.ts

@@ -1,29 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router'
-
-function Layout() {
-  return import('@/layouts/index.vue')
-}
-
-const routes: RouteRecordRaw = {
-  path: '/arco_design_vue_example',
-  component: Layout,
-  meta: {
-    title: 'Arco Design Vue',
-    icon: 'https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico',
-    menu: false,
-  },
-  children: [
-    {
-      path: '',
-      name: 'arcoDesignVueExample',
-      component: () => import('@/views/arco_design_vue_example/index.vue'),
-      meta: {
-        title: 'Arco Design Vue',
-        menu: false,
-        breadcrumb: false,
-      },
-    },
-  ],
-}
-
-export default routes

apps/core-arco-design-vue/src/router/modules/ui.example.ts

@@ -5,20 +5,19 @@ function Layout() {
 }
 
 const routes: RouteRecordRaw = {
-  path: '/element_plus_example',
+  path: '/ui_example',
   component: Layout,
   meta: {
-    title: 'Element Plus',
-    icon: 'i-ep:element-plus',
+    title: 'UI',
     menu: false,
   },
   children: [
     {
       path: '',
-      name: 'elementPlusExample',
-      component: () => import('@/views/element_plus_example/index.vue'),
+      name: 'uiExample',
+      component: () => import('@/views/ui_example/index.vue'),
       meta: {
-        title: 'Element Plus',
+        title: 'UI',
         menu: false,
         breadcrumb: false,
       },

apps/core-arco-design-vue/src/router/routes.ts

@@ -1,8 +1,8 @@
 import type { RouteRecordMainRaw } from '@fantastic-admin/types'
 import type { RouteRecordRaw } from 'vue-router'
 import pinia from '@/store'
-import ArcoDesignVueExample from './modules/arco.design.vue.example'
 import MultilevelMenuExample from './modules/multilevel.menu.example'
+import UiExample from './modules/ui.example'
 
 // 固定路由（默认路由）
 const constantRoutes: RouteRecordRaw[] = [
@@ -72,7 +72,7 @@ const asyncRoutes: RouteRecordMainRaw[] = [
       icon: 'i-whh:jqueryui',
     },
     children: [
-      ArcoDesignVueExample,
+      UiExample,
     ],
   },
 ]