Formly

一款基于 Excel 风格网格画布的可视化表单编辑器，支持拖拽放置组件、合并拆分单元格、行列调整的交互体验。

功能特性

• 🎨 Excel 风格网格画布 — 单元格选中、拖拽放置、点击放置、单元格内多组件纵向堆叠
• 🔀 合并 & 拆分 — 矩形多选、Shift 连选、合并 / 拆分单元格
• ↔️ 行列操作 — 列宽 / 行高拖拽调整、右键插入整行整列
• 📦 丰富组件 — 文本框、数字、日期、选择器、单选 / 多选框组、开关、上传、固定文字、图片
• ⚙️ 实时配置 — 右侧面板编辑组件属性（占位提示、必填、选项、水平对齐等）
• 📋 右键菜单 — 鼠标坐标定位弹出菜单

技术栈

层级	技术
框架	Vue 3 + TypeScript
构建	Vite 8
UI 库	Element Plus
样式	Tailwind CSS 4
状态管理	Pinia
路由	Vue Router 5
图标	Iconify
工具	VueUse
代码质量	ESLint + Oxlint + Oxfmt

项目结构

Formly/
├── frontend/          # 前端应用
│   └── src/
│       ├── views/     # 页面（编辑器等）
│       ├── components/# 公共组件
│       ├── types/     # 类型定义
│       ├── constants/ # 常量配置
│       ├── styles/    # 全局样式
│       ├── router/    # 路由
│       └── stores/    # 状态管理
├── backend/           # 后端（待开发）
└── plans/             # 开发计划文档

快速开始

环境要求

• Node.js ^20.19.0 或 >=22.12.0
• pnpm

安装与运行

# 进入前端目录
cd frontend

# 安装依赖
pnpm install

# 启动开发服务
pnpm dev

其他命令

# 构建生产包
pnpm build

# 预览构建产物
pnpm preview

# 类型检查
pnpm type-check

# 代码检查与修复
pnpm lint

# 代码格式化
pnpm format

开发状态

项目目前处于编辑器原型阶段，核心画布交互和字段预览已基本成型，后续将继续完善：

• 删除整行 / 整列、复制粘贴、撤销重做
• 编辑器 Store 持久化状态模型
• 右侧表格级配置和数据源配置
• 保存、发布、导入、导出能力
• 后端服务搭建