---
name: deppon-pro-form-group
description: >-
    生成多段 ProForm 组合页：横向锚点、可折叠 ElCard、每段独立 columns/rules、底部统一提交/校验/重置。
    在用户提到表单分组、锚点导航、统一提交多个 pro-form 时应用。
---

# deppon-pro-form-group

## 依据来源（私有 npm）

-   **`deppon-npm-private-registry`**。
-   **`@deppon/deppon-template`**：`ProForm`。
-   **`@deppon/deppon-ui`**：`ElCard`、`ElAnchor`、`ElScrollbar`、`ElButton` 等 — 以包内导出与 `*.d.ts` 为准。
-   **`deppon-npm-skills`**。不默认读取 `deppon-npm` 的 `site/`。

## 结构要点

-   顶部 `el-anchor`（`direction="horizontal"`）+ `el-anchor-link`：`href` 指向各 `#form.id`。
-   中部 `el-scrollbar`，内层 `v-for="form in formConfigs"`：`el-card` 带 `collapsible`、`v-model:collapsed`、`:id="form.id"`。
-   每张卡内一个 `pro-form`：`:ref="el => (formRefs[form.key] = el)"`，`:columns`、`:initial-values`、`:rules`，监听 `@validate` 汇总状态。
-   底部固定操作条：`handleSubmitAll` / `handleValidateAll` / `handleResetAll` / 汇总取值——通过 `formRefs` 遍历实例；**具体可调方法名以 `ProForm` 实例类型为准**。

## 导入约定

与 **`deppon-npm-private-registry`** 及包文档一致：`ProForm` 来自 `@deppon/deppon-template`；`ElCard`、`ElButton`、`ElAnchor`、`ElScrollbar`、`ElIcon` 等来自 `@deppon/deppon-ui`；图标 `@deppon/deppon-ui/icons-vue`。

## 生成清单

-   [ ] `formConfigs` 每项有稳定 `key`、`id`（与锚点一致）、`title`、`columns`。
-   [ ] 折叠态用 `ref`/`reactive` 存 `cardCollapsed`，与 `v-model:collapsed` 同步。
-   [ ] 统一提交流程里处理异步与 `ElMessage`/`ElMessageBox` 与项目惯例一致。