CRM跟进日历视图

为什么需要跟进日历

在 CRM 系统中，销售团队通常依赖列表或表格管理客户跟进。这种方式虽然能展示所有记录，但缺乏时间维度的直观感知——销售很难快速判断「哪天该干什么」「本周拜访密度是否合理」。当跟进记录与拜访预约分散在不同表格时，排程变得困难，管理层也无法快速扫一眼团队节奏。

核心能力与实现要点

该技能基于 FullCalendar 的 dayGridMonth 渲染月视图，将后端的跟进/拜访记录映射为日历事件。关键设计原则是日历是排程仪表盘，不是技术 Demo：

• 视觉规范：使用 Design Tokens 定义业务色板，如 --fc-crm-follow（跟进蓝）、--fc-crm-visit（拜访绿）、--fc-crm-overdue（逾期红）。规则是「类型定色相，状态定透明度」——跟进与拜访用不同色相区分，逾期用描边/角标标记，已完成灰化降噪。
• 信息密度控制：单日最多显示 3 条事件，超出部分折叠为「+N」，避免格子爆炸。标题格式为 [跟进|拜访] 客户简称 · 联系人，控制在 16 字以内。
• 数据加载：events 采用函数或 refetchEvents 模式，切换月份时按 start/end 拉取当月数据，而非一次性加载全年，避免卡顿。
• 交互规范：eventClick 打开客户/跟进详情，dateClick 在空白日新建跟进。拖拽默认关闭，仅在后端支持改期时开启。
• 状态处理：Loading 使用 skeleton 或半透明遮罩；空月保留网格并提示「本月暂无跟进/拜访」；错误时通过 ElMessage 提示并支持「重试」触发 fc.refetchEvents()。

适用边界与常见陷阱

• 适用场景：需要月视图感知跟进节奏、点击进入客户详情的 CRM 场景。
• 不适用场景：若需要甘特图或时间轴展示，请使用 Gantt 组件；若仅需日期选择器，请使用 DatePicker；跨周资源排班应使用 timeGrid 或资源视图。
• 工程注意：切换路由或 v-if 时必须调用 fc.destroy()，否则会出现双月历叠层和内存泄漏；日期格式化使用 dayjs/date-fns 避免时区偏移一天；不要将样式写死在 backgroundColor，而应通过 classNames 配合 CSS 变量维护主题。