yeuimu
6c61a4e871
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma binaryTargets for openssl 3.0 - nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal cron, http->https redirect - prisma: add origin_goods.delisted migration, sync missing schema (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz - api: CORS wildcard reflection, helmet CORP cross-origin, price backfill in persistProductDetail, categoryIcon ancestor fallback, mediaByColor per-color gallery in public goods detail - admin: /admin base path (vite + router) - import-data.mjs: udt_name casting, serial sequence advance fix
3.4 KiB
3.4 KiB
产品中心
官网产品中心位于 apps/website/app/pages/product-center.vue，访问路径为 /product-center。
默认展示
页面首次加载时展示全部商品和全部国家，不默认选择分类、物流或工艺标签。每页默认请求 20 条商品，用户操作筛选项后再按真实业务 ID 查询。
筛选与分页
- 左侧分类树：选择父分类或子分类。
- 国家：点击国家胶囊筛选，点击“全部”取消国家筛选。
- 物流与工艺：按标签组展示下拉选项，每个分组内暂为单选，不同分组可各选择一项。
- 筛选菜单在选择选项或点击组件外部后自动关闭；已选 Tag 使用独立标签行。仅选择工艺时标签从最左侧开始；物流与工艺同时选择时按物流、工艺顺序与上方筛选项对应排列。
- 搜索：输入关键词后按回车或点击“搜索”。
- 商品卡：整卡链接到
https://inkpod.vip/portal/detail/{商品ID}，在新窗口打开。 - 公共商品接口的
id来自originGood.sdsGoodId，即 InkPOD 商品 ID；goods.good_id仅作为本站数据库内部主键使用。 - URL 国家筛选：支持
/product-center?countryId={后台国家ID}，仅接受后台已配置的国家 ID。 - 无结果：展示设计稿空状态，可通过“查看全部商品”或“清空筛选”恢复完整列表。
- 加载中：展示两行共八个商品骨架卡，筛选栏保持可操作。
- 分页：支持页码、前后翻页、每页数量和页码跳转。
所有查询通过 useProductCenter.ts 调用 /api/backend/* 代理路由，不在页面中硬编码业务 ID。
后台配置联动
- 品类树、国家、Tag 与 Tag Group 均来自 NestJS
/public/*接口。 - 国家旗帜读取
countryIcon，品类图标读取categoryIcon；前端不提供外部旗帜 CDN 或固定名称兜底。 /uploads/*与/assets/*等后台相对资源地址由useProductCenter.ts根据runtimeConfig.public.backendUrl转为完整 URL。- 物流和工艺筛选分别由后台名称包含“物流”和“工艺”的 Tag Group 生成；“印刷位置”等其他分组仍可用于商品卡片标签，但不会自动成为顶部筛选项。
- Figma 基准图标位于
apps/api/public/product-center/，通过后端/assets/product-center/*提供。 - 更新现有数据库图标配置：
pnpm --filter @inkreach/api configure:product-center-icons。脚本按中文名称幂等更新，不创建缺失的国家或品类。
响应式
桌面采用 240px 分类栏，页面左右保留 24–56px 自适应留白，分类栏可滚动但隐藏可见 scrollbar。商品网格以 240px 为最小卡片宽度自动增加或减少列数：1440px 基准宽度保持四列，1920px 可显示六列。国家筛选区按内容自然增高，不保留固定空白。
左侧品类栏不显示最左侧边线，一级品类之间保留 10px 间距；国家筛选区及物流、工艺、搜索工具区的底部分隔线从内容区向右延伸至页面边缘。
宽度低于 1000px 后分类栏变为抽屉；移动端商品网格降为两列或单列，国家筛选仅在自身区域横向滚动，不会撑宽页面。
验证
pnpm --filter @inkreach/website test --run
pnpm --filter @inkreach/website build
pnpm --filter @inkreach/website dev
pnpm --filter @inkreach/api test -- --runInBand
pnpm --filter @inkreach/api build