fxcircus/cs-agent-demo

# CS Agent 演示 一个全栈客户成功分析仪表板，用于对比合同权益与实际产品使用情况，并标记违约、流失信号和续约风险。 此仓库是我构建的生产系统的一个 **演示/作品集** 版本。所有公司、使用数据、客户成功经理（CSM）以及趋势数据均为虚构。详见 [ARCHITECTURE.md](ARCHITECTURE.md) 了解演示如何映射到真实系统。 ## 截图     ## 60 秒快速运行 ``` # 安装前端依赖 cd web && npm install && cd .. # 启动 React 应用（直接读取 web/public/demo_data.csv） cd web && npm start ``` 打开 http://localhost:3000。仪表板会自动加载演示 CSV 并显示 10 家虚构公司及其预设的客户成功场景。 **可选 — 同时启动模拟后端：** ``` cd mock_backend pip install -r requirements.txt uvicorn main:app --reload --port 8080 ``` 前端会在后端运行时优先使用它（否则回退到静态 CSV）。 ## 重新生成演示数据 ``` python3 data_pipeline/generate_demo_csv.py # → 写入 web/public/demo_data.csv ``` 虚构的公司、场景和趋势种子位于 [`data_pipeline/fixtures/fictional_companies.json`](data_pipeline/fixtures/fictional_companies.json)。编辑该文件以重塑演示。 ## 仪表板展示内容 **三种视图：** - **仪表板** — 违约摘要、按计划划分的年度经常性收入（ARR）、区域分布、 top 过度使用情况。每个图表均可点击并过滤客户视图。 - **客户视图** — 按公司细分的合同与使用对比三元组、备注、任务以及过去 12 个月的月活跃用户（MAU）/月活跃账户（MAT）趋势图，并带有违约线覆盖。 - **CSM 视图** — 以客户成功经理（CSM）为范围的组合视图，按季度分组，包含续约日历和任务。 **10 家虚构公司**（所有名称均为影视虚构）： | 公司 | 计划 | CSM | 仪表板将显示 | | ---------------------- | ---------- | -------------- | --------------------------- | | Acme Cloud | 企业版 | Ellen Ripley | MAU 过度使用 50% — 洽谈增购 | | Hooli | 企业版 | Ellen Ripley | 使用白标与联合功能但无对应权益 | | Initech Software | 企业版 | Roy Daniel | 干净的账户，Q3 续约 | | Pied Piper | 规模版 | Ellen Ripley | MAT 违约 + 每月 5% 增长（增购机会） | | Dunder Mifflin Digital | 企业版 | Roy Daniel | SSO + SCIM 超出合同范围 | | Globex Corporation | 规模版 | Don Draper | MAU 每月下降 12% — churn 风险 | | Massive Dynamic | 企业版 | Don Draper | 30 天内续约，多环境 | | Stark Industries | 企业版 | Roy Daniel | 座位数过度使用（+32%） | | Cyberdyne Systems | 规模版 | Roy Daniel | 使用白标 UI 但无对应权益 | | Wonka Industries | 增长版 | Don Draper | 使用不足 — 降购候选 | ## 架构 ``` ┌─────────────────────────────────────────────────────────────┐ │ data_pipeline/ │ │ generate_demo_csv.py → web/public/demo_data.csv │ │ ├ fixtures/fictional_companies.json │ │ ├ utils/breach_calculator.py │ │ ├ utils/mock_trend_generator.py │ │ └ utils/csv_writer.py │ └─────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ mock_backend/ (FastAPI, port 8080, optional) │ │ /api/csv/latest, /api/csv/download │ │ /hubspot/status, /notes, /tasks-optimized │ └─────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ web/ (React + TypeScript, port 3000) │ │ Dashboard ClientView CSMView │ │ MAUTrend / MATTrend (Recharts) │ │ NotesTab / TaskCard / PersonalTasks (localStorage) │ │ MockAuthProvider (stands in for Frontegg SSO) │ └─────────────────────────────────────────────────────────────┘ ``` 详见 [ARCHITECTURE.md](ARCHITECTURE.md) 了解每个演示组件与其生产对应项（HubSpot、MySQL、Snowflake、S3、App Runner、CloudFront、Frontegg）之间的映射。 ## 虚构与真实的部分 | 演示功能 | 真实实现（本仓库不包含） | | ------------------------- | ---------------------------------------------------------- | | 来自 fixture JSON 的 CSV | HubSpot REST API + 4 区域 MySQL 集群 + Snowflake | | FastAPI 模拟后端 | Node.js/Express 在 AWS App Runner 上运行，S3 托管 CSV | | `MockAuthProvider` | Frontegg SSO（OAuth、租户管理、管理员门户） | | `mockHubspotService`（localStorage） | 真实的 HubSpot CRM 笔记与任务（带 OAuth 2.0 令牌刷新） | | 静态 React 托管（npm start） | S3 + CloudFront、HTTPS、部署时缓存失效 | CSV 架构、违约计算逻辑、UI 组件与交互模型与生产系统 **完全一致**。仅数据来源与认证/部署逻辑为模拟。 ## 技术栈 - **前端**：React 18、TypeScript、Recharts、Papaparse、react-router、react-toastify - **管道**：Python 3.11+（仅使用标准库 — 无运行时依赖） - **模拟后端**：FastAPI + Uvicorn ## 许可证 MIT — 参见 [LICENSE](LICENSE)。

标签：AV绕过, CSM组合管理, FastAPI, MAU MAT趋势, Python, React, Syscalls, TypeScript, 分析仪表板, 前端, 合同用量对比, 后端, 安全插件, 客户成功, 客户画像, 数据管道, 无后门, 流失预警, 演示项目, 组合展示, 续期风险, 自动化攻击, 试用数据, 软件工程, 违规检测, 逆向工具