# vue-form-designer

**Repository Path**: frankdev/vue-form-designer

## Basic Information

- **Project Name**: vue-form-designer
- **Description**: form-create的优化改造版 使用chatGpt优化重构
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-11
- **Last Updated**: 2026-10-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-form-designer

基于 Vue 3 的纯前端页面与表单设计器。项目采用 Designer Core、Inspector Schema 和 UI Adapter，不保留旧设计器运行时兼容层。

## 当前进度

开发节点、验收标准、测试结果和提交记录统一维护在 [FORM_CREATE_EVOLUTION_PLAN.md](./FORM_CREATE_EVOLUTION_PLAN.md) 的“执行记录与注意事项”章节。

当前已交付表单设计的核心架构、基础画布/拖拽/Inspector、Ant 基础字段、文字/默认值/选项编辑及默认值预览修复；高级配置和部分组件仍待完善。

2026-09-15 起，主线扩展为可自由组合的页面设计器：完整在线配置 CRUD、多页签、多表格、左树右列表、主从表和组件联动。页面表格采用 VXE，其他控件使用 Ant；第一版注入模拟服务，与后端独立。当前 28/95 项完成、PD-05 九项代码完成待界面验收、58 项未开发。访问 [页面设计器](http://localhost:4173/page-designer/) 可配置线性布局、栅格、双区域分区、卡片、文本、分隔线及原有页面/弹层/表单；[第五阶段进度和验证步骤](docs/PAGE_LAYOUT_REPORT.md) 保留组合补验待办。

2026-10-13 当前优先完成官方 Ant **表单设计器**组件对齐。下拉选择支持单选、多选、标签及官方基础配置，选项采用紧凑表格。新增独立 `vxeTable` 数据组件：真实 VXE 画布 / 预览、列配置弹窗、静态数据、排序筛选、分页、选择和单元格编辑。对照依据、已完成内容与尚未完成的官方差距见 [本轮对齐与验收](docs/ANT_FORM_VXE_ALIGNMENT.md)；用户授权一起整理的运行控制见 [表单组件 API](docs/FORM_COMPONENT_API.md)。

在 [表单设计器](http://127.0.0.1:4173/) 切换 Ant Design Vue，从“数据容器”添加“VXE 数据表格”，默认打开“表格配置”：点击“配置列”维护列，点击“编辑数据”在宽弹窗按列编辑初始数据；基础配置只保留标题、数据绑定字段和折叠的更多设置。[面板调整与验收](docs/ANT_VXE_INSPECTOR_UX.md) 说明数据保留、原子保存和复验步骤。`table` / `tableColumn` 是字段布局，`vxeTable` 是行数据组件；两者独立，不以布局替代数据表格。

页面主线 PD-08.01 / PD-08.02 的模拟用户列表和基础列配置为此前独立交付，详见 [页面数据表格报告](docs/PAGE_DATATABLE_CONFIG_REPORT.md)。页面查询、服务映射、操作列、弹层及完整 CRUD 仍需按 PD 计划开发；下一步优先 FA-04 分组表头 / 提示 / 汇总，随后 FA-05 操作按钮、FA-06 模拟服务、FA-07 树和拖拽。共享表单组件完成后恢复页面编排，Element Plus / Vant 延后。

方案与进度入口：

- [页面总计划与最终验收](docs/PAGE_DESIGNER_DEVELOPMENT_PLAN.md)
- [逐项开发内容、测试状态和提交记录](docs/PAGE_DESIGNER_TASKS.md)
- [组件交互与联动方案](docs/PAGE_INTERACTION_DESIGN.md)
- [PD-02 页面协议与配置历史验收记录](docs/PAGE_PROTOCOL_REPORT.md)：执行 `pnpm test:page` 简单验收，本阶段没有新增界面。
- [PD-03 数据服务与模拟数据库验收记录](docs/PAGE_DATA_SERVICE_REPORT.md)：执行 `pnpm test:page-data` 验证 101 项服务行为，下一阶段提供浏览器入口。
- [VXE 接入版本、许可证与验证报告](docs/VXE_INTEGRATION_REPORT.md)：本地 `/vxe/` 提供可操作验收入口。

## 开发环境

- Node.js 22 或更高版本
- pnpm 10

## 常用命令

```bash
pnpm install
pnpm test:unit
pnpm test:page
pnpm test:page-data
pnpm typecheck
pnpm check
pnpm build
pnpm build:preview
pnpm dev
pnpm dev:cdn
```

`pnpm dev` 启动三套 UI Adapter 浏览器预览，默认地址为 `http://127.0.0.1:4173/`。执行 `pnpm build` 后，可通过 `pnpm dev:cdn` 在 `http://127.0.0.1:4174/examples/cdn/` 验证 ESM/CDN 示例。

## 实例和插件

设计器的核心服务统一位于 `designer.context`，组件和菜单通过实例方法管理：

```ts
const designer = createElementDesigner();

designer.addMenu({ name: 'business', title: '业务组件' });
const dispose = designer.use({
  name: 'contact-fields',
  version: '1.0.0',
  components: [{
    type: 'phone',
    label: '手机号',
    createRule: () => ({ type: 'phone' }),
  }],
  install: () => undefined,
});

designer.context.registry.has('phone');
dispose();
```

插件状态仅属于当前设计器实例。安装过程发生错误时，组件、菜单、语言和 UI 扩展会恢复到安装前状态。

## 开发约定

- 每个小任务完成后先执行对应测试，再单独提交 Git commit。
- 新增字段、方法、接口和复杂算法必须写中文注释，说明业务含义和边界条件。
- 不为旧 API、旧 JSON、旧 DragRule 或旧组件实现增加兼容代码。
- Git 提交信息使用中文并包含任务节点；逐项验收后提交，再执行下一项。
- 页面形态由组件组合实现；交付配置面板和联动验收，不以固定模板代替在线配置。