★ 设计心法（给 1~2 人小团队）

代码分三类（按真实占比）

关键：90% 是公用的。双仓现在的痛苦，就是这 90% 被复制成两份——改 bug 改两遍、还容易漏。合并的全部收益就在这里。

代码该放哪 —— 唯一判断规则

如何保证「各自迭代 + 不互相干扰」

守住简洁的三条纪律（小团队专属）

小团队的敌人不是「不够优雅」,而是改一处要在五个文件间跳 和 改一处怕炸全局。所以刻意做减法:

万一公用代码里真冒出渠道差异?(按顺序消化,别一上来写 if)

0 · 现状关键事实（决定方案的硬约束）

1 · 总体架构选型

选 A 的理由

① 当前最大成本是「双侧同步」，AE 本就是 Lazada 的镜像分叉，A 直接消灭分叉。
② 差异是可枚举的环境接缝、非业务分歧，用接口收口即可，不必物理分包（B 太重）也别容忍复制（C 的痛）。
③ B 把业务页面发 npm 包会拖慢高频迭代（组件库已是此痛点）。
④ A 的 core/ 未来可平滑抽成 B，反向不可逆——先 A 后 B 风险可控。

2 · 核心抽象：渠道适配层（Channel Adapter）

业务层零渠道判断，统一通过 getChannel() 拿适配器。isAE / window.adc / WindVane / UA 正则只允许出现在 channels/ 内。

// core/channel/types.ts —— 渠道适配层总接口
interface ChannelAdapter {
  id: 'lazada' | 'ae' | string;
  bridge:  BridgeAdapter;   // 容器能力: open / setTitle / call / login
  env:     EnvAdapter;      // stage / 平台 / 域名 / cookie domain
  i18n:    I18nAdapter;     // getEnv()→{language,region,currency}; decorateRequest 注 x-i18n-*/hng
  router:  RouterAdapter;   // toDetail / toBooking ...; buildUrl 拼域名 + pha_manifest
  theme:   ThemeAdapter;    // tokens + 组件变体 + 根 class
  request: RequestAdapter;  // MTOP ttid / 头 / cookie 装配
}

装配入口（构建时注入）

// entry/ae.tsx —— AE 构建入口
import { setChannel } from '@/core/channel';
import { aeChannel } from '@/channels/ae';

setChannel(aeChannel);     // 先装配渠道
import('./app');            // 业务入口,完全渠道无关

3 · 目录结构草案（路线 A）

src/
├── core/        # ✅ 渠道无关: channel 接口 / service / hooks / utils / 共享组件
│   └── channel/  # types.ts + getChannel/setChannel
├── channels/    # ⚠ 唯一允许 window.adc / WindVane / UA 的地方
│   ├── lazada/  {bridge,env,i18n,router,theme,request}.ts
│   ├── ae/      {... 含 ADC / pha_manifest / x-i18n-*}
│   └── <third>/ # 第三渠道,新增即接入
├── pages/       # ✅ 共享一份业务页
│   └── channel-only/  # 独占页(order_pc→ae / event→lazada),按构建 define 裁剪
├── i18n/  styles/  # 主题 css vars + data-channel="ae"
└── entry/       # ✅ 多入口: lazada.tsx / ae.tsx / <third>.tsx

core/ 与 pages/ 零渠道判断；独占页通过路由表 + 构建 __CHANNEL__ define 做 tree-shaking，避免把 AE 的 order_pc 打进 Lazada 包。

4 · 迁移步骤

5 · 第三渠道接入清单

接入一个新渠道 = 在 channels/<new>/ 实现一套适配 + 一个入口，不改 core / pages。

• EnvAdapter：域名 / stage 判定 / cookie domain
• BridgeAdapter：容器类型（WindVane/ADC/PHA/H5）+ 降级
• I18nAdapter：环境来源 / hng 写法 / header / medusaApp
• RequestAdapter：MTOP ttid / 必带头
• RouterAdapter：域名 + 渠道必带参数（pha_manifest）
• ThemeAdapter：主色 / tokens / 组件变体 / 根 class
• 构建入口：entry/<new>.tsx + 一条 channel 产物
• 页面裁剪：声明启用 / 独占页路由表
• 组件库依赖：所需 @ali/ihotel-material-* 子集
• i18n 文案：走 formatjs extract → Medusa
• 埋点监控：ttid / SPM / 渠道维度
• E2E：核心链路用例挂该渠道跑预发

6 · 风险与权衡