feat: add composer toolbelt with asset library, work mode selector, AI-powered prompt writing, and scenario settings
- 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
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
|
||||
|
||||
@media (max-width: 640px) {
|
||||
html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover {
|
||||
position: absolute !important;
|
||||
@@ -3473,8 +3473,8 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
||||
|
||||
@media (max-width: 420px) {
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
gap: 7px !important;
|
||||
justify-content: stretch !important;
|
||||
overflow: visible !important;
|
||||
@@ -3482,6 +3482,7 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button {
|
||||
display: inline-flex !important;
|
||||
flex: 1 1 0 !important;
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
max-width: none !important;
|
||||
|
||||
Reference in New Issue
Block a user