续约风险看板技能包（可自定义产品线版）

项目概述

续约风险看板（Renewal Dashboard）是一款专为客户成功团队设计的交互式Web应用，用于管理和追踪企业客户的合同续签状态。该看板基于React + TypeScript + Vite技术栈构建，支持完整的数据编辑、更新和本地持久化功能。

核心功能

客户续签状态管理：支持跟踪已续费、待续签、续签中、已流失等多种状态
预计金额管理：记录和更新预计基础续费金额
跟进时间追踪：管理客户跟进计划和时间节点
续约意向分析：记录客户的续约意向
原因记录：支持记录缩减、延期、流失的具体原因
可自定义产品线：产品线名称完全可自定义，支持任意产品线名称
多维度筛选：支持按产品线、月份、状态、意向等维度筛选客户数据
产品线分析：点击产品线卡片可穿透查看该产品线下的所有客户明细
本地数据持久化：所有数据变更自动保存到浏览器localStorage

技术架构

renewal-dashboard/
├── src/
│   ├── components/
│   │   └── RenewalDashboard.tsx    # 主看板组件（包含编辑弹窗，可自定义产品线）
│   ├── data/
│   │   └── types.ts                # TypeScript类型定义
│   ├── hooks/
│   └── lib/
├── package.json                    # 依赖配置
├── vite.config.ts                  # Vite构建配置
└── tailwind.config.js              # TailwindCSS配置

产品线自定义功能

本版本的产品线完全支持自定义，可以输入任意产品线名称：

编辑弹窗中：产品线从下拉选择改为文本输入框
动态配色：根据产品线名称自动生成一致的颜色（使用哈希算法）
自动统计：新增产品线自动出现在筛选和统计中

依赖技术栈

| 技术类别 | 技术名称 | 版本要求 | 用途说明 | |---------|---------|---------|---------| | 前端框架 | React | ^18.3.1 | UI组件框架 | | 类型系统 | TypeScript | ~5.6.2 | 类型安全保障 | | 构建工具 | Vite | ^6.0.1 | 快速开发构建 | | 样式框架 | TailwindCSS | v3.4.16 | 原子化CSS方案 |

使用方法

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 生产构建
pnpm build

# 预览构建
pnpm preview

数据字段说明

| 字段名称 | 类型 | 说明 | |---------|------|------| | id | string | 唯一标识符 | | 客户名称 | string | 客户公司名称 | | 客户编号 | string | 客户编号 | | 产品线 | string | 产品线名称（可自定义） | | 月份 | number | 续签月份（3-12月） | | 续签状态 | string | 已续费/待续签/续签中/已流失 | | 预计基础续费金额 | number | 预计续费金额 | | 跟进时间 | string | 下次跟进日期 | | 续约意向 | string | 预计按时续费/续约存疑/预计流失/已流失 | | 缩减延期流失原因 | string | 缩减/延期/流失原因说明 |

动态配色说明

产品线颜色根据名称自动生成，确保同一产品线名称始终显示相同颜色：

使用哈希算法根据产品线名称生成颜色索引
支持10种预设颜色：紫色、蓝色、青色、橙色、绿色、粉色、靛蓝、青绿、红色、黄色
同一产品线名称在不同位置显示一致的颜色