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
76 lines
3.7 KiB
Markdown
76 lines
3.7 KiB
Markdown
# 产品中心 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 快速开始。
|
||
|