feat: enhance scenario tabs with more/expand toggle, template carousel navigation, and 16 new templates #23
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: OmniAI/omniai-ds-code-package#23
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?
package.json: Add @phosphor-icons/react ^2.1.10 dependency for additional icon set
package-lock.json: Sync lockfile with new dependency and clean peer:true markers
EcommercePage.tsx:
Reorder scenario tabs: model (模特图) moved to position 3 after mainImage
Add primaryCommerceScenarioKeys to define first 4 visible scenarios (popular/poster/mainImage/model)
Change activeCommerceScenario initial state from "popular" to null — no scenario auto-selected on mount
Add isCommerceScenarioMoreOpen state to toggle expanded scenario list
Add templateStripRef for programmatic scroll control
visibleCommerceScenarioOptions: filter to primary keys by default, show all when expanded
"更多/收起" toggle button with dashed border, dynamic icon (··· or CloseOutlined)
isCloneTemplateStripVisible defaults to false — template strip hidden until scenario clicked
activeCommerceScenarioTemplates: returns empty array when no scenario selected
Template strip wrapped in ecom-command-template-carousel with prev/next navigation arrows (‹ ›)
scrollCommerceTemplateStrip(direction): smooth scroll by card width or viewport step
handleCommerceScenarioMoreToggle: expand/collapse scenario list
handleCloneTemplateCardClick: now also sets activeCommerceScenario to card.scenario
Scroll hint text: "点击更多查看全部场景" when collapsed, "左右滑动查看全部场景" when expanded
Auto-scroll template strip to left on scenario/visibility change via useEffect
Add 16 new CommerceScenarioTemplate cards:
ecommerce-standalone.css (+559 lines):
- package.json: Add @phosphor-icons/react ^2.1.10 dependency for additional icon set - package-lock.json: Sync lockfile with new dependency and clean peer:true markers - EcommercePage.tsx: - Reorder scenario tabs: model (模特图) moved to position 3 after mainImage - Add primaryCommerceScenarioKeys to define first 4 visible scenarios (popular/poster/mainImage/model) - Change activeCommerceScenario initial state from "popular" to null — no scenario auto-selected on mount - Add isCommerceScenarioMoreOpen state to toggle expanded scenario list - Add templateStripRef for programmatic scroll control - visibleCommerceScenarioOptions: filter to primary keys by default, show all when expanded - "更多/收起" toggle button with dashed border, dynamic icon (··· or CloseOutlined) - isCloneTemplateStripVisible defaults to false — template strip hidden until scenario clicked - activeCommerceScenarioTemplates: returns empty array when no scenario selected - Template strip wrapped in ecom-command-template-carousel with prev/next navigation arrows (‹ ›) - scrollCommerceTemplateStrip(direction): smooth scroll by card width or viewport step - handleCommerceScenarioMoreToggle: expand/collapse scenario list - handleCloneTemplateCardClick: now also sets activeCommerceScenario to card.scenario - Scroll hint text: "点击更多查看全部场景" when collapsed, "左右滑动查看全部场景" when expanded - Auto-scroll template strip to left on scenario/visibility change via useEffect - Add 16 new CommerceScenarioTemplate cards: - poster: 节日礼赠海报, 奢品香水海报 - mainImage: 模特展示主图, 细节质感主图 - model: 男装夹克模特, 帽子配饰模特 - scene: 户外露营场景, 美妆喷雾场景 - festival: 父亲节礼盒图, 香薰蜡烛礼盒 - background: 高级灰背景, 居家背景 - retouch: 色彩统一精修, 细节锐化精修 - salesVideo: 痛点种草视频, 温馨开箱视频 - ecommerce-standalone.css (+559 lines): - Scenario shell (.ecom-command-scenario-shell): centered flex wrapper with padding - Scenario tabs: pill-shaped buttons (border-radius 999px), gradient backgrounds, scroll-snap - "更多" button: dashed border in collapsed state, solid when expanded - Template carousel (.ecom-command-template-carousel): horizontal scroll with snap, smooth scroll-behavior, hidden scrollbar - Carousel fade edges: ::before/::after gradient masks (54px width) - Navigation arrows (.ecom-command-template-nav): circular buttons positioned absolute at edges, hover/focus reveal with scale transition, opacity 0→1 on carousel hover - Template cards: flexible sizing (clamp 260px-312px), 96px media thumbnail, scroll-snap-align start - Per-scenario color mapping via --mode-accent: popular pink, poster/festival orange, mainImage/scene/background green, model/retouch/salesVideo blue, more blue - Active state: radial gradient glow + color-mix border/shadow from --mode-accent - Scroll hint: animated ← → arrows (ecom-scroll-hint-left/right keyframes at 1.6s infinite) - Responsive: ≤900px left-aligned tabs + persistent nav arrows, ≤640px compact sizing, full-width carousel with overflow hidden