细节编辑
概述
细节编辑是一个迭代优化的过程，您可以通过可视化界面对生成的应用进行精细调整。主要关注：
- 🎨 界面优化：调整布局、颜色、字体等视觉元素
- 🔧 功能完善：添加或修改具体功能细节
- 📱 交互改进：优化用户操作流程和体验
编辑界面介绍
如下图所示，细节编辑界面入口包括以下对话框及预览区选项中：
Builder 提供了两种方式进行细节编辑：
AI 对话编辑
在选中组件的下方输入框内，输入对应的修改的需求，Builder 会根据您的描述进行修改。
提示
提示：AI 对话编辑能够实现事件绑定，及数据来源的更换，如果您仅需要更换样式，请使用手动编辑，将会更加准确和快捷。
例如，选中按钮后，更改事件，例如：
添加点击事件，点击后弹出提示框
Builder 会根据您的描述，添加点击事件，点击后弹出提示框。
手动编辑模式
手动编辑模式下，您可以直接在对话框上的样式输入框进行编辑，无需输入自然语言描述。
根据组件不同，可供编辑的样式属性如下：
| 属性类型 | 属性名称 | 说明 |
|---|---|---|
| 间距属性 | padding | 内边距设置 |
| 间距属性 | margin | 外边距设置 |
| 颜色属性 | color | 文字颜色 |
| 颜色属性 | background | 背景颜色/图片 |
| 字体属性 | font-size | 字体大小 |
| 字体属性 | font-weight | 字体粗细 |
| 边框属性 | border-radius | 圆角设置 |
| 高级设置 | 任意 tailwind 类名 | 自定义样式 |
| 内容属性 | 填充文本 | 静态文本内容 |
| 图片资源 | 图片地址 | 图片地址,仅限 img 标签 |
最佳实践
✅ 推荐做法
- 渐进式优化：先完善核心功能，再优化细节
- 保持一致性：统一的设计风格和交互模式
- 及时预览：每次修改后及时预览效果
- 记录变更：重要修改要记录，便于回滚
❌ 避免的做法
- 过度设计：避免不必要的复杂效果
- 不一致性：同类元素使用不同的样式
- 频繁大改：避免推翻重来式的修改
常见问题
Q: 修改后的效果不满意，如何撤销？
A: 可以使用回滚功能，重新描述期望的效果让 AI 重新生成。
Q: 可以添加自定义的 CSS 样式吗？
A: 可以通过样式编辑器添加自定义样式，或在 Dev Mode 中进行高级定制。
下一步
完成细节编辑后，如果需要更高级的代码定制，可以进入 Dev Mode：
或者如果当前效果满意，可以直接进行资源发布：
🚀 开始资源发布 →