AI + 表单可视化编辑
可视化编辑 是 VJSP 的核心能力之一，支持对 *.html 表单文件进行所见即所得（WYSIWYG）的交互式设计。开发者无需编写或修改 HTML 代码，即可在 IDE 内实时调整表单结构、样式与行为。
一、功能简介
可视化编辑 是 VJSP 的核心能力之一，包括：
🖱️ 拖拽式布局：自由调整字段位置与顺序
⚙️ 属性快速配置：设置控件名称、占位符、默认值、必填校验等规则
🔗 事件与逻辑绑定：配置点击、输入、值变化等交互行为
🎨 多布局模式：支持响应式、表格、自由布局等多种排版方式
🔁 自动同步：所有视觉变更将实时转换为标准 HTML 并写回源文件
适用于目录 src/main/resources/static/vjsphtml/ 下的所有 *.html 类型的表单文件，特别适合需要频繁迭代的业务场景。
二、操作流程
步骤 1：准备表单文件（可选）
若为新功能开发：可通过 AI 智能生成符合 VJSP 规范的初始表单（如输入“生成客户审批表单”）
若为已有表单优化：直接进入下一步，无需额外操作
步骤 2：定位目标表单文件
在 IDE 的资源管理器中，找到项目中的目标 HTML 表单文件（如 approve.html），点击选中。
✅ 示例路径：
src/main/resources/static/vjsphtml/modules/customer/approve.html
步骤 3：启动可视化编辑
右键点击该文件，在上下文菜单中选择 “编辑表单” 选项。
系统将自动加载表单内容，并打开内置可视化编辑面板。
步骤 4：调整表单结构与样式
进入编辑界面后，您可使用以下功能区域进行操作：
| 区域 | 功能说明 |
|---|---|
| 设计区 | 实时展示表单渲染效果，支持缩放、滚动与元素选中 |
| 组件库 | 提供输入框、下拉选择、日期控件、按钮等常用 UI 元素 |
| 属性面板 | 配置选中控件的名称、占位符、默认值、是否必填等属性 |
| 事件面板 | 绑定点击、输入、变化等交互行为 |
| 样式设置 | 调整宽度、对齐方式、边距等基础样式 |
您可以：
点击任意字段修改其属性
拖动控件重新排列布局
从组件库添加新元素
步骤 5：保存并同步代码
完成编辑后，点击顶部工具栏的 “保存” 按钮。系统会将所有视觉调整自动转换为标准 HTML 结构，并写回原文件，确保代码与设计完全一致。
可视化工具-表单预览/运行操作
在项目文件列表中，找到需要预览的 HTML 表单文件，右键点击该文件，在弹出的菜单中选择 编辑表单 选项，系统会自动打开表单预览窗口，实时展示表单的页面样式、交互效果及字段布局，便于开发者快速调整表单设计。
编辑器内快速调用
在 IDE 代码编辑器中，选中目标代码片段后，右键点击并选择 “VJSP” 菜单，即可快速调用插件核心功能；触发操作后，AI 会基于选中的代码上下文实时响应，直接在编辑器旁弹出处理结果，减少界面切换成本； 