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

项目概述

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

核心功能

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

技术架构

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

产品线自定义功能

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

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

依赖技术栈

使用方法

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 生产构建
pnpm build

# 预览构建
pnpm preview

数据字段说明

动态配色说明

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

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