ludan
e86cd18f1d
- 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