基于 iztro 实现的react组件,用于生成一张紫微斗数星盘,并集成了强大的 AI 解读功能。
react component of iztro used to generate an astrolabe of Zi Wei Dou Shu, now with powerful AI interpretation capabilities.
本版本集成了 DeepSeek AI 模型(支持 deepseek-reasoner 推理模型),提供专业的紫微斗数命盘解读服务。
-
智能命盘分析
AI 能够识别完整的命盘数据,包括主星、辅星、四化、流耀等,结合宫位关系进行深度分析。
-
多维度解读
支持从本命性格、事业财运、婚姻情感等多个维度进行详细解读,并提供流年运势分析。
-
流式响应体验
采用流式(Streaming)响应技术,实时展示 AI 的思考过程和解读结果,体验流畅自然。
-
BYOK (Bring Your Own Key)
支持用户配置自己的 DeepSeek API Key,无需依赖第三方服务,确保数据安全与隐私。
-
展示完整紫微斗数星盘
包含所有
主星,辅星,杂耀,四化,神煞,流耀以及星耀的亮度。高亮显示重要的星耀,比如桃花星,解神,禄存和天马。 -
合理的星耀分布
用不同的颜色和字号来将
星耀,宫名,宫干等分区域显示,解盘一目了然,直击重点。 -
清晰的运限指示
在宫位中明显的标示出
大限、小限、流年、流月、流日、流时所在宫位,点击运限指示按钮以后会显示重排后的运限宫名以及运限四化,更加方便的使用叠宫技巧解盘。 -
流耀显示
展示出各个流派都需要的
流耀,可自行选择自己熟悉的流耀进行解盘。 -
三方四正指示线
在中宫会显示
三方四正指示线,点击运限时指示线的指向会动态跟随选中的最小那个运限流动,比如同时选择流年和流月,指示线会跟随流月。 -
强大的动态运限
在
中宫里,除了显示基本信息和三方四正线以外,还加入了可以调整运限的按钮组,可以非常方便的移动各个维度的运限。 -
实用的飞星展示
点击宫干,可以看到宫干飞化出去的四化(以星耀背景色表示,红色:
禄,蓝色:权,绿色:科,黑色:忌)。宫干有自化的时候会在星耀前面显示一条代表四化的色条。 -
简单易用的组件
零配置快速集成到你的页面中,对于集成几乎没有学习成本。你可以根据自己的页面风格自行调整样式,或控制各个元素的显示与隐藏(通过覆盖默认样式)。
集成到页面中的界面如下图所示。你也可以直接访问官方的 紫微斗数 AI解读版 - 紫微斗数在线排盘 查看效果。
如果你觉得该组件对你有用,希望给个⭐️⭐️鼓励一下。
npm install react-iztro -S当然你也可以使用 yarn
yarn add react-iztroimport {Iztrolabe} from "react-iztro"
function App() {
return (
<div className="App" style={{ width: 1024, margin: '50px auto', boxShadow: '0 0 25px rgba(0,0,0,0.25)'}}>
<Iztrolabe
birthday="2003-10-12"
birthTime={1}
birthdayType="solar"
gender="male"
horoscopeDate={new Date()} // 新增参数,设置运限日期【可选,默认为当前时间】
horoscopeHour={1} // 新增参数,设置流时时辰的索引【可选,默认会获取 horoscopeDate 时间】
/>
</div>
);
}
export default App;如果你想将代码克隆到本地查看或者修改代码,可以fork本仓库到你自己的仓库里,然后用以下步骤进行
- 克隆代码
git clone https://github.com/SylarLong/react-iztro.git
- 安装依赖
npm install
或者
yarn
-
启动
npm run storybook或者
yarn storybook -
预览
打开浏览器,输入 http://localhost:6006 即可预览。
如果你想对本程序进行贡献,可以 fork 本仓库到你的仓库里进行改进,完成开发或者修复以后提交 pull request 到本仓库。


