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
3.4 KiB
3.4 KiB
官网首页
关键链接与国家货盘
- 首页“登录”“立即开始”“免费试用”“立即免费使用”等 CTA 统一通过
window.location.href在当前页面跳转到https://inkpod.vip/user/login。 - “全球POD货盘”国家列表读取与产品中心相同的后台国家接口，完整展示所有已配置且有关联商品的国家及图标。
- 桌面端国家列表按 6 列 × 2 行均匀排列；点击国家只切换下方对应货盘，不发生页面跳转。
- 国家下方的品类卡链接到
/product-center?countryId={后台国家ID}&categoryId={后台品类ID}，产品中心打开后自动应用国家和品类筛选。
官网首页位于 apps/website/app/pages/index.vue，访问路径为 /。页面基于 Figma 节点 897:2047 还原，桌面设计基准为 1440 x 6933px。
页面结构
首页依次由导航、首屏、平台数据、四步流程、全球 POD 货盘、渠道能力、平台优势、公司简介、用户案例、行动区和页脚组成。各区块保持独立 Vue 组件，首页仅负责组合。
桌面端主要区块边界为：80 / 980 / 1580 / 2515 / 3522 / 4276 / 4706 / 5306 / 6234 / 6572px。流程区默认展示“选择产品”，渠道能力默认展示“店铺集成”；用户主动操作后仍可切换。
素材
首页图片统一存放于 apps/website/public/。Figma 用户案例图使用 case-*.png 命名，不依赖临时远程链接或随机占位图。
/主视觉.png 保持为宽高 800 × 400 的普通 <img>，渲染宽度不超过原图 800px，不作为背景图，也不会随超宽屏幕继续放大。
自动轮播
- 四步流程和“用强大功能，开启盈利快车道”功能区均每 2 秒自动切换，用户仍可点击或悬停立即切换。四步流程当前项的 2px 黄线会在 2 秒内从 0% 填满至 100%，填满后切换下一张；步骤标题与功能轮播项保持一致，桌面为 36px 常规字重。
- “用强大功能，开启盈利快车道”左侧标题桌面端为 30px，四个功能项在 550px 高度内等分排列，与右侧轮播图上下对齐。
- 用户案例在桌面和移动端均无缝横向滚动，完整循环放慢至 30 秒；悬停或聚焦时暂停。
prefers-reduced-motion: reduce环境下关闭持续滚动动画。- 导航中的“选品推荐”和“解决方案”入口暂时隐藏，相关实现代码保留以便后续恢复。
- 桌面导航使用 18px 字号，移动导航保持原有触控尺寸。
- “全球 POD 货盘”使用固定旗帜列对齐国家名称，“更多产品”操作固定在货盘区底部。
- 首屏“链通全球”使用主题橙色渐变，0 库存、0 关税、1 件起订以竖线分隔；平台数据卡的统计数值使用主题橙色。“全球 POD 货盘”的“更多产品”为无按钮容器的主题色文本链接。
- 官网全局使用随项目提供的 PingFang SC Thin、Regular、Medium、Semibold 字体，首屏副标题使用 Thin 字重。首屏渐变从“通”字开始，“通”字仅保留少量渐变过渡；主标题与副标题共用左对齐容器。平台数据卡会抵消插图上移造成的底部占位，减少卡片留白。
验证
pnpm --filter @inkreach/website test --run
pnpm --filter @inkreach/website build
浏览器以 1440 x 1024 视口检查首页总高、区块边界、图片加载和横向溢出。