55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import { Sparkles } from 'lucide-react';
|
||
import {
|
||
Button,
|
||
FormGrid,
|
||
Input,
|
||
Select,
|
||
Textarea,
|
||
} from '@/ui';
|
||
|
||
export function GeneratorPageTemplate() {
|
||
return (
|
||
<main className="tg-golden-generator">
|
||
<section className="tg-golden-generator__panel">
|
||
<header className="tg-golden-generator__header">
|
||
<h1>图片创作</h1>
|
||
</header>
|
||
<Textarea
|
||
label="图片描述"
|
||
placeholder="描述需要生成的内容"
|
||
/>
|
||
<FormGrid>
|
||
<Select label="生成参数" defaultValue="auto">
|
||
<option value="auto">Auto, 1K, Auto</option>
|
||
</Select>
|
||
<Input label="模型" placeholder="选择模型" />
|
||
</FormGrid>
|
||
<Button icon={<Sparkles />} className="tg-golden-generator__submit">
|
||
生成
|
||
</Button>
|
||
</section>
|
||
|
||
<section className="tg-golden-generator__feed">
|
||
<header className="tg-golden-generator__feed-header">
|
||
<h2>今天</h2>
|
||
<p>结果按批次显示，媒体保持完整比例。</p>
|
||
</header>
|
||
<article className="tg-golden-generator__batch">
|
||
<h3>一张用于品牌内容发布的专业 AI 主视觉</h3>
|
||
<p>4 张 | 1024x1024 | gpt-image-2-vip</p>
|
||
<div className="tg-golden-generator__rail" aria-label="生成结果">
|
||
<div className="tg-golden-generator__media" />
|
||
<div className="tg-golden-generator__media" />
|
||
<div className="tg-golden-generator__media" />
|
||
</div>
|
||
<div className="tg-golden-generator__actions">
|
||
<Button variant="outline">编辑</Button>
|
||
<Button variant="outline">重新生成</Button>
|
||
<Button variant="ghost">更多</Button>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|