diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx index b2378a9..ee4e795 100644 --- a/src/features/ecommerce/EcommercePage.tsx +++ b/src/features/ecommerce/EcommercePage.tsx @@ -65,8 +65,10 @@ import { getPlatformDefaultRatio, getPlatformLanguageOptions, getPlatformRatioOptions, + languageOptions, marketLanguageOptions, marketOptions, + normalizeLanguage, normalizeLanguageForPlatform, normalizeMarket, normalizePlatform, @@ -167,6 +169,20 @@ type SmartCutoutImageItem = { src: string; name: string; originalSrc?: string }; const ecommerceInspirationTabs = ["最近打开", "一键同款", "海报模板", "热门", "商品图", "模特穿戴"]; const ecommerceInspirationAssets = ossAssets.ecommerce.inspiration; +const getMarketsForLanguage = (languageValue: string) => { + const normalizedLanguage = normalizeLanguage(languageValue); + const matches = marketLanguageOptions + .filter((option) => option.languages.some((item) => normalizeLanguage(item) === normalizedLanguage)) + .map((option) => option.country); + return matches.length ? matches : marketOptions; +}; + +const normalizeMarketForLanguage = (marketValue: string, languageValue: string) => { + const normalizedMarket = normalizeMarket(marketValue); + const languageMarkets = getMarketsForLanguage(languageValue); + return languageMarkets.includes(normalizedMarket) ? normalizedMarket : (languageMarkets[0] ?? marketOptions[0] ?? normalizedMarket); +}; + const ecommerceInspirationRows = [ { title: "作品记录", @@ -333,9 +349,6 @@ interface EcommerceImagePromptOptions { } const sideTools: Array<{ key: ProductKitToolKey; label: string; icon: ReactNode }> = [ - { key: "set", label: "商品套图", icon: }, - { key: "detail", label: "A+详情", icon: }, - { key: "wear", label: "服饰穿搭", icon: }, { key: "clone", label: "电商AI作图", icon: }, ]; @@ -1131,6 +1144,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const skipInitialCloneAutoSaveRef = useRef(true); const skipNextCloneAutoSaveRef = useRef(false); const [activeTool, setActiveTool] = useState("clone"); + useEffect(() => { + if (activeTool === "set") { + setActiveTool("clone"); + setActiveQuickTool("quick-set"); + } else if (activeTool === "detail") { + setActiveTool("clone"); + setActiveQuickTool("detail"); + } else if (activeTool === "wear") { + setActiveTool("clone"); + setActiveQuickTool(null); + } + }, [activeTool]); useEffect(() => { setPreviewZoom(1); setIsCommandComposerCompact(false); @@ -1675,7 +1700,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const [detailProgress, setDetailProgress] = useState(0); const [hotRequirement, setHotRequirement] = useState(""); const [isHotMaterialDragging, setIsHotMaterialDragging] = useState(false); - const [hotMaterialHoverZoom, setHotMaterialHoverZoom] = useState<{ src: string; x: number; y: number; placement: "above" | "below" } | null>(null); + const [hotMaterialHoverZoom, setHotMaterialHoverZoom] = useState<{ src: string; x: number; y: number; placement: "right" | "left" } | null>(null); const [hotPlatform, setHotPlatform] = useState(platformOptions[0]); const [hotMarket, setHotMarket] = useState(marketOptions[0]); const [hotLanguage, setHotLanguage] = useState(getPlatformDefaultLanguage(platformOptions[0], marketOptions[0])); @@ -1720,6 +1745,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { () => getPlatformLanguageOptions(hotPlatform, hotMarket), [hotMarket, hotPlatform], ); + const languageMarketOptions = languageOptions; + const cloneMarketOptions = useMemo(() => getMarketsForLanguage(language), [language]); + const detailMarketOptions = useMemo(() => getMarketsForLanguage(detailLanguage), [detailLanguage]); + const hotMarketOptions = useMemo(() => getMarketsForLanguage(hotLanguage), [hotLanguage]); const ecommerceMentionImages: MentionImageOption[] = [ ...productImages.map((image, index) => ({ ...image, label: `商品图 ${index + 1}` })), ...cloneReferenceImages.map((image, index) => ({ ...image, label: `参考图 ${index + 1}` })), @@ -1734,6 +1763,33 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { [productImages], ); + const quickPageSidebarItems: Array<{ key: NonNullable; label: string; icon: ReactNode }> = [ + { key: "quick-set", label: "商品套图", icon: }, + { key: "detail", label: "A+详情", icon: }, + { key: "hot", label: "爆款复刻", icon: }, + { key: "oneClickVideo", label: "一键视频", icon: }, + { key: "image-edit", label: "图片修改", icon: }, + { key: "watermark", label: "去除水印", icon: }, + { key: "copywriting", label: "一键文案", icon: }, + { key: "translate", label: "图片翻译", icon: }, + ]; + + const renderQuickPageSidebar = (activeKey: NonNullable) => ( + + ); + const selectedProductSetOutput = productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!; const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!; @@ -2125,8 +2181,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const openImageTranslatePage = () => { clearSmartCutoutTransition(); + setActiveQuickTool("translate"); setComposerMenu(null); - toast.info("功能正在优化中"); }; const closeImageTranslatePage = () => { @@ -3171,7 +3227,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { setRatio((current) => normalizeRatioForPlatform(normalizedPlatform, current, cloneOutput), ); - setLanguage(getPlatformDefaultLanguage(normalizedPlatform, market)); }; const handleCloneOutputChange = (nextOutput: CloneOutputKey) => { @@ -3221,10 +3276,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { setLanguage(getPlatformDefaultLanguage(platform, normalizedMarket)); }; + const handleCloneLanguageChange = (nextLanguage: string) => { + const normalizedLanguage = normalizeLanguage(nextLanguage); + setLanguage(normalizedLanguage); + setMarket((current) => normalizeMarketForLanguage(current, normalizedLanguage)); + }; + const handleDetailPlatformChange = (nextPlatform: string) => { const normalizedPlatform = normalizePlatform(nextPlatform); setDetailPlatform(normalizedPlatform); - setDetailLanguage(getPlatformDefaultLanguage(normalizedPlatform, detailMarket)); setDetailRatio((current) => getQuickSetRatioValue(current)); }; @@ -3234,6 +3294,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { setDetailLanguage(getPlatformDefaultLanguage(detailPlatform, normalizedMarket)); }; + const handleDetailLanguageChange = (nextLanguage: string) => { + const normalizedLanguage = normalizeLanguage(nextLanguage); + setDetailLanguage(normalizedLanguage); + setDetailMarket((current) => normalizeMarketForLanguage(current, normalizedLanguage)); + }; + const createCloneSettingSnapshot = (name: string, id = `clone-setting-${Date.now()}`): CloneSavedSetting => ({ id, name, @@ -4378,7 +4444,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const handleHotPlatformChange = (nextPlatform: string) => { const normalizedPlatform = normalizePlatform(nextPlatform); setHotPlatform(normalizedPlatform); - setHotLanguage(getPlatformDefaultLanguage(normalizedPlatform, hotMarket)); setHotRatio((current) => getQuickSetRatioValue(current)); }; @@ -4388,6 +4453,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { setHotLanguage(getPlatformDefaultLanguage(hotPlatform, normalizedMarket)); }; + const handleHotLanguageChange = (nextLanguage: string) => { + const normalizedLanguage = normalizeLanguage(nextLanguage); + setHotLanguage(normalizedLanguage); + setHotMarket((current) => normalizeMarketForLanguage(current, normalizedLanguage)); + }; + const handleHotAiWrite = () => { setHotRequirement( "1.产品名称:便携式咖啡保温杯\n2.核心卖点:316不锈钢内胆、12小时长效保温、防漏便携、大容量\n3.参考风格:极简日系、暖光氛围、生活场景\n4.期望场景:办公桌面、户外通勤、运动健身\n5.具体参数:容量500ml、口径4.5cm、高度22cm", @@ -4503,20 +4574,19 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const handleHotMaterialMouseEnter = (src: string, event: ReactMouseEvent) => { const rect = event.currentTarget.getBoundingClientRect(); - const previewHalfWidth = 150; - const previewHeight = 360; + const previewWidth = 300; + const previewHeight = 190; const gap = 12; const viewportWidth = window.innerWidth || document.documentElement.clientWidth; const viewportHeight = window.innerHeight || document.documentElement.clientHeight; - const x = Math.min( - Math.max(rect.left + rect.width / 2, previewHalfWidth + gap), - Math.max(previewHalfWidth + gap, viewportWidth - previewHalfWidth - gap), + const canShowRight = rect.right + gap + previewWidth <= viewportWidth - gap; + const placement: "right" | "left" = canShowRight ? "right" : "left"; + const x = placement === "right" ? rect.right + gap : Math.max(gap, rect.left - gap); + const y = Math.min( + Math.max(rect.top + rect.height / 2, previewHeight / 2 + gap), + Math.max(previewHeight / 2 + gap, viewportHeight - previewHeight / 2 - gap), ); - const showAbove = rect.top > previewHeight + gap; - const y = showAbove - ? rect.top - gap - : Math.min(rect.bottom + gap, viewportHeight - gap); - setHotMaterialHoverZoom({ src, x, y, placement: showAbove ? "above" : "below" }); + setHotMaterialHoverZoom({ src, x, y, placement }); }; const handleHotMaterialMouseLeave = () => setHotMaterialHoverZoom(null); @@ -4540,13 +4610,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { onRemove(item.id); }} > - + 脳 ))} @@ -5173,8 +5237,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { onChange: (value: string) => void; }> = [ { key: "platform", label: "平台", value: platform, options: platformOptions, onChange: handleClonePlatformChange }, - { key: "market", label: "国家", value: market, options: marketOptions, onChange: handleCloneMarketChange }, - { key: "language", label: "语种", value: language, options: cloneLanguageOptions, onChange: setLanguage }, + { key: "market", label: "国家", value: market, options: cloneMarketOptions, onChange: handleCloneMarketChange }, + { key: "language", label: "语种", value: language, options: languageMarketOptions, onChange: handleCloneLanguageChange }, { key: "ratio", label: "尺寸/比例", value: ratio, options: cloneRatioOptions, onChange: setRatio }, ]; const quickDetailBasicSelects: Array<{ @@ -5185,8 +5249,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { onChange: (value: string) => void; }> = [ { key: "platform", label: "平台", value: detailPlatform, options: platformOptions, onChange: handleDetailPlatformChange }, - { key: "market", label: "国家", value: detailMarket, options: marketOptions, onChange: handleDetailMarketChange }, - { key: "language", label: "语种", value: detailLanguage, options: detailLanguageOptions, onChange: setDetailLanguage }, + { key: "market", label: "国家", value: detailMarket, options: detailMarketOptions, onChange: handleDetailMarketChange }, + { key: "language", label: "语种", value: detailLanguage, options: languageMarketOptions, onChange: handleDetailLanguageChange }, { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(detailRatio), options: quickSetRatioOptions, onChange: setDetailRatio }, ]; @@ -5198,8 +5262,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { onChange: (value: string) => void; }> = [ { key: "platform", label: "平台", value: hotPlatform, options: platformOptions, onChange: handleHotPlatformChange }, - { key: "market", label: "国家", value: hotMarket, options: marketOptions, onChange: handleHotMarketChange }, - { key: "language", label: "语种", value: hotLanguage, options: hotLanguageOptions, onChange: setHotLanguage }, + { key: "market", label: "国家", value: hotMarket, options: hotMarketOptions, onChange: handleHotMarketChange }, + { key: "language", label: "语种", value: hotLanguage, options: languageMarketOptions, onChange: handleHotLanguageChange }, { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(hotRatio), options: quickSetRatioOptions, onChange: setHotRatio }, ]; @@ -5211,8 +5275,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { onChange: (value: string) => void; }> = [ { key: "platform", label: "平台", value: platform, options: platformOptions, onChange: setPlatform }, - { key: "market", label: "国家", value: market, options: marketOptions, onChange: setMarket }, - { key: "language", label: "语种", value: language, options: cloneLanguageOptions, onChange: setLanguage }, + { key: "market", label: "国家", value: market, options: cloneMarketOptions, onChange: handleCloneMarketChange }, + { key: "language", label: "语种", value: language, options: languageMarketOptions, onChange: handleCloneLanguageChange }, { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(ratio), options: quickSetRatioOptions, onChange: setRatio }, ]; @@ -7003,6 +7067,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
+
+

图片修改

+

上传图片后涂抹需要调整的区域,AI 将根据提示完成局部重绘。

+
{!imageWorkbenchImage ? (
+
+

图片翻译

+

上传含文字的图片并选择目标语种,AI 将识别文字并保持原图排版。

+
{!translateImage ? (
+ {renderQuickPageSidebar("watermark")} + {watermarkPreview} +
+ ) : isTranslateTool - ? translatePreview + ? ( +
+ {renderQuickPageSidebar("translate")} + {translatePreview} +
+ ) : isImageEditTool - ? imageWorkbenchPreview + ? ( +
+ {renderQuickPageSidebar("image-edit")} + {imageWorkbenchPreview} +
+ ) : isSmartCutoutTool ? smartCutoutPreview : isQuickDetailTool ? (
+ {renderQuickPageSidebar("detail")} {quickDetailPreview}
) : isHotCloneTool ? (
+ {renderQuickPageSidebar("hot")} {hotClonePreview}
) : isQuickSetTool ? (
+ {renderQuickPageSidebar("quick-set")} {quickSetGenPreview}
) : isCopywritingTool - ? copywritingPreview + ? ( +
+ {renderQuickPageSidebar("copywriting")} + {copywritingPreview} +
+ ) : isOneClickVideoTool - ? oneClickVideoPreview + ? ( +
+ {renderQuickPageSidebar("oneClickVideo")} + {oneClickVideoPreview} +
+ ) : clonePreview : placeholderPreview; const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool && !isQuickSetTool && !isCopywritingTool && !isOneClickVideoTool; diff --git a/src/features/ecommerce/panels/EcommerceOneClickVideoPanel.tsx b/src/features/ecommerce/panels/EcommerceOneClickVideoPanel.tsx index c50c0f8..791c33b 100644 --- a/src/features/ecommerce/panels/EcommerceOneClickVideoPanel.tsx +++ b/src/features/ecommerce/panels/EcommerceOneClickVideoPanel.tsx @@ -4,7 +4,8 @@ import { ThunderboltOutlined, VideoCameraOutlined, } from "@ant-design/icons"; -import { useMemo, useRef, useState, type ChangeEvent, type DragEvent, type KeyboardEvent, type RefObject } from "react"; +import { useMemo, useRef, useState, type ChangeEvent, type DragEvent, type KeyboardEvent, type MouseEvent as ReactMouseEvent, type RefObject } from "react"; +import { createPortal } from "react-dom"; import EcommerceVideoWorkspace from "../EcommerceVideoWorkspace"; interface CloneImageItem { @@ -97,6 +98,7 @@ export default function EcommerceOneClickVideoPanel({ }: EcommerceOneClickVideoPanelProps) { const [openSelect, setOpenSelect] = useState<"platform" | "ratio" | null>(null); const [planTrigger, setPlanTrigger] = useState(0); + const [hoverZoom, setHoverZoom] = useState<{ src: string; x: number; y: number; placement: "right" | "left" } | null>(null); const selectAnchorRef = useRef(null); const productImageDataUrls = useMemo(() => productImages.map((img) => img.src), [productImages]); @@ -126,19 +128,40 @@ export default function EcommerceOneClickVideoPanel({ setOpenSelect((current) => (current === key ? null : key)); }; + const handleThumbMouseEnter = (src: string, event: ReactMouseEvent) => { + const rect = event.currentTarget.getBoundingClientRect(); + const previewWidth = 300; + const previewHeight = 190; + const gap = 12; + const viewportWidth = window.innerWidth || document.documentElement.clientWidth; + const viewportHeight = window.innerHeight || document.documentElement.clientHeight; + const canShowRight = rect.right + gap + previewWidth <= viewportWidth - gap; + const placement: "right" | "left" = canShowRight ? "right" : "left"; + const x = placement === "right" ? rect.right + gap : Math.max(gap, rect.left - gap); + const y = Math.min( + Math.max(rect.top + rect.height / 2, previewHeight / 2 + gap), + Math.max(previewHeight / 2 + gap, viewportHeight - previewHeight / 2 - gap), + ); + setHoverZoom({ src, x, y, placement }); + }; + const renderThumbs = () => (
{productImages.map((item) => ( -
+
handleThumbMouseEnter(item.src, event)} + onMouseLeave={() => setHoverZoom(null)} + > {item.name} -
+ {hoverZoom && typeof document !== "undefined" + ? createPortal( +
+ +
, + document.body, + ) + : null}
+
+

去除水印

+

上传含水印或文字遮挡的图片,AI 将清理画面并保留商品细节。

+
{!image ? (
button.ecom-hot-material-delete { + position: absolute !important; + top: -8px !important; + right: -8px !important; + z-index: 20 !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 24px !important; + height: 24px !important; + min-width: 24px !important; + min-height: 24px !important; + padding: 0 !important; + border: 1px solid rgba(239, 68, 68, 0.62) !important; + border-radius: 999px !important; + color: #ef4444 !important; + background: #ffffff !important; + box-shadow: 0 8px 18px rgba(239, 68, 68, 0.16) !important; + font-size: 16px !important; + font-weight: 700 !important; + line-height: 1 !important; +} + +.ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete:hover { + border-color: #dc2626 !important; + color: #dc2626 !important; + background: #fff1f2 !important; + box-shadow: 0 10px 22px rgba(220, 38, 38, 0.24) !important; + transform: scale(1.04) !important; +} + +.ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete svg { + display: none !important; +} + +.ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-hot-add-btn, +.ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-hot-add-btn:hover { + color: #1073cc !important; + background: #ffffff !important; +} + +.ecommerce-standalone .ecom-quick-page-wrap .ecom-visual-workspace-head.ecom-copywriting-preview-head { + display: grid !important; + gap: 6px !important; + margin-bottom: 16px !important; + padding: 0 !important; +} + +.ecommerce-standalone .ecom-quick-page-wrap .ecom-visual-workspace-head.ecom-copywriting-preview-head h1 { + margin: 0 !important; + color: #172636 !important; + font-size: 21px !important; + font-weight: 950 !important; + line-height: 1.25 !important; +} + +.ecommerce-standalone .ecom-quick-page-wrap .ecom-visual-workspace-head.ecom-copywriting-preview-head p { + margin: 0 !important; + color: #657686 !important; + font-size: 13px !important; + font-weight: 750 !important; + line-height: 1.5 !important; +} + +.ecommerce-standalone .ecom-quick-page-wrap .ecom-visual-workspace-head.ecom-copywriting-preview-head p span { + color: #1073cc !important; + font-weight: 800 !important; +} + +@media (max-width: 960px) { + .ecommerce-standalone .ecom-quick-page-wrap { + flex-direction: column !important; + overflow: hidden !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar { + flex: 0 0 auto !important; + width: 100% !important; + min-height: 68px !important; + flex-direction: row !important; + justify-content: flex-start !important; + gap: 6px !important; + padding: 8px 10px !important; + border-right: 0 !important; + border-bottom: 1px solid rgba(30, 189, 219, 0.1) !important; + overflow-x: auto !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar button { + flex: 0 0 76px !important; + width: 76px !important; + min-height: 52px !important; + padding: 7px 6px !important; + } + + .ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-set-body, + .ecommerce-standalone .ecom-quick-page-wrap .ecom-copywriting-body, + .ecommerce-standalone .ecom-quick-page-wrap .ecom-image-workbench-page, + .ecommerce-standalone .ecom-quick-page-wrap .ecom-watermark-page { + grid-template-columns: 1fr !important; + grid-template-rows: auto minmax(0, 1fr) !important; + } + + .ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-set-panel, + .ecommerce-standalone .ecom-quick-page-wrap .ecom-copywriting-panel, + .ecommerce-standalone .ecom-quick-page-wrap .ecom-image-workbench-side, + .ecommerce-standalone .ecom-quick-page-wrap .ecom-watermark-side { + max-height: 46vh !important; + overflow-y: auto !important; + } +} + +@media (max-width: 640px), (hover: none) { + .ecom-hot-material-zoom-portal { + display: none !important; + } +}