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.7 KiB
3.7 KiB
产品中心 Figma 还原功能规格
目标
将 Figma 文件“印美达官网 Copy”节点 1124:1633 的产品中心页面还原到 apps/website 的 /product-center 二级页。1440px 桌面视口以设计稿为唯一视觉基准，同时保留现有真实商品接口和完整筛选交互。
设计基准
- Figma 文件 key：
c967cRetA5krsgM5jh0XPo - 节点：
1124:1633 - 设计画布：1440 x 1602
- 桌面结构：80px 顶部导航、240px 左侧分类栏、1200px 主内容区。
- 主内容依次包含国家筛选、物流/工艺筛选与搜索、已选标签、四列商品网格和底部分页。
- 颜色、字号、间距、边框、圆角、图标尺寸、卡片比例和选中态按 Figma 设计上下文实现。
页面行为
默认状态
- 页面首次进入时呈现设计稿中的示例选择状态：女式服装、T恤、包邮、烫画。
- 国家筛选默认选中“全部”。
- 默认筛选必须映射到后端返回的真实分类和标签，不使用硬编码 ID；当目标项不存在时保持对应维度未选择，页面仍可正常加载。
筛选与搜索
- 分类、国家、物流、工艺、关键词搜索和已选标签删除继续驱动现有商品查询。
- 分类树支持展开与收起；桌面保持常驻侧栏。
- 国家选项显示接口返回的国旗和名称。
- 搜索支持按钮提交和回车提交。
- 改变筛选条件后回到第一页并刷新商品数据。
商品与分页
- 商品卡片展示真实商品图、名称、标签、国家和起售价。
- 1440px 视口每行展示四张卡片，尺寸与设计稿一致。
- 分页展示总数、页码、前后翻页、每页数量和页码跳转；所有操作使用真实分页状态。
- 加载、空数据和接口失败时保留明确且不破坏布局的反馈状态。
响应式规则
- 1440px 及常规桌面宽度优先保证设计稿还原精度。
- 平板和移动端将左侧分类栏折叠为可开关抽屉。
- 国家和筛选项允许横向浏览，不压缩到不可读尺寸。
- 商品网格根据容器宽度从四列降为三列、两列和单列。
- 移动端分页允许换行或精简页码，但保留总数、翻页与当前页信息。
- 任意支持宽度下不得出现文字、控件或商品卡片重叠。
组件边界
product-center.vue：页面数据编排、默认筛选初始化和响应式侧栏状态。ProductSidebar.vue：桌面分类树与移动端抽屉内容。ProductCountryFilter.vue：国家胶囊筛选。ProductTagFilter.vue/ProductFilterBar.vue：下拉筛选、已选标签和搜索。ProductGrid.vue/ProductCard.vue：商品网格、卡片和状态反馈。ProductPagination.vue：分页、每页数量和跳转。useProductCenter.ts：真实接口状态、筛选映射和查询行为；不承载视觉规则。
权限评估
本功能是公开官网页面的视觉和交互调整，不新增管理操作、不读取额外敏感数据，也不改变后端资源权限，因此无需新增权限控制。
测试与验收
- 使用 Vitest/Vue Test Utils 覆盖默认筛选映射、筛选交互、搜索提交、标签删除和分页事件。
- 运行 website 的类型检查、测试和生产构建。
- 启动本地 Nuxt 服务，在 1440px 桌面及典型平板、手机视口进行浏览器截图验证。
- 桌面截图与 Figma 对照检查导航、侧栏、筛选区、商品卡片、分页的尺寸和位置。
- 验证真实接口成功、空数据和失败场景不破坏页面结构。
文档范围
- 更新
docs/references/structs.md记录产品中心组件职责。 - 更新产品中心详细参考文档和
skills中对应项目使用说明。 - 本次为已有功能的设计调整，不更新 README 快速开始。