如果您对本项目感兴趣,也许您也会喜欢我们的其他优质项目:
一款功能强大的可视化表格组件,支持丰富的图表类型和数据展示。
智能AI协同文档系统,让团队协作更高效。
3. 灵语AI文档
基于AI的智能文档管理平台,提升文档处理效率。
FlowCRM 是一款专为中小团队和个人销售打造的轻量级客户关系管理系统。采用前后端分离架构,使用 JSON 文件存储数据,零数据库依赖,让您可以在几分钟内快速部署并开始使用。
- 🎯 零配置启动 - 无需数据库,使用 JSON 文件存储,开箱即用
- 🚀 现代化技术栈 - NestJS + Vue 3 + TypeScript,代码优雅且易维护
- 🎨 精美UI设计 - 基于腾讯 TDesign 组件库,界面简洁专业
- 📊 可视化数据大屏 - ECharts 驱动的实时数据展示,决策一目了然
- 🔐 完善的权限控制 - JWT 认证,支持多角色权限管理
- 📱 响应式设计 - 完美适配桌面端和移动端
- 🛠️ 易于扩展 - 模块化设计,可轻松添加新功能
- 🚢 一键部署 - 提供自动化部署脚本,3分钟完成生产环境部署
- 📈 小型创业团队的客户管理
- 💼 个人销售的线索跟踪
- 🏢 中小企业的销售流程管理
- 🎓 学习现代前后端开发的实战项目
- 🔧 快速搭建自定义 CRM 系统的基础模板
- NestJS - 企业级 Node.js 框架,提供完善的模块化架构
- TypeScript - 类型安全,降低错误率
- JWT - 安全的用户认证机制
- Passport - 灵活的认证中间件
- class-validator - 强大的数据验证
- Vue 3 - 渐进式前端框架,Composition API
- Vite - 极速开发构建工具
- TDesign Vue Next - 腾讯开源企业级 UI 组件库
- Pinia - Vue 官方推荐的状态管理
- Vue Router - 官方路由管理
- Axios - HTTP 请求库
- ECharts - 强大的数据可视化库
┌─────────────────────────────────────────────────────┐
│ 浏览器客户端 │
│ (Vue 3 + TDesign) │
└──────────────────┬──────────────────────────────────┘
│ HTTP/REST API
│ JWT Token
┌──────────────────┴──────────────────────────────────┐
│ NestJS 后端服务层 │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ 认证模块 │ │ 客户模块 │ │ 线索模块 │ │
│ └────────────┘ └────────────┘ └────────────┘ │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ 跟进模块 │ │ 任务模块 │ │ 统计模块 │ │
│ └────────────┘ └────────────┘ └────────────┘ │
│ │ │
│ JsonStorageService │
└──────────────────────┬──────────────────────────────┘
│ File I/O
┌──────────────────────┴──────────────────────────────┐
│ JSON 文件存储层 │
│ users.json | customers.json | leads.json │
│ activities.json | tasks.json │
└──────────────────────────────────────────────────────┘
- ✅ 用户注册与登录(JWT Token 认证)
- ✅ 角色权限控制(管理员/销售)
- ✅ 基于角色的数据访问控制
- ✅ 客户信息的增删改查
- ✅ 支持按姓名、公司、电话搜索
- ✅ 客户标签分类
- ✅ 客户来源追踪
- ✅ 完整的客户档案
- ✅ 线索创建与流转(未跟进 → 跟进中 → 已成交/无效)
- ✅ 线索阶段可视化看板
- ✅ 意向等级评估
- ✅ 线索与客户关联
- ✅ 快速筛选待跟进线索
- ✅ 记录每次客户沟通(电话/邮件/会议/其他)
- ✅ 时间线方式展示跟进历史
- ✅ 支持添加跟进备注
- ✅ 下次跟进提醒设置
- ✅ 创建待办任务
- ✅ 任务优先级设置(高/中/低)
- ✅ 任务关联客户或线索
- ✅ 任务状态管理(待办/已完成)
- ✅ 到期任务提醒
- ✅ 实时统计客户、线索、任务数据
- ✅ 最近7天数据趋势图
- ✅ 线索阶段分布饼图
- ✅ 任务优先级柱状图
- ✅ 跟进方式雷达图
- ✅ 任务状态环形图
- Node.js: >= 16.0.0
- npm: >= 7.0.0(或使用 yarn/pnpm)
git clone https://github.com/MrXujiang/FlowCRM.git
cd FlowCRM/sourcecd backend
npm install
npm run start:dev后端服务将在 http://localhost:3000 启动
cd ../frontend
npm install
npm run dev前端服务将在 http://localhost:5173 启动
在浏览器打开 http://localhost:5173
- 点击"注册"标签页创建账号
- 登录后即可开始使用所有功能
- 推荐先创建一个管理员账号
FlowCRM/
├── source/
│ ├── backend/ # 后端服务
│ │ ├── src/
│ │ │ ├── auth/ # 认证模块 (JWT)
│ │ │ ├── customers/ # 客户管理模块
│ │ │ ├── leads/ # 线索管理模块
│ │ │ ├── activities/ # 跟进记录模块
│ │ │ ├── tasks/ # 任务管理模块
│ │ │ ├── statistics/ # 数据统计模块
│ │ │ ├── common/ # 公共服务 (JSON存储)
│ │ │ ├── app.module.ts # 应用主模块
│ │ │ └── main.ts # 应用入口
│ │ └── package.json
│ │
│ ├── frontend/ # 前端应用
│ │ ├── src/
│ │ │ ├── api/ # API 接口层
│ │ │ ├── views/ # 页面组件
│ │ │ │ ├── Login.vue # 登录页
│ │ │ │ ├── Dashboard.vue # 数据大屏
│ │ │ │ ├── Customers.vue # 客户管理
│ │ │ │ ├── Leads.vue # 线索管理
│ │ │ │ ├── Activities.vue # 跟进记录
│ │ │ │ └── Tasks.vue # 任务管理
│ │ │ ├── layouts/ # 布局组件
│ │ │ ├── stores/ # Pinia 状态管理
│ │ │ ├── router/ # Vue Router 路由
│ │ │ └── main.ts # 应用入口
│ │ └── package.json
│ │
│ ├── data/ # 数据存储(运行时自动生成)
│ │ ├── users.json # 用户数据
│ │ ├── customers.json # 客户数据
│ │ ├── leads.json # 线索数据
│ │ ├── activities.json # 跟进记录
│ │ └── tasks.json # 任务数据
│ │
│ ├── docs/ # 开发文档
│ │ ├── 01-项目概览.md
│ │ ├── 02-后端开发指南.md
│ │ ├── 03-前端开发指南.md
│ │ ├── 04-数据大屏开发.md
│ │ └── 05-常见问题FAQ.md
│ │
│ ├── deploy/ # 部署脚本和配置
│ │ ├── deploy.sh # 自动化部署脚本
│ │ ├── check.sh # 环境检查脚本
│ │ ├── nginx.conf # Nginx 配置
│ │ ├── DEPLOY.md # 完整部署文档
│ │ └── QUICKSTART.md # 快速部署指南
│ │
│ └── prd.md # 产品需求文档
│
└── README.md # 本文件
FlowCRM 提供了自动化部署脚本,可以快速部署到任何 Linux 服务器。
编辑 source/deploy/nginx.conf 第 2 行:
server_name your-domain.com; # 改为你的域名或IPcd source/deploy
./check.sh # 检查环境
./deploy.sh root@your-server-ip # 开始部署http://your-server-ip
详细部署文档:source/deploy/QUICKSTART.md
采用自研的 JsonStorageService 作为数据持久层,实现了完整的 CRUD 操作:
// 核心特性
- 自动创建数据文件和目录
- 支持泛型类型约束
- 提供分页查询功能
- 线程安全的读写操作
- 易于备份和迁移优势:
- ✅ 无需安装配置数据库
- ✅ 数据文件直接可读可编辑
- ✅ 天然支持版本控制
- ✅ 轻量级,适合中小规模数据
每个业务模块独立封装,遵循单一职责原则:
// 模块结构
Module (模块定义)
├── Controller (路由层)
├── Service (业务逻辑)
└── DTO (数据传输对象)优势:
- ✅ 代码高内聚低耦合
- ✅ 易于单元测试
- ✅ 便于功能扩展
- ✅ 团队协作友好
全面使用 Composition API,代码更加优雅和可维护:
// 组合式函数复用
- 统一的 API 接口层
- 响应式状态管理 (Pinia)
- 自定义 Hooks 复用逻辑
- TypeScript 类型约束优势:
- ✅ 更好的逻辑复用
- ✅ 更清晰的代码组织
- ✅ 更好的 TypeScript 支持
- ✅ 更小的打包体积
基于腾讯 TDesign 构建,提供开箱即用的企业级组件:
// 核心组件
- 表格组件(支持分页、搜索、排序)
- 表单组件(完整的验证机制)
- 对话框组件(统一的交互体验)
- 消息提示(友好的用户反馈)优势:
- ✅ 设计规范统一
- ✅ 无障碍访问支持
- ✅ 主题定制能力
- ✅ 丰富的组件生态
使用 ECharts 实现专业的数据大屏:
// 图表类型
- 折线图:数据趋势分析
- 饼图/环形图:占比分析
- 柱状图:对比分析
- 雷达图:多维度评估特性:
- ✅ 响应式图表自适应
- ✅ 丰富的动画效果
- ✅ 支持数据钻取
- ✅ 移动端完美适配
完整的用户认证和授权体系:
// 安全机制
- JWT Token 无状态认证
- 路由级别的权限守卫
- 基于角色的访问控制 (RBAC)
- 密码加密存储 (bcrypt)优势:
- ✅ 无需 Session 存储
- ✅ 支持分布式部署
- ✅ 细粒度权限控制
- ✅ 安全性高
启动后端服务后访问:http://localhost:3000/api
- 使用 NestJS CLI 生成模块:
cd source/backend/src
nest g module your-module
nest g controller your-module
nest g service your-module- 创建 DTO:
mkdir your-module/dto
touch your-module/dto/your-module.dto.ts- 在
app.module.ts中注册模块
- 使用 ESLint 和 Prettier 格式化代码
- 遵循 TypeScript 严格模式
- 使用有意义的变量名和函数名
- 添加必要的注释
feat: 新功能
fix: 修复 bug
docs: 文档更新
style: 代码格式调整
refactor: 重构代码
test: 测试相关
chore: 构建/工具相关
欢迎所有形式的贡献!无论是报告 bug、提出新功能建议,还是提交代码。
- Fork 本项目
- 创建你的特性分支 (
git checkout -b feature/AmazingFeature) - 提交你的改动 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启一个 Pull Request
- 确保代码通过 ESLint 检查
- 为新功能添加测试用例
- 更新相关文档
- 保持代码风格一致
- ✨ 初始版本发布
- ✅ 完整的客户管理功能
- ✅ 销售线索跟踪
- ✅ 跟进记录管理
- ✅ 任务提醒功能
- ✅ 数据可视化大屏
- ✅ 用户认证与权限管理
- ✅ 自动化部署脚本
本项目采用 MIT 许可证。
感谢以下优秀的开源项目:
- NestJS - 渐进式 Node.js 框架
- Vue.js - 渐进式 JavaScript 框架
- TDesign - 腾讯企业级设计体系
- ECharts - Apache 数据可视化库
- TypeScript - JavaScript 超集
- 提交 Issue: GitHub Issues
- 邮件: xujiang156@qq.com
- 官网: http://no-crm.flowmix.cn
如果这个项目对你有帮助,请给我们一个 Star ⭐️
Made with ❤️ by FlowCRM Team
