预览

上传商品图，AI 即刻生成符合多电商平台规范的高转化率商品套图。

{productSetPreviewReady ? (

) : (

{productSetStatus === "generating" ? : } {productSetStatus === "generating" ? "正在生成" : "等待生成"} {productSetStatus === "generating" ? : null} {productSetStatus === "generating" ? "AI 正在整理主图、场景、细节与卖点图。" : "上传商品原图并填写信息后，AI 将为您生成专业的电商商品图"}

)} {productSetStatus === "done" ?

已生成{selectedProductSetOutput.label}预览

: null}

信息详情 {productSetRequirement.length}/500

setProductSetRequirement(event.target.value)}
          maxLength={500}
          placeholder="建议包含以下信息：产品名称、核心卖点、期望场景、具体参数"
        />
        <button type="button" className="product-set-floating-submit" disabled={!canGenerateSet} onClick={handleSetGenerate}>
          {productSetStatus === "generating" ? <LoadingOutlined /> : null}
          {setPrimaryLabel}
        </button>
      </section>

<button type="button" className="product-clone-help" aria-label="帮助">
        <QuestionCircleOutlined />
      </button>
    </main>
  );

const clonePreview = (
    <main className="product-clone-preview clone-ai-preview" aria-label="电商AI作图预览">
      <header className="clone-ai-preview-header">
        <strong>预览</strong>
        <span>
          上传商品图，AI 即刻生成 <b>符合多电商平台规范</b> 的高转化率商品素材。
        </span>
        <div className="clone-ai-preview-summary" aria-label="当前生成配置">
          <span>{selectedCloneOutput.label}</span>
          <span>{platform}</span>
          <span>{market}</span>
          <span>{language}</span>
          <span>{formatRatioDisplayValue(ratio)}</span>
        </div>
      </header>

{status === "done" ? (
        <section className="clone-ai-preview-showcase" aria-label="生成结果">
          <button type="button" className="clone-ai-main-result" 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>
          <div className="clone-ai-flow-arrow" aria-hidden="true" />
          <div className="clone-ai-result-grid result-reveal">
            {cloneOutput === "set" ? (
              clonePreviewCards.map((card) => (
                <button key={card.id} type="button" 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])}>
                <img src={results[0].src} alt={selectedCloneOutput.label} />
                <span>{selectedCloneOutput.label}</span>
              </button>
            ) : null}
          </div>
        </section>
      ) : (
        <section className="clone-ai-empty-state" aria-live="polite">
          {status === "generating" ? <LoadingOutlined /> : status === "failed" ? <FrownOutlined /> : <FileImageOutlined />}
          <strong>{status === "generating" ? "正在生成" : status === "failed" ? "生成失败" : "等待生成"}</strong>
          {status === "generating" ? <EcommerceProgressBar status="generating" label={`${selectedCloneOutput.label}生成`} /> : null}
          <span>
            {status === "generating"
              ? `AI 正在为 ${platform} / ${market} 整理${selectedCloneOutput.label}。`
              : status === "failed"
              ? "请检查网络后点击下方重试"
              : "上传商品原图并填写信息后，AI 将在这里展示生成结果。"}
          </span>
          {status === "failed" && lastFailedActionRef.current ? (
            <button type="button" className="clone-ai-retry-btn" onClick={lastFailedActionRef.current}>
              <ReloadOutlined /> 重试
            </button>
          ) : null}
        </section>
      )}

<section className="clone-ai-bottom-input" aria-label="信息详情">
        <div className="clone-ai-input-wrapper">
          <textarea
            ref={requirementTextareaRef}
            value={requirement}
            onChange={(event) => {
              const nextValue = event.target.value.slice(0, 500);
              setRequirement(nextValue);
              syncRequirementMentionQuery(nextValue, event.target.selectionStart);
            }}
            onClick={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
            onKeyUp={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
            onKeyDown={(event) => {
              if (event.key === "Escape") setRequirementImageMentionQuery(null);
            }}
            maxLength={500}
            placeholder="建议包含以下信息，产品名称，核心卖点，期望场景，具体参数"
          />
          {requirementImageMentionQuery !== null && ecommerceMentionImages.length ? (
            <ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
          ) : null}
          <button type="button" className="clone-ai-send-button" disabled={!canGenerate} onClick={handleGenerate} aria-label={clonePrimaryLabel}>
            {status === "generating" ? <LoadingOutlined /> : "↑"}
          </button>
        </div>
        <span className="clone-ai-char-count">{requirement.length}/500</span>
      </section>
    </main>
  );

const detailPreview = (
    <main className="product-clone-preview product-clone-preview--detail" aria-label="A+详情预览">
      <div className="product-clone-preview__headline">
        <h1>A+/详情页</h1>
        <p>
          上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的专业详情页。
        </p>
      </div>

<section className="product-detail-demo-board">
        <div className="product-detail-source-stack">
          {(detailProductImages.length ? detailProductImages.map((item) => item.src) : detailProductSamples).map((src, index) => (
            <figure key={`${src}-${index}`}>
              <img src={src} alt={`商品原图 ${index + 1}`} />
            </figure>
          ))}
          <span>上传产品图</span>
        </div>
        <div className="product-detail-flow-arrow" aria-hidden="true" />
        <div className="product-detail-long-result">
          <img src={detailResultUrl ?? detailAssets.longPage} alt="生成电商长图" />
          <span>{detailStatus === "done" ? "已生成电商长图" : "生成电商长图"}</span>
        </div>
        <div className="product-detail-grid-result">
          {detailGridSamples.map((src, index) => (
            <img key={src} src={src} alt={`详情页模块 ${index + 1}`} />
          ))}
          <span>符合多电商平台规范</span>
        </div>
      </section>

<button type="button" className="product-clone-help" aria-label="帮助">
        <QuestionCircleOutlined />
      </button>
    </main>
  );

const tryOnPreview = (
    <main className="product-clone-preview product-clone-preview--try-on" aria-label="服饰穿戴预览">
      <div className="product-clone-preview__headline">
        <h1>AI服饰穿戴</h1>
        <p>上传服装图，定制专属模特，即刻生成多种场景不同姿势套图。</p>
      </div>

{tryOnResultImages.length ? (
        <section className="product-try-on-generated" aria-label="生成结果">
          {tryOnResultImages.map((src, index) => (
            <figure key={src}>
              <img src={src} alt={`生成结果 ${index + 1}`} />
              <figcaption>{selectedScenes[index % Math.max(selectedScenes.length, 1)] || "智能场景"}</figcaption>
            </figure>
          ))}
        </section>
      ) : null}

<section className="product-try-on-demo-board">
        {tryOnCards.map((card) => (
          <article key={card.title} className={`product-try-on-card product-try-on-card--${card.tone}`}>
            <h2>{card.title}</h2>
            <div className="product-try-on-inputs">
              {card.inputs.map((src, index) => (
                <div className="product-try-on-input-group" key={`${card.title}-${src}`}>
                  <img src={src} alt={`${card.title} 输入 ${index + 1}`} />
                  {index < card.inputs.length - 1 ? <span className="product-try-on-plus">+</span> : null}
                </div>
              ))}
            </div>
            <div className="product-try-on-arrow" aria-hidden="true" />
            <div className="product-try-on-results">
              {card.results.map((src, index) => (
                <img key={src} src={src} alt={`${card.title} 示例 ${index + 1}`} />
              ))}
            </div>
          </article>
        ))}
      </section>

<button type="button" className="product-clone-help" aria-label="帮助">
        <QuestionCircleOutlined />
      </button>
    </main>
  );

const placeholderPreview = (
    <main className="product-clone-preview product-clone-preview--placeholder" aria-label={`${pageLabel}预览`}>
      <div className="product-clone-preview__headline">
        <h1>{pageLabel}</h1>
        <p>选择左侧已接入的工具开始生成商品视觉内容。</p>
      </div>
      <button type="button" className="product-clone-help" aria-label="帮助">
        <QuestionCircleOutlined />
      </button>
    </main>
  );

return (
    <section
      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}`}
      data-tool={activeTool}
      aria-label={pageLabel}
    >
      <div className="product-clone-shell">
        <aside className="product-clone-rail" aria-label="商品工具">
          {sideTools.map((tool) => (
            <button key={tool.key} type="button" className={activeTool === tool.key ? "is-active" : ""} onClick={() => setActiveTool(tool.key)}>
              {tool.icon}
              <span>{tool.label}</span>
            </button>
          ))}
        </aside>

<aside
          id={isCloneTool ? "ecommerce-clone-settings-panel" : undefined}
          className={`product-clone-panel tool-panel-enter`}
          key={activeTool}
          aria-label={`${pageLabel}参数`}
          aria-hidden={isCloneTool && isCloneSettingsCollapsed ? true : undefined}
        >
          {isSetTool ? setPanel : isDetail ? detailPanel : isTryOn ? tryOnPanel : isCloneTool ? clonePanel : placeholderPanel}
        </aside>

{isCloneTool ? (
          <button
            type="button"
            className="clone-ai-settings-toggle"
            onClick={() => setIsCloneSettingsCollapsed((current) => !current)}
            aria-label={isCloneSettingsCollapsed ? "展开设置面板" : "收起设置面板"}
            aria-controls="ecommerce-clone-settings-panel"
            aria-expanded={!isCloneSettingsCollapsed}
            title={isCloneSettingsCollapsed ? "展开设置面板" : "收起设置面板"}
          >
            {isCloneSettingsCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </button>
        ) : null}

{isSetTool ? setPreview : isDetail ? detailPreview : isTryOn ? tryOnPreview : isCloneTool ? (cloneOutput === "video" ? (
          <main className="product-clone-preview product-clone-preview--video" style={{ padding: 0, overflow: "hidden" }}>
            <EcommerceVideoWorkspace
              isAuthenticated={Boolean((_props as Record<string, unknown>).isAuthenticated)}
              productImageDataUrls={productImages.map((img) => img.src)}
              requirement={requirement}
              platform={platform}
              aspectRatio={ratio.includes("9：16") || ratio.includes("9:16") ? "9:16" : ratio.includes("16：9") || ratio.includes("16:9") ? "16:9" : ratio.includes("3：4") || ratio.includes("3:4") ? "3:4" : "9:16"}
              durationSeconds={cloneVideoDuration}
              resolution={cloneVideoQuality === "standard" ? "720P" : "1080P"}
              onRequestLogin={() => ((_props as Record<string, unknown>).isAuthenticated ? undefined : (window.location.hash = "#/login"))}
            />
          </main>
        ) : cloneOutput === "video-outfit" && results.length > 0 && results[0].type === "video" ? (
          <main className="product-clone-preview product-clone-preview--video-outfit" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div style={{ maxWidth: "100%", maxHeight: "100%" }}>
              <video src={results[0].src} controls style={{ maxWidth: "100%", maxHeight: "70vh", borderRadius: "12px" }} />
            </div>
          </main>
        ) : clonePreview) : placeholderPreview}
      </div>

{selectedProductSetPreview ? (
        <div className="product-set-preview-backdrop" role="presentation" onClick={() => setSelectedProductSetPreview(null)}>
          <section
            className="product-set-preview-modal"
            role="dialog"
            aria-modal="true"
            aria-label={selectedProductSetPreview.label}
            onClick={(event) => event.stopPropagation()}
          >
            <button
              type="button"
              className="product-set-preview-close"
              onClick={() => setSelectedProductSetPreview(null)}
              aria-label="关闭预览"
            >
              <CloseOutlined />
            </button>
            <img src={selectedProductSetPreview.src} alt={selectedProductSetPreview.label} />
            <strong>{selectedProductSetPreview.label}</strong>
          </section>
        </div>
      ) : null}

{showHostingModal ? (
        <div className="product-set-hosting-backdrop" role="presentation">
          <section className="product-set-hosting-modal" role="dialog" aria-modal="true" aria-label="批量托管上线啦">
            <img src={productSetAssets.hosting} alt="托管模式" />
            <div className="product-set-hosting-content">
              <button type="button" className="product-set-hosting-close" onClick={() => setShowHostingModal(false)} aria-label="关闭">
                ×
              </button>
              <h2>
                批量托管上线啦！
                <span>批量6折</span>
              </h2>
              <strong>睡一觉，图就做好了！</strong>
              <ul>
                <li>
                  <b>批量生产</b>
                  <span>支持无限任务并行生成，效率直线飞升。</span>
                </li>
                <li>
                  <b>成本立省40%</b>
                  <span>调度夜间闲置算力，享受专属离线点数折扣。</span>
                </li>
                <li>
                  <b>AI智能提取</b>
                  <span>自动识别图片卖点，生成高转化销售卖点。</span>
                </li>
              </ul>
              <button type="button" className="product-set-hosting-confirm" onClick={() => setShowHostingModal(false)}>
                我知道了
              </button>
            </div>
          </section>
        </div>
      ) : null}
    </section>
  );
}

export default ProductClonePage;

{activeToolMeta?.label}

预览