79 lines
4.3 KiB
TypeScript
79 lines
4.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { ArrowLeft, Sparkles, Trash2, Upload, WandSparkles } from "lucide-react";
|
|
import type { Page } from "./route-config";
|
|
|
|
export function QuickCreatePage({ onBack }: { onBack: () => void; navigate?: (page: Page) => void }) {
|
|
const [name, setName] = useState("");
|
|
const [images, setImages] = useState<File[]>([]);
|
|
const [preview, setPreview] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (!images[0]) {
|
|
setPreview("");
|
|
return;
|
|
}
|
|
const url = URL.createObjectURL(images[0]);
|
|
setPreview(url);
|
|
return () => URL.revokeObjectURL(url);
|
|
}, [images]);
|
|
|
|
function selectImages(files: FileList | null) {
|
|
setImages(Array.from(files || []).slice(0, 9));
|
|
}
|
|
|
|
return (
|
|
<div className="quick-create-page">
|
|
<header className="project-builder-header quick-create-header">
|
|
<div className="project-builder-title">
|
|
<button type="button" className="image-back-button" onClick={onBack} aria-label="返回工作台"><ArrowLeft /></button>
|
|
<div><h1>极速成片</h1><p>输入商品名称并上传图片，系统将自动完成从商品理解到视频生成的全部流程</p></div>
|
|
</div>
|
|
<div className="project-builder-status"><strong>AI 自动编排</strong><span>· 无需逐步配置</span></div>
|
|
</header>
|
|
|
|
<div className="quick-create-shell" id="quickCreateShell">
|
|
<section className="quick-create-panel quick-form-panel">
|
|
<div className="quick-form-copy">
|
|
<h2>告诉我们这是什么商品</h2>
|
|
<p>系统会识别商品信息，自动选择带货结构、表现形式、模特和场景，并完成15秒竖屏视频。</p>
|
|
</div>
|
|
|
|
<label className="quick-field">
|
|
<span className="quick-field-label"><span>商品名称</span><small>必填</small></span>
|
|
<input className="quick-name-input" autoComplete="off" value={name} onChange={(event) => setName(event.target.value)} placeholder="例如：净颜精华、轻醒咖啡" />
|
|
</label>
|
|
|
|
<div className="quick-field">
|
|
<span className="quick-field-label"><span>商品图片</span><small>必填 · 最多9张</small></span>
|
|
<label className={`quick-upload${preview ? " has-image" : ""}`}>
|
|
<input type="file" accept="image/jpeg,image/png,image/webp" multiple onChange={(event) => selectImages(event.target.files)} />
|
|
<span className="quick-upload-copy"><span className="quick-upload-icon"><Upload /></span><strong>上传商品图片</strong><small>建议包含清晰主图、包装和使用细节</small></span>
|
|
<span className="quick-upload-preview">
|
|
<img src={preview} alt="极速成片商品预览" />
|
|
<span className="quick-image-count">{images.length}张图片</span>
|
|
<button type="button" className="quick-image-clear" onClick={(event) => { event.preventDefault(); setImages([]); }} aria-label="删除已上传图片"><Trash2 /></button>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="quick-auto-note" aria-label="系统自动完成内容"><span>识别商品与卖点</span><span>推荐脚本方向</span><span>匹配模特与场景</span><span>生成故事板与视频</span></div>
|
|
|
|
<div className="quick-form-footer">
|
|
<div className="quick-cost"><span>仅在视频生成成功后扣费</span><strong>预计 240 积分</strong></div>
|
|
<button type="button" className="quick-generate-button" disabled><WandSparkles /><span>立即生成视频</span></button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="quick-create-panel quick-status-panel" aria-live="polite">
|
|
<div className="quick-state quick-state-ready">
|
|
<div className="quick-ready-orbit"><span className="quick-ready-icon"><Sparkles /></span></div>
|
|
<h2>系统会替你完成所有选择</h2>
|
|
<p>上传商品后，AI 将根据品类、图片信息和适用场景自动编排完整视频，不需要理解复杂的制作参数。</p>
|
|
<div className="quick-ready-tags"><span>自动推荐结构</span><span>自动选择表现形式</span><span>自动匹配资产</span><span>自动质量检查</span></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|