{"id":13901293,"url":"https://github.com/SylarLong/react-iztro","last_synced_at":"2025-07-17T21:32:48.113Z","repository":{"id":193338100,"uuid":"686561742","full_name":"SylarLong/react-iztro","owner":"SylarLong","description":"⭐A react component based on iztro to generate an astrolabe of Zi Wei Dou Shu. 基于iztro实现的紫微斗数星盘React组件。","archived":false,"fork":false,"pushed_at":"2024-11-14T02:39:37.000Z","size":1406,"stargazers_count":381,"open_issues_count":3,"forks_count":56,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-21T01:06:03.140Z","etag":null,"topics":["astrolabe","astrology","chinese-astrology","horoscope","natal-chart","npm","react","typescript","ziweidoushu"],"latest_commit_sha":null,"homepage":"https://docs.iztro.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SylarLong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-03T07:50:20.000Z","updated_at":"2024-11-14T02:39:41.000Z","dependencies_parsed_at":"2023-09-07T19:59:32.839Z","dependency_job_id":"e150c6ac-eaef-4550-b698-769a9645fb5a","html_url":"https://github.com/SylarLong/react-iztro","commit_stats":{"total_commits":63,"total_committers":1,"mean_commits":63.0,"dds":0.0,"last_synced_commit":"bd100d1cd3fb577544a04d14f1b1d38fcb485c82"},"previous_names":["sylarlong/react-iztro"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SylarLong%2Freact-iztro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SylarLong%2Freact-iztro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SylarLong%2Freact-iztro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SylarLong%2Freact-iztro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SylarLong","download_url":"https://codeload.github.com/SylarLong/react-iztro/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226305297,"owners_count":17603788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astrolabe","astrology","chinese-astrology","horoscope","natal-chart","npm","react","typescript","ziweidoushu"],"created_at":"2024-08-06T21:01:08.922Z","updated_at":"2024-11-25T09:31:09.762Z","avatar_url":"https://github.com/SylarLong.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 📦 react-iztro\n\n基于 [iztro](https://github.com/SylarLong/iztro) 实现的react组件，用于生成一张紫微斗数星盘。\n\nreact component of [iztro](https://github.com/SylarLong/iztro) used to generate an astrolabe of Zi Wei Dou Shu.\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm](https://img.shields.io/npm/v/react-iztro?logo=npm\u0026logoColor=%23CB3837)](https://www.npmjs.com/package/react-iztro) \n[![npm](https://img.shields.io/npm/dt/react-iztro?logo=npm\u0026logoColor=%23CB3837)](https://www.npmjs.com/package/react-iztro) \n[![GitHub](https://img.shields.io/github/license/sylarlong/react-iztro)](https://www.npmjs.com/package/react-iztro) \n[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/SylarLong/react-iztro)](https://www.npmjs.com/package/react-iztro) \n[![Package Quality](https://packagequality.com/shield/react-iztro.svg)](https://packagequality.com/#?package=react-iztro) \n\n\u003c/div\u003e\n\n---\n\n## 功能\n\n- 展示完整紫微斗数星盘\n  \n  包含所有 `主星`，`辅星`，`杂耀`，`四化`，`神煞`，`流耀` 以及星耀的 `亮度`。高亮显示重要的星耀，比如 `桃花星`，`解神`，`禄存` 和 `天马`。\n\n- 合理的星耀分布\n\n  用不同的颜色和字号来将 `星耀`，`宫名`，`宫干` 等分区域显示，解盘一目了然，直击重点。\n\n- 清晰的运限指示\n\n  在宫位中明显的标示出 `大限`、`小限`、`流年`、`流月`、`流日`、`流时` 所在宫位，点击运限指示按钮以后会显示重排后的运限宫名以及运限四化，更加方便的使用叠宫技巧解盘。\n\n- 流耀显示\n\n  展示出各个流派都需要的 `流耀`，可自行选择自己熟悉的流耀进行解盘。\n\n- 三方四正指示线\n\n  在中宫会显示 `三方四正` 指示线，点击运限时指示线的指向会动态跟随选中的最小那个运限流动，比如同时选择 `流年` 和 `流月`，指示线会跟随 `流月`。\n\n- 强大的动态运限\n\n  在 `中宫` 里，除了显示基本信息和三方四正线以外，还加入了可以调整运限的按钮组，可以非常方便的移动各个维度的运限。\n\n- 实用的飞星展示\n\n  点击宫干，可以看到宫干飞化出去的四化（以星耀背景色表示，红色：`禄`，蓝色：`权`，绿色：`科`，黑色：`忌`）。宫干有自化的时候会在星耀前面显示一条代表四化的色条。\n\n- 简单易用的组件\n\n  零配置快速集成到你的页面中，对于集成几乎没有学习成本。你可以根据自己的页面风格自行调整样式，或控制各个元素的显示与隐藏（通过覆盖默认样式）。\n\n集成到页面中的界面如下图所示。你也可以直接访问官方的 [紫微派 - 紫微斗数在线排盘](https://ziwei.pub/astrolabe) 查看效果。\n\n\u003cimg width=\"928\" alt=\"react-iztro\" src=\"https://github.com/SylarLong/react-iztro/assets/6510425/2817bb0c-89b5-4f33-ac5c-75481ad33209\"\u003e\n\n如果你觉得该组件对你有用，希望给个⭐️⭐️鼓励一下。\n\n## 安装\n\n```sh\nnpm install react-iztro -S\n```\n\n当然你也可以使用 yarn\n\n```sh\nyarn add react-iztro\n```\n\n## 使用\n\n```ts\nimport {Iztrolabe} from \"react-iztro\"\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\" style={{ width: 1024, margin: '50px auto', boxShadow: '0 0 25px rgba(0,0,0,0.25)'}}\u003e\n      \u003cIztrolabe \n        birthday=\"2003-10-12\" \n        birthTime={1} \n        birthdayType=\"solar\" \n        gender=\"male\" \n        horoscopeDate={new Date()} // 新增参数，设置运限日期【可选，默认为当前时间】\n        horoscopeHour={1}  // 新增参数，设置流时时辰的索引【可选，默认会获取 horoscopeDate 时间】\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n\n```\n\n## 克隆到本地\n\n如果你想将代码克隆到本地查看或者修改代码，可以fork本仓库到你自己的仓库里，然后用以下步骤进行\n\n1. 克隆代码\n\n  ```\n  git clone https://github.com/SylarLong/react-iztro.git\n  ```\n\n2. 安装依赖\n\n  ```\n  npm install\n  ```\n\n  或者\n\n  ```\n  yarn\n  ```\n\n3. 启动\n\n   ```\n   npm run storybook\n   ```\n\n   或者\n\n   ```\n   yarn storybook\n   ```\n\n4. 预览\n\n   打开浏览器，输入 http://localhost:6006 即可预览。\n\n## 贡献\n\n如果你想对本程序进行贡献，可以 `fork` 本仓库到你的仓库里进行改进，完成开发或者修复以后提交 `pull request` 到本仓库。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSylarLong%2Freact-iztro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSylarLong%2Freact-iztro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSylarLong%2Freact-iztro/lists"}