Builds data-dense SaaS analyti…

# 跨境ERP SaaS 客户流失分析仪表盘开发方案

一、技术选型

• 框架：React 18 + Vite（快速搭建）
• 样式：Tailwind CSS 3
• 图表：Recharts（声明式API，适合React）
• 状态/请求：TanStack Query（数据缓存与刷新）
• 类型：TypeScript（可选，提升可维护性）

二、页面结构设计

```

Dashboard

├── 顶部概览卡片（整体流失率、流失客户数、环比变化）

├── 行业流失率折线图（近90天，多行业曲线）

└── TOP10流失客户表格

```

三、核心代码示例

1. 折线图（按行业流失率）

```tsx

import { LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [

{ date: '01-01', 电商: 4.2, 物流: 2.8, 制造: 1.5 },

// ... 近90天数据，由接口返回

];

<div className="bg-white rounded-xl shadow p-4">

<h3 className="text-gray-700 font-semibold mb-2">近90天各行业流失率（%）</h3>

<ResponsiveContainer width="100%" height={320}>

<LineChart data={data}>

<XAxis dataKey="date" />

<YAxis unit="%" />

<Tooltip />

<Legend />

<Line type="monotone" dataKey="电商" stroke="#3b82f6" />

<Line type="monotone" dataKey="物流" stroke="#10b981" />

<Line type="monotone" dataKey="制造" stroke="#f59e0b" />

</LineChart>

</ResponsiveContainer>

</div>

```

2. TOP10流失客户表

```tsx

const columns = ['客户名称', '所属行业', 'ARR区间', '最后活跃日', '流失原因'];

// 建议流失原因加 Tag 标签，ARR 用区间脱敏展示

<table className="w-full text-sm divide-y divide-gray-200">

{/* 表头 + map 渲染行，异常行标红 */}

</table>

```

四、关键设计要点

• 流失定义前置：明确口径（如连续30天无登录/无订单同步），避免数据歧义
• 行业筛选器：顶部加行业多选下拉，图表联动过滤
• 时间粒度切换：支持按日/周聚合，90天按日展示曲线更平滑
• 流失原因标注：TOP10表增加原因标签（价格敏感、功能缺失、迁移竞品等），便于运营跟进
• 预警高亮：流失率超过阈值的行业曲线段可用参照线（ReferenceLine）标出
• 性能：90天×多行业数据量不大，接口一次返回即可；表格建议加分页或虚拟滚动备用
• 权限与脱敏：客户敏感信息按角色控制展示

五、数据接口建议

• `GET /api/churn/trend?industry=&