@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 文档（src/stories/LiveChatWidget.stories.tsx）。

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）

发布

pnpm run build
npm publish