@anker-in/campaign-ui

Anker 营销活动页（Campaign）React 组件库，内置积分（Credits）、会员弹窗（MemberPopup）、注册验证（Registration）、AI 对话（Chat / LiveChatWidget）等能力，配套 Shopify/Headless 数据层封装（src/lib）。

本仓库已从 headless-ui monorepo 中独立拆出，不再依赖 workspace，作为单独的包仓库维护和发布。

安装

pnpm add @anker-in/campaign-ui

需要同时安装 peer 依赖：

pnpm add @anker-in/headless-ui crypto-js

目录结构

src/
  components/   业务组件：credits / registration / memberPopup / chat / LiveChatWidget
  templates/    页面级模板：Credits
  lib/          Shopify、购物车、注册等数据层封装（原 @anker-in/lib，现作为源码依赖内置）
  styles/       全局及各组件样式（global.css / chat.css / livechat.css）

快速上手

Chat 组件

// 添加默认样式文件（不添加则是完全无样式组件）
import '@anker-in/campaign-ui/chat.css'

import { Chat } from '@anker-in/campaign-ui'

<Chat
  title="Chat title"
  runtimeUrl="https://xxx.xxx.com"
  shopify_domain="xxx.myshopify.com"
/>

LiveChatWidget 组件

import { LiveChatWidget } from '@anker-in/campaign-ui'
import '@anker-in/campaign-ui/livechat.css'

<LiveChatWidget
  apiBaseUrl="https://beta-api-livechat.anker.com"
  site="www.eufy.com"
  channel_code="web_homepage"
  welcomeMessage="你好！我是 AI 助手"
/>

支持自定义渲染器、品牌色、Logo 等。本仓库没有 Storybook / 本地预览环境（拆分时配置未随仓库带出），调试请将组件接入宿主项目运行。

Credits（积分）

import { CreditsProvider, CreditsBanner, CreditsBenefits, CreditsRedeemList } from '@anker-in/campaign-ui'

也可直接使用页面级模板：

import { Credits } from '@anker-in/campaign-ui'

MemberPopup（会员弹窗）/ Registration（注册验证）

import { MemberPopup, useMemberPopupContext } from '@anker-in/campaign-ui'
import { useRegistration } from '@anker-in/campaign-ui'

productCardRender 自定义产品卡片渲染

详见 PRODUCTCARDRENDER_GUIDE.md。

Tailwind 配置

组件内部使用 cmp- 前缀的 Tailwind class（避免与宿主项目冲突），需要在宿主项目 Tailwind 配置中合并本包的 preset：

// tailwind.config.ts
import campaignUiPreset from '@anker-in/campaign-ui/tailwind.config'

export default {
  presets: [campaignUiPreset],
  // ...
}

本地开发

pnpm install

pnpm run dev          # tsup watch + css watch
pnpm run build        # 构建 ESM/CJS + 类型声明 + CSS
pnpm run type-check    # tsc --noEmit
pnpm run lint          # eslint（不含 src/lib）

发布

本仓库通过 CI（Jenkins）自动发布，测试环境对应 beta 分支，线上环境对应 main 分支。

• beta（测试环境）：合并到该分支即自动触发发布，无需手动改动 package.json 版本号——CI 会基于当前版本号自动生成一个带时间戳的 alpha 版本（如 0.5.22-alpha.1789381484328）并发布到 npm 的 beta tag。发布完成后会通过飞书机器人推送通知，包含最终发布的版本号。
• main（线上环境）：合并前需要手动更新 package.json 中的 version 字段，合并后 CI 会读取该版本号自动发布到 npm 的 latest tag。

手动本地发布（不走 CI 时）

发到 beta（测试环境）：不需要手动改版本号，本地跑一次 bump 脚本生成临时 alpha 版本再发布：

node ./scripts/bump-beta-version.cjs   # 自动生成形如 0.5.22-alpha.<timestamp> 的版本号
pnpm run build
npm publish --tag beta

发布完成后建议 git checkout package.json 撤销本地这次版本号改动，避免误提交。

发到线上（main，latest tag）：先手动把 package.json 的 version 改成正式版本号，再发布：

# 手动编辑 package.json 的 version 字段
pnpm run build
npm publish