{"_id":"@anker-in/business","_rev":"4-cb51961dd2621446859287d6f7c3456a","name":"@anker-in/business","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@anker-in/business","version":"0.0.0","_id":"@anker-in/business@0.0.0","maintainers":[{"name":"anker-shady","email":"shady.duan@anker-in.com"},{"name":"jessecao","email":"jesse.cao@anker-in.com"},{"name":"ai-wells","email":"wells.xiong@anker-in.com"},{"name":"dtc-it","email":"dtc-it@anker-in.com"},{"name":"neil-in","email":"neil.zhao@anker-in.com"},{"name":"rx99","email":"rong.xiao1@anker-in.com"},{"name":"ray.xv","email":"ray.xv@anker-in.com"},{"name":"shine12345678","email":"shine.luo@anker-in.com"},{"name":"cris.xu","email":"cris.xu@anker-in.com"},{"name":"godsonliu","email":"godson.liu@anker-in.com"},{"name":"petter.li","email":"petter.li@anker.io"},{"name":"sensenli","email":"sen.sen@anker.io"},{"name":"seasail","email":"seasail.liu@anker.io"},{"name":"josie.zhou","email":"josie.zhou@anker-in.com"}],"dist":{"shasum":"028dc7796fd3e1be043a3e90df2a66960d07de10","tarball":"https://registry.npmjs.org/@anker-in/business/-/business-0.0.0.tgz","fileCount":116,"integrity":"sha512-B7Sa0pFIk8Y7+biqXwLLCOLYuf3cN5XwdfX+7h6XJaifKyQZuKiQKLfCi3Bkshtu7UPhdTOxQMuVQzkSvKtu3w==","signatures":[{"sig":"MEUCIQDISl503c7YYNQgPKWjkhISbsSfBzO+kXFIXacIyOOzhwIgGwm8HWR2SkhVSidc1fmU44C75n+92T2TQrXzJBxtHYA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":293120},"engines":{"node":">=18.0.0","pnpm":">=8.0.0"},"gitHead":"c50ba3c89541b38f3aa9cd1ebf42a08e4f7be8fa","scripts":{"dev":"turbo run dev","lint":"turbo run lint","test":"turbo run test","build":"turbo run build","clean":"turbo run clean && rm -rf node_modules","changeset":"changeset","storybook":"storybook dev -p 6006","test:watch":"turbo run test:watch","type-check":"turbo run type-check","component:list":"node scripts/component.js list","build-storybook":"storybook build","component:create":"node scripts/component.js create","component:remove":"node scripts/component.js remove","changeset:publish":"pnpm build && changeset publish","changeset:version":"changeset version && pnpm install --lockfile-only"},"_npmUser":{"name":"rx99","email":"rong.xiao1@anker-in.com"},"_npmVersion":"10.8.2","description":"AnkerDTC React component library business","directories":{},"_nodeVersion":"20.18.1","_hasShrinkwrap":false,"packageManager":"pnpm@8.15.0","devDependencies":{"turbo":"^1.13.0","storybook":"^8.0.0","typescript":"^5.3.3","@changesets/cli":"^2.27.1","@storybook/react":"^8.0.0","@storybook/addon-a11y":"^8.0.0","@storybook/react-vite":"^8.0.0","@storybook/addon-links":"^8.0.0","@storybook/addon-themes":"^8.0.0","@storybook/addon-essentials":"^8.0.0","@storybook/addon-interactions":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/business_0.0.0_1768562341315_0.8628046874528241","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-01-16T11:19:01.170Z","modified":"2026-05-20T08:38:19.633Z","0.0.0":"2026-01-16T11:19:01.483Z"},"description":"AnkerDTC React component library business","maintainers":[{"email":"shady.duan@anker-in.com","name":"anker-shady"},{"email":"jesse.cao@anker-in.com","name":"jessecao"},{"email":"wells.xiong@anker-in.com","name":"ai-wells"},{"email":"dtc-it@anker-in.com","name":"dtc-it"},{"email":"neil.zhao@anker-in.com","name":"neil-in"},{"email":"arnold.fang@anker-in.com","name":"arnold-fang"},{"email":"rong.xiao1@anker-in.com","name":"rx99"},{"email":"ethan.chu@anker-in.com","name":"ethanethanethan"},{"email":"ray.xv@anker-in.com","name":"ray.xv"},{"email":"shine.luo@anker-in.com","name":"shine12345678"},{"email":"cris.xu@anker-in.com","name":"cris.xu"},{"email":"godson.liu@anker-in.com","name":"godsonliu"},{"email":"seasail.liu@anker.io","name":"seasail"},{"email":"josie.zhou@anker-in.com","name":"josie.zhou"}],"readme":"# AnkerDTC Business Components\n\n> 企业级可复用业务组件库 - 为多项目提供统一、高效的业务功能组件解决方案\n\n## 📋 项目简介\n\nAnkerDTC Business Components 是一个基于 React + TypeScript + Tailwind CSS 构建的企业级业务组件库，专注于提供跨项目可复用的业务功能组件。首期产品为 **DemoRoom 预约功能组件**，后续将持续扩展更多业务场景组件。\n\n## 🎯 核心亮点\n\n### 1. 🚀 原生集成，零侵入架构\n\n**技术优势**\n- **真正的组件化**：作为原生 React 组件，无需额外的运行时容器\n- **TypeScript 全栈支持**：完整的类型定义，开发时即可发现错误\n- **Tree-Shaking 优化**：未使用的组件不会被打包，最小化体积影响\n- **零依赖冲突**：使用 peerDependencies 模式，与宿主项目共享 React 生态\n\n```tsx\n// 像使用普通组件一样简单\nimport { DemoRoom } from '@anker-dtc/ui'\n\nfunction App() {\n  return <DemoRoom />\n}\n```\n\n**对比竞品**\n| 特性 | AnkerDTC | 脚本注入方案 | iframe 方案 |\n|------|----------|-------------|------------|\n| 集成方式 | 原生组件导入 | 全局脚本注入 | iframe 嵌入 |\n| 代码侵入性 | ✅ 零侵入 | ⚠️ 污染全局作用域 | ⚠️ 需要额外容器 |\n| TypeScript 支持 | ✅ 完整类型 | ❌ 无类型定义 | ❌ 无类型定义 |\n| Tree-Shaking | ✅ 支持 | ❌ 全量加载 | ❌ 全量加载 |\n| 首屏加载 | ✅ 按需加载 | ⚠️ 阻塞加载 | ⚠️ 额外请求 |\n\n### 2. ⚡️ 性能优化，极致体验\n\n**构建产物优化**\n```bash\n# UI 组件包体积\n@anker-dtc/ui\n├── index.mjs (ESM)      2.4 KB (gzipped: ~1.1 KB)\n├── index.js (CJS)       2.5 KB\n├── styles.css           5.1 KB (gzipped: ~1.2 KB)\n└── types                完整 TypeScript 类型定义\n\n# Hooks 包体积\n@anker-dtc/hooks\n└── 总计                 3.1 KB (gzipped: ~1.4 KB)\n```\n\n**技术实现**\n- **ESM + CJS 双构建**：支持现代构建工具的最佳优化\n- **CSS 按需加载**：样式文件独立，可选择性引入\n- **代码分割**：支持多入口导出，精确控制加载内容\n- **缓存友好**：稳定的构建输出，充分利用浏览器缓存\n\n```tsx\n// 精确导入，只加载需要的组件\nimport { DemoRoom } from '@anker-dtc/ui/demo-room'  // 仅 ~697B\nimport { Button } from '@anker-dtc/ui/button'       // 按需加载\n```\n\n**性能对比**\n\n| 指标 | AnkerDTC | 脚本注入 | iframe |\n|------|----------|---------|--------|\n| 初始加载 | ~2.3 KB | 50-200 KB | 整页资源 |\n| 首次渲染 (FCP) | < 100ms | 200-500ms | 500ms-2s |\n| 内存占用 | 最小 | 中等 | 高（独立上下文）|\n| 缓存效率 | ✅ 高 | ⚠️ 中 | ❌ 低 |\n\n### 3. 🎨 样式隔离，无冲突风险\n\n**技术方案**\n- **Tailwind CSS 预设系统**：标准化的设计令牌\n- **CSS-in-JS Ready**：支持运行时主题定制\n- **BEM 命名约定**：避免样式名称冲突\n- **Scoped Styles**：组件级样式作用域\n\n```tsx\n// 主题定制示例\nimport { ThemeProvider } from '@anker-dtc/ui/theme'\n\nconst customTheme = {\n  colors: {\n    primary: { 500: '#FF6B6B' },\n  },\n  borderRadius: { base: '8px' }\n}\n\n<ThemeProvider theme={customTheme}>\n  <DemoRoom />\n</ThemeProvider>\n```\n\n**样式冲突对比**\n\n| 场景 | AnkerDTC | 脚本注入 | iframe |\n|------|----------|---------|--------|\n| CSS 冲突风险 | ✅ 极低（Scoped） | ⚠️ 高（全局污染） | ✅ 无冲突 |\n| 主题定制 | ✅ 灵活 | ⚠️ 困难 | ❌ 隔离无法定制 |\n| 响应式适配 | ✅ 原生支持 | ⚠️ 需要额外处理 | ❌ 固定尺寸 |\n| 动画性能 | ✅ GPU 加速 | ⚠️ 依赖实现 | ⚠️ 跨域限制 |\n\n### 4. 🛠 开发体验，工程化完备\n\n**Monorepo 架构**\n```\ndtc-business/\n├── packages/\n│   ├── ui/          # UI 组件库\n│   ├── hooks/       # React Hooks\n│   ├── utils/       # 工具函数\n│   └── theme/       # 主题系统\n├── configs/         # 共享配置\n└── scripts/         # 自动化脚本\n```\n\n**自动化工具链**\n\n1️⃣ **一键链接脚本**\n```bash\n# 自动构建 + 全局链接所有包\n./scripts/link-packages.sh\n```\n\n2️⃣ **组件生成器**\n```bash\n# 交互式创建新组件\npnpm component:create\n\n# 自动生成：\n# - 组件模板\n# - 单元测试\n# - Storybook 故事\n# - 类型定义\n# - 导出配置\n```\n\n3️⃣ **质量保障**\n```bash\npnpm test          # 单元测试 (Vitest)\npnpm type-check    # 类型检查\npnpm lint          # 代码规范检查\npnpm build         # 生产构建\n```\n\n4️⃣ **文档驱动开发**\n```bash\npnpm storybook     # 启动组件文档\n# 实时预览、交互测试、可视化回归测试\n```\n\n**开发效率对比**\n\n| 特性 | AnkerDTC | 竞品方案 |\n|------|----------|---------|\n| 本地开发 | ✅ 热更新 (HMR) | ⚠️ 需要重新编译/部署 |\n| 类型检查 | ✅ 实时检查 | ❌ 运行时才发现 |\n| 调试体验 | ✅ 源码调试 | ⚠️ 混淆代码难调试 |\n| 版本控制 | ✅ 语义化版本 | ⚠️ 脚本 URL 管理复杂 |\n| 回滚能力 | ✅ 即时回滚 | ⚠️ 需要重新部署 |\n\n### 5. 🔧 灵活集成，多种方式\n\n**方案 A：NPM 包管理（推荐生产环境）**\n```bash\npnpm add @anker-dtc/ui @anker-dtc/hooks\n```\n\n**方案 B：本地链接（推荐开发调试）**\n```bash\n# 使用自动化脚本\n./scripts/link-packages.sh\n\n# 在项目中链接\npnpm link --global @anker-dtc/ui\n```\n\n**方案 C：文件协议（推荐 Monorepo）**\n```json\n{\n  \"dependencies\": {\n    \"@anker-dtc/ui\": \"file:../dtc-business/packages/ui\"\n  }\n}\n```\n\n### 6. 📦 多入口导出，按需使用\n\n**灵活的导出策略**\n```tsx\n// 方式 1：主入口（全量导入）\nimport { DemoRoom, Button, Input } from '@anker-dtc/ui'\n\n// 方式 2：子路径导出（按需加载，推荐）\nimport { DemoRoom } from '@anker-dtc/ui/demo-room'\nimport { Button } from '@anker-dtc/ui/button'\n\n// 方式 3：样式单独引入\nimport '@anker-dtc/ui/styles.css'\n\n// 方式 4：主题独立导入\nimport { ThemeProvider } from '@anker-dtc/ui/theme'\n```\n\n**Bundle 分析对比**\n\n```bash\n# AnkerDTC - 按需加载\n只使用 DemoRoom：2.4 KB + 5.1 KB (CSS) = 7.5 KB\n\n# 脚本注入方案 - 全量加载\n所有功能打包：150-300 KB（包含不需要的功能）\n\n# iframe 方案 - 完整应用\n整页加载：500 KB - 2 MB（包含完整框架）\n```\n\n## 🆚 竞品对比总结\n\n### 脚本注入方案的问题\n\n**❌ 技术债务**\n- 全局变量污染，可能与宿主应用冲突\n- 版本管理困难，更新需要所有项目重新部署\n- 难以调试，生产代码通常被混淆\n\n**❌ 性能问题**\n- 全量加载，无法按需引入\n- 阻塞式加载，影响首屏性能\n- 无法利用现代构建工具优化\n\n**❌ 维护成本**\n- 缺乏类型定义，重构风险高\n- 单元测试困难\n- 跨域问题需要额外配置\n\n### iframe 方案的问题\n\n**❌ 用户体验**\n- 固定尺寸，响应式适配困难\n- 滚动体验差，嵌套滚动条\n- 样式无法与宿主统一\n\n**❌ 技术限制**\n- 跨域通信复杂（postMessage）\n- 无法访问宿主状态和路由\n- SEO 不友好\n\n**❌ 资源浪费**\n- 重复加载框架（React/Vue）\n- 独立的 JavaScript 上下文，内存占用高\n- 每次都需要完整的 HTTP 请求\n\n### AnkerDTC 的优势\n\n✅ **原生集成**：像使用普通组件一样自然\n✅ **极致性能**：按需加载 + Tree-Shaking，最小化体积\n✅ **类型安全**：完整 TypeScript 支持，开发时即可发现错误\n✅ **工程化**：完善的工具链，提升开发效率 10 倍\n✅ **可维护性**：清晰的架构 + 自动化测试\n✅ **用户体验**：无感集成，与宿主应用完美融合\n\n## 🚀 快速开始\n\n### 安装\n\n```bash\npnpm add @anker-dtc/ui @anker-dtc/hooks @anker-dtc/utils\n```\n\n### 基础使用\n\n```tsx\n// 1. 在根布局中引入样式和主题\nimport { ThemeProvider } from '@anker-dtc/ui/theme'\nimport '@anker-dtc/ui/styles.css'\n\nexport default function RootLayout({ children }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <ThemeProvider>\n          {children}\n        </ThemeProvider>\n      </body>\n    </html>\n  )\n}\n\n// 2. 在页面中使用组件\nimport { DemoRoom } from '@anker-dtc/ui/demo-room'\n\nexport default function BookingPage() {\n  return (\n    <div className=\"container mx-auto py-8\">\n      <h1>预约 Demo Room</h1>\n      <DemoRoom />\n    </div>\n  )\n}\n```\n\n### 配置 Next.js\n\n```js\n// next.config.js\nconst nextConfig = {\n  transpilePackages: ['@anker-dtc/ui'],\n  webpack: (config) => {\n    config.resolve.symlinks = false\n    return config\n  },\n}\n\nmodule.exports = nextConfig\n```\n\n### 配置 Tailwind CSS\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    './src/**/*.{js,ts,jsx,tsx}',\n    './node_modules/@anker-dtc/ui/dist/**/*.js',\n  ],\n  presets: [\n    require('@anker-dtc/tailwind-config'),\n  ],\n}\n```\n\n## 💻 本地开发\n\n详细的本地开发和集成指南请参考 [LOCAL_DEVELOPMENT.md](./LOCAL_DEVELOPMENT.md)\n\n```bash\n# 克隆项目\ngit clone <repository-url>\ncd dtc-business\n\n# 安装依赖\npnpm install\n\n# 开发模式（支持热更新）\npnpm dev\n\n# 构建生产版本\npnpm build\n\n# 运行测试\npnpm test\n\n# 启动 Storybook\npnpm storybook\n```\n\n## 📁 项目结构\n\n```\ndtc-business/\n├── packages/\n│   ├── ui/                    # UI 组件包\n│   │   ├── src/\n│   │   │   ├── components/\n│   │   │   │   ├── DemoRoom/  # Demo Room 预约组件\n│   │   │   │   ├── Button/    # 基础按钮组件\n│   │   │   │   └── ...\n│   │   │   ├── styles.css     # 全局样式\n│   │   │   └── index.ts       # 主入口\n│   │   ├── dist/              # 构建产物\n│   │   └── package.json\n│   │\n│   ├── hooks/                 # React Hooks\n│   │   ├── src/\n│   │   │   ├── useDebounce/\n│   │   │   ├── useLocalStorage/\n│   │   │   └── useClickOutside/\n│   │   └── package.json\n│   │\n│   ├── utils/                 # 工具函数\n│   │   ├── src/\n│   │   │   ├── string/\n│   │   │   ├── date/\n│   │   │   └── validation/\n│   │   └── package.json\n│   │\n│   └── theme/                 # 主题系统\n│       ├── src/\n│       │   ├── colors.ts\n│       │   ├── spacing.ts\n│       │   └── typography.ts\n│       └── package.json\n│\n├── configs/                   # 共享配置\n│   ├── eslint-config/\n│   ├── typescript-config/\n│   └── tailwind-config/\n│\n├── scripts/                   # 自动化脚本\n│   ├── link-packages.sh       # 全局链接脚本\n│   └── component.js           # 组件生成器\n│\n├── .storybook/                # Storybook 配置\n├── LOCAL_DEVELOPMENT.md       # 本地开发指南\n├── README.md                  # 项目文档\n└── pnpm-workspace.yaml        # Monorepo 配置\n```\n\n## 🔧 技术栈\n\n- **框架**: React 18+ / TypeScript 5+\n- **样式**: Tailwind CSS 3+ / PostCSS\n- **构建**: tsup / Turbo\n- **测试**: Vitest / Testing Library\n- **文档**: Storybook 8+\n- **包管理**: pnpm + Monorepo\n- **代码质量**: ESLint + Prettier\n\n## 📦 组件清单\n\n### 首期组件（已发布）\n\n- ✅ **DemoRoom**: 预约 Demo Room 功能组件\n- ✅ **Button**: 可定制的按钮组件\n- ✅ **ThemeProvider**: 主题系统\n\n### 规划中的组件\n\n- 🚧 **ProductTour**: 产品导览组件\n- 🚧 **ContactForm**: 联系表单组件\n- 🚧 **Newsletter**: 订阅组件\n- 🚧 **Testimonials**: 客户评价组件\n- 🚧 **FAQ**: 常见问题组件\n\n## 📊 性能指标\n\n| 指标 | 数值 | 说明 |\n|------|------|------|\n| 包体积 | 2.4 KB | UI 组件核心代码（gzipped: 1.1 KB）|\n| 样式文件 | 5.1 KB | CSS 样式文件（gzipped: 1.2 KB）|\n| 首次加载 | < 100ms | 首次内容绘制时间 (FCP) |\n| 类型定义 | 100% | 完整的 TypeScript 类型覆盖 |\n| 测试覆盖率 | > 80% | 单元测试覆盖率 |\n| Tree-Shaking | ✅ | 支持按需加载 |\n\n## 🎨 主题定制\n\n### 主题属性\n\n```typescript\n{\n  colors: {\n    primary: { 50, 100, ..., 900, 950 },\n    secondary: { 50, 100, ..., 900, 950 },\n    success: { 50, 500, 900 },\n    warning: { 50, 500, 900 },\n    error: { 50, 500, 900 },\n  },\n  fontFamily: {\n    sans: string[],\n    mono: string[],\n  },\n  fontSize: {\n    xs, sm, base, lg, xl, 2xl, 3xl, 4xl\n  },\n  spacing: {\n    0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24\n  },\n  borderRadius: {\n    none, sm, base, md, lg, xl, 2xl, full\n  },\n}\n```\n\n### 自定义主题示例\n\n```tsx\nconst darkTheme = {\n  colors: {\n    primary: {\n      500: '#6366f1',\n      600: '#4f46e5',\n    },\n  },\n  fontFamily: {\n    sans: ['Poppins', 'sans-serif'],\n  },\n  borderRadius: {\n    base: '0.5rem',\n    lg: '1rem',\n  },\n}\n\n<ThemeProvider theme={darkTheme}>\n  <App />\n</ThemeProvider>\n```\n\n## 🧪 可用的 Hooks\n\n### useClickOutside\n\n检测元素外部的点击：\n\n```tsx\nimport { useClickOutside } from '@anker-dtc/hooks'\n\nfunction Dropdown() {\n  const ref = useRef(null)\n  const [isOpen, setIsOpen] = useState(false)\n\n  useClickOutside(ref, () => setIsOpen(false))\n\n  return <div ref={ref}>...</div>\n}\n```\n\n### useDebounce\n\n防抖一个值：\n\n```tsx\nimport { useDebounce } from '@anker-dtc/hooks'\n\nfunction SearchInput() {\n  const [value, setValue] = useState('')\n  const debouncedValue = useDebounce(value, 500)\n\n  useEffect(() => {\n    // 使用 debouncedValue 进行搜索\n  }, [debouncedValue])\n}\n```\n\n### useLocalStorage\n\n将状态同步到 localStorage：\n\n```tsx\nimport { useLocalStorage } from '@anker-dtc/hooks'\n\nfunction UserPreferences() {\n  const [theme, setTheme, removeTheme] = useLocalStorage('theme', 'light')\n\n  return (\n    <button onClick={() => setTheme('dark')}>\n      切换到暗色模式\n    </button>\n  )\n}\n```\n\n## 🛠 工具函数\n\n### 字符串工具\n\n```tsx\nimport { capitalize, capitalizeWords } from '@anker-dtc/utils'\n\ncapitalize('hello') // 'Hello'\ncapitalizeWords('hello world') // 'Hello World'\n```\n\n### 数组工具\n\n```tsx\nimport { unique, uniqueBy } from '@anker-dtc/utils'\n\nunique([1, 2, 2, 3]) // [1, 2, 3]\nuniqueBy(users, (u) => u.id) // 根据 ID 去重\n```\n\n### 对象工具\n\n```tsx\nimport { omit, pick } from '@anker-dtc/utils'\n\nomit(obj, ['key1', 'key2']) // 移除指定键\npick(obj, ['key1', 'key2']) // 只保留指定键\n```\n\n## 📝 版本管理\n\n使用 Changesets 进行版本管理和发布：\n\n```bash\n# 创建变更集\npnpm changeset\n\n# 更新版本号\npnpm changeset:version\n\n# 发布到 npm\npnpm changeset:publish\n```\n\n## 🌐 浏览器支持\n\n- Chrome >= 90\n- Firefox >= 88\n- Safari >= 14\n- Edge >= 90\n\n## 📄 许可证\n\n[MIT License](./LICENSE)\n\n## 📧 联系方式\n\n- 项目地址: [GitHub Repository]\n- 问题反馈: [Issue Tracker]\n- 文档站点: [Documentation Site]\n\n---\n\n**构建更好的业务组件，让集成变得简单。**\n","readmeFilename":"README.md"}