feat: 侧边栏顺序调整、模型选择去除积分价格、修复canvas.css语法错误

- 侧边栏：社区移到底部，工具盒移到资产库上方 - 生成页面：图像/视频模型选择下拉去除积分价格文本 - 修复 canvas.css 多余的右花括号语法错误
2026-06-08 11:39:28 +08:00
parent f920630160
commit 0384d7f2a3
8 changed files with 172 additions and 41 deletions
@@ -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 ? (
@@ -231,13 +231,13 @@ export const MODE_OPTIONS: WorkbenchOption[] = (Object.keys(MODE_META) as Workbe
 }));

 export const IMAGE_MODEL_OPTIONS: WorkbenchOption[] = [
-  { value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K · 0.20 积分" },
-  { value: "wan2.7-image", label: "wan 2.7 · 0.20 积分" },
-  { value: "gpt-image-2", label: "GPT-Image-2 · 0.20 积分" },
-  { value: "gpt-image-2-vip", label: "GPT-Image-2 VIP · 0.20 积分" },
-  { value: "nano-banana-pro", label: "Nano Banana Pro · 0.20 积分" },
-  { value: "nano-banana-2", label: "Nano Banana 2 · 0.20 积分" },
-  { value: "nano-banana-fast", label: "Nano Banana · 0.20 积分" },
+  { value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K" },
+  { value: "wan2.7-image", label: "wan 2.7" },
+  { value: "gpt-image-2", label: "GPT-Image-2" },
+  { value: "gpt-image-2-vip", label: "GPT-Image-2 VIP" },
+  { value: "nano-banana-pro", label: "Nano Banana Pro" },
+  { value: "nano-banana-2", label: "Nano Banana 2" },
+  { value: "nano-banana-fast", label: "Nano Banana" },
 ];

 export const VIDEO_MODEL_OPTIONS: WorkbenchOption[] = ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => ({ ...option }));