# 产品中心 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 快速开始。