- EcommercePage.tsx (+260):
- Add ComposerAssetTabKey and ComposerWorkModeKey types; extend ComposerMenuKey with assetLibrary/workMode/aiWrite
- Add composerTooltip/composerAssetTab/composerWorkMode/aiWriteDraft state
- Add composerAssetTabs (最近保存/套图配方/模特库), composerWorkModeOptions (快捷/思考), and composerRatioOptions (7 presets with display dimensions)
- Add scenarioSettingsKeys and scenarioAdvancedSettingsKeys for conditional settings panel display
- Add PaperPlaneRight icon import for AI writing send button
- Reorder salesVideo tag position in commerceScenarioOptions; emoji icons replace Ant Design icons
- handleCommerceScenarioClick: second click on active scenario now deselects (sets null) instead of toggling visibility
- shouldShowScenarioSettings: settings panel visible for poster/mainImage/model/scene/festival/salesVideo but not popular
- renderComposerAssetPanel: asset library popover with tab selector (recent/recipe/model) and grid display
- renderComposerWorkModePanel: work mode radio popover with description cards
- renderComposerAiWritePanel: AI prompt auto-complete panel with text input and send button; applyAiWriteSuggestion merges keyword + mode hint + platform context into composer prompt
- Toolbar restructured with .ecom-command-tool pill buttons (upload/assets/mode/AI write) in .ecom-command-composer-actions
- ecommerce-standalone.css (+937):
- Composer toolbar: horizontal flex row with space-between, overflow-x scroll with hidden scrollbar
- .ecom-command-tool: 40px pill-shaped buttons with gradient backgrounds, hover/active/dragging states with glow transition and lift
- .ecom-command-tool--upload: icon+label layout for upload button
- .ecom-command-tool--icon: 40px square icon-only button variant
- Asset panel: tab selector row, 3-column recipe grid with aspect-ratio cards, hover scale effect
- Work mode panel: radio-style card selector with description text
- AI write panel: text input area with send button, responsive sizing
- Tooltip: positioned above toolbar buttons with arrow pointer
- pages/ecommerce.css (+490):
- Composer input focus-within: green glow border + deepened shadow + lift transition
- Asset library, work mode, AI write panel styles with consistent tokenized spacing and transitions
- standalone/overrides.css (+7):
- ≤420px settings option row: switch from grid to flex with flex:1 on buttons for tight viewport fit
- Add EcommerceCopywritingPanel component
- Wire copywriting tool into EcommercePage routing and state
- Add quick action entry; place before '更多功能'
- Add copywriting styles aligned with quick-set/hot-clone pages
- Merge latest main
- EcommercePage.tsx:
- Introduce CommerceScenarioKey type (popular/poster/mainImage/scene/festival/model/background/retouch/salesVideo) and CommerceScenarioTemplate interface with scenario/output/desc/badge fields
- Add commerceScenarioOptions (9 scenario tabs with icons) replacing cloneOutputOptions as toolbar data source; each scenario maps to an output mode via commerceScenarioOutputMap
- Add commerceScenarioTemplates (16 templates across 8 scenarios) with thumbnail, badge, title, and description; popularCommerceScenarioTemplates aggregates cross-scenario highlights for the "热门" default tab
- Replace activeCloneTemplateCards with activeCommerceScenarioTemplates filtered by scenario; popular tab shows highlights, others show scenario-specific templates
- handleCommerceScenarioClick: switch scenario, auto-toggle output mode, toggle template strip visibility; clicking active scenario toggles strip; popular tab preserves current output
- handleCloneTemplateCardClick: auto-switch output mode to match template, fill prompt, focus textarea with 80ms delayed re-focus for reliability
- Template card markup upgraded: media thumbnail (94px cover image with hover scale), body with badge pill, title, and 2-line description
- Active scenario button shows close indicator (CloseOutlined) when strip is open
- Template strip defaults to visible (isCloneTemplateStripVisible initial true)
- Add "左右滑动查看更多" scroll hint for narrow viewports
- ecommerce-standalone.css (+355 lines):
- Scenario tabs: horizontal flex scroll with hidden scrollbar, pill-shaped buttons (grid: 24px icon + fluid label), per-scenario color accent via --mode-accent custom property (pink for popular, orange for poster/festival, green for mainImage/scene/background, blue for model/retouch/salesVideo)
- Active/open states: radial gradient glow, lifted shadow, intensified border color
- Icon slot: 24px rounded square with tinted background and inset highlight
- Close indicator: absolute top-right circle with hover scale
- Template cards: 2-column grid (94px media + fluid body), badge capsule, thumbnail with hover scale(1.035), title 820 weight, 2-line description clamp
- Responsive: ≤1024px 2-col card grid, ≤900px scroll-hint visible + left-aligned tabs, ≤640px horizontal scroll cards with snap, compact card sizing
- generationRecordClient.ts: Enhance save deduplication with payload signature — replace simple recordId-based dedup with stableJsonStringify-based signature comparison; same recordId + same signature skips save, changed payload proceeds; add buildSaveSignature covering tool/mode/title/status/prompt/taskIds/assets/config/result/metadata; store signature alongside savedAt in recentlySavedRecords map for per-turn save accuracy
- EcommercePage.tsx: Introduce EcommerceHistoryTurn interface and multi-turn conversation architecture —
- Add EcommerceHistoryTurn with full generation context (status/output/platform/market/language/ratio/requirement/images/results/counts/modules/scenes/replicateLevel); EcommerceHistoryRecord gains status/errorMessage/turns[] fields
- beginEcommerceHistoryTurn() — start a new generation turn, create or append to record, persist to localStorage immediately
- updateLocalEcommerceHistoryTurn() — real-time turn status sync (generating→done/failed) with record summary mirroring via syncRecordSummaryWithTurn()
- restoreHistoryTurnInputs() — one-click parameter restoration from failed turns for retry
- upsertCanvasNode() — insert or update canvas node by ID (dedup by turnId), alternating row layout (x: index*420, y: 0 or 160)
- Generate flow wired to turns: status callbacks update turn state; cancel sets turn to failed; results written to turn.results
- Record detail conversation panel refactored from single-message to per-turn iteration — each turn renders user message (requirement + meta + assets) and assistant message (status-aware text + progress bar during generation + result thumbnails); failed turns show "恢复参数" retry button; generating turn shows EcommerceProgressBar
- openEcommerceHistoryRecord() loads all turns as canvas nodes with distributed positions; preserves generating turn tracking via activeHistoryTurnIdRef
- History list items display status label (生成中/失败/time)
- Product set preview backdrop moved to createPortal(document.body) with z-index 4000
- pages/ecommerce.css: Bump product-set-preview-backdrop z-index from 100 to 4000 for Portal rendering layer
- EcommercePage.tsx: Add isCloneConversationCollapsed state for toggling conversation sidebar; introduce isMainCloneWorkspace / isRecordDetailWorkspace derived flags to scope record-detail features to main clone tool only; compute currentResultCount, activeHistoryRecord, and currentResultThumbs for display; add canvas reset button (zoom=1, offset=0) in preview toolbar when viewing a history record; build AI conversation panel (clone-ai-conversation-panel) as left sidebar with:
- Header showing record title, model/platform/language metadata, and collapse button
- User message bubble with requirement text and uploaded asset thumbnails (up to 4 + overflow count)
- Assistant message bubble with status-aware response text (done/generating/failed/idle), EcommerceProgressBar during generation, and clickable result thumbnails that open product set preview
- Collapse/expand toggle button with MenuFoldOutlined / MenuUnfoldOutlined icons
- ecommerce-standalone.css (+1204 lines): Define record detail workspace layout (CSS grid: 352px chat column + fluid canvas); grid-pattern background with radial gradient accent; conversation panel styling with chat bubble cards, asset thumbnail grids, result thumbnail buttons, scrollable body; collapsed state (grid-template-columns: 0 1fr); toggle button positioning; responsive breakpoints for tablets and mobile with adjusted chat width and stacked layout
- EcommercePage.tsx: Add DownloadOutlined icon and downloadResultAsset import; introduce ProductSetPreviewSelection interface (extends preview with nodeId/cardId/removable); enhance openProductSetPreview to accept nodeId and removable options; implement handleDownloadCanvasResult (triggers image download via downloadResultAsset), removeCanvasResult (filters canvas nodes and results by cardId), and removeSelectedProductSetPreview (removes card then closes preview); remove legacy canvas centering requestAnimationFrame block; add is-history-detail CSS class when viewing a history record; wire download/remove action buttons in product set preview modal footer; update canvas node result buttons to pass nodeId and removable options
- ecommerce-standalone.css (+382 lines):
- Product set preview modal: enhanced layered shadows and frosted border; footer flex layout with label truncation; pill-shaped action buttons with gradient backgrounds, hover lift and glow transitions; danger variant for remove action in red tones; mobile ≤640px column layout with stretched full-width buttons
- History detail mode (.is-history-detail): compact floating composer pill bar — fixed centered at workspace top with backdrop blur, pill-shaped container (border-radius 999px), single-line textarea, inline asset thumbnails, circular gradient send button, hidden option row; canvas nodes centered layout with max-width constraint; history item delete button repositioned absolute right with hover red state; responsive adjustments at ≤900px for full-width workspace
- EcommercePage.tsx: Add typewriter animation (useTypewriter hook) for slogan text with blinking cursor; replace text-based add/delete buttons with Ant Design icons (CloudUploadOutlined, DeleteOutlined); make command history panel responsive to window width (auto-collapse ≤1180px); update button labels from generic "添加" to context-specific "上传商品图" / "上传素材"
- New useTypewriter.ts hook: Character-by-character typewriter animation with configurable speed and pause-before-loop, auto-resets on text change
- reset.css: Add comprehensive HTML/body typography baseline (font-size, text-rendering, font-smoothing, line-height); extend reset coverage to select/canvas/svg elements; add overflow-wrap:anywhere for text-bearing elements; add min-width:0 to prevent form element overflow
- primitives.css: Add reusable typography utility classes (ui-page-title, ui-section-title, ui-body-copy) with design token references
- tokens.css: Expand design token set for typography scales, font weights, and leading values
- ecommerce-standalone.css: Add 689 lines of standalone ecommerce page styles
- Page CSS (ecommerce, image-workbench, more-tools, more, script-tokens, script-tokens-v5, studio-layout): Enhanced visual styles and layout refinements across all pages
- app-shell.css: Shell-level layout and styling improvements
ludan
Codex
stringadmin