Appearance

09 业务流程 ​

9.1 首页与装修页面 ​

首页可以通过装修 DSL 或模板引擎组合头部、公告、轮播、商品货架、商品 Tab 等区块。页面加载时获取 DSL 和业务数据，再由渲染器输出区块。

9.2 商品浏览 ​

text
首页 / 集合 / 店铺
  → 商品列表或商品详情
  → 选择规格、数量
  → 登录校验（按操作需要）
  → 加入购物车或立即购买

商品相关页面应通过 ItemApiClient 及对应 Transformer 获取前端模型，金额、库存、数量等字段遵守统一类型。

9.3 购物车与结算 ​

购物车页面使用 useCartStore() 加载有效和失效商品，支持修改数量、选中商品、删除和清空。结算页面根据选中商品、地址和优惠信息生成订单确认数据。

购物车修改采用乐观更新，接口失败时必须回滚，避免界面状态与后端不一致。

9.4 下单与支付 ​

text
购物车
  → 结算页确认地址、商品和优惠
  → 创建订单
  → 支付页选择支付方式
  → 调用支付接口
  → 成功 / 失败 / 待支付结果页

支付页面通过 PaymentApiClient 处理支付参数和结果查询。支付回调或轮询逻辑不得只依赖前端本地状态，订单最终状态以服务端为准。

9.5 账户、订单与售后 ​

账户中心包含地址、优惠券、收藏、关注店铺和评价等功能。订单详情拆分为状态、地址、物流、商品、金额和操作组件；售后详情拆分为摘要、进度、商品、表单和物流等组件。

需要登录的页面由全局认证中间件保护，单个按钮操作使用 useAuthGuard()。

9.6 AI 导购 ​

ai-assistant.vue 及相关 runtimeConfig 配置用于 AI 导购入口和嵌入页面。启用前确认 NUXT_PUBLIC_AI_ASSISTANT 与相关服务地址配置完整，并注意客户端公开配置不可放置敏感凭据。