- 线上场景：腾讯会议、飞书、微信、钉钉等即时沟通
- 线下场景：商务拜访、饭局酒局、现场实施
- 后台数据：问答日志、用户行为、反馈分析
- 会议录音自动转写
- 需求点智能提取
- 相似需求自动关联
- 优先级智能评估
- 需求趋势分析
- 客户需求分布
- 模块热力图
- 来源渠道统计
- Apple Design Language
- 蓝白主题配色
- 流畅动画交互
- 响应式布局
| 工作台 | 需求池 | 快速录入 |
|---|---|---|
| 数据概览、趋势图表 | 卡片/表格视图、筛选搜索 | 多场景模板、语音输入 |
| 需求详情 | 数据分析 | 客户管理 |
|---|---|---|
| 完整信息、评论讨论 | 多维度图表分析 | 客户档案、联系人 |
- Node.js 18+
- npm 或 yarn 或 pnpm
cd requirement-pool
npm install# 启动前端 (端口 3000)
npm run dev
# 启动后端 API (端口 3001)
npm run server打开浏览器访问 http://localhost:3000
requirement-pool/
├── public/ # 静态资源
├── server/ # 后端 API
│ ├── index.js # Express 服务器
│ └── data/ # JSON 数据存储
├── src/
│ ├── components/ # 组件库
│ │ ├── Layout/ # 布局组件
│ │ └── UI/ # 通用 UI 组件
│ ├── pages/ # 页面组件
│ │ ├── Dashboard.tsx # 工作台
│ │ ├── RequirementList.tsx # 需求列表
│ │ ├── RequirementDetail.tsx # 需求详情
│ │ ├── CreateRequirement.tsx # 快速录入
│ │ ├── Analytics.tsx # 数据分析
│ │ ├── Customers.tsx # 客户管理
│ │ └── Settings.tsx # 系统设置
│ ├── data/ # 模拟数据
│ ├── types/ # TypeScript 类型
│ ├── App.tsx # 应用入口
│ ├── main.tsx # 渲染入口
│ └── index.css # 全局样式
├── package.json
├── tailwind.config.js # Tailwind 配置
├── tsconfig.json # TypeScript 配置
└── vite.config.ts # Vite 配置
| 类别 | 技术 |
|---|---|
| 前端框架 | React 18 + TypeScript |
| 构建工具 | Vite 5 |
| 样式方案 | Tailwind CSS 3 |
| 动画库 | Framer Motion |
| 图表库 | Recharts |
| 图标库 | Lucide React |
| 路由 | React Router 6 |
| 后端 | Express.js |
| 数据存储 | JSON 文件（可升级 PostgreSQL） |
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /api/requirements |
获取需求列表 |
| POST | /api/requirements |
创建需求 |
| GET | /api/requirements/:id |
获取需求详情 |
| PUT | /api/requirements/:id |
更新需求 |
| DELETE | /api/requirements/:id |
删除需求 |
| POST | /api/requirements/:id/comments |
添加评论 |
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /api/customers |
获取客户列表 |
| POST | /api/customers |
创建客户 |
| GET | /api/customers/:id |
获取客户详情 |
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /api/stats/dashboard |
获取仪表盘统计 |
/* Apple Blue 主色系 */
--apple-blue-500: #007AFF; /* 主色 */
--apple-blue-600: #0066D6; /* 悬停 */
/* 灰度系统 */
--apple-gray-50: #FAFAFA; /* 背景 */
--apple-gray-100: #F5F5F7; /* 卡片背景 */
--apple-gray-900: #1D1D1F; /* 主文字 */--border-radius-apple: 12px; /* 按钮、输入框 */
--border-radius-apple-lg: 16px; /* 卡片 */
--border-radius-apple-xl: 20px; /* 大卡片 */--shadow-apple-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-apple: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-apple-md: 0 8px 24px rgba(0, 0, 0, 0.12);-
创建 GitHub 仓库
# 初始化 Git 仓库 git init # 添加所有文件 git add . # 提交代码 git commit -m "Initial commit: RequireFlow 需求池管理系统" # 添加远程仓库（替换为你的仓库地址） git remote add origin https://github.com/your-username/requireflow.git # 推送到 GitHub git branch -M main git push -u origin main
-
在 GitHub 上创建新仓库
- 访问 GitHub
- 填写仓库名称（如
requireflow） - 选择 Public 或 Private
- 点击 "Create repository"
- 按照提示推送代码
-
访问 Vercel
- 打开 Vercel
- 使用 GitHub 账号登录
-
导入项目
- 点击 "Add New Project"
- 选择你的 GitHub 仓库
- Vercel 会自动检测 Vite 项目
-
配置项目
- Framework Preset:
Vite - Build Command:
npm run build（自动检测） - Output Directory:
dist（自动检测） - Install Command:
npm install（自动检测）
- Framework Preset:
-
环境变量（如需要）
- 在项目设置中添加环境变量
- 例如：
VITE_API_URL=https://your-api.com
-
部署
- 点击 "Deploy"
- 等待构建完成
- 获得部署链接（如
https://requireflow.vercel.app）
# 安装 Vercel CLI
npm i -g vercel
# 登录 Vercel
vercel login
# 在项目目录下部署
cd requirement-pool
vercel
# 生产环境部署
vercel --prod当前项目包含 Express 后端服务器，Vercel 主要支持前端静态部署。后端需要单独部署：
选项 1：使用 Vercel Serverless Functions
- 将
server/index.js转换为 Vercel Functions - 在
api/目录下创建 serverless 函数
选项 2：单独部署后端
- 使用 Railway、Render 或 Heroku 部署后端
- 更新前端 API 地址为后端部署地址
选项 3：仅部署前端（当前推荐）
- 前端使用 mock 数据运行
- 后端后续单独部署
- 在 Vercel 项目设置中点击 "Domains"
- 添加你的域名
- 按照提示配置 DNS 记录
- 等待 DNS 生效（通常几分钟）
- 接入语音转写 API（讯飞/阿里云）
- GPT-4 需求智能提取
- 相似需求向量检索
- 企业微信机器人
- 腾讯会议录音同步
- Jira/飞书项目同步
- 多租户支持
- 权限精细化管理
- 数据库升级（PostgreSQL）
- 部署方案（Docker）
MIT License
Made with ❤️ for Product Managers
让每一个需求都被看见，让每一份声音都被听见