司衡AI助手

企业服务数据服务案例ID：256209

_04

2 年经验· 杭州有为致用科技有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

「司衡零售」微信小程序：面向连锁门店的经营分析客户端。我作为前端负责人独立完成 10 个页面的架构与交付（登录/账号/改密主包，看板、报表、问数对话、异常、规则、积分、模板分包）。

技术栈：微信原生小程序 + TypeScript、pnpm workspace 单仓、TDesign、ECharts 5、marked、Orval、Vitest。

架构：pages 页面壳 → features 业务域 → shared 公共基础（api/auth/model/ui）→ app 组装层，单向依赖，第三方隔离在 vendor；用自研 check:modules 脚本校验模块边界与循环依赖，把分层约束变成 CI 门禁。

亮点与难点：
1. 契约优先：按后端 OpenAPI 用 Orval 生成类型与调用，自定义 mutator 接入自研 wx.request 传输层（不引 axios/fetch），统一注入 X-Request-Id、Idempotency-Key、Origin 校验，refresh Cookie 与访问凭据物理隔离；
2. 鉴权竞态：用会话代次（version）做单飞刷新与代次校验，刷新期间作废旧请求，401 仅对 GET 重试一次；
3. 流式问答：基于 onChunkReceived 自建 SSE 通道，eventsource-parser + UTF-8 跨包解码解决中文被截断，支持答题中断与断流后按 messageId 对账恢复；
4. 看板趋势/排名用 ECharts canvas 渲染并做点密度控制；异常模块按店长、运营双角色实现接单—提交—派发—退回—批准的流转与幂等提交。

质量：594 条 Vitest 用例（97 个文件）覆盖控制器、页面与请求层，typecheck 与边界检查纳入 check:full。