介绍
什么是 YourAppName?
YourAppName 是一个基于 NextJS 的 AI SaaS 开发框架，内置丰富的组件和 AI SDK，帮助你快速完成 AI SaaS 项目开发。
组件
ImagePromptBox - AI 图片生成输入框
一个功能丰富的 AI 图片生成输入框组件，支持文生图和图生图模式。
基本用法
import { ImagePromptBox } from '@/shared/blocks/generator/image-prompt-box';
export default function Page() {
return (
<ImagePromptBox
showResults={true}
onGenerated={(images) => console.log('Generated:', images)}
/>
);
}Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
maxSizeMB | number | 5 | 参考图片最大文件大小 (MB) |
className | string | - | 自定义样式类名 |
srOnlyTitle | string | - | 屏幕阅读器标题 |
showResults | boolean | true | 是否显示生成结果 |
onGenerated | (images: GeneratedImage[]) => void | - | 图片生成完成回调 |
功能特性
付费用户 vs 免费用户
组件根据用户的付费状态 (isPaidUser) 自动调整功能。
付费用户判断条件（满足任一即可）：
- 拥有活跃的订阅 (Subscription status:
ACTIVE或TRIALING) - 购买过积分包 (One-time credit pack with
PAYMENTscene)
| 功能 | 免费用户 | 付费用户 |
|---|---|---|
| 参考图片数量上限 | 3 张 | 9 张 |
| Aspect Ratio 选项 | 仅 Auto 免费 | 全部可用 |
| Resolution 选项 | 仅 Standard 免费 | 全部可用 |
| Skip Validation 开关 | 显示 | 隐藏 |
| "Need Custom Settings" 按钮 | 显示 | 隐藏 |
| "升级以上传更多图片" 提示 | 显示 | 隐藏 |
支持的功能
- 📝 Prompt 输入: 支持最多 2000 字符的提示词输入
- 🖼️ 参考图片: 支持上传参考图片进行图生图
- 📐 宽高比选择: Auto, 1:1, 16:9, 9:16, 4:3, 3:4
- 🔍 分辨率选择: Standard, 1K, 2K, 4K
- 🔢 数量选择: 1-4 张图片
- ⏳ 生成进度: 实时显示生成进度
- 💾 图片下载: 支持下载生成的图片
相关常量
// constants.ts
export const MAX_PROMPT_LENGTH = 2000;
export const MAX_REFERENCE_IMAGES_FREE = 3;
export const MAX_REFERENCE_IMAGES_PAID = 9;子组件
DropdownSelector- 通用下拉选择器，支持自定义选项和图标ReferenceImagesDisplay- 参考图片展示组件GenerateButton- 生成按钮GeneratedImagesGrid- 生成图片网格展示ProgressIndicator- 进度指示器