主题
前台商城 · 产品概览
模块代号：Portal 路由前缀：
/portal（独立于后台，共用登录入口页/） 上游规范：design-system.md
1. 产品定位
一句话定位：面向 C 端消费者的 B2C 综合电商商城，提供"逛-搜-选-买-付-收-评"完整购物体验。
商业目标：
- 提升商品曝光 → 点击 → 加购 → 下单的漏斗转化
- 缩短从"进入商城"到"完成支付"的路径长度
- 通过会员/优惠券/积分体系提升复购率
北极星指标：GMV（成交总额）= 访客数 × 下单转化率 × 客单价
2. 目标用户画像
| 画像 | 特征 | 核心诉求 | 设计侧重 |
|---|---|---|---|
| 目的型买家 | 明确知道要买什么，搜索直达 | 快速找到、快速下单 | 搜索准确性、详情页决策效率、结算流畅 |
| 浏览型买家 | 无明确目标，随便逛逛 | 发现好物、优惠刺激 | 首页推荐、活动楼层、品牌/专题内容 |
| 比价型买家 | 多平台对比，犹豫期长 | 价格透明、评价可信、售后无忧 | 价格展示、销量/评价、售后保障说明 |
| 会员型买家 | 复购用户，关注权益 | 积分、优惠券、等级特权 | 会员中心、优惠券中心、积分抵扣 |
3. 信息架构（IA）
商城前台
├── 首页（流量分发中心）
│ ├── 轮播广告 → 活动/专题
│ ├── 品牌推荐 → 品牌页
│ ├── 专题推荐 → 专题页
│ ├── 新品推荐 → 商品详情
│ └── 人气推荐 → 商品详情
│
├── 商品发现
│ ├── 分类页（结构化浏览）
│ ├── 搜索页（关键词检索）
│ ├── 品牌页（品牌聚合）
│ └── 专题页（内容化导购）
│
├── 商品详情（决策核心页）
│
├── 交易链路
│ ├── 购物车（蓄水池）
│ ├── 确认订单（结算决策）
│ └── 支付（转化终点）
│
├── 订单中心
│ ├── 订单列表（状态跟踪）
│ ├── 订单详情（物流/操作记录）
│ └── 申请售后（逆向流程）
│
├── 会员中心
│ ├── 个人中心（资产总览）
│ ├── 收货地址 / 修改密码
│ ├── 我的收藏 / 浏览历史
│ └── 我的优惠券 → 优惠券中心
│
└── 服务
├── 帮助中心
├── 会员注册 / 登录
└── 举报反馈4. 全局导航设计
4.1 顶部栏（TopBar，全站吸顶）
[ Logo ] [ 搜索框 ─────────── 🔍 ] [ 🛒购物车(badge) ] [ 👤用户 ]- Logo：点击回首页
- 搜索框：全站常驻，回车或点击按钮触发搜索；placeholder 展示热搜词
- 购物车：角标显示已选商品数，点击进入购物车
- 用户区：
- 未登录：显示头像图标，点击跳转登录入口页
/ - 已登录：显示用户名，下拉菜单（个人中心/我的订单/退出登录）
- 未登录：显示头像图标，点击跳转登录入口页
4.2 底部导航（TabBar，仅移动端）
| Tab | 图标 | 跳转 | 角标 |
|---|---|---|---|
| 首页 | 🏠 | /portal/home | — |
| 分类 | 🗂 | /portal/category | — |
| 购物车 | 🛒 | /portal/cart | 已选数量 |
| 我的 | 👤 | /portal/member | — |
- 当前页 Tab 高亮（品牌色）
- 交易流程页（checkout/pay）隐藏 TabBar，防止中途跳出
4.3 页脚（Footer，仅桌面端）
- 链接矩阵：购物指南（购物流程/会员介绍）| 配送方式 | 支付方式 | 售后服务
- 底部：备案号、版权信息、帮助中心入口
5. 核心用户流程
5.1 主购买流程（正向）
首页/搜索/分类 → 商品详情 → [加入购物车] → 购物车 → [去结算]
→ 确认订单（选地址/优惠券/积分）→ [提交订单] → 支付 → 支付成功页
→ 订单列表（待发货）→ 发货（待收货）→ 确认收货（已完成）关键转化点与设计策略：
| 环节 | 流失风险 | 设计策略 |
|---|---|---|
| 详情→加购 | 犹豫不决 | 价格突出、库存紧迫感、销量背书、底部吸底加购栏 |
| 购物车→结算 | 比价放弃 | 勾选计算总价、失效商品提示、降价提醒 |
| 结算→提交 | 地址/优惠摩擦 | 默认地址、自动推荐最优优惠券、积分一键抵扣 |
| 提交→支付 | 支付中断 | 支付方式默认选中、订单信息摘要清晰、倒计时 |
5.2 售后流程（逆向）
订单详情/订单列表 → [申请售后] → 选择售后类型（退货/退款）
→ 选择原因+上传凭证 → 提交 → 商家审核 → 退货物流 → 商家收货退款 → 完成5.3 会员成长流程
注册 → 完善信息 → 消费累积积分/成长值 → 等级提升 → 享受特权（折扣/免邮）6. 页面清单与优先级
| 页面 | 路由 | 优先级 | 核心指标 | 设计文档 |
|---|---|---|---|---|
| 首页 | /portal/home | P0 | 点击率、跳出率 | 01-home.md |
| 分类页 | /portal/category | P0 | 分类点击分布 | 01-home.md |
| 搜索页 | /portal/search | P0 | 搜索转化率 | 01-home.md |
| 商品详情 | /portal/product/:id | P0 | 加购率、下单转化 | 02-product.md |
| 购物车 | /portal/cart | P0 | 结算率 | 03-trade.md |
| 确认订单 | /portal/checkout | P0 | 提交率 | 03-trade.md |
| 支付 | /portal/pay/:orderId | P0 | 支付成功率 | 03-trade.md |
| 订单列表 | /portal/orders | P0 | 复访率 | 04-order.md |
| 订单详情 | /portal/orders/:id | P0 | 确认收货率 | 04-order.md |
| 申请售后 | /portal/return-apply | P1 | 售后满意度 | 04-order.md |
| 个人中心 | /portal/member | P1 | 会员活跃度 | 05-member.md |
| 收货地址 | /portal/member/address | P1 | — | 05-member.md |
| 修改密码 | /portal/member/password | P2 | — | 05-member.md |
| 我的收藏 | /portal/member/collection | P2 | 收藏转化率 | 05-member.md |
| 浏览历史 | /portal/member/history | P2 | 回访购买率 | 05-member.md |
| 我的优惠券 | /portal/coupon | P1 | 核销率 | 05-member.md |
| 会员注册 | /portal/register | P0 | 注册转化率 | 06-account.md |
| 品牌推荐 | /portal/brands | P1 | 品牌点击率 | 01-home.md |
| 专题详情 | /portal/subject/:id | P1 | 专题转化率 | 01-home.md |
| 帮助中心 | /portal/help | P2 | 问题解决率 | 06-account.md |
7. 全局业务约定
7.1 登录态管理
- 需登录页面（购物车/结算/订单/会员相关）未登录访问 → 跳转登录入口
/，登录成功后回跳原目标页 - 登录态过期 → 轻提示"登录已过期，请重新登录"并跳转登录
- 游客可浏览：首页/分类/搜索/详情/品牌/专题/帮助
7.2 价格展示规则
- 统一格式
¥1,299.00，符号 + 千分位 + 2 位小数 - 划线价（原价）用灰色删除号，仅当原价 > 现价时展示
- 多规格商品在列表展示"¥xx 起"
7.3 库存与限购
- 库存 ≤10 时详情页展示"仅剩 N 件"（紧迫感）
- 库存为 0：加购按钮置灰"已售罄"，不可下单
- 加购数量不得超过库存，超出时提示并自动修正为最大值
7.4 图片规范
- 商品主图：正方形 1:1，懒加载，加载失败显示占位图
- 轮播广告：桌面 5:2，移动 2:1，点击可配置跳转链接
- 头像：圆形，默认头像兜底