feat(product-center): implement Figma-designed UI, upload module, and website tests

- 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
2026-08-20 14:32:03 +08:00
parent b5fc88f3fa
commit 79fabd85f7
107 changed files with 5364 additions and 2601 deletions
@@ -0,0 +1,43 @@
+# 官网首页
+
+## 关键链接与国家货盘
+
+- 首页“登录”“立即开始”“免费试用”“立即免费使用”等 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 字重。首屏渐变从“通”字开始，“通”字仅保留少量渐变过渡；主标题与副标题共用左对齐容器。平台数据卡会抵消插图上移造成的底部占位，减少卡片留白。
+
+## 验证
+
+```bash
+pnpm --filter @inkreach/website test --run
+pnpm --filter @inkreach/website build
+```
+
+浏览器以 `1440 x 1024` 视口检查首页总高、区块边界、图片加载和横向溢出。