页面设计器
页面设计器是一个可视化的低代码开发工具，通过拖拽组件、配置属性、AI 智能辅助，快速生成 Vue 页面代码。
功能特性
可视化拖拽设计
- 三栏式设计界面：左侧组件面板、中间设计画布、右侧属性面板
- 拖拽交互：支持从组件面板拖入画布、画布内部拖拽排序
- 嵌套容器：支持 Row/Col 布局组件嵌套，实现复杂页面结构
- 实时预览：设计器内实时预览效果，所见即所得
- 快捷键支持：
Ctrl+Z- 撤销Ctrl+Y/Ctrl+Shift+Z- 重做Delete- 删除选中组件Escape- 取消选中
30+ 组件库
表单组件
| 组件 | 说明 | 特性 |
|---|---|---|
| 单行输入 | 文本输入框 | 前缀/后缀图标、清空按钮 |
| 多行输入 | 文本域 | 自动高度、字数限制 |
| 数字输入 | 数字输入框 | 步进器、范围限制 |
| 选择器 | 下拉选择 | 单选/多选、远程搜索 |
| 日期选择 | 日期时间选择器 | 日期/时间/日期时间/范围 |
| 开关 | 开关切换 | 自定义文字 |
| 单选框 | 单选按钮组 | 按钮样式 |
| 多选框 | 复选框组 | 全选/反选 |
| 上传 | 文件上传 | 图片/文件、拖拽上传 |
| 富文本 | 富文本编辑器 | 基于 WangEditor |
卡片组件
| 组件 | 说明 | 特性 |
|---|---|---|
| 统计卡片 | 数据统计展示 | 图标、趋势、动画 |
| 数据卡片 | 数据列表卡片 | 多行数据、百分比 |
| 折线统计卡片 | 带迷你图表 | 趋势展示 |
| 环形统计卡片 | 进度环形图 | 百分比进度 |
| 信息卡片 | 提示信息 | 多种类型、可关闭 |
| 空状态卡片 | 空数据提示 | 自定义图标文案 |
| 表格卡片 | 表格数据展示 | 列配置、边框 |
| 数据列表卡片 | 列表数据展示 | 头像、状态标签 |
| 天气卡片 | 天气信息展示 | 温度、湿度、风速 |
| 通知卡片 | 通知消息列表 | 已读/未读、类型 |
图表组件
| 组件 | 说明 | 特性 |
|---|---|---|
| 折线图 | 趋势展示 | 多系列、平滑曲线 |
| 柱状图 | 对比展示 | 堆叠、分组 |
| 饼图 | 占比展示 | 标签、图例 |
| 环形图 | 占比展示 | 中心文字 |
| 雷达图 | 多维对比 | 多系列 |
| 漏斗图 | 转化展示 | 排序、标签 |
布局组件
| 组件 | 说明 | 特性 |
|---|---|---|
| 行容器 | 水平布局 | 栅格间距、对齐方式 |
| 列容器 | 栅格列 | 响应式宽度 |
| 分割线 | 内容分隔 | 文字位置 |
AI 智能辅助
AI 生成组件
通过自然语言描述需求，AI 自动生成组件配置：
示例输入：帮我生成一个用户注册表单，包含用户名、密码、确认密码、手机号、邮箱、性别选择AI 将自动生成对应的表单组件配置。
AI 优化组件
选中已有组件后，可以让 AI 优化：
- 字段命名规范化
- 占位文本优化
- 校验规则完善
- 标签文案优化
快捷示例
内置 6 个常用场景示例，点击即可快速生成：
- 用户注册表单 - 用户名、密码、手机号、邮箱等
- 商品发布表单 - 商品名称、价格、库存、描述、图片等
- 订单查询表单 - 订单号、时间范围、状态、金额等
- 员工信息录入 - 姓名、工号、部门、职位、入职日期等
- 活动报名表单 - 姓名、联系方式、人数、备注等
- 问卷调查表单 - 单选、多选、评分、文本等
代码生成
生成模式
支持三种代码生成模式：
页面模式
生成独立的页面组件，适用于：
- 新建管理页面
- 数据录入页面
- 查询筛选页面
弹窗模式
生成 AModal 弹窗组件，支持配置：
- 弹窗尺寸：小/中/大/超大
- 弹窗标题
适用于：
- 新增/编辑弹窗
- 详情查看弹窗
- 确认操作弹窗
抽屉模式
生成抽屉组件，支持配置：
- 抽屉尺寸：小/中/大/超大
- 弹出方向：左/右/上/下
适用于：
- 侧边详情面板
- 筛选条件面板
- 配置设置面板
代码输出
完整代码
生成完整的 Vue 单文件组件（.vue），包含：
<template>- 模板代码<script setup lang="ts">- 脚本代码<style scoped lang="scss">- 样式代码
分离查看
支持分别查看和复制：
- 模板代码 - 纯 HTML 模板
- 脚本代码 - TypeScript 逻辑
- 类型定义 - 接口类型声明
JSON 配置
支持导入导出 JSON 配置：
- 导出当前设计配置
- 导入已有配置继续编辑
- 实现设计复用和分享
预览联动
预览弹窗中的设置会自动同步到代码生成：
- 预览模式（页面/弹窗/抽屉）→ 代码生成模式
- 弹窗尺寸 → 代码弹窗尺寸
- 弹窗标题 → 代码弹窗标题
组件属性配置
属性面板
右侧属性面板根据选中组件动态显示可配置属性：
基础属性
- 字段名 - 表单字段名称（prop）
- 标签 - 显示标签文本
- 占位符 - 输入提示文本
- 默认值 - 字段默认值
校验规则
- 必填 - 是否必填
- 校验规则 - 支持多种规则
- 必填校验
- 长度校验
- 格式校验（邮箱、手机号等）
- 自定义正则
样式配置
- 宽度 - 组件宽度
- 栅格 - 栅格占用（1-24）
特殊配置
不同组件有不同的特殊配置：
选择器
- 选项数据（label/value）
- 是否多选
- 是否可清空
日期选择
- 日期类型（date/datetime/daterange）
- 日期格式
上传组件
- 上传类型（图片/文件）
- 文件限制
- 最大数量
图标选择
- 卡片组件的图标支持可视化选择器
技术架构
页面设计器采用四层架构设计：
┌─────────────────────────────────────────┐
│ UI 层 (Components) │
│ ComponentPanel / DesignCanvas / │
│ PropertyPanel / PreviewDialog / │
│ CodeDialog / AiGenerateDialog │
├─────────────────────────────────────────┤
│ 逻辑层 (Composables) │
│ useFormSchema / useCodeGenerator / │
│ useDragDrop / useHistory │
├─────────────────────────────────────────┤
│ 配置层 (Config) │
│ componentConfig - 组件定义和属性配置 │
├─────────────────────────────────────────┤
│ 渲染层 (Renderer) │
│ FormItemRenderer - 组件渲染器 │
└─────────────────────────────────────────┘核心文件
pageDesigner/
├── pageDesigner.vue # 主页面组件
├── components/
│ ├── ComponentPanel.vue # 左侧组件面板
│ ├── DesignCanvas.vue # 中间设计画布
│ ├── PropertyPanel.vue # 右侧属性面板
│ ├── FormItemRenderer.vue # 组件渲染器
│ ├── PreviewDialog.vue # 预览弹窗
│ ├── CodeDialog.vue # 代码弹窗
│ ├── AiGenerateDialog.vue # AI生成弹窗
│ └── AiOptimizeDialog.vue # AI优化弹窗
├── composables/
│ ├── useFormSchema.ts # Schema状态管理
│ └── useCodeGenerator.ts # 代码生成逻辑
├── config/
│ └── componentConfig.ts # 组件配置定义
└── types/
└── index.ts # 类型定义使用场景
快速搭建管理后台页面
- 拖入表单组件配置查询条件
- 拖入表格组件展示数据
- 生成页面代码，集成到项目
表单页面快速开发
- 使用 AI 生成或手动拖拽组件
- 配置字段名、校验规则
- 选择弹窗/抽屉模式生成代码
数据展示页面设计
- 拖入卡片组件、图表组件
- 使用布局组件进行排版
- 生成页面代码
原型设计和需求确认
- 快速搭建页面原型
- 实时预览效果
- 与产品/设计确认后生成代码
最佳实践
组件命名规范
- 字段名使用小驼峰：
userName、createTime - 标签使用中文：
用户名、创建时间 - 占位符使用提示语：
请输入用户名
布局建议
- 使用行容器进行水平布局
- 表单字段建议 2-3 列
- 查询表单使用紧凑布局
- 录入表单使用宽松布局
校验规则
- 必填字段添加必填校验
- 手机号、邮箱使用格式校验
- 密码使用长度+复杂度校验
- 数字使用范围校验
AI 使用技巧
- 描述需求时包含字段名称
- 说明业务场景有助于生成更合适的组件
- 生成后可以手动微调属性