{"id":24305713,"url":"https://github.com/thbgh/thb-components","last_synced_at":"2026-04-20T19:05:33.923Z","repository":{"id":57689629,"uuid":"492242427","full_name":"thbgh/thb-components","owner":"thbgh","description":"前端业务组件库","archived":false,"fork":false,"pushed_at":"2022-05-16T15:53:45.000Z","size":2349,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-15T00:52:28.790Z","etag":null,"topics":["actions","antdesign","react","styleguide","ui-components"],"latest_commit_sha":null,"homepage":"https://thbgh.github.io/thb-components/","language":"JavaScript","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/thbgh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-14T14:41:10.000Z","updated_at":"2023-04-03T02:43:15.000Z","dependencies_parsed_at":"2022-09-26T20:53:41.486Z","dependency_job_id":null,"html_url":"https://github.com/thbgh/thb-components","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/thbgh/thb-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thbgh%2Fthb-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thbgh%2Fthb-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thbgh%2Fthb-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thbgh%2Fthb-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thbgh","download_url":"https://codeload.github.com/thbgh/thb-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thbgh%2Fthb-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32061266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["actions","antdesign","react","styleguide","ui-components"],"created_at":"2025-01-17T02:15:33.340Z","updated_at":"2026-04-20T19:05:33.907Z","avatar_url":"https://github.com/thbgh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 前端业务组件库\n\n## 一、业务组件库产生背景\n\n\u003e 在实际项目中，同一条业务线一般都有自己的一套规范，这套规范可能是基于 antd 等通用 UI 组件的改造，很多时候业务场景都是相似的，为保证多个项目的通用组件统一视觉和交互，因此根据实际业务场景，抽出通用组件形成业务组件库就很有必要，同时也更容易维护。\n\n## 二、技术栈\n\n\u003e 基于 react + antd 根据统一设计规范抽出业务通用组件库文档站基于 react-styleguildist + webpack 最终的业务组件用 rollup 打包\n\n## 三、业务组件开发原则\n\n\u003e 低耦合、模块化、可复用\n\n## 四、开发组件\u0026文档\n\n### 安装依赖\n\n```\nyarn install\nor\nnpm install\n```\n\n### 调试、开发组件库启动文档服务\n\n```\nyarn doc\nor\nnpm run doc\n```\n\n### 组件开发\n\n新组件以文件夹形式统一放到 `components` 下，最终在 `components` 下的 `index.js` 文件中导出\n\n利用 plop 工具快速生成组件文件夹，会根据模板文件生成以组件命名的文件夹，同时修改`components` 下的 `index.js`\n\n```\nyarn plop \u003cComponentName\u003e\nor\nnpx plop \u003cComponentName\u003e\n```\n\n## 提交规范\n\n```\nyarn commit\nor\nnpm run commit\n```\n\ncommit 提交规范步骤提示\n\n### 文档打包\n\n```\nyarn build:doc\nor\nnpm run build:doc\n```\n\n可以打包后部署到 github pages 上 [戳这里看](https://thbgh.github.io/thb-components/) 添加 GitHub Actions 持续集成 提交自动部署\n\n## 五、组件库打包\n\n```\nyarn build\nor\nnpm run build\n```\n\n## 六、发布前准备\n\n1. 首先确保已经登录 npm 账号并且拥有发布权限\n2. 生成版本号、打 tag 和生成更改日志，其他用法详情见[standard-version](https://github.com/conventional-changelog/standard-version)\n\n```\nyarn release -- --release-as \u003c版本号\u003e\n# Or\nnpm run release -- --release-as \u003c版本号\u003e\n```\n\n成功之后把 tag 推到远程\n\n```\ngit push --follow-tags origin main\n```\n\n## 七、发布到 npm\n\n如果之前没有登录过 npm 的话，需要先登录再执行发布命令。放到 npm scripts 里 pub 命令，其实就是打包和发布的组合命令，执行发布之前先打包文档部署。或者不想要部署文档就直接执行发布命令好了\n\n```\nyarn pub\nor\nnpm run pub\n```\n\n## 八、组件库使用\n\n1. 确保项目安装了 `antd` `react` `react-dom`\n2. 直接 npm 安装使用包\n\ntips: rollup 打包已经实现按需引入，无需引入插件\n\n## 体验 demo\n\n安装 npm 包\n\n```\nyarn add thb-components\nor\nnpm install thb-components\n```\n\n组件里使用\n\n```\nimport React from 'react';\nimport { BaseButton, BaseModal } from 'thb-components'\n\nfunction App() {\n  const [visible, setVisible] = React.useState(false);\n  const showModal = () =\u003e {\n    console.log('showmodal');\n    setVisible(true);\n  };\n\n  const closeModal = () =\u003e {\n    console.log('closemodal');\n    setVisible(false);\n  }\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cheader className=\"App-header\"\u003e\n        \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n        \u003cBaseButton onClick={showModal}\u003e点击我展示弹窗\u003c/BaseButton\u003e\n        \u003cBaseModal title=\"Basic Modal\" visible={visible} onOk={closeModal} onCancel={closeModal}\u003e\n          \u003cp\u003eSome contents...\u003c/p\u003e\n        \u003c/BaseModal\u003e\n      \u003c/header\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n## 单元测试\n\n```\nyarn test\nor\nnpm run test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthbgh%2Fthb-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthbgh%2Fthb-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthbgh%2Fthb-components/lists"}