# 内客宝 - 智能获客管理平台

## 📋 项目简介

内客宝是一个专业的微信获客和流量管理平台，基于 React 技术栈构建。平台提供智能化的客户获取、管理和运营解决方案，集成了多种自动化工具，帮助企业高效管理微信营销活动。

## 🚀 技术栈详解

### 核心框架
- **React 18.2.0** - 现代化的用户界面库
- **TypeScript 4.9.5** - 类型安全的 JavaScript 超集
- **Create React App (CRA) 5.0.1** - React 应用脚手架
- **React Router DOM 6.20.0** - 客户端路由管理

### 构建工具
- **CRACO 7.1.0** - Create React App Configuration Override
  - 支持自定义 webpack 配置
  - 路径别名配置
  - 构建优化

### UI 组件库
- **Radix UI** - 无样式的可访问组件库
  - 完整的组件生态系统（30+ 组件）
  - 优秀的无障碍访问支持
  - 高度可定制
- **Tailwind CSS 3.4.17** - 实用优先的 CSS 框架
  - 响应式设计支持
  - 自定义主题配置
  - 原子化 CSS 类

### 图标和样式
- **Lucide React 0.454.0** - 精美的图标库
- **Tailwind CSS Animate** - CSS 动画库
- **Class Variance Authority** - 组件变体管理
- **Tailwind Merge** - Tailwind 类名合并工具

### 状态管理和表单
- **React Hook Form 7.54.1** - 高性能表单库
- **Zod 3.24.1** - TypeScript 优先的模式验证
- **@hookform/resolvers 3.9.1** - 表单验证解析器

### 数据可视化
- **Recharts** - 基于 React 的图表库
- **Chart.js 4.5.0** - 灵活的图表库
- **@ant-design/plots** - Ant Design 图表组件

### HTTP 请求和数据处理
- **Axios 1.6.0** - HTTP 客户端
- **Crypto-js 4.2.0** - 加密库
- **Date-fns** - 日期处理库
- **XLSX 0.18.5** - Excel 文件处理

### 通知和反馈
- **React Hot Toast 2.5.2** - 轻量级通知库
- **Sonner 1.7.4** - 现代化 Toast 组件

### 高级组件
- **@tanstack/react-table** - 功能强大的表格组件
- **Embla Carousel React 8.5.1** - 轮播组件
- **React Resizable Panels 2.1.7** - 可调整大小的面板
- **Vaul 0.9.6** - 抽屉组件
- **Input OTP 1.4.1** - OTP 输入组件
- **React Day Picker** - 日期选择器

### 开发工具
- **PostCSS 8** - CSS 后处理器
- **Autoprefixer 10.4.20** - CSS 前缀自动添加
- **ESLint** - 代码质量检查
- **Jest** - 单元测试框架
- **Testing Library** - React 测试工具

## 📁 项目结构

```
nkebao/
├── public/                 # 静态资源
├── src/                    # 源代码
│   ├── api/               # API 接口封装
│   ├── components/        # 全局组件
│   │   ├── ui/           # UI 基础组件
│   │   └── icons/        # 图标组件
│   ├── config/           # 配置文件
│   ├── contexts/         # React Context
│   ├── hooks/            # 自定义 Hooks
│   ├── pages/            # 页面组件
│   │   ├── workspace/    # 工作台模块
│   │   │   ├── auto-like/           # 自动点赞
│   │   │   ├── auto-group/          # 自动建群
│   │   │   ├── group-push/          # 群消息推送
│   │   │   ├── moments-sync/        # 朋友圈同步
│   │   │   ├── ai-assistant/        # AI 对话助手
│   │   │   └── traffic-distribution/ # 流量分发
│   │   ├── devices/      # 设备管理
│   │   ├── scenarios/    # 场景管理
│   │   ├── content/      # 内容管理
│   │   └── ...
│   ├── types/            # TypeScript 类型定义
│   ├── utils/            # 工具函数
│   ├── App.tsx           # 应用根组件
│   └── index.tsx         # 应用入口
├── craco.config.js       # CRACO 配置
├── tailwind.config.js    # Tailwind CSS 配置
├── tsconfig.json         # TypeScript 配置
└── package.json          # 项目依赖
```

## 🎯 核心功能模块

### 工作台 (Workspace)
- **自动点赞** - 智能点赞管理和配置
- **自动建群** - 群组自动化创建和管理
- **群消息推送** - 群组消息批量发送
- **朋友圈同步** - 内容同步和发布
- **AI 对话助手** - 智能客服和对话管理
- **流量分发** - 流量分配和策略管理

### 设备管理 (Devices)
- 设备状态监控和配置
- 设备性能分析
- 设备权限管理

### 场景管理 (Scenarios)
- 营销场景配置
- 自动化流程设计
- 场景效果分析

### 内容管理 (Content)
- 内容创建与编辑
- 内容模板管理
- 内容发布调度

### 其他模块
- 用户管理 (Users)
- 订单管理 (Orders)
- 流量池管理 (Traffic Pool)
- 联系人导入 (Contact Import)

## 🛠️ 开发指南

### 环境要求
- **Node.js** 16+ 
- **npm** 或 **yarn**

### 安装依赖
```bash
# 使用 npm
npm install

# 使用 yarn
yarn install
```

### 开发环境启动
```bash
# 使用 npm
npm start

# 使用 yarn
yarn start
```

### 构建生产版本
```bash
# 使用 npm
npm run build

# 使用 yarn
yarn build
```

### 运行测试
```bash
# 使用 npm
npm test

# 使用 yarn
yarn test
```

## 🔧 配置说明

### 路径别名配置
项目使用 CRACO 配置了路径别名：
```javascript
'@': path.resolve(__dirname, 'src'),
'@/components': path.resolve(__dirname, 'src/components'),
'@/api': path.resolve(__dirname, 'src/api'),
'@/types': path.resolve(__dirname, 'src/types'),
'@/hooks': path.resolve(__dirname, 'src/hooks'),
'@/utils': path.resolve(__dirname, 'src/utils'),
'@/styles': path.resolve(__dirname, 'src/styles'),
'@/pages': path.resolve(__dirname, 'src/pages'),
```

### Tailwind CSS 配置
- 自定义字体大小和间距
- 响应式断点配置
- 主题颜色系统

### TypeScript 配置
- 严格模式启用
- 路径映射配置
- JSX 支持

## 📱 响应式设计

项目采用移动优先的响应式设计：
- 支持桌面端、平板端、移动端
- 自适应布局组件
- 触摸友好的交互设计

## 🎨 UI 设计系统

### 设计原则
- 简洁现代的设计风格
- 一致的用户体验
- 无障碍访问支持

### 组件库特点
- 基于 Radix UI 的高质量组件
- 完整的表单组件系统
- 数据展示组件
- 导航和布局组件

## 🔒 安全特性

- 身份验证和授权
- API 请求拦截
- 数据验证和清理
- 加密功能支持

## 📊 性能优化

- 代码分割和懒加载
- 组件优化
- 缓存策略
- 包大小优化

## 🧪 测试策略

- 单元测试 (Jest + Testing Library)
- 组件测试
- 集成测试支持

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目采用 MIT 许可证。

## 📞 联系方式

如有问题或建议，请联系开发团队。

---

**项目名称**: 内客宝 (nkebao2)  
**版本**: 0.1.0  
**技术栈**: React + TypeScript + CRA + Tailwind CSS  
**最后更新**: 2024年12月