feat: refactor ecommerce toolbar from mode tabs to scenario-based tabs with rich template cards #20
stringadmin
commented
Owner
- 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
- 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
stringadmin
added 1 commit 2026-06-16 11:16:43 +00:00
feat: refactor ecommerce toolbar from mode tabs to scenario-based tabs with rich template cards
5811cbac16
stringadmin
merged commit 9869c0c5e6 into main 
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: OmniAI/omniai-ds-code-package#20
Reference in New Issue
Block a user
Delete Branch "feat/ecommerce-scenario-tabs"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?