feat: 侧边栏顺序调整、模型选择去除积分价格、修复canvas.css语法错误
- 侧边栏：社区移到底部，工具盒移到资产库上方 - 生成页面：图像/视频模型选择下拉去除积分价格文本 - 修复 canvas.css 多余的右花括号语法错误
This commit is contained in:
OmniAI Developer
@@ -516,6 +516,18 @@ const formatRatioDisplayValue = (value: string) => {
|
||||
const ratio = value.match(/\d+(?:\.\d+)?\s*[:：]\s*\d+(?:\.\d+)?/u)?.[0]?.replace(/\s+/g, "").replace(/:/g, "：") ?? "";
|
||||
return size && ratio ? `${size}\u00a0\u00a0\u00a0${ratio}` : value.replace(/^套图[:：]\s*/, "");
|
||||
};
|
||||
/** Extract CSS aspect-ratio from a ratio string like "1000x1000px 1:1" -> "1 / 1" */
|
||||
const parseRatioToAspectCss = (ratioStr: string): string => {
|
||||
const match = ratioStr.match(/(\d+)\s*[:：]\s*(\d+)/u);
|
||||
if (!match) return "1 / 1";
|
||||
return `${match[1]} / ${match[2]}`;
|
||||
};
|
||||
/** Normalize ratio display string ("1000×1000px 1：1") to API format ("1:1") */
|
||||
const normalizeRatioForApi = (ratioStr: string): string => {
|
||||
const match = ratioStr.match(/(\d+)\s*[:：]\s*(\d+)/u);
|
||||
if (!match) return "1:1";
|
||||
return `${match[1]}:${match[2]}`;
|
||||
};
|
||||
const greatestCommonDivisor = (left: number, right: number): number => {
|
||||
let a = Math.abs(left);
|
||||
let b = Math.abs(right);
|
||||
@@ -866,6 +878,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const [videoOutfitVideoFile, setVideoOutfitVideoFile] = useState<File | null>(null);
|
||||
const [videoOutfitRefFile, setVideoOutfitRefFile] = useState<File | null>(null);
|
||||
const [isCloneSettingsCollapsed, setIsCloneSettingsCollapsed] = useState(false);
|
||||
const [previewZoom, setPreviewZoom] = useState(1);
|
||||
const [requirement, setRequirement] = useState("");
|
||||
const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
|
||||
const [cloneSettingName, setCloneSettingName] = useState("新建创作");
|
||||
@@ -1594,6 +1607,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const stamp = Date.now();
|
||||
|
||||
for (const countKey of cloneSetCountOptions.map((o) => o.key)) {
|
||||
if (imageAbortRef.current.current) break;
|
||||
const count = counts[countKey];
|
||||
for (let i = 0; i < count; i++) {
|
||||
if (imageAbortRef.current.current) break;
|
||||
@@ -1603,7 +1617,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const { taskId } = await aiGenerationClient.createImageTask({
|
||||
model: IMAGE_MODEL,
|
||||
prompt: fullPrompt,
|
||||
ratio: pRatio,
|
||||
ratio: normalizeRatioForApi(pRatio),
|
||||
quality: pRatio.includes("720") ? "720P" : "1080P",
|
||||
gridMode: "single",
|
||||
referenceUrls,
|
||||
@@ -1640,7 +1654,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
return;
|
||||
}
|
||||
setResultFn(generatedUrls);
|
||||
setStatusFn(generatedUrls.some(Boolean) ? "done" : "idle");
|
||||
setStatusFn(generatedUrls.some(Boolean) ? "done" : "failed");
|
||||
} catch (err) {
|
||||
if (imageAbortRef.current.current) {
|
||||
setStatusFn("idle");
|
||||
@@ -1687,7 +1701,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const { taskId } = await aiGenerationClient.createImageTask({
|
||||
model: IMAGE_MODEL,
|
||||
prompt,
|
||||
ratio: pRatio,
|
||||
ratio: normalizeRatioForApi(pRatio),
|
||||
quality: pRatio.includes("720") ? "720P" : "1080P",
|
||||
gridMode: "single",
|
||||
referenceUrls,
|
||||
@@ -2010,7 +2024,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
clonePreviewCards.push({
|
||||
id: `${countKey}-${i}`,
|
||||
src: results[cloneIndex]?.src || productSetPreviewCards[cloneIndex % productSetPreviewCards.length]?.src || "",
|
||||
src: productSetResultImages[cloneIndex] || productSetPreviewCards[cloneIndex % productSetPreviewCards.length]?.src || "",
|
||||
label: `${info.label}${count > 1 ? ` ${i + 1}` : ""}`,
|
||||
});
|
||||
cloneIndex++;
|
||||
@@ -2311,6 +2325,11 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<span>
|
||||
上传商品图，AI 即刻生成 <b>符合多电商平台规范</b> 的高转化率商品素材。
|
||||
</span>
|
||||
<div className="clone-ai-preview-zoom">
|
||||
<button type="button" onClick={() => setPreviewZoom((z) => Math.max(0.25, z - 0.1))} disabled={previewZoom <= 0.25} aria-label="缩小">−</button>
|
||||
<span>{Math.round(previewZoom * 100)}%</span>
|
||||
<button type="button" onClick={() => setPreviewZoom((z) => Math.min(2, z + 0.1))} disabled={previewZoom >= 2} aria-label="放大">+</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{cloneOutput === "video" ? (
|
||||
@@ -2433,8 +2452,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
) : (
|
||||
<>
|
||||
{status === "done" ? (
|
||||
<div className="clone-ai-preview-zoom-wrap" style={{ zoom: previewZoom }}>
|
||||
<section className="clone-ai-preview-showcase" aria-label="生成结果">
|
||||
<button type="button" className="clone-ai-main-result" onClick={() => openProductSetPreview(cloneOutput === "set" ? clonePreviewCards[0] : results[0])}>
|
||||
<button type="button" className="clone-ai-main-result" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(cloneOutput === "set" ? clonePreviewCards[0] : results[0])}>
|
||||
<img src={productImages[0]?.src ?? (cloneOutput === "set" ? clonePreviewCards[0].src : results[0]?.src ?? "")} alt="上传商品原图" />
|
||||
<span>原图素材</span>
|
||||
</button>
|
||||
@@ -2442,19 +2462,20 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<div className="clone-ai-result-grid result-reveal">
|
||||
{cloneOutput === "set" ? (
|
||||
clonePreviewCards.map((card) => (
|
||||
<button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
|
||||
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card)}>
|
||||
<img src={card.src} alt={card.label} />
|
||||
<span>{card.label}</span>
|
||||
</button>
|
||||
))
|
||||
) : results[0]?.src ? (
|
||||
<button type="button" onClick={() => openProductSetPreview(results[0])}>
|
||||
<button type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(results[0])}>
|
||||
<img src={results[0].src} alt={selectedCloneOutput.label} />
|
||||
<span>{selectedCloneOutput.label}</span>
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
) : (
|
||||
<section className="clone-ai-empty-state" aria-live="polite">
|
||||
{status === "generating" ? <LoadingOutlined /> : status === "failed" ? <FrownOutlined /> : <FileImageOutlined />}
|
||||
@@ -2643,7 +2664,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
) : null}
|
||||
|
||||
{isSetTool ? setPreview : isDetail ? detailPreview : isTryOn ? tryOnPreview : isCloneTool ? (cloneOutput === "video" ? (
|
||||
<main className="product-clone-preview product-clone-preview--video" style={{ padding: 0, overflow: "hidden" }}>
|
||||
<main className="product-clone-preview product-clone-preview--video" style={{ padding: 0 }}>
|
||||
<EcommerceVideoWorkspace
|
||||
isAuthenticated={Boolean((_props as Record<string, unknown>).isAuthenticated)}
|
||||
productImageDataUrls={productImages.map((img) => img.src)}
|
||||
|
||||
@@ -119,6 +119,7 @@ export default function EcommerceVideoWorkspace({
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [actionNotice, setActionNotice] = useState<string | null>(null);
|
||||
const [previewMedia, setPreviewMedia] = useState<{ url: string; type: "image" | "video" } | null>(null);
|
||||
const [flowZoom, setFlowZoom] = useState(1);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
const renderAbortRef = useRef({ current: false });
|
||||
const setView = useAppStore((s) => s.setView);
|
||||
@@ -600,6 +601,12 @@ export default function EcommerceVideoWorkspace({
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="ecom-video-flowbar__zoom">
|
||||
<button type="button" onClick={() => setFlowZoom((z) => Math.max(0.25, z - 0.1))} disabled={flowZoom <= 0.25} aria-label="缩小">−</button>
|
||||
<span>{Math.round(flowZoom * 100)}%</span>
|
||||
<button type="button" onClick={() => setFlowZoom((z) => Math.min(2, z + 0.1))} disabled={flowZoom >= 2} aria-label="放大">+</button>
|
||||
</div>
|
||||
|
||||
<div className="ecom-video-flowbar__actions">
|
||||
{onOpenHistory ? (
|
||||
<button type="button" className="ecom-video-flow-action ecom-video-flow-action--ghost" onClick={onOpenHistory} title="生成记录">
|
||||
@@ -644,9 +651,10 @@ export default function EcommerceVideoWorkspace({
|
||||
|
||||
{/* ── Flow canvas ──────────────────────────────────── */}
|
||||
<section className="ecom-video-flow-canvas" aria-label="视频分镜流程图">
|
||||
<div style={{ zoom: flowZoom, flexShrink: 0, display: "flex", alignItems: "flex-start", justifyContent: "center", minWidth: "max-content" }}>
|
||||
{!sourceImage ? (
|
||||
<div className="ecom-video-empty">
|
||||
<span>上传商品图并点击“一键策划”开始</span>
|
||||
<span>上传商品图并点击"一键策划"开始</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="ecom-video-tree">
|
||||
@@ -762,6 +770,7 @@ export default function EcommerceVideoWorkspace({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Delivery dock ────────────────────────────── */}
|
||||
{primaryVideo ? (
|
||||
|
||||
Reference in New Issue
Block a user