预算看板生成器 (Budget Dashboard Generator)

Overview

本技能将预算数据（来自Excel或手动输入）转化为专业的交互式Web看板。生成的看板包含部门汇总视图和任意数量团队成员的独立视图，支持预算/收款明细管理、数据持久化。

完全通用化：不限制团队成员数量，不预设成员姓名，可适配任意组织结构。

核心能力

1. 数据分析：解析Excel文件，提取预算明细、实际收款，商机列表
2. 看板生成：创建React+TypeScript+Tailwind的交互式Web看板
3. 视图设计：部门汇总 + N个团队成员独立视图（数量不限），支持指标切换
4. 明细管理：预算明细和收款明细的添加/编辑/删除（CRUD）
5. 数据持久化：localStorage存储，支持数据导出

数据结构

预算数据模型（通用化）

部门汇总
├── 整体指标 (自定义年度总额)
├── 订阅指标 (自定义年度总额)
└── 服务指标 (自定义年度总额)
    │
    ├── 每月数据
    │   ├── 月指标
    │   ├── 月预算
    │   ├── 月实际收款
    │   ├── 完成率
    │   └── 差距
    │
    ├── 年度累计
    │   ├── 累计指标
    │   ├── 累计收款
    │   └── 完成率
    │
    └── 季度推测
        ├── Q1-Q4指标占比
        └── 季度完成率推测

团队成员 (N位，数量不限)
├── 成员1
├── 成员2
├── 成员3
└── ... (任意数量)
    └──每位成员数据 = 部门汇总结构

关键指标计算

技术栈

看板结构

1. 导航栏（动态生成）

• 部门汇总（默认）
• 团队成员1
• 团队成员2
• 团队成员3
• ... (根据配置动态渲染)
• 预算明细

2. 汇总页签（部门视图）

指标类型切换

• 整体指标（蓝色）
• 订阅指标（绿色）
• 服务指标（紫色）

可扩展：用户可自定义添加其他指标类型

核心指标卡片

进度条区域

• 累计收款 vs 年度指标
• 年预测收款 vs 年度指标

月度柱状图

• 实际收款（彩色柱）
• 月指标（灰色柱）

年度累计趋势

• 每月进度条展示

季度数据推测

• Q1-Q4 各季度指标、实际、占比，完成率

月度明细表格

• 月份 | 月指标 | 月预算 | 月实际 | 完成率 | 差距

3. 成员页签（每位成员，通用化）

视图切换

• 统计概览（原有月度数据）
• 预算明细（客户级别CRUD）
• 实际收款（客户级别CRUD）

统计概览

与汇总页签结构一致，包含：

• 指标类型切换
• 月份选择器
• 核心指标卡片
• 进度条
• 月度柱状图
• 年度趋势
• 季度推测
• 月度明细表格

预算明细视图

实际收款视图

表单字段设计

预算明细表单

收款明细表单

数据持久化

localStorage 结构（通用化）

// 通用化：使用成员名称作为key，支持任意数量
interface ManagerCustomerDetails {
  budgetItems: BudgetItem[];
  collectionItems: CollectionItem[];
}

// 存储键
const STORAGE_KEY = 'budget_dashboard_customer_details';

// 操作函数
saveToLocalStorage(data: Record<string, ManagerCustomerDetails>)
loadFromLocalStorage(): Record<string, ManagerCustomerDetails> | null
getInitialData(): Record<string, ManagerCustomerDetails>

执行流程

Phase 1: 数据分析

1. 接收Excel文件或需求描述
2. 询问用户团队成员名单（数量不限）
3. 解析sheet结构（支持自定义sheet名称）
4. 提取关键字段：
• 客户名称、产品、金额、类型、服务类型、月份
5. 询问用户年度预算分配

Phase 2: 数据建模

1. 创建 data/budgetData.ts
• ManagerData 接口（通用化，不限制数量）
• 月度/年度数据结构
• formatCurrency 等工具函数
• 关键：使用配置化的成员列表

1. 创建 data/detailData.ts
• 预算汇总（订阅/服务分项）
• 实际收款汇总
• 服务类型分类

1. 创建 data/customerDetails.ts
• BudgetItem / CollectionItem 接口
• localStorage 操作函数

Phase 3: 组件开发

1. MetricCard: 通用指标卡片
2. SimpleBarChart: 简单柱状图
3. SimpleProgress: 进度条
4. SummaryDashboard: 部门汇总视图
5. ManagerDashboard: 成员视图（含CRUD）
6. TeamComparison: 团队对比
7. DetailDashboard: 预算明细视图
8. Sidebar: 动态渲染成员导航

Phase 4: 集成部署

1. App.tsx 整合所有组件
2. Sidebar 根据配置动态渲染成员列表
3. 构建：npm run build
4. 部署：deploy tool

关键配置项

团队成员配置（重点）

导航栏中的客户成功经理名称通过中央配置文件管理：

// src/config/teamConfig.ts

// 客户成功经理名称列表（可自定义）
export const TEAM_MEMBERS: string[] = [
  '田旭财',  // 可修改为任意名称
  '杨洋',
  '于德鹏',
  '文德超',
  // 可添加任意数量的成员
];

// 导航栏显示配置
export const NAV_CONFIG = {
  summaryLabel: '部门汇总',     // 汇总页签名称
  managerLabel: '客户成功经理', // 成员标签名称
};

如何添加/修改成员：

1. 修改 src/config/teamConfig.ts 中的 TEAM_MEMBERS 数组
2. 在 src/data/budgetData.ts 中添加对应成员数据
3. 在 src/data/detailData.ts 中添加对应成员数据
4. 重新构建部署

其他配置项

// 通用化配置
const BUDGET_CONFIG = {
  // 年度预算配置
  annualBudget: {
    overall: 18000000,    // 整体指标，可自定义
    subscription: 13000000, // 订阅指标，可自定义
    service: 5000000,    // 服务指标，可自定义
  },

  // 团队成员配置（数量不限）
  teamMembers: [
    '成员A',
    '成员B',
    '成员C',
    // 可添加任意数量
  ],

  // 服务类型配置（可扩展）
  serviceTypes: [
    '专项服务',
    '高级服务',
    '标准服务',
    // 可添加更多
  ],

  // 季度分配（可自定义）
  quarterlyRatio: {
    Q1: 0.25,
    Q2: 0.25,
    Q3: 0.25,
    Q4: 0.25,
  }
};

质量标准

视觉要求

• [ ] 卡片有圆角和阴影
• [ ] 进度条有动画效果
• [ ] 表格行hover高亮
• [ ] 按钮点击反馈
• [ ] 弹窗居中显示

功能要求

• [ ] 指标切换正常工作
• [ ] 月份选择正确
• [ ] CRUD操作保存成功
• [ ] localStorage数据持久化
• [ ] 页面刷新数据保留
• [ ] 团队成员数量可动态调整

数据要求

• [ ] 金额格式化为万元/元
• [ ] 完成率显示百分比
• [ ] 差距正负颜色区分

常见问题处理

Excel解析问题

图表显示问题

localStorage问题

输出交付

必交付物

1. 可访问的Web看板URL（deploy后的地址）
2. 完整的React项目代码
3. 配置文件说明（如何修改团队成员等）

可选交付物

• Excel数据提取脚本
• 数据导出功能
• 打印/导出PDF功能

数据安全说明

当前架构

用户浏览器 (localStorage)
    ↑ 保存数据
网页代码
    ↓ 获取数据
云端服务器 (仅存储静态代码)

安全特性

• 数据存储在用户浏览器本地
• 服务器不存储任何业务数据
• 不同用户数据完全隔离

向领导汇报要点

> "纯前端数据看板，所有数据存储在员工个人浏览器。服务器只存储网页代码，无业务数据。数据完全由员工自行管理。"