# af-form-designer

**Repository Path**: chenxxxxxxxx/af-form-designer

## Basic Information

- **Project Name**: af-form-designer
- **Description**: 基于 Arco Design Vue 的可视化表单设计器和渲染器。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-05-22
- **Last Updated**: 2026-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# af-form-designer

基于 Arco Design Vue 的可视化表单设计器和渲染器。

## 安装

本插件依赖于 `@arco-design/web-vue` 等库，请确保项目中已安装这些依赖。

```bash
# 安装 af-form-designer
npm install af-form-designer

# 安装必要的 Peer Dependencies (如果尚未安装)
npm install @arco-design/web-vue vuedraggable @vueuse/core lodash
```

## 快速上手

### 1. 全局注册

在你的入口文件（如 `main.ts` 或 `main.js`）中引入并注册插件。

```typescript
import { createApp } from 'vue'
import App from './App.vue'

// 1. 引入 Arco Design 及其样式
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'
import ArcoVueIcon from '@arco-design/web-vue/es/icon' // 务必引入图标库

// 2. 引入 af-form-designer 及其样式
import AfFormDesigner from 'af-form-designer'
import 'af-form-designer/style.css'

const app = createApp(App)

// 3. 注册插件
app.use(ArcoVue)
app.use(ArcoVueIcon)
app.use(AfFormDesigner)

app.mount('#app')
```

### 2. 组件使用

#### 表单设计器 (Form Designer)

用于可视化设计表单。支持 `v-model:ast` 双向绑定，并可通过 `options` 配置界面功能。

```vue
<template>
  <div style="height: 100vh;">
    <af-form-designer v-model:ast="formAst" :options="designerOptions" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const formAst = ref({
  formConfig: {
    labelAlign: 'right',
    layout: 'vertical',
    size: 'medium',
  },
  dataSources: [],
  widgetsConfig: [],
})

const designerOptions = {
  debug: false, // 是否开启调试模式（显示复制 AST 按钮）
  preview: true, // 是否显示预览按钮
  toolbar: {
    import: true, // 是否显示导入 JSON 按钮
    clear: true, // 是否显示清空画布按钮
    preview: true, // 是否显示工具栏预览按钮
  }
}
</script>
```


#### 表单渲染器 (Form Renderer)

用于渲染设计好的表单数据。

```vue
<template>
  <!-- 传入 request 方法以支持远程数据源 -->
  <af-form-renderer :data="formJson" :request="customRequest" />
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

// 这里填入设计器生成的 JSON 数据
const formJson = ref({
  widgetList: [],
  formConfig: {}
})

// 自定义请求方法（可选），用于处理远程选项加载
// 如果不传，默认使用内部的 axios
const customRequest = (config) => {
  return axios(config)
}
</script>
```

## 依赖说明

本项目依赖以下库，请确保你的项目环境满足要求：

- Vue 3.x
- @arco-design/web-vue 2.x
- vuedraggable 4.x (适配 Vue 3)

## 更新日志

### 2026-01-05 优化更新

- **性能优化**：
  - 实现组件异步按需加载 (`defineAsyncComponent`)，显著减小首屏包体积。
  - 优化 `widget-form-item` 渲染逻辑，使用 `computed` 缓存组件查找，减少不必要的计算。
- **代码重构**：
  - 规范化组件间数据流，移除子组件对 Props 的直接修改，改为事件驱动。
  - 优化组件注册机制，支持更灵活的加载策略。
- **体验改进**：
  - 增强可访问性 (A11y)，为操作按钮添加 `aria-label`。
  - 优化交互事件处理，修复潜在的点击穿透问题。