# mini-crm

**Repository Path**: jackhome/mini-crm

## Basic Information

- **Project Name**: mini-crm
- **Description**: AI开发的简单CRM，效果很不错，导入导出功能都是齐全的，sqlite存储，不依赖任何数据环境，基本上够用。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-21
- **Last Updated**: 2026-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Mini CRM - 简约客户管理系统

## 功能预览
![输入图片说明](%E9%A6%96%E9%A1%B5.png)

## 项目分析

这是一个单文件前端 CRM 应用，基于浏览器 localStorage 存储数据，无需后端即可运行。

### 项目概况

| 项目 | 说明 |
|------|------|
| **项目类型** | 单页前端 CRM 应用 |
| **技术栈** | 纯 HTML + 原生 JavaScript + Tailwind CSS (CDN) |
| **数据存储** | 浏览器 `localStorage` 本地存储 |
| **文件结构** | 单个 `index.html` 文件 (约 1500 行代码) |
| **部署方式** | 直接打开 HTML 文件即可运行，无需后端 |

### 功能模块

系统包含 6 个主要功能模块：

1. **仪表盘** - 数据概览
   - 统计：客户数、销售机会数、成交金额、产品数
   - 销售机会阶段分布进度条
   - 最近新增客户、最近跟进记录展示

2. **客户管理** - CRUD 操作
   - 客户信息：名称、公司、电话、邮箱、地址
   - 支持搜索、查看详情、编辑、删除
   - 删除客户时会级联删除关联的联系人、机会、跟进记录

3. **联系人管理** - 关联客户
   - 每个客户可以添加多个联系人
   - 联系人信息：姓名、职位、电话、邮箱

4. **销售机会** - 销售跟踪
   - 四个阶段：潜在 → 跟进中 → 成交 → 丢单
   - 关联客户和产品
   - 记录预计金额、预计成交日期、描述

5. **产品管理** - 产品目录
   - 产品信息：名称、价格、单位、描述
   - 在创建销售机会时可以选择产品并自动填充价格

6. **跟进记录** - 沟通历史
   - 跟进方式：电话、邮件、会面、其他
   - 每条记录包含日期和内容
   - 可按客户查看，也可查看所有记录

### 代码架构

```
├── 存储层 (103-201行)
│   ├── getDB/saveDB - 读写 localStorage
│   ├── CRUD 操作 - getAll/getById/create/update/remove/query
│   └── cascadeDeleteCustomer - 级联删除
│
├── 工具函数 (203-242行)
│   ├── 日期/金额格式化
│   ├── showToast - 消息提示
│   └── openModal/closeModal - 模态框管理
│
├── 路由/渲染 (244-280行)
│   ├── currentView - 当前视图
│   ├── renderView - 动态渲染对应模块
│   └── setActiveNav - 设置导航高亮
│
└── 各模块实现
    ├── 仪表盘 (282-420行)
    ├── 客户管理 (422-745行)
    ├── 联系人管理 (747-841行)
    ├── 销售机会 (843-1065行)
    ├── 跟进记录 (1067-1192行)
    └── 产品管理 (1194-1344行)
```

### 特点

✅ **优点**：
- 零依赖，无需安装，直接运行
- 响应式设计，适配移动端
- 数据本地存储，隐私安全
- 自带示例数据，开箱即用
- 代码结构清晰，易于理解和修改

⚠️ **局限**：
- 数据仅存在浏览器本地，清除缓存会丢失
- 不支持多用户、多设备同步
- 没有后端服务，不支持数据导出/备份

### 使用方式

直接在浏览器打开 `index.html` 即可使用。首次打开会自动初始化示例数据。

## 修复记录

### 2026-03-20 - 侧边栏切换修复

**问题**：移动端点击侧边栏切换按钮后，侧边栏无法正确隐藏。原因是 Tailwind CSS 的 `hidden` 类优先级低于内联样式，导致 `style.display` 覆盖了 class 状态。

**修复方案**：修改 `toggleSidebar()` 函数，直接操作 `style.display` 而不依赖 class，确保点击能正确切换显示/隐藏。

**修改位置**：`index.html` 第 1492-1501 行

## V2 版本 - 数据库持久化 (2026-03-20)

### 变更内容

从 V1 单文件前端 localStorage 存储升级为 **Node.js + Express + SQLite** 全栈应用，数据持久化到数据库文件，不再因清除浏览器缓存丢失。

### 新增文件

```
package.json                 - Node.js 依赖配置
server/index.js              - Express 服务入口
server/database.js           - SQLite 数据库初始化
server/routes/*.js           - REST API 路由（5个资源）
data/                        - SQLite 数据库文件目录（自动创建）
```

### 技术栈 V2

| 层级 | 技术 |
|------|------|
| 后端 | Node.js + Express |
| 数据库 | SQLite (better-sqlite3) |
| 前端 | 保持原有 HTML + 原生 JavaScript + Tailwind CSS |
| 数据存储 | SQLite 数据库文件 |

### 启动方式

```bash
# 安装依赖
npm install

# 启动服务
npm start

# 打开浏览器访问
http://localhost:3000
```

**默认账号**：`admin` / `admin`

### 数据迁移

首次启动时，如果检测到浏览器 localStorage 中已有 V1 版本的数据，会自动提示一键迁移到 V2 数据库，无需手动操作。

如果数据库为空且 localStorage 没有数据，会自动创建示例数据。

### V2 特点

✅ 数据持久化到 SQLite 数据库文件，清除浏览器缓存不丢失
✅ 可备份复制数据库文件进行数据备份
✅ 保留了 V1 所有功能，UI 无变化
✅ 零外部依赖，不需要安装数据库服务
✅ 一级联删除由数据库外键自动处理，数据一致性更好

### 对比 V1

| 特性 | V1 | V2 |
|------|----|----|
| 部署 | 直接打开 HTML | 需要 Node.js 服务 |
| 存储 | localStorage | SQLite 数据库文件 |
| 数据持久性 | 清除缓存会丢失 | 永久保存 |
| 适合 | 临时试用 | 长期使用 |

## 更新日志

### 2026-03-20 - V2.1 更新

#### 新增功能

**1. 仪表盘成交金额趋势图表**
- 添加了成交金额统计图表，按天统计已成交金额
- 支持切换 **近7天 / 近15天 / 近30天** 三种时间范围
- 使用柱状图展示每日金额，搭配趋势线展示走势
- 通过 Chart.js 绘制，CDN 引入，无需额外依赖

#### Bug 修复

| 问题 | 修复说明 |
|------|----------|
| 编辑弹窗无法加载原有数据 | 将所有打开弹窗函数改为 async，添加 await 获取数据 |
| 销售机会点击编辑/新增不响应 | openOpportunityModal 改为 async function |
| 产品单位需要改为选择项 | 从输入框改为下拉选择框，预填充常见单位选项 |
| 跟进记录搜索不生效 | renderFollowUpList 添加搜索过滤逻辑，支持按客户名称和内容搜索 |
| 移动端侧边栏点击无法隐藏 | toggleSidebar 改为直接操作 style.display，不依赖 Tailwind class |
| 客户详情添加跟进按钮不够显眼 | 改为实心主色调背景，增大点击区域，更醒目 |

### 当前功能完整清单

1. **仪表盘** - 数据概览
   - 统计卡片：客户数、销售机会数、成交金额、产品数
   - 销售机会阶段分布进度条
   - **成交金额趋势图表**（新增） - 柱状图+趋势线，支持切换天数
   - 最近新增客户、最近跟进记录展示

2. **客户管理** - CRUD 操作
   - 客户信息：名称、公司、电话、邮箱、地址
   - 支持搜索、查看详情、编辑、删除
   - 删除客户级联删除关联数据（数据库外键自动处理

3. **联系人管理** - 关联客户
   - 每个客户多个联系人
   - 联系人信息：姓名、职位、电话、邮箱

4. **销售机会** - 销售跟踪
   - 四个阶段：潜在 → 跟进中 → 成交 → 丢单
   - 关联客户和产品
   - 预计金额、成交日期、描述

5. **产品管理** - 产品目录
   - 产品信息：名称、价格、单位、描述
   - **单位改为下拉选择框**（改进）
   - 创建机会时自动填充价格

6. **跟进记录** - 沟通历史
   - 跟进方式：电话、邮件、会面、其他
   - 日期和内容记录
   - **支持搜索**（修复） - 按客户名称/内容搜索

### 当前状态：✓ 所有功能正常，数据持久化到 SQLite，数据不丢失，搜索功能完整

### 2026-03-20 - V2.2 更新 - 用户登录认证

#### 新增功能
- **用户登录系统** - JWT token 认证，token 7天过期
- 默认管理员账号：**admin / admin**
- 登录页面设计 - 与系统整体 UX 统一，蓝色主色调，居中布局
- 顶部导航显示当前用户名，支持退出登录
- 所有 API 需要 token 验证，401 自动跳转登录页

#### Bug 修复
- **退出后登录按钮禁用** - 退出返回登录页自动重置按钮状态

### 2026-03-20 - V2.3 更新 - 数据导出与备份

#### 新增功能
- **CSV 导出** - 客户/销售机会/产品/跟进记录 都支持导出 CSV
- **完整备份导出** - 一键导出全库所有数据为 JSON 备份文件
- **备份导入恢复** - 一键从备份文件恢复整个数据库，覆盖当前数据
- 备份位置：在仪表盘底部系统工具区域，方便访问

### 2026-03-20 - V2.4 更新 - 客户标签/分组

#### 新增功能
- 数据库 customers 表新增 tags 字段（兼容升级）
- 新增/编辑客户时可以输入标签，多个标签用逗号分隔
- 客户列表顶部显示所有标签按钮，点击筛选
- 表格中标签用彩色圆角徽章显示，区分不同标签

使用方式：新增/编辑客户时，在标签输入框填写，例如 `重要,潜在,待跟进`

### 2026-03-21 - V2.5 更新 - 跟进提醒

#### 新增功能
- 数据库 follow_ups 表新增 next_follow_date 字段（兼容升级）
- 新增跟进弹窗可以选择下次跟进日期（可选）
- 仪表盘首页显示提醒区域，区分逾期（红色）和今天需要跟进（黄色）
- 点击提醒可以直达客户详情页面，方便快速处理

### 2026-03-21 - V2.6 更新 - CSV 批量导入客户

#### 新增功能
- 支持从 CSV 文件批量导入客户数据
- 灵活表头映射：支持中英文多种表头变体（`name/客户名称/公司/电话/邮箱/地址/标签`），支持任意列顺序
- 导入预览：显示有效/无效记录数量，错误信息，前 5 条记录预览
- 用户确认后再执行导入，避免误操作
- 导入完成显示成功/失败统计
- "导入CSV"按钮放在客户列表"导出CSV"旁边，位置统一

#### 测试验证
- ✅ 批量导入多条客户记录
- ✅ 正确验证必填客户名称
- ✅ 正确处理带引号的字段（内含逗号/引号）
- ✅ 标签逗号分隔正确存储

#### Bug 修复
| 问题 | 修复说明 |
|------|----------|
| 刷新页面变成空白页 | 修复认证成功后未调用 initApp() 初始化应用 |
| 客户标签按钮点击不切换 | 修改 onclick 调用 renderView('customers') 而不是仅修改状态不渲染 |
| CSV 导入弹窗内容贴边框 | 模态框添加内边距 p-6，改善 spacing |
| CSV 导出功能在列表页不可用 | 修复为动态从 API 获取数据再导出，避免 HTML 属性引号被破坏 |

## 当前完整功能清单

### 核心功能
1. **仪表盘** - 数据概览
   - 统计卡片：客户数、销售机会数、成交金额、产品数
   - 销售机会阶段分布进度条
   - **成交金额趋势图表** - 柱状图+趋势线，支持 7/15/30 天切换
   - **跟进提醒** - 显示逾期和今天待跟进任务，颜色区分优先级
   - 最近新增客户、最近跟进记录展示

2. **客户管理** - CRUD 操作
   - 客户信息：名称、公司、电话、邮箱、地址
   - **客户标签/分组筛选** - 支持多个标签，点击标签筛选
   - **CSV 批量导入** - 从 CSV 文件批量导入客户
   - 支持搜索、查看详情、编辑、删除
   - 删除客户级联删除关联数据（数据库外键自动处理）

3. **联系人管理** - 关联客户
   - 每个客户多个联系人
   - 联系人信息：姓名、职位、电话、邮箱

4. **销售机会** - 销售跟踪
   - 四个阶段：潜在 → 跟进中 → 成交 → 丢单
   - 关联客户和产品
   - 预计金额、成交日期、描述

5. **产品管理** - 产品目录
   - 产品信息：名称、价格、单位、描述
   - 单位改为下拉选择框
   - 创建机会时自动填充价格

6. **跟进记录** - 沟通历史
   - 跟进方式：电话、邮件、会面、其他
   - 日期和内容记录
   - 支持选择**下次跟进日期**
   - 支持搜索 - 按客户名称/内容搜索

### 数据导入导出
- **CSV 导出** - 所有列表页面支持导出 CSV
- **完整备份导出** - 导出全库 JSON 备份
- **完整备份导入** - 从备份文件恢复数据
- **CSV 批量导入客户** - 新增 V2.6

### 用户认证
- JWT token 认证
- 默认管理员账号 admin/admin
- token 7天过期
- 退出登录功能

### 当前状态：✓ 所有功能已完成并测试通过