feat: enhance scenario tabs with more/expand toggle, template carousel navigation, and 16 new templates
- 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
This commit is contained in:
Generated
+14
-8
@@ -9,6 +9,7 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "5.3.0",
|
||||
"@phosphor-icons/react": "^2.1.10",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"scheduler": "0.23.0",
|
||||
@@ -119,7 +120,6 @@
|
||||
"integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.29.7",
|
||||
"@babel/generator": "^7.29.7",
|
||||
@@ -851,6 +851,19 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@phosphor-icons/react": {
|
||||
"version": "2.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz",
|
||||
"integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8",
|
||||
"react-dom": ">= 16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/pluginutils": {
|
||||
"version": "5.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz",
|
||||
@@ -1296,7 +1309,6 @@
|
||||
"integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
@@ -1581,7 +1593,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.10.12",
|
||||
"caniuse-lite": "^1.0.30001782",
|
||||
@@ -2710,7 +2721,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
@@ -2723,7 +2733,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
@@ -2794,7 +2803,6 @@
|
||||
"integrity": "sha512-nc72Wgq62I7rtDV4izT5/aaS0zxy3kttkinf9586ApknY3jZO9NYsmtc24fUckA0X7Q2v+ML4a15pdUlV5V/jA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "1.0.9"
|
||||
},
|
||||
@@ -3166,7 +3174,6 @@
|
||||
"integrity": "sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.19.3",
|
||||
"postcss": "^8.4.35",
|
||||
@@ -3257,7 +3264,6 @@
|
||||
"integrity": "sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vitest/expect": "1.6.1",
|
||||
"@vitest/runner": "1.6.1",
|
||||
|
||||
Reference in New Issue
Block a user