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
38 lines
979 B
JSON
38 lines
979 B
JSON
{
|
|
"name": "omniai-web-preview",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite --host 127.0.0.1",
|
|
"build": "vite build",
|
|
"preview": "vite preview --host 127.0.0.1",
|
|
"type-check": "tsc -p tsconfig.json --noEmit",
|
|
"test": "vitest",
|
|
"test:run": "vitest run",
|
|
"test:coverage": "vitest run --coverage",
|
|
"css:audit": "node scripts/css-audit.mjs",
|
|
"prepare": "husky"
|
|
},
|
|
"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",
|
|
"zustand": "5.0.13"
|
|
},
|
|
"devDependencies": {
|
|
"@types/react": "18.2.55",
|
|
"@types/react-dom": "18.2.18",
|
|
"@vitejs/plugin-react": "4.2.1",
|
|
"@vitest/coverage-v8": "^1.6.0",
|
|
"husky": "^9.1.7",
|
|
"lint-staged": "^17.0.7",
|
|
"typescript": "5.3.3",
|
|
"vite": "5.1.0",
|
|
"vite-plugin-compression2": "2.5.3",
|
|
"vitest": "^1.6.0"
|
|
}
|
|
}
|