结合传统八字命理与金融可视化技术，将人生运势绘制成 K 线图
人生 K 线是一个创新的命理可视化工具，将传统八字命理学与现代金融 K 线图技术相结合。通过 AI 大模型（Gemini）分析用户的生辰八字，生成 100 年的人生运势 K 线图，帮助用户以直观的方式了解人生起伏、把握关键转折点。
📌 项目说明：本项目的 Demo 和初衷参考了 0xsakura666/lifekline，感谢原作者 @0xsakura666 的创意和灵感。
- 🎯 无需 API 调用：用户手动与 Gemini 对话，避免 API 调用失败
- 📊 可视化展示：100 年运势以 K 线图形式呈现，直观易懂
- 🔍 详细分析：包含总评、事业、财富、婚姻、健康、六亲等 6 个维度
- 🎨 现代 UI：采用 Tailwind CSS，界面简洁美观
- 📱 响应式设计：支持桌面和移动端访问
- 输入四柱干支（年、月、日、时）
- 自动计算大运排序方向（顺行/逆行）
- 支持自定义起运年龄和第一步大运
- 自动生成完整的 Gemini 对话 Prompt
- 包含系统角色设定和用户提示词
- 一键复制，方便与 Gemini 对话
- K 线图：100 年运势走势，绿色代表吉运，红色代表凶运
- 详细批断：点击 K 线查看每年的流年详批
- 多维度分析：6 个维度评分（0-10 分）和详细分析
- 支持上传 Gemini 返回的 JSON 结果文件
- 自动数据格式转换和验证
- 拖拽上传，操作便捷
- Node.js >= 18.0.0
- npm >= 9.0.0
-
克隆项目
git clone <repository-url> cd lifekline
-
安装依赖
npm install
-
启动开发服务器
npm run dev
-
访问应用
- 打开浏览器访问
http://localhost:5173
- 打开浏览器访问
npm run build构建产物将输出到 dist 目录。
- 环境变量（部署时配置）：
SUPABASE_URL：Supabase Project URL（如https://xxxx.supabase.co）SUPABASE_SERVICE_ROLE_KEY：Supabaseservice_role密钥（仅后端函数使用）VITE_LOG_ENDPOINT：前端埋点上报地址，指向部署后的/api/log
- 后端接口：
/api/log（Vercel Function，使用 supabase-js 写入表usage_logs）- 请求体：
{ userId?, account?, operation, pageData?, timestamp? } - 表字段：
id, user_id, account, operation, page_data(jsonb), created_at
- 请求体：
- 前端埋点：
src/services/usageLogger.ts在生成 Prompt、上传结果、加载历史等操作时自动上报。
-
填写基本信息：
- 姓名（可选）
- 性别（乾造/坤造）
- 出生年份（阳历）
-
输入四柱干支：
- 年柱（如：甲申）
- 月柱（如：甲戌）
- 日柱（如：戊辰）
- 时柱（如：丁巳）
-
输入大运信息：
- 起运年龄（虚岁）
- 第一步大运干支
- 点击"生成 Gemini Prompt"按钮
- 弹出窗口显示完整的 Prompt 内容
- 复制"系统角色设定"并发送给 Gemini
- 等待 Gemini 确认后，复制"用户提示词"并发送
- Gemini 会返回 JSON 格式的分析结果
- 将 Gemini 返回的 JSON 保存为文件（如：result.json）
- 关闭 Prompt 窗口
- 在文件上传区域拖拽或选择 JSON 文件
- 系统自动解析并显示 K 线图和分析报告
- K 线图：查看 100 年运势走势
- 点击 K 线：查看每年的详细流年批断
- 分析报告：查看各维度的评分和分析
lifekline/
├── src/ # 源代码目录
│ ├── components/ # React 组件
│ │ ├── AnalysisResult.tsx # 分析结果展示组件
│ │ ├── BaziForm.tsx # 八字输入表单
│ │ ├── DimensionComparisonChart.tsx # 多维度对比图
│ │ ├── EnhancedKLineChart.tsx # 增强K线图组件
│ │ ├── ErrorBoundary.tsx # 错误边界组件
│ │ ├── ExportButton.tsx # 导出功能组件
│ │ ├── FileUpload.tsx # 文件上传组件
│ │ ├── HistoryPanel.tsx # 历史记录面板
│ │ ├── LoadingSpinner.tsx # 加载动画组件
│ │ ├── PromptDisplay.tsx # Prompt显示组件
│ │ ├── StatisticsPanel.tsx # 统计分析面板
│ │ ├── Toast.tsx # Toast通知组件
│ │ └── ToastContainer.tsx # Toast容器组件
│ ├── hooks/ # 自定义 Hooks
│ │ └── useToast.ts # Toast Hook
│ ├── services/ # 服务层
│ │ ├── geminiService.ts # Gemini API服务（保留用于向后兼容）
│ │ └── promptGenerator.ts # Prompt生成服务
│ ├── utils/ # 工具函数
│ │ ├── storage.ts # 本地存储工具
│ │ └── validation.ts # 数据验证工具
│ ├── App.tsx # 主应用组件
│ ├── index.tsx # 入口文件
│ ├── types.ts # TypeScript类型定义
│ ├── constants.ts # 常量配置
│ └── vite-env.d.ts # Vite类型声明
├── public/ # 静态资源目录
│ ├── prompts/ # Prompt 模板文件
│ │ ├── default.txt # 默认 Prompt
│ │ ├── detailed.txt # 详细 Prompt
│ │ ├── detailed_v2.txt # 详细 Prompt V2（全息数据版）
│ │ └── detailed_v3.txt # 详细 Prompt V3（最新版）
│ ├── metadata.json # 元数据
│ └── web.config # Web服务器配置
├── docs/ # 文档目录
│ ├── README.md # 文档索引
│ ├── DEPLOYMENT.md # 部署指南
│ └── TROUBLESHOOTING.md # 故障排除指南
├── data/ # 数据目录
│ ├── examples/ # 示例数据（可提交到Git）
│ │ ├── result.json # 原始示例数据
│ │ └── result-converted.json # 转换后的示例数据
│ └── Users_data/ # 用户数据（已加入.gitignore）
├── .github/ # GitHub配置
│ └── workflows/ # GitHub Actions工作流
│ └── deploy.yml # 自动部署配置
├── index.html # HTML模板（Vite入口）
├── vite.config.ts # Vite配置
├── tailwind.config.js # Tailwind CSS配置
├── tsconfig.json # TypeScript配置
├── package.json # 项目配置
├── .gitignore # Git忽略文件
└── README.md # 项目说明文档
- React 19 - UI 框架
- TypeScript - 类型安全
- Vite - 构建工具
- Tailwind CSS - 样式框架
- Lucide React - 图标库
- Recharts - 图表库
- Prompt 生成 - 自动生成完整的 Gemini 对话 Prompt
- 数据转换 - 自动转换 Gemini 返回的 JSON 格式
- 文件上传 - 支持拖拽上传 JSON 文件
{
name?: string; // 姓名（可选）
gender: Gender; // 性别（MALE/FEMALE）
birthYear: string; // 出生年份
yearPillar: string; // 年柱
monthPillar: string; // 月柱
dayPillar: string; // 日柱
hourPillar: string; // 时柱
startAge: string; // 起运年龄（虚岁）
firstDaYun: string; // 第一步大运
}{
chartData: KLinePoint[]; // K线数据（100个数据点）
analysis: AnalysisData; // 分析报告
}{
age: number; // 年龄（1-100）
year: number; // 年份
ganZhi: string; // 流年干支
daYun?: string; // 大运干支
open: number; // 开盘价（0-100）
close: number; // 收盘价（0-100）
high: number; // 最高价（0-100）
low: number; // 最低价（0-100）
score: number; // 综合评分（0-100）
reason: string; // 流年详批（约100字）
}- 新增组件：在
components/目录下创建新组件 - 新增服务：在
services/目录下创建新服务 - 类型定义：在
types.ts中添加类型定义
- 使用 TypeScript 严格模式
- 遵循 React Hooks 最佳实践
- 组件使用函数式组件
- 样式使用 Tailwind CSS
- 使用浏览器开发者工具查看网络请求
- 检查控制台日志了解数据流转
- 使用 React DevTools 调试组件状态
- 数据准确性：本项目仅供娱乐与文化研究，请勿迷信
- 数据隐私：所有数据在本地处理，不会上传到服务器
- 浏览器兼容：建议使用现代浏览器（Chrome、Firefox、Edge 等）
欢迎提交 Issue 和 Pull Request！
本项目仅供学习和研究使用。
- 项目地址：GitHub
- 在线演示：lesliewylie.github.io
- 问题反馈：Issues
- 特别感谢：0xsakura666/lifekline 项目及其作者 @0xsakura666，本项目的 Demo 和初衷参考了该项目的创意
- 感谢传统八字命理学的智慧
- 感谢 Gemini AI 的强大能力
- 感谢所有开源项目的支持
⭐ 如果这个项目对你有帮助，请给个 Star！