yeuimu
79fabd85f7
- Redesign website homepage & product-center per Figma (fonts, logos, hero/footer/customer cases) - Add API upload module (multer) with static serving for uploads/public assets - Add OriginGood.delisted flag and SDS request retry logic - Add admin ImageUpload component and goods import/upload flows - Add vitest suite for website components and composables (32 tests) - Add skills, docs, plans and PRODUCT.md
1.8 KiB
1.8 KiB
Homepage Navigation and Carousel Implementation Plan
For agentic workers: REQUIRED SUB-SKILL: Use executing-plans to implement this plan task-by-task. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: Make homepage CTAs navigate in the current page, automate homepage carousels, preserve the hero visual as a capped image, add product-center gutters, and temporarily hide two navigation menus.
Architecture: Keep behavior local to the existing Vue components. Use native current-page navigation for CTAs, lifecycle-managed timers for the step carousel, a duplicated CSS marquee for customer cases, and responsive CSS custom properties for product-center gutters.
Tech Stack: Nuxt 4, Vue 3 Composition API, Tailwind CSS, Vitest, Vue Test Utils
Task 1: Lock navigation behavior
- Add failing tests for current-page CTA and product-card navigation.
- Replace new-tab links and inert CTA buttons with immediate current-page navigation.
- Hide recommendation and solution navigation entries while retaining implementation code.
Task 2: Automate homepage rotating content
- Add failing timer tests for the four-step carousel.
- Add a lifecycle-managed automatic step interval.
- Animate the duplicated customer-case track continuously and add reduced-motion behavior.
Task 3: Improve desktop layout
- Keep
/主视觉.pngas an<img>with intrinsic aspect ratio and a capped rendered size. - Add responsive left and right gutters to the product center.
Task 4: Verify and document
- Update homepage, product-center, structure, and Agent reference docs.
- Run website tests and production build.
- Skip browser automation per the user's request; cover navigation, timing, hero image, country alignment, and bottom action behavior with Vitest.