极速成片页面和提炼提示词

2026-08-24 15:52:05 +08:00
parent 2f5b7304b0
commit 00fc454db7
29 changed files with 1424 additions and 483 deletions
@@ -0,0 +1,78 @@
+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>
+  );
+}