内客宝 - 智能获客管理平台
📋 项目简介
内客宝是一个专业的微信获客和流量管理平台，基于 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
安装依赖
# 使用 npm
npm install
# 使用 yarn
yarn install
开发环境启动
# 使用 npm
npm start
# 使用 yarn
yarn start
构建生产版本
# 使用 npm
npm run build
# 使用 yarn
yarn build
运行测试
# 使用 npm
npm test
# 使用 yarn
yarn test
🔧 配置说明
路径别名配置
项目使用 CRACO 配置了路径别名：
'@': 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)
- 组件测试
- 集成测试支持
🤝 贡献指南
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 创建 Pull Request
📄 许可证
本项目采用 MIT 许可证。
📞 联系方式
如有问题或建议，请联系开发团队。
项目名称: 内客宝 (nkebao2)
版本: 0.1.0
技术栈: React + TypeScript + CRA + Tailwind CSS
最后更新: 2024 年 12 月