From 577381bc348446221f6490ab7b43a2c7b10c3eaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?= =?UTF-8?q?=E5=B9=B3?= Date: Tue, 8 Jul 2025 09:52:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?= =?UTF-8?q?=E5=90=8C=E6=AD=A5=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Cunkebao/README.md | 191 +++++++++++++ nkebao/README.md | 266 ++++++++++++++++++ .../pages/workspace/auto-like/AutoLike.tsx | 13 +- 3 files changed, 463 insertions(+), 7 deletions(-) create mode 100644 Cunkebao/README.md create mode 100644 nkebao/README.md diff --git a/Cunkebao/README.md b/Cunkebao/README.md new file mode 100644 index 00000000..0532c5f3 --- /dev/null +++ b/Cunkebao/README.md @@ -0,0 +1,191 @@ +# 存客宝 - 智能获客管理平台 + +## 📋 项目简介 + +存客宝是一个专业的微信获客和流量管理平台，提供智能化的客户获取、管理和运营解决方案。平台集成了多种自动化工具，帮助企业高效管理微信营销活动。 + +## 🚀 技术栈 + +### 前端框架 +- **Next.js 15.3.5** - React 全栈框架，支持 SSR/SSG +- **React 19.1.0** - 用户界面库 +- **TypeScript 5** - 类型安全的 JavaScript 超集 + +### UI 组件库 +- **shadcn/ui** - 基于 Radix UI 的现代化组件库 +- **Tailwind CSS 3.4.17** - 实用优先的 CSS 框架 +- **Lucide React** - 精美的图标库 +- **Framer Motion** - 动画库 + +### 状态管理与表单 +- **React Hook Form** - 高性能表单库 +- **Zod** - TypeScript 优先的模式验证 +- **@hookform/resolvers** - 表单验证解析器 + +### 数据可视化 +- **Recharts** - 基于 React 的图表库 +- **Chart.js** - 灵活的图表库 + +### 开发工具 +- **ESLint** - 代码质量检查 +- **PostCSS** - CSS 后处理器 +- **Autoprefixer** - CSS 前缀自动添加 + +## 📁 项目结构 + +``` +Cunkebao/ +├── app/ # Next.js App Router 页面 +│ ├── api/ # API 路由 +│ ├── components/ # 页面级组件 +│ ├── workspace/ # 工作台模块 +│ ├── scenarios/ # 场景管理 +│ ├── devices/ # 设备管理 +│ ├── content/ # 内容管理 +│ └── ... +├── components/ # 全局组件 +│ ├── ui/ # shadcn/ui 组件 +│ └── ... +├── lib/ # 工具库 +│ ├── api/ # API 封装 +│ └── utils.ts # 通用工具函数 +├── hooks/ # 自定义 Hooks +├── types/ # TypeScript 类型定义 +└── public/ # 静态资源 +``` + +## 🎯 核心功能模块 + +### 工作台 (Workspace) +- **自动点赞** - 智能点赞管理 +- **朋友圈同步** - 内容同步工具 +- **群消息推送** - 群组消息管理 +- **AI 对话助手** - 智能客服系统 +- **自动建群** - 群组自动化管理 +- **流量分发** - 流量分配策略 + +### 设备管理 (Devices) +- 设备状态监控 +- 设备配置管理 +- 设备性能分析 + +### 场景管理 (Scenarios) +- 营销场景配置 +- 自动化流程设计 +- 场景效果分析 + +### 内容管理 (Content) +- 内容创建与编辑 +- 内容模板管理 +- 内容发布调度 + +### 用户管理 (Users) +- 用户权限管理 +- 角色分配 +- 用户行为分析 + +## 🛠️ 开发指南 + +### 环境要求 +- Node.js 18+ +- npm 或 pnpm + +### 安装依赖 +```bash +npm install +# 或 +pnpm install +``` + +### 开发环境启动 +```bash +npm run dev +# 或 +pnpm dev +``` + +### 构建生产版本 +```bash +npm run build +npm start +``` + +### 代码检查 +```bash +npm run lint +``` + +## 🔧 配置说明 + +### 环境变量 +创建 `.env.local` 文件： +```env +NEXT_PUBLIC_API_BASE_URL=your_api_base_url +CUSTOM_KEY=your_custom_key +``` + +### Next.js 配置 +- 支持图片优化和多种格式 +- 配置了 API 代理和 CORS +- 启用了 SWC 压缩 +- 支持包分析工具 + +### Tailwind CSS 配置 +- 支持暗色模式 +- 自定义颜色系统 +- 响应式设计支持 + +## 📱 响应式设计 + +项目采用移动优先的响应式设计： +- 支持桌面端、平板端、移动端 +- 自适应布局组件 +- 触摸友好的交互设计 + +## 🎨 UI 设计系统 + +### 设计原则 +- 简洁现代的设计风格 +- 一致的用户体验 +- 无障碍访问支持 + +### 组件库 +- 50+ 个预构建组件 +- 完整的表单组件 +- 数据展示组件 +- 导航和布局组件 + +## 🔒 安全特性 + +- 身份验证和授权 +- API 请求拦截 +- 数据验证和清理 +- CORS 配置 + +## 📊 性能优化 + +- 代码分割和懒加载 +- 图片优化 +- 缓存策略 +- 包大小优化 + +## 🤝 贡献指南 + +1. Fork 项目 +2. 创建功能分支 +3. 提交更改 +4. 推送到分支 +5. 创建 Pull Request + +## 📄 许可证 + +本项目采用 MIT 许可证。 + +## 📞 联系方式 + +如有问题或建议，请联系开发团队。 + +--- + +**版本**: 0.1.0 +**最后更新**: 2024年12月 \ No newline at end of file diff --git a/nkebao/README.md b/nkebao/README.md new file mode 100644 index 00000000..be60268f --- /dev/null +++ b/nkebao/README.md @@ -0,0 +1,266 @@ +# 内客宝 - 智能获客管理平台 + +## 📋 项目简介 + +内客宝是一个专业的微信获客和流量管理平台，基于 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月 \ No newline at end of file diff --git a/nkebao/src/pages/workspace/auto-like/AutoLike.tsx b/nkebao/src/pages/workspace/auto-like/AutoLike.tsx index fa74ac57..dbe28ec9 100644 --- a/nkebao/src/pages/workspace/auto-like/AutoLike.tsx +++ b/nkebao/src/pages/workspace/auto-like/AutoLike.tsx @@ -1,8 +1,7 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import { Plus, - Filter, Search, RefreshCw, MoreVertical, @@ -52,7 +51,7 @@ export default function AutoLike() { const [loading, setLoading] = useState(false); // 获取任务列表 - const fetchTasks = async () => { + const fetchTasks = useCallback(async () => { setLoading(true); try { const list = await fetchAutoLikeTasks(); @@ -62,11 +61,11 @@ export default function AutoLike() { } finally { setLoading(false); } - }; + }, [toast]); useEffect(() => { fetchTasks(); - }, []); + }, [fetchTasks]); const toggleExpand = (taskId: string) => { setExpandedTaskId(expandedTaskId === taskId ? null : taskId); @@ -349,8 +348,8 @@ export default function AutoLike() { value={(task.likeCount / task.maxLikesPerDay) * 100} className="h-2" /> - - + + )}