diff --git a/package-lock.json b/package-lock.json index 134008f..b1855dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -120,6 +120,7 @@ "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", @@ -1309,6 +1310,7 @@ "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1593,6 +1595,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", @@ -2721,6 +2724,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -2733,6 +2737,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" @@ -2803,6 +2808,7 @@ "integrity": "sha512-nc72Wgq62I7rtDV4izT5/aaS0zxy3kttkinf9586ApknY3jZO9NYsmtc24fUckA0X7Q2v+ML4a15pdUlV5V/jA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/estree": "1.0.9" }, @@ -3174,6 +3180,7 @@ "integrity": "sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.19.3", "postcss": "^8.4.35", @@ -3264,6 +3271,7 @@ "integrity": "sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@vitest/expect": "1.6.1", "@vitest/runner": "1.6.1", diff --git a/scripts/css-audit.mjs b/scripts/css-audit.mjs index 20ff14c..cfdc2ea 100644 --- a/scripts/css-audit.mjs +++ b/scripts/css-audit.mjs @@ -69,15 +69,40 @@ console.log( ); console.log(""); -// Exit non-zero if total !important exceeds a budget threshold. -// Current baseline: ~7795. Set budget slightly above to allow incremental work -// while preventing uncontrolled growth. -const IMPORTANT_BUDGET = 7820; -if (totals.important > IMPORTANT_BUDGET) { - console.error( - `FAIL: !important count ${totals.important} exceeds budget ${IMPORTANT_BUDGET}. ` + - `Run with --no-important-check to bypass (not recommended).`, - ); +// Per-file !important budgets for the worst offenders. +// These cap individual files so a single sheet cannot balloon unchecked. +// Current baselines (2026-06): ecommerce-standalone.css=10189, standalone/base.css=4958, +// standalone/overrides.css=1886. Budgets set ~1% above baseline to allow incremental +// work while preventing uncontrolled growth. Lower these as CSS gets cleaned up. +const PER_FILE_BUDGETS = { + "ecommerce-standalone.css": 10300, + "standalone/base.css": 5000, + "standalone/overrides.css": 1900, +}; + +let perFileFailed = false; +for (const r of REPORT) { + const budget = PER_FILE_BUDGETS[r.file]; + if (budget === undefined) continue; + if (r.important > budget) { + console.error( + `FAIL: ${r.file} !important count ${r.important} exceeds per-file budget ${budget}.`, + ); + perFileFailed = true; + } +} + +// Total !important budget across all stylesheets. +// Current baseline: ~18218. Set ~1% above to allow incremental work while +// preventing uncontrolled growth. Lower as CSS gets cleaned up. +const IMPORTANT_BUDGET = 18400; +if (perFileFailed || totals.important > IMPORTANT_BUDGET) { + if (totals.important > IMPORTANT_BUDGET) { + console.error( + `FAIL: !important count ${totals.important} exceeds budget ${IMPORTANT_BUDGET}. ` + + `Run with --no-important-check to bypass (not recommended).`, + ); + } process.exit(1); } else { console.log( diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx index 81d5cc7..bd1e5e4 100644 --- a/src/features/ecommerce/EcommercePage.tsx +++ b/src/features/ecommerce/EcommercePage.tsx @@ -4,7 +4,6 @@ import { CloudUploadOutlined, CloseOutlined, DeleteOutlined, - DownloadOutlined, EditOutlined, FireOutlined, FileImageOutlined, @@ -47,6 +46,9 @@ import { EcommerceProgressBar } from "./EcommerceProgressBar"; import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "./ImageMentionMenu"; import EcommerceVideoWorkspace from "./EcommerceVideoWorkspace"; import EcommerceVideoHistoryPanel from "./panels/EcommerceVideoHistoryPanel"; +import ProductSetHostingModal from "./panels/ProductSetHostingModal"; +import ProductSetPreviewModal, { type ProductSetPreviewSelection } from "./panels/ProductSetPreviewModal"; +import CommandHistorySidebar from "./panels/CommandHistorySidebar"; import EcommerceDetailPanel from "./panels/EcommerceDetailPanel"; import EcommerceSetPanel from "./panels/EcommerceSetPanel"; import EcommerceTryOnPanel from "./panels/EcommerceTryOnPanel"; @@ -55,6 +57,28 @@ import EcommerceCopywritingPanel from "./panels/EcommerceCopywritingPanel"; import { ecommerceOssScopes, saveUnifiedEcommerceGenerationRecord, deleteEcommerceGenerationRecord } from "./ecommerceGenerationPersistence"; import { downloadResultAsset } from "../workbench/workbenchDownload"; import type { CloneOutputKey, ProductSetOutputKey } from "./utils/platformRules"; +import { + cloneLatestSettingStorageKey, + defaultCloneDetailModuleIds, + defaultCloneSetCounts, + ecommerceHistoryStorageKey, + isCloneImageItem, + isCloneResult, + isCloneSavedSetting, + readCloneLatestSetting, + removeFilePayloadFromImages, + writeCloneLatestSetting, +} from "./utils/clonePersistence"; +import type { + CloneImageItem, + CloneModelPanelTab, + CloneReferenceMode, + CloneReplicateLevelKey, + CloneResult, + CloneSavedSetting, + CloneSetCountKey, + CloneVideoQualityKey, +} from "./utils/clonePersistence"; const smartCutoutColorPresets = [ "#ffffff", @@ -181,91 +205,6 @@ const buildInspirationPrompt = (title: string, meta: string): string => { return points.length ? `${base}。风格要点：${points.join("、")}。` : `${base}。`; }; -const clampNumber = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value)); - -const normalizeHexColor = (value: string) => { - const clean = value.trim().replace(/^#/, ""); - if (!/^[0-9a-fA-F]{6}$/.test(clean)) return null; - return `#${clean.toLowerCase()}`; -}; - -const hexToRgb = (value: string) => { - const normalized = normalizeHexColor(value); - if (!normalized) return null; - const numeric = Number.parseInt(normalized.slice(1), 16); - return { - r: (numeric >> 16) & 255, - g: (numeric >> 8) & 255, - b: numeric & 255, - }; -}; - -const rgbToHex = (r: number, g: number, b: number) => - `#${[r, g, b].map((item) => clampNumber(Math.round(item), 0, 255).toString(16).padStart(2, "0")).join("")}`; - -const parseSmartCutoutAspect = (aspect: string) => { - const match = aspect.match(/(\d+(?:\.\d+)?)\s*\/\s*(\d+(?:\.\d+)?)/); - if (!match) return null; - const width = Number(match[1]); - const height = Number(match[2]); - if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return null; - return width / height; -}; - -const parseSmartCutoutPercent = (value: string, fallback: number) => { - const numeric = Number(value.replace("%", "")); - if (!Number.isFinite(numeric)) return fallback; - return clampNumber(numeric / 100, 0.05, 1); -}; - -const hsvToRgb = (h: number, s: number, v: number) => { - const hue = ((h % 360) + 360) % 360; - const saturation = clampNumber(s, 0, 100) / 100; - const value = clampNumber(v, 0, 100) / 100; - const chroma = value * saturation; - const x = chroma * (1 - Math.abs(((hue / 60) % 2) - 1)); - const match = value - chroma; - const [red, green, blue] = - hue < 60 - ? [chroma, x, 0] - : hue < 120 - ? [x, chroma, 0] - : hue < 180 - ? [0, chroma, x] - : hue < 240 - ? [0, x, chroma] - : hue < 300 - ? [x, 0, chroma] - : [chroma, 0, x]; - return { - r: (red + match) * 255, - g: (green + match) * 255, - b: (blue + match) * 255, - }; -}; - -const hexToHsv = (value: string) => { - const rgb = hexToRgb(value) ?? { r: 255, g: 255, b: 255 }; - const red = rgb.r / 255; - const green = rgb.g / 255; - const blue = rgb.b / 255; - const max = Math.max(red, green, blue); - const min = Math.min(red, green, blue); - const delta = max - min; - const hue = - delta === 0 - ? 0 - : max === red - ? 60 * (((green - blue) / delta) % 6) - : max === green - ? 60 * ((blue - red) / delta + 2) - : 60 * ((red - green) / delta + 4); - return { - h: Math.round((hue + 360) % 360), - s: max === 0 ? 0 : Math.round((delta / max) * 100), - v: Math.round(max * 100), - }; -}; import { aiGenerationClient } from "../../api/aiGenerationClient"; import { ServerRequestError } from "../../api/serverConnection"; import { waitForTask } from "../../api/taskSubscription"; @@ -277,6 +216,30 @@ import { summarizeRejectedImages, validateEcommerceImageFiles, } from "./ecommerceImageValidation"; +import { + clampNumber, + hexToHsv, + hexToRgb, + hsvToRgb, + normalizeHexColor, + parseSmartCutoutAspect, + parseSmartCutoutPercent, + rgbToHex, +} from "./utils/colorUtils"; +import { + formatAspectRatio, + formatRatioDisplayValue, + getQuickSetRatioValue, + getRatioDisplayParts, + greatestCommonDivisor, + normalizeRatioForApi, + normalizeRatioToken, + parseRatioToAspectCss, + quickSetRatioOptions, + supportedImageApiRatios, + toSupportedImageApiRatio, + type SupportedImageApiRatio, +} from "./utils/ratioUtils"; interface ProductClonePageProps { @@ -285,9 +248,6 @@ interface ProductClonePageProps { type ProductCloneStatus = "idle" | "ready" | "generating" | "done" | "failed"; type CommerceScenarioKey = "popular" | "poster" | "mainImage" | "scene" | "festival" | "model" | "background" | "retouch" | "salesVideo"; -type CloneSetCountKey = "selling" | "white" | "scene"; -type CloneModelPanelTab = "scene" | "model"; -type CloneVideoQualityKey = "standard" | "high" | "ultra"; type ProductSetStatus = "idle" | "ready" | "generating" | "done" | "failed"; type ProductKitToolKey = "set" | "detail" | "wear" | "clone"; type ComposerMenuKey = "mode" | "platform" | "language" | "ratio" | "settings" | "assetLibrary" | "workMode" | "aiWrite"; @@ -295,8 +255,6 @@ type ComposerAssetTabKey = "recent" | "recipe" | "model"; type ComposerWorkModeKey = "quick" | "think"; type CloneBasicSelectKey = "platform" | "market" | "language" | "ratio"; type CloneModelSelectKey = "gender" | "age" | "ethnicity" | "body"; -type CloneReferenceMode = "upload" | "link"; -type CloneReplicateLevelKey = "style" | "high"; type CloneTemplateAsset = { id: string; title: string; @@ -313,25 +271,6 @@ type TryOnModelSource = "ai" | "library"; type TryOnStatus = "idle" | "modeling" | "ready" | "generating" | "done" | "failed"; type DetailStatus = "idle" | "ready" | "generating" | "done" | "failed"; -interface CloneImageItem { - id: string; - src: string; - name: string; - file?: File; - width?: number; - height?: number; - format?: string; - mimeType?: string; - ossKey?: string; -} - -interface CloneResult { - id: string; - src: string; - label: string; - type?: "image" | "video"; -} - interface CanvasNode { id: string; mode: string; @@ -357,33 +296,6 @@ interface PreviewTouchGesture { startCenter: { x: number; y: number }; } -interface CloneSavedSetting { - id: string; - name: string; - savedAt: string; - output: CloneOutputKey; - platform: string; - market: string; - language: string; - ratio: string; - setCounts: Record; - detailModules: string[]; - modelPanelTab: CloneModelPanelTab; - modelScenes: string[]; - modelCustomScene: string; - modelGender: string; - modelAge: string; - modelEthnicity: string; - modelBody: string; - modelAppearance: string; - videoQuality: CloneVideoQualityKey; - videoDurationSeconds: number; - videoSmart: boolean; - referenceMode?: CloneReferenceMode; - replicateLevel?: CloneReplicateLevelKey; - requirement: string; -} - type EcommerceHistoryStatus = "generating" | "done" | "failed"; interface EcommerceHistoryTurn { @@ -430,14 +342,6 @@ interface EcommerceHistoryRecord { turns?: EcommerceHistoryTurn[]; } -interface ProductSetPreviewSelection { - src: string; - label: string; - nodeId?: string; - cardId?: string; - removable?: boolean; -} - interface EcommerceImagePromptOptions { gender?: string; age?: string; @@ -907,15 +811,6 @@ const getPlatformRatioGroup = (value: string, mode?: PlatformRatioModeKey): Plat const getPlatformRatioOptions = (value: string, mode?: PlatformRatioModeKey) => getPlatformRatioGroup(value, mode).ratios; const getPlatformDefaultRatio = (value: string, mode?: PlatformRatioModeKey) => getPlatformRatioGroup(value, mode).defaultRatio; const getUniqueRatioOptions = (ratios: string[]) => Array.from(new Set(ratios)); -const normalizeRatioToken = (value: string) => - value - .replaceAll("\u00a0", " ") - .replaceAll("脳", "×") - .replaceAll("*", "×") - .replaceAll("：", ":") - .replace(/锛\?/g, ":") - .replace(/\s+/g, " ") - .trim(); const normalizeRatioForPlatform = (platformValue: string, ratioValue: string, mode?: PlatformRatioModeKey) => { const platformRatios = getPlatformRatioOptions(platformValue, mode); if (platformRatios.includes(ratioValue)) return ratioValue; @@ -923,105 +818,6 @@ const normalizeRatioForPlatform = (platformValue: string, ratioValue: string, mo const matchedRatio = platformRatios.find((option) => normalizeRatioToken(option).includes(normalizedRatio)); return matchedRatio ?? getPlatformDefaultRatio(platformValue, mode); }; -const quickSetRatioOptions = ["1:1", "3:4", "4:3", "9:16", "16:9"]; -const getQuickSetRatioValue = (value: string) => { - const normalizedValue = normalizeRatioToken(value); - if (quickSetRatioOptions.includes(normalizedValue)) return normalizedValue; - const sizeMatch = normalizedValue.match(/(\d+)\s*[×xX]\s*(\d+)/u); - if (sizeMatch) { - const width = Number(sizeMatch[1]); - const height = Number(sizeMatch[2]); - if (Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0) { - const aspect = formatAspectRatio(width, height); - if (quickSetRatioOptions.includes(aspect)) return aspect; - } - } - const ratioMatch = normalizedValue.match(/(\d+)\s*[:：]\s*(\d+)/u); - if (ratioMatch) { - const aspect = `${Number(ratioMatch[1])}:${Number(ratioMatch[2])}`; - if (quickSetRatioOptions.includes(aspect)) return aspect; - } - return quickSetRatioOptions[0]!; -}; -const formatRatioDisplayValue = (value: string) => { - const normalizedValue = normalizeRatioToken(value); - const sizeMatch = normalizedValue.match(/(\d+)\s*[×xX]\s*(\d+)\s*px?/u); - if (sizeMatch) { - const width = Number(sizeMatch[1]); - const height = Number(sizeMatch[2]); - return `${width}×${height}px\u00a0\u00a0\u00a0${formatAspectRatio(width, height)}`; - } - return normalizedValue - .replace("淘宝主图 / SKU 图 ", "淘宝主图 / SKU 图 ") - .replace("京东主图 / SKU 图 ", "京东主图 / SKU 图 ") - .replace("详情页宽", "详情页宽") - .replace("短视频", "短视频") - .replace("主图", "主图") - .replace("商品主图", "商品主图") - .replace("鍟嗗搧鍥?", "商品图") - .replace(/\s+:/g, ":") - .replace(/:\s+/g, ":"); -}; -const getRatioDisplayParts = (value: string) => { - const display = formatRatioDisplayValue(value).replace(/\u00a0/g, " ").replace(/\s+/g, " ").trim(); - const aspectMatch = display.match(/(\d+\s*[:：]\s*\d+)(?!.*\d+\s*[:：]\s*\d+)/u); - const aspect = aspectMatch?.[1]?.replace(/\s+/g, "") ?? "自适应"; - const size = aspectMatch ? display.replace(aspectMatch[0], "").trim() : display; - return { - size: size || "原图比例", - aspect, - }; -}; -/** Extract CSS aspect-ratio from a ratio string like "1000x1000px 1:1" -> "1 / 1" */ -const parseRatioToAspectCss = (ratioStr: string): string => { - const match = ratioStr.match(/(\d+)\D+(\d+)/u); - if (!match) return "1 / 1"; - return `${match[1]} / ${match[2]}`; -}; -const supportedImageApiRatios = ["1:1", "3:4", "4:3", "9:16", "16:9"] as const; -type SupportedImageApiRatio = typeof supportedImageApiRatios[number]; - -const toSupportedImageApiRatio = (width: number, height: number): SupportedImageApiRatio => { - if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return "1:1"; - let bestRatio: SupportedImageApiRatio = "1:1"; - let bestScore = Number.POSITIVE_INFINITY; - const target = Math.log(width / height); - for (const ratio of supportedImageApiRatios) { - const [left, right] = ratio.split(":").map(Number); - const score = Math.abs(target - Math.log(left / right)); - if (score < bestScore) { - bestRatio = ratio; - bestScore = score; - } - } - return bestRatio; -}; - -/** Normalize ratio display string ("1000×1000px 1:1") to an image API aspect ratio ("1:1"). */ -const normalizeRatioForApi = (ratioStr: string): string => { - const normalizedValue = normalizeRatioToken(ratioStr); - const explicitRatios = Array.from(normalizedValue.matchAll(/(\d+(?:\.\d+)?)\s*:\s*(\d+(?:\.\d+)?)/g)); - const explicitRatio = explicitRatios.at(-1); - if (explicitRatio) { - return toSupportedImageApiRatio(Number(explicitRatio[1]), Number(explicitRatio[2])); - } - - const sizeMatch = normalizedValue.match(/(\d+(?:\.\d+)?)\s*[×xX*]\s*(\d+(?:\.\d+)?)/u); - if (!sizeMatch) return "1:1"; - return toSupportedImageApiRatio(Number(sizeMatch[1]), Number(sizeMatch[2])); -}; -const greatestCommonDivisor = (left: number, right: number): number => { - let a = Math.abs(left); - let b = Math.abs(right); - while (b) { - [a, b] = [b, a % b]; - } - return a || 1; -}; -const formatAspectRatio = (width: number, height: number) => { - const divisor = greatestCommonDivisor(width, height); - return `${Math.round(width / divisor)}:${Math.round(height / divisor)}`; -}; const formatUploadedImageRatio = (image?: CloneImageItem) => { if (!image) return null; const format = image.format ? `\u00a0\u00a0\u00a0${image.format}` : ""; @@ -1418,11 +1214,6 @@ const cloneSetCountOptions: Array<{ { key: "scene", title: "场景图", desc: "展示商品生活使用场景和人物搭配" }, ]; const cloneSetCountKeys = cloneSetCountOptions.map((option) => option.key); -const defaultCloneSetCounts: Record = { - selling: 3, - white: 1, - scene: 3, -}; const minCloneSetTotal = 1; const maxCloneSetTotal = 16; const maxCloneProductImages = 20; @@ -1432,8 +1223,6 @@ const cloneVideoDurationMax = 45; const defaultEcommercePlatform = "淘宝/天猫"; const defaultProductSetOutput: ProductSetOutputKey = "set"; const defaultCloneOutput: CloneOutputKey = "set"; -const cloneLatestSettingStorageKey = "omniai.clone-ai.latest-setting"; -const ecommerceHistoryStorageKey = "omniai.ecommerce.history.records"; const cloneVideoQualityOptions: Array<{ key: CloneVideoQualityKey; label: string; desc: string }> = [ { key: "standard", label: "标准", desc: "快速出片" }, { key: "high", label: "高清", desc: "推荐" }, @@ -1512,7 +1301,6 @@ const detailModules = [ { id: "tips", title: "使用提示图", desc: "提醒操作与保养要点" }, ]; const defaultDetailModuleIds: string[] = []; -const defaultCloneDetailModuleIds = ["hero", "selling", "usage", "angle", "scene", "detail"]; const maxDetailModuleSelection = 6; const cloneDetailModules = detailModules; const detailAssets = ossAssets.ecommerce.detail; @@ -1648,50 +1436,6 @@ function notifyRejectedImages(files: File[]): File[] { return accepted; } -function isCloneSavedSetting(item: unknown): item is CloneSavedSetting { - const candidate = item as Partial; - return ( - typeof candidate.id === "string" && - typeof candidate.name === "string" && - typeof candidate.savedAt === "string" && - typeof candidate.output === "string" && - typeof candidate.platform === "string" && - typeof candidate.market === "string" && - typeof candidate.language === "string" && - typeof candidate.ratio === "string" && - typeof candidate.videoDurationSeconds === "number" - ); -} - -function readCloneLatestSetting() { - if (typeof window === "undefined") return null; - try { - const rawValue = window.localStorage.getItem(cloneLatestSettingStorageKey); - if (rawValue) { - const parsedValue: unknown = JSON.parse(rawValue); - if (isCloneSavedSetting(parsedValue)) return parsedValue; - } - } catch { - return null; - } - return null; -} - -function writeCloneLatestSetting(setting: CloneSavedSetting) { - if (typeof window === "undefined") return; - window.localStorage.setItem(cloneLatestSettingStorageKey, JSON.stringify(setting)); -} - -function isCloneImageItem(item: unknown): item is CloneImageItem { - const candidate = item as Partial; - return typeof candidate.id === "string" && typeof candidate.src === "string" && typeof candidate.name === "string"; -} - -function isCloneResult(item: unknown): item is CloneResult { - const candidate = item as Partial; - return typeof candidate.id === "string" && typeof candidate.src === "string" && typeof candidate.label === "string"; -} - function isEcommerceHistoryRecord(item: unknown): item is EcommerceHistoryRecord { const candidate = item as Partial; return ( @@ -1711,19 +1455,6 @@ function isEcommerceHistoryRecord(item: unknown): item is EcommerceHistoryRecord ); } -function removeFilePayloadFromImages(images: CloneImageItem[]): CloneImageItem[] { - return images.map(({ id, src, name, width, height, format, mimeType, ossKey }) => ({ - id, - src, - name, - width, - height, - format, - mimeType, - ossKey, - })); -} - function getTurnResults(turn: EcommerceHistoryTurn): CloneResult[] { if (turn.results?.length) return turn.results.filter((item) => item.src); if (turn.output !== "set") return []; @@ -4921,7 +4652,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { productImages, cloneSetCounts, quickSetRequirement, platform, ratio, language, market, (s) => { - setQuickSetStatus(s as ProductCloneStatus); + setQuickSetStatus(s as "idle" | "generating" | "done" | "failed"); if (s === "done") { stopQuickSetProgress(); setQuickSetProgress(100); @@ -8839,160 +8570,35 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { - {isCloneTool && !isCommandHistoryCollapsed ? ( -
setIsCommandHistoryCollapsed(true)} - /> - ) : null} + setIsCommandHistoryCollapsed((current) => !current)} + onCollapse={() => setIsCommandHistoryCollapsed(true)} + onNewConversation={handleNewEcommerceConversation} + onRefresh={refreshEcommerceHistory} + onOpenRecord={openEcommerceHistoryRecord} + onDeleteRecord={deleteHistoryRecord} + /> - + setSelectedProductSetPreview(null)} + onDownload={(preview) => { + void handleDownloadCanvasResult(preview); + }} + onRemove={removeSelectedProductSetPreview} + /> - {selectedProductSetPreview && typeof document !== "undefined" ? createPortal(( -
setSelectedProductSetPreview(null)}> -
event.stopPropagation()} - > - - {selectedProductSetPreview.label} -
- {selectedProductSetPreview.label} -
- - {selectedProductSetPreview.removable ? ( - - ) : null} -
-
-
-
- ), document.body) : null} - - {showHostingModal ? ( -
-
- 托管模式 -
- -

- 批量托管上线啦！ - 批量6折 -

- 睡一觉，图就做好了！ -
    -
  • - 批量生产 - 支持多任务并行生成，效率直线提升。 -
    • -
  • - 成本立省40% - 调度夜间闲置算力，享受专属离线点数折扣。 -
    • -
  • - AI智能提取 - 自动识别图片卖点，生成高转化销售卖点。 -
    • -
- -
-
-
- ) : null} + setShowHostingModal(false)} /> ; + formatHistoryTime: (timestamp: number) => string; + onToggleCollapsed: () => void; + onCollapse: () => void; + onNewConversation: () => void; + onRefresh: () => void; + onOpenRecord: (record: HistoryRecord) => void; + onDeleteRecord: (recordId: string, event: ReactMouseEvent) => void; +} + +// 生成记录侧栏：折叠/展开、新建对话、刷新历史、记录列表（点击查看/删除）。 +export default function CommandHistorySidebar({ + collapsed, + showBackdrop, + records, + activeRecordId, + isRefreshing, + refreshMessage, + refreshStamp, + refreshTick, + outputLabels, + formatHistoryTime, + onToggleCollapsed, + onCollapse, + onNewConversation, + onRefresh, + onOpenRecord, + onDeleteRecord, +}: CommandHistorySidebarProps) { + return ( + <> + {showBackdrop ? ( +
+ ) : null} + + + + ); +} diff --git a/src/features/ecommerce/panels/ProductSetHostingModal.tsx b/src/features/ecommerce/panels/ProductSetHostingModal.tsx new file mode 100644 index 0000000..3f01b2f --- /dev/null +++ b/src/features/ecommerce/panels/ProductSetHostingModal.tsx @@ -0,0 +1,48 @@ +import { ossAssets } from "../../../data/ossAssets"; + +interface ProductSetHostingModalProps { + visible: boolean; + onClose: () => void; +} + +// 批量托管上线介绍弹窗。纯展示，关闭即销毁。 +export default function ProductSetHostingModal({ visible, onClose }: ProductSetHostingModalProps) { + if (!visible) return null; + + const hostingImage = ossAssets.ecommerce.productSet.hosting; + + return ( +
+
+ 托管模式 +
+ +

+ 批量托管上线啦！ + 批量6折 +

+ 睡一觉，图就做好了！ +
    +
  • + 批量生产 + 支持多任务并行生成，效率直线提升。 +
    • +
  • + 成本立省40% + 调度夜间闲置算力，享受专属离线点数折扣。 +
    • +
  • + AI智能提取 + 自动识别图片卖点，生成高转化销售卖点。 +
    • +
+ +
+
+
+ ); +} diff --git a/src/features/ecommerce/panels/ProductSetPreviewModal.tsx b/src/features/ecommerce/panels/ProductSetPreviewModal.tsx new file mode 100644 index 0000000..54f01e7 --- /dev/null +++ b/src/features/ecommerce/panels/ProductSetPreviewModal.tsx @@ -0,0 +1,76 @@ +import { useEffect } from "react"; +import { createPortal } from "react-dom"; +import { CloseOutlined, DeleteOutlined, DownloadOutlined } from "@ant-design/icons"; + +export interface ProductSetPreviewSelection { + src: string; + label: string; + nodeId?: string; + cardId?: string; + removable?: boolean; +} + +interface ProductSetPreviewModalProps { + preview: ProductSetPreviewSelection | null; + onClose: () => void; + onDownload: (preview: ProductSetPreviewSelection) => void; + onRemove: (preview: ProductSetPreviewSelection) => void; +} + +// 商品套图大图预览弹窗。通过 portal 挂到 body，支持下载/移除。 +export default function ProductSetPreviewModal({ preview, onClose, onDownload, onRemove }: ProductSetPreviewModalProps) { + // Esc 关闭 + useEffect(() => { + if (!preview) return; + const handleKey = (event: KeyboardEvent) => { + if (event.key === "Escape") onClose(); + }; + window.addEventListener("keydown", handleKey); + return () => window.removeEventListener("keydown", handleKey); + }, [preview, onClose]); + + if (!preview || typeof document === "undefined") return null; + + return createPortal( +
+
event.stopPropagation()} + > + + {preview.label} +
+ {preview.label} +
+ + {preview.removable ? ( + + ) : null} +
+
+
+
, + document.body, + ); +} diff --git a/vite.config.ts b/vite.config.ts index 1688ca7..60a9255 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -42,8 +42,16 @@ export default defineConfig(({ command }) => { if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) { return "vendor-react"; } - if (id.includes("node_modules/@ant-design") || id.includes("node_modules/antd") || id.includes("node_modules/rc-")) { - return "vendor-antd"; + // 项目未安装 antd，只用了 @ant-design/icons + @phosphor-icons/react。 + // 把图标库及其依赖（icons-svg / colors / fast-color / rc-util）单独成块， + // 避免它们被打进 EcommercePage 业务 chunk，方便浏览器长缓存。 + if ( + id.includes("node_modules/@ant-design") || + id.includes("node_modules/@phosphor-icons") || + id.includes("node_modules/rc-util") || + id.includes("node_modules/rc-") + ) { + return "vendor-icons"; } }, },