# h-form-design

**Repository Path**: nm-gc/h-form-design

## Basic Information

- **Project Name**: h-form-design
- **Description**: 低代码表单设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-27
- **Last Updated**: 2026-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# H-Form-Design

一个基于 Vue3 + TypeScript + Element Plus 的低代码表单设计组件库。

## 特性

- 🎨 **可视化设计** - 拖拽式表单设计器，所见即所得
- 🧩 **丰富组件** - 支持多种表单组件类型
- 📱 **响应式布局** - 支持水平和垂直布局
- 🎯 **类型安全** - 完整的 TypeScript 支持
- 🔧 **高度可配置** - 支持字段属性配置和表单验证
- 📦 **组件库模式** - 可作为 npm 包发布使用

## 支持的字段类型

### 基础组件
- 单行文本 (input)
- 多行文本 (textarea)
- 数字输入 (number)

### 选择组件
- 下拉选择 (select)
- 单选框 (radio)
- 多选框 (checkbox)

### 日期组件
- 日期选择 (date)
- 日期时间 (datetime)

### 其他组件
- 开关 (switch)

## 快速开始

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

### 构建组件库

```bash
pnpm build:lib
```

### 代码检查

```bash
pnpm lint
```

### 代码格式化

```bash
pnpm format
```

## 使用示例

```vue
<template>
  <HFormDesigner
    v-model="formConfig"
    :designer-config="{
      allowDrag: true,
      allowEdit: true,
      allowDelete: true,
      allowCopy: true,
      showPreview: true,
    }"
    @form-save="handleFormSave"
    @form-preview="handleFormPreview"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import HFormDesigner from './components/FormDesigner/index.vue'
import type { FormConfig } from './types'

const formConfig = ref<FormConfig>({
  id: 'my-form',
  title: '我的表单',
  description: '表单描述',
  fields: [],
  layout: 'vertical',
  labelWidth: '120px',
  size: 'default',
})

const handleFormSave = (config: FormConfig) => {
  console.log('保存表单配置:', config)
}
</script>
```

## 项目结构

```
src/
├── components/           # 组件目录
│   ├── FormDesigner/    # 表单设计器主组件
│   ├── FormCanvas/      # 表单画布组件
│   ├── FormPreview/     # 表单预览组件
│   ├── FieldPanel/      # 字段面板组件
│   └── PropertyPanel/   # 属性面板组件
├── types/               # 类型定义
├── utils/               # 工具函数
└── index.ts            # 组件库入口文件
```

## API 文档

### FormConfig

表单配置接口

```typescript
interface FormConfig {
  id: string                    // 表单ID
  title: string                 // 表单标题
  description?: string          // 表单描述
  fields: FormField[]          // 字段列表
  layout?: 'horizontal' | 'vertical'  // 布局方式
  labelWidth?: string          // 标签宽度
  size?: 'large' | 'default' | 'small'  // 表单尺寸
}
```

### FormField

表单字段接口

```typescript
interface FormField {
  id: string                   // 字段ID
  type: string                 // 字段类型
  label: string               // 字段标签
  name: string                // 字段名称
  required?: boolean          // 是否必填
  placeholder?: string        // 占位符
  options?: Array<{ label: string; value: any }>  // 选项列表
  props?: Record<string, any> // 额外属性
  validation?: FormRules[string]  // 验证规则
}
```

## 开发指南

### 添加新字段类型

1. 在 `FieldPanel/index.vue` 中添加新的字段模板
2. 在 `FormCanvas/index.vue` 中添加对应的组件渲染逻辑
3. 在 `FormPreview/index.vue` 中添加预览渲染逻辑
4. 在 `PropertyPanel/index.vue` 中添加属性配置项
5. 在 `types/index.ts` 中更新类型定义

### 自定义主题

可以通过 CSS 变量来自定义主题样式：

```css
:root {
  --h-form-primary-color: #409eff;
  --h-form-success-color: #67c23a;
  --h-form-warning-color: #e6a23c;
  --h-form-danger-color: #f56c6c;
}
```

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！