无代码方式实现一个CRM

更新时间：2026-07-22

简介

通过无代码形式，以经典CRM为例，从思路规划、功能实现、数据维护到风格调整，理清实现完整的使用场景的步骤，场景中将覆盖业务流程、后端数据管理、用户注册登录、权限管理、风格交互等内容。

步骤

1.涉及到多角色协同的场景，首先要找到核心协作主线

以 “客户生命周期” 为主线，覆盖从线索获取到客户成交的全流程：

线索管理：线索录入、线索分配、线索跟进
客户管理：客户档案管理、客户跟进
商机管理：商机创建、商机跟进
合同管理：合同创建、合同审批

我们假设在该业务流程中涉及到的角色包括：销售专员、销售经理，在流程中维护系统功能的基本角色为管理员。

2.根据流程划分基本功能模块

流程	做哪些事	谁来做
线索管理	线索录入	销售专员
	线索分配	销售经理
	线索跟进转化	销售专员
客户管理	客户档案管理、客户跟进	销售专员
商机管理	商机创建、商机跟进	销售专员
合同管理	合同创建	销售专员
合同管理	合同审批	销售经理
数据中心	销售总览、销售漏斗、转化分析	销售经理
系统管理	员工管理	管理员
	角色管理	管理员
	权限管理	管理员

3.规划关键页面

根据功能模块进行关键页面的规划，保证基本框架是准确的，才能在后续逐步添加细节的时候更好的完成功能扩展和问题定位。

关键页面	关键功能
首页	账号密码的注册和登录、其他页面的快捷入口
线索管理	线索信息（线索基本信息、增删改查、批量操作、线索状态）；线索跟进记录（关联线索、跟进内容）；点击线索信息可以查看其所有跟进记录
客户管理	客户信息（客户基本信息、客户状态）；客户联系人（关联客户，记录客户的联系人信息）；客户跟进记录（记录客户的多次跟进记录）；点击客户信息可以通过切换tab看到其所有的联系人、跟进记录；
商机管理	商机信息（商机信息的增删改查功能，需要关联客户信息）；商机跟进记录（关联商机，记录商机的多次跟进记录）；商机信息下可以看到其所有的跟进记录；
合同管理	合同信息（合同信息的管理，需要关联客户信息、商机信息）；合同审批（创建合同后，直属上级进行审批，合同状态记录审批结果）；
数据看板	根据业务数据统计销售转化率、销售排名、经营状况等指标；
系统管理	通过指定管理员账号密码可以进入该页面，完成员工信息管理、角色管理、权限管理、员工角色分配、角色权限分配

将以上信息润色、结构化输出后，开始进行首次生成，完成系统基本框架搭建

Plain Text

1我需要制作一个CRM系统，包含核心模块首页、线索管理、客户管理、商机管理、合同管理、数据看版、系统管理七个模块，各模块分别包含以下内容，相关功能需要完成数据库存储：
2模块一：首页
3账号密码的注册和登录、其他页面的快捷入口
4模块二：线索管理
5线索信息（线索基本信息、增删改查、批量操作、线索状态）；
6线索跟进记录（关联线索、跟进内容）；
7点击线索信息可以查看其所有跟进记录
8模块三：客户管理
9客户信息（客户基本信息、客户状态）；
10客户联系人（关联客户，记录客户的联系人信息）；
11客户跟进记录（记录客户的多次跟进记录）；
12模块四：商机管理
13商机信息（商机信息的增删改查功能，需要关联客户信息）；
14商机跟进记录（关联商机，记录商机的多次跟进记录）；
15模块五：合同管理
16合同信息（合同信息的管理，需要关联客户信息、商机信息）；
17合同审批（创建合同后，直属上级进行审批，合同状态记录审批结果）；
18模块六：数据看板
19根据业务数据统计销售转化率、销售排名、经营状况等指标；
20模块七：系统管理
21通过指定管理员账号密码可以进入该页面，完成员工信息管理、角色管理、权限管理、员工角色分配、角色权限分配

检查初步生成结果是否满足各模块说明，此时整体框架满足要求，开始进入下一阶段补充细节

4.逐页面功能细化

4.1.逐表调整功能

检查发现业务表单很完善，但是当前只支持创建和查看数据，所以我们来统一增加修改、删除数据的功能；

Plain Text

1为各个数据库表增加修改数据、删除数据的功能

执行结果：检查各个业务表，已经成功增加了编辑和删除数据功能

4.2.逐表调整字段

因为我们初步为了保障系统框架稳定，没有要求模型指定每个表有哪些具体的字段，现在按照业务需求来完善各个业务表的字段；

Plain Text

1调整客户表字段，要求如下：
2客户 ID：唯一标识，创建客户信息后系统自动生成。
3客户名称：
4关联线索：
5客户类型：区分个人 / 企业 / 代理商等
6证件信息：企业统一社会信用代码
7所属行业 / 领域：
8客户等级：如 VIP / 普通 / 潜在
9归属负责人：
10所属区域：如华东区 
11客户来源：如官网咨询 / 展会 / 转介绍

4.3.调整数据看版指标

根据已有的业务数据结构，按需调整统计指标，首先规划需要的指标，然后明确统计指标的数据源，再明确该指标的统计方式。如果对展现形式有期望，可以进一步描述展现形式，按照“可用-->好看”的顺序逐步优化

Plain Text

1优化数据看板页面的统计指标，核心需要展示的指标如下：
21.线索总量、客户总量、商机总量、合同总额；
32.线索转化率、客单价、成交率、客户平均跟进次数；
43.以上指标需要查看数值、数据趋势及按周、按月、按季度筛选
5优化页面风格：
6深黑蓝背景 (#0F172A) - 营造沉浸式体验
7暗灰蓝卡片 (#1E293B) - 带渐变效果，增加立体感
8科技银边框 (#334155) - 细线条分隔，提升精致度
9优化核心颜色搭配：
10霓虹蓝 (#06B6D4) - 主色调，用于核心指标和页面标题
11青紫色 (#8B5CF6) - 辅助色，用于用户数据维度
12荧光绿 (#10B981) - 强调色，用于商机数据和正向趋势
13亮橙 (#F97316) - 警告色，用于营收数据和TOP标注
14赤红 (#EF4444) - 危险色，用于异常预警和负向趋势

4.4.调整系统非业务页面功能

理清思路：我们先来实现系统管理模块的核心功能，即用户和权限控制：

在数据库中实现 RBAC模型，核心是通过用户表、角色表、权限表以及它们之间的关联表，实现用户 - 角色 - 权限的多对多关系配置。知道了这个模式，就可以按需为系统增加用户权限分配的功能。

表1:用户表：存储用户基本信息（账号、密码等），与角色是多对多关系（一个用户可拥有多个角色）。

表2:角色表：存储角色信息（如 “管理员”“普通用户”），角色与权限是多对多关系（一个角色可包含多个权限）

表3:权限表：存储具体权限（如 “查询用户”“删除订单”），权限通常对应系统中的操作或资源访问权。

表4:用户-角色关联表：关联用户与角色，实现 “用户多对多角色” 的映射（一个用户可关联多个角色，一个角色可关联多个用户）。

表5:角色-权限关联表：关联角色与权限，实现 “角色多对多权限” 的映射（一个角色可包含多个权限，一个权限可被多个角色拥有）。

输入query:

Plain Text

1重新规划系统管理页面的功能，需要构建5张表来实现用户-角色-权限管理，具体要求如下：
2表1:用户表，用来管理用户的基本信息，包括字段：用户名、姓名、性别、部门、职位、直属上级、联系方式、在职状态；
3表2:角色表，用来维护管理角色信息，包括字段：角色id、角色名称、角色描述；当前有3个角色，分别为销售专员、销售经理、系统管理员；
4表3:权限表，用来维护管理权限操作，权限操作包括以下内容：
5    权限1：创建线索数据；
6    权限2：修改、删除线索数据；
7    权限3：创建客户数据；
8    权限4: 修改、删除客户数据；
9    权限5：创建商机数据；
10    权限6: 修改、删除商机数据；
11    权限7: 创建合同数据；
12    权限8: 修改、删除合同数据；
13    权限9：审批合同；
14表4:角色-权限关联表，可以配置角色和权限的关系，实现对应角色拥有对应权限，包括字段：id、关联角色、关联权限；
15表5:用户-角色关联表，可以配置用户和权限的关系，实现对应用户拥有对应角色，包括字段：id、关联用户、关联角色
16根据“角色-权限关联表”的数据开放对应页面的对应功能，根据权限分配情况动态对于无权限操作的功能和数据进行禁用或隐藏处理

分配权限：能看到系统设置页面多了相关的用户、角色、权限配置功能，可以在登录页面注册新的用户账号后，通过该页面完成对应账号的角色和权限分配。

角色权限配置

用户角色配置

验证权限：登录不同账号，检查不同用户的权限实现情况，此时已经实现不同角色的权限差异化处理。比如系统管理员可以管理所有数据，销售专员无法审批合同，销售经理可以审批合同，可以查看数据看版等。

管理员进行系统管理

销售专员创建合同

销售经理审批合同

5.调整交互和风格

交互调整：保证所需功能可用后，系统还存在很多细节体验的交互问题，我们开始进行交互优化；

Plain Text

1优化整体交互：
21.入口交互增强
3进入引导：新用户首次打开首页时，用半透明蒙层 + 高亮框聚焦核心功能入口，点击后蒙层渐隐；
4动态加载效果：入口卡片从顶部往下依次加载，带 0.1s 间隔的淡入 + 上移动画；
52.表格基础交互
6行 hover 反馈：鼠标悬停行时，整行背景色变浅（如#f9fafb），出现操作图标区（编辑 / 删除等），图标从透明渐显（避免默认全显的拥挤感）；
7滚动体验：表头固定，滚动表格时表头下方加 1px 阴影，提示 “内容可滚动”。
83.操作功能优化
9新增 / 编辑操作：
10点击 “新增” 按钮时，表单从表格底部滑入；
11表单提交成功后，按钮状态从 “提交中”→“✓ 搞定”（1s 后恢复默认文案），同时表格新增行从顶部滑入；
12删除 / 批量操作：
13点击删除时，弹出轻量确认框（圆角 + 浅色背景），按钮用 “再想想”（取消）和 “确认删”（删除），避免生硬的 “确定 / 取消”；
14删除后，行数据从当前位置渐隐 + 缩小，其他行平滑上移补位（0.2s）。
154.全局通用交互（强化统一性）
16按钮反馈：所有可点击按钮（主按钮 / 次要按钮）点击时添加 “按压感”；
17页面跳转：从首页进入其他页面时，用 “右侧滑入” 过渡，返回时 “左侧滑出”；
18滚动动效：页面内锚点跳转时，用平滑滚动，滚动到顶部时导航栏阴影加深（提示 “已到顶”）。