一款现代化的紫微斗数排盘与 AI 智能解读应用
- 🎯 精准排盘 - 根据出生信息生成紫微斗数命盘
- 🤖 AI 解读 - 集成 OpenAI 兼容接口，智能解析命盘含义
- 💾 命盘管理 - 支持保存、加载与导出命盘
- 🖼️ 图片导出 - 一键下载命盘为高清图片
- 🔍 全屏查看 - 沉浸式查看命盘详情
- ⚙️ 个性化设置 - 可隐藏流曜、运限、出生时辰等
- 🌙 深色模式 - 支持明暗主题切换
- 📱 响应式设计 - 适配桌面端与移动端
| 类别 | 技术 |
|---|---|
| 前端框架 | React 19 + TypeScript |
| 构建工具 | Vite 7 |
| 样式方案 | Tailwind CSS 4 |
| 命盘核心 | react-iztro |
| 图表导出 | html2canvas |
| 后端服务 | Express.js |
| 部署平台 | Vercel |
- Node.js 18+（
server.js依赖内置fetch） - npm 或 pnpm
npm install在项目根目录创建 .env 文件：
# OpenAI 兼容接口配置
OPENAI_BASE_URL=https://your-openai-compatible-endpoint
OPENAI_API_KEY=your_api_key
OPENAI_MODEL=gpt-4o-mini
# 服务端口（可选，默认 3088）
PORT=3088# 前端开发服务
npm run dev
# 前后端一起启动
npm run dev:all| 命令 | 描述 |
|---|---|
npm run dev |
启动 Vite 开发服务器 |
npm run dev:all |
同时启动前端与本地服务 |
npm run build |
构建生产版本 |
npm run preview |
预览生产构建 |
npm run lint |
运行 ESLint 代码检查 |
npm run server |
启动 Express 服务（含 API 代理） |
npm run start |
构建并启动生产服务 |
# 构建生产版本
npm run build
# 启动服务
npm run server服务将：
- 提供
dist/目录下的静态资源 - 代理
/api/interpret请求至 AI 接口
点击上方按钮一键部署至 Vercel，部署时需配置以下环境变量：
| 环境变量 | 必填 | 描述 | 示例 |
|---|---|---|---|
OPENAI_BASE_URL |
✅ | OpenAI 兼容 API 的基础地址 | https://api.openai.com/v1 |
OPENAI_API_KEY |
✅ | API 密钥 | sk-xxxxx |
OPENAI_MODEL |
❌ | 模型名称（默认 gpt-4o-mini） |
gpt-4o、gpt-3.5-turbo |
Tip
支持任何 OpenAI 兼容的 API 服务，如 Azure OpenAI、Anthropic Claude、本地 Ollama 等。
zwds/
├── src/
│ ├── components/ # React 组件
│ │ ├── Chart.tsx # 命盘组件
│ │ ├── InputForm.tsx # 输入表单
│ │ ├── AIInterpret.tsx # AI 解读组件
│ │ ├── ChartToolbar.tsx # 工具栏
│ │ ├── SettingsModal.tsx # 设置弹窗
│ │ └── ...
│ ├── App.tsx # 应用入口
│ └── index.css # 全局样式
├── api/ # Vercel Serverless Functions
├── server.js # Express 本地服务
├── vercel.json # Vercel 部署配置
└── package.json
npx tsc -p tsconfig.json --noEmitMIT License
Made with ❤️ for 紫微斗数爱好者