<p>一个运用 React18, react-router-dom v6,Redux/toolkit,Vite5, TypeScript, Antd和 UnoCSS的清新优雅、高颜值且功能强大的React后台管理模板</p>
<h3 id="github地址：httpsgithubcommufeng889react-soybean-admin">github地址：<a href="https://github.com/mufeng889/react-soybean-admin">https://github.com/mufeng889/react-soybean-admin</a></h3>
<h3 id="在线预览httpsreact-soybeanohh-889com">在线预览:<a href="https://react-soybean.ohh-889.com/">https://react-soybean.ohh-889.com/</a></h3>
<h3 id="国内加速访问-httpsreact-soybean-adminpagesdev">国内加速访问: <a href="https://react-soybean-admin.pages.dev%5B/%5D">https://react-soybean-admin.pages.dev[/]</a></h3>


About
一个运用 React18, react-router-dom v6,Redux/toolkit,Vite5, TypeScript, Antd和 UnoCSS的清新优雅、高颜值且功能强大的React后台管理模板。

react-soybean-admin

<p>&lt;div align=&quot;center&quot;&gt; 
&lt;br&gt; 
&lt;br&gt;
&lt;img src=&quot;<a href="https://github.com/d3george/slash-admin/blob/main/src/assets/images/logo.png">https://github.com/d3george/slash-admin/blob/main/src/assets/images/logo.png</a>&quot; height=&quot;140&quot; /&gt;
&lt;h1&gt; Slash Admin &lt;/h1&gt;
&lt;span style=&quot;font-size: 14px&quot;&gt;
  Slash Admin 是一款现代化的后台管理模板，基于 React 18、Vite、Ant Design 和 TypeScript 构建。它旨在帮助开发人员快速搭建功能强大的后台管理系统。
&lt;/span&gt;

</p>
<p>&lt;/div&gt;

</p>
<p><strong>中文</strong> | <a href="./README.md">English</a></p>
<h2 id="赞助">赞助</h2>
<p>&lt;div style=&quot;display: flex; gap: 50px&quot;&gt; 
  &lt;img style=&quot;width:300px&quot; src=&quot;<a href="https://d3george.github.io/github-static/pay/weixin.jpg">https://d3george.github.io/github-static/pay/weixin.jpg</a>&quot; &gt;
  &lt;img style=&quot;width:300px&quot; src=&quot;<a href="https://d3george.github.io/github-static/pay/buymeacoffee.png">https://d3george.github.io/github-static/pay/buymeacoffee.png</a>&quot; /&gt;
&lt;/div&gt;


</p>
<h2 id="预览">预览</h2>
<ul>
<li><a href="https://admin.slashspaces.com/">https://admin.slashspaces.com/</a></li>
</ul>
<table>
<thead>
<tr>
<th><img src="https://d3george.github.io/github-static/slash-admin/login.jpeg" alt="login.png"></th>
<th><img src="https://d3george.github.io/github-static/slash-admin/login_dark.jpeg" alt="login_dark.png"></th>
</tr>
</thead>
<tbody><tr>
<td><img src="https://d3george.github.io/github-static/slash-admin/analysis.png" alt="analysis.png"></td>
<td><img src="https://d3george.github.io/github-static/slash-admin/workbench.png" alt="workbench.png"></td>
</tr>
</tbody></table>
<h2 id="特性">特性</h2>
<ul>
<li>使用 React 18 hooks 进行构建。</li>
<li>基于 Vite 进行快速开发和热模块替换。</li>
<li>集成 Ant Design，提供丰富的 UI 组件和设计模式。</li>
<li>使用 TypeScript 编写，提供类型安全性和更好的开发体验。</li>
<li>响应式设计，适应各种屏幕尺寸和设备。</li>
<li>灵活的路由配置，支持多级嵌套路由。</li>
<li>集成权限管理，根据用户角色控制页面访问权限。</li>
<li>集成国际化支持，轻松切换多语言。</li>
<li>集成常见的后台管理功能，如用户管理、角色管理、权限管理等。</li>
<li>可定制的主题和样式，以满足您的品牌需求。</li>
<li>基于 MSW 和 Faker.js 的Mock方案</li>
<li>使用 Zustand 进行状态管理</li>
<li>使用 React-Query 进行数据获取</li>
</ul>
<h2 id="文档">文档</h2>
<p><a href="https://docs-admin.slashspaces.com/">文档地址</a></p>
<h2 id="快速开始">快速开始</h2>
<h3 id="获取项目代码">获取项目代码</h3>
<pre><code class="language-bash">git clone https://github.com/d3george/slash-admin.git
</code></pre>
<h3 id="安装依赖">安装依赖</h3>
<p>在项目根目录下运行以下命令安装项目依赖：</p>
<pre><code class="language-bash">pnpm install
</code></pre>
<h3 id="启动开发服务器">启动开发服务器</h3>
<p>运行以下命令以启动开发服务器：</p>
<pre><code class="language-bash">pnpm dev
</code></pre>
<p>访问 <a href="http://localhost:3001">http://localhost:3001</a> 查看您的应用程序。</p>
<h3 id="构建生产版本">构建生产版本</h3>
<p>运行以下命令以构建生产版本：</p>
<pre><code class="language-bash">pnpm build
</code></pre>
<p>构建后的文件将位于 <code>dist</code> 目录中。</p>
<h2 id="容器化部署">容器化部署</h2>
<h3 id="构建镜像并运行容器">构建镜像并运行容器</h3>
<h4 id="构建镜像">构建镜像</h4>
<p>在终端中进入项目根目录，并执行以下命令来构建 Docker 镜像:</p>
<pre><code>docker build -t your-image-name .
</code></pre>
<p>确保将 <code>your-image-name</code> 替换为你自己的镜像名称</p>
<h4 id="运行容器">运行容器</h4>
<p>使用以下命令在 Docker 容器中运行你的应用：</p>
<pre><code>docker run -p 3001:80 your-image-name
</code></pre>
<p>这将在容器的端口 <code>80</code> (暴露在<code>Dockerfile</code>中) 上运行你的应用，并将其映射到你主机的端口 <code>3001</code> 上。</p>
<p>现在，你可以通过访问 <a href="http://localhost:3001">http://localhost:3001</a> 来查看部署的应用。</p>
<h3 id="使用docker-composeyaml">使用docker-compose.yaml</h3>
<p>在终端中进入项目根目录，并执行以下命令来启动 Docker Compose：</p>
<pre><code>docker-compose up -d
</code></pre>
<p>Docker Compose 根据<code>docker-compose.yaml</code>定义的配置构建镜像并在后台运行容器.</p>
<p>容器运行成功后，同样可以通过访问 <a href="http://localhost:3001%E6%9D%A5%E6%9F%A5%E7%9C%8B%E9%83%A8%E7%BD%B2%E7%9A%84%E5%BA%94%E7%94%A8%E3%80%82">http://localhost:3001来查看部署的应用。</a></p>
<p>参考<a href="./commitlint.config.js">.commitlint.config.js</a></p>
<ul>
<li><code>feat</code> 新功能</li>
<li><code>fix</code> 修复bug</li>
<li><code>docs</code> 文档注释</li>
<li><code>style</code> 代码格式(不影响代码运行的变动)</li>
<li><code>refactor</code> 重构</li>
<li><code>perf</code> 性能优化</li>
<li><code>revert</code> 回滚commit</li>
<li><code>test</code> 测试相关</li>
<li><code>chore</code> 构建过程或辅助工具的变动</li>
<li><code>ci</code> 修改CI配置、脚本</li>
<li><code>types</code> 类型定义文件修改</li>
<li><code>wip</code> 开发中</li>
</ul>
<h2 id="参与献者-✨">参与献者 ✨</h2>
<p>&lt;!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --&gt;
</p>
<p><a href="#contributors-"><img src="https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square" alt="All Contributors"></a></p>
<p>&lt;!-- ALL-CONTRIBUTORS-BADGE:END --&gt;

</p>
<p>感谢这些出色的贡献者 (<a href="https://allcontributors.org/docs/en/emoji-key">emoji key</a>):</p>
<p>&lt;!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --&gt;
</p>
<p>&lt;!-- prettier-ignore-start --&gt;
</p>
<p>&lt;!-- markdownlint-disable --&gt;
</p>
<p>&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;14.28%&quot;&gt;&lt;a href=&quot;<a href="https://blog.slashspaces.com/&quot;&gt;&lt;img">https://blog.slashspaces.com/&quot;&gt;&lt;img</a> src=&quot;<a href="https://avatars.githubusercontent.com/u/143698843?v=4?s=72">https://avatars.githubusercontent.com/u/143698843?v=4?s=72</a>&quot; width=&quot;72px;&quot; alt=&quot;kevin&quot;/&gt;&lt;br /&gt;&lt;sub&gt;&lt;b&gt;kevin&lt;/b&gt;&lt;/sub&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;#design-d3george&quot; title=&quot;Design&quot;&gt;🎨&lt;/a&gt; &lt;a href=&quot;#tool-d3george&quot; title=&quot;Tools&quot;&gt;🔧&lt;/a&gt; &lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/commits?author=d3george">https://github.com/d3george/slash-admin/commits?author=d3george</a>&quot; title=&quot;Code&quot;&gt;💻&lt;/a&gt; &lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/issues?q=author%3Ad3george">https://github.com/d3george/slash-admin/issues?q=author%3Ad3george</a>&quot; title=&quot;Bug reports&quot;&gt;🐛&lt;/a&gt; &lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/commits?author=d3george">https://github.com/d3george/slash-admin/commits?author=d3george</a>&quot; title=&quot;Documentation&quot;&gt;📖&lt;/a&gt;&lt;/td&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;14.28%&quot;&gt;&lt;a href=&quot;<a href="https://github.com/ydiego&quot;&gt;&lt;img">https://github.com/ydiego&quot;&gt;&lt;img</a> src=&quot;<a href="https://avatars.githubusercontent.com/u/13268002?v=4?s=72">https://avatars.githubusercontent.com/u/13268002?v=4?s=72</a>&quot; width=&quot;72px;&quot; alt=&quot;YDiego&quot;/&gt;&lt;br /&gt;&lt;sub&gt;&lt;b&gt;YDiego&lt;/b&gt;&lt;/sub&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/commits?author=ydiego">https://github.com/d3george/slash-admin/commits?author=ydiego</a>&quot; title=&quot;Code&quot;&gt;💻&lt;/a&gt; &lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/issues?q=author%3Aydiego">https://github.com/d3george/slash-admin/issues?q=author%3Aydiego</a>&quot; title=&quot;Bug reports&quot;&gt;🐛&lt;/a&gt;&lt;/td&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;14.28%&quot;&gt;&lt;a href=&quot;<a href="https://fuxiaochen.com/&quot;&gt;&lt;img">https://fuxiaochen.com/&quot;&gt;&lt;img</a> src=&quot;<a href="https://avatars.githubusercontent.com/u/65325004?v=4?s=72">https://avatars.githubusercontent.com/u/65325004?v=4?s=72</a>&quot; width=&quot;72px;&quot; alt=&quot;付小晨&quot;/&gt;&lt;br /&gt;&lt;sub&gt;&lt;b&gt;付小晨&lt;/b&gt;&lt;/sub&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/commits?author=aifuxi">https://github.com/d3george/slash-admin/commits?author=aifuxi</a>&quot; title=&quot;Code&quot;&gt;💻&lt;/a&gt; &lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/issues?q=author%3Aaifuxi">https://github.com/d3george/slash-admin/issues?q=author%3Aaifuxi</a>&quot; title=&quot;Bug reports&quot;&gt;🐛&lt;/a&gt;&lt;/td&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;14.28%&quot;&gt;&lt;a href=&quot;<a href="https://github.com/xinmans&quot;&gt;&lt;img">https://github.com/xinmans&quot;&gt;&lt;img</a> src=&quot;<a href="https://avatars.githubusercontent.com/u/2713008?v=4?s=72">https://avatars.githubusercontent.com/u/2713008?v=4?s=72</a>&quot; width=&quot;72px;&quot; alt=&quot;xinmans&quot;/&gt;&lt;br /&gt;&lt;sub&gt;&lt;b&gt;xinmans&lt;/b&gt;&lt;/sub&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/commits?author=xinmans">https://github.com/d3george/slash-admin/commits?author=xinmans</a>&quot; title=&quot;Code&quot;&gt;💻&lt;/a&gt; &lt;a href=&quot;#tool-xinmans&quot; title=&quot;Tools&quot;&gt;🔧&lt;/a&gt;&lt;/td&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;14.28%&quot;&gt;&lt;a href=&quot;<a href="https://github.com/stitchLau&quot;&gt;&lt;img">https://github.com/stitchLau&quot;&gt;&lt;img</a> src=&quot;<a href="https://avatars.githubusercontent.com/u/52861440?v=4?s=72">https://avatars.githubusercontent.com/u/52861440?v=4?s=72</a>&quot; width=&quot;72px;&quot; alt=&quot;stitch&quot;/&gt;&lt;br /&gt;&lt;sub&gt;&lt;b&gt;stitch&lt;/b&gt;&lt;/sub&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/commits?author=stitchLau">https://github.com/d3george/slash-admin/commits?author=stitchLau</a>&quot; title=&quot;Code&quot;&gt;💻&lt;/a&gt; &lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/issues?q=author%3AstitchLau">https://github.com/d3george/slash-admin/issues?q=author%3AstitchLau</a>&quot; title=&quot;Bug reports&quot;&gt;🐛&lt;/a&gt;&lt;/td&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;14.28%&quot;&gt;&lt;a href=&quot;<a href="https://github.com/ntscshen&quot;&gt;&lt;img">https://github.com/ntscshen&quot;&gt;&lt;img</a> src=&quot;<a href="https://avatars.githubusercontent.com/u/21041458?v=4?s=72">https://avatars.githubusercontent.com/u/21041458?v=4?s=72</a>&quot; width=&quot;72px;&quot; alt=&quot;ntscshen&quot;/&gt;&lt;br /&gt;&lt;sub&gt;&lt;b&gt;ntscshen&lt;/b&gt;&lt;/sub&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;#tool-ntscshen&quot; title=&quot;Tools&quot;&gt;🔧&lt;/a&gt;&lt;/td&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;14.28%&quot;&gt;&lt;a href=&quot;<a href="https://github.com/298977887&quot;&gt;&lt;img">https://github.com/298977887&quot;&gt;&lt;img</a> src=&quot;<a href="https://avatars.githubusercontent.com/u/127030474?v=4?s=72">https://avatars.githubusercontent.com/u/127030474?v=4?s=72</a>&quot; width=&quot;72px;&quot; alt=&quot;298977887&quot;/&gt;&lt;br /&gt;&lt;sub&gt;&lt;b&gt;298977887&lt;/b&gt;&lt;/sub&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/commits?author=298977887">https://github.com/d3george/slash-admin/commits?author=298977887</a>&quot; title=&quot;Code&quot;&gt;💻&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;14.28%&quot;&gt;&lt;a href=&quot;<a href="https://www.yuque.com/eternallycyf&quot;&gt;&lt;img">https://www.yuque.com/eternallycyf&quot;&gt;&lt;img</a> src=&quot;<a href="https://avatars.githubusercontent.com/u/63464198?v=4?s=72">https://avatars.githubusercontent.com/u/63464198?v=4?s=72</a>&quot; width=&quot;72px;&quot; alt=&quot;eternallycyf&quot;/&gt;&lt;br /&gt;&lt;sub&gt;&lt;b&gt;eternallycyf&lt;/b&gt;&lt;/sub&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;#tool-eternallycyf&quot; title=&quot;Tools&quot;&gt;🔧&lt;/a&gt;&lt;/td&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;14.28%&quot;&gt;&lt;a href=&quot;<a href="https://github.com/hugepizza&quot;&gt;&lt;img">https://github.com/hugepizza&quot;&gt;&lt;img</a> src=&quot;<a href="https://avatars.githubusercontent.com/u/23519941?v=4?s=72">https://avatars.githubusercontent.com/u/23519941?v=4?s=72</a>&quot; width=&quot;72px;&quot; alt=&quot;lei&quot;/&gt;&lt;br /&gt;&lt;sub&gt;&lt;b&gt;lei&lt;/b&gt;&lt;/sub&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/issues?q=author%3Ahugepizza">https://github.com/d3george/slash-admin/issues?q=author%3Ahugepizza</a>&quot; title=&quot;Bug reports&quot;&gt;🐛&lt;/a&gt;&lt;/td&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;14.28%&quot;&gt;&lt;a href=&quot;<a href="https://github.com/fliu2476&quot;&gt;&lt;img">https://github.com/fliu2476&quot;&gt;&lt;img</a> src=&quot;<a href="https://avatars.githubusercontent.com/u/19582252?v=4?s=72">https://avatars.githubusercontent.com/u/19582252?v=4?s=72</a>&quot; width=&quot;72px;&quot; alt=&quot;fliu2476&quot;/&gt;&lt;br /&gt;&lt;sub&gt;&lt;b&gt;fliu2476&lt;/b&gt;&lt;/sub&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/issues?q=author%3Afliu2476">https://github.com/d3george/slash-admin/issues?q=author%3Afliu2476</a>&quot; title=&quot;Bug reports&quot;&gt;🐛&lt;/a&gt;&lt;/td&gt;
      &lt;td align=&quot;center&quot; valign=&quot;top&quot; width=&quot;14.28%&quot;&gt;&lt;a href=&quot;<a href="https://github.com/chenyuxi2002&quot;&gt;&lt;img">https://github.com/chenyuxi2002&quot;&gt;&lt;img</a> src=&quot;<a href="https://avatars.githubusercontent.com/u/59554586?v=4?s=72">https://avatars.githubusercontent.com/u/59554586?v=4?s=72</a>&quot; width=&quot;72px;&quot; alt=&quot;tzcat8&quot;/&gt;&lt;br /&gt;&lt;sub&gt;&lt;b&gt;tzcat8&lt;/b&gt;&lt;/sub&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;<a href="https://github.com/d3george/slash-admin/commits?author=chenyuxi2002">https://github.com/d3george/slash-admin/commits?author=chenyuxi2002</a>&quot; title=&quot;Documentation&quot;&gt;📖&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

</p>
<p>&lt;!-- markdownlint-restore --&gt;
</p>
<p>&lt;!-- prettier-ignore-end --&gt;

</p>
<p>&lt;!-- ALL-CONTRIBUTORS-LIST:END --&gt;</p>


Slash Admin 是一款现代化的后台管理模板，基于 React 18、Vite、Ant Design 和 TypeScript 构建。它旨在帮助开发人员快速搭建功能强大的后台管理系统

slash-admin: A modern react admin. It is based on react 18, vite and TypeScript. It's fast !

<p><strong>用到的一些插件</strong>
React 18。recoil 状态管理工具。antd design 5 版本组件库。dayjs。axios。eslint。less。vite。</p>
<p><strong>运行命令</strong></p>
<ol>
<li>pnpm install</li>
<li>pnpm install @wangeditor/editor</li>
<li>启动项目 pnpm dev</li>
<li>打包项目 pnpm build</li>
</ol>
<p><strong>React Context 开发模式</strong>
完全避免大量拆分组件之后互相传值导致代码冗余的问题</p>
<p><strong>代码规范配置</strong></p>
<ol>
<li><ol>
<li>内置了 .eslintrc.cjs .eslintignore prettierrc.cjs</li>
</ol>
</li>
<li><ol start="2">
<li>可以下载 Eslint 。 Prettier - Code formatter。 插件统一你团队的代码格式</li>
</ol>
</li>
<li><ol start="3">
<li>配置了一键格式化全局项目代码，命令: pnpm format</li>
</ol>
</li>
<li>代码风格的配置都在 .eslintrc.cjs 文件，如需额外新增配置可前往 <a href="https://eslint.org/docs/latest/use/configure/">https://eslint.org/docs/latest/use/configure/</a> 查找对应配置</li>
</ol>
<p><strong>内置的一些东西</strong></p>
<ol>
<li>配置了导航栏页签功能 使用的是 Tabs 组件</li>
<li>配置了动态路由 在项目的首页有方法路径以及如何实现</li>
<li>配置了项目全局的主题样式，组件库的样式以及菜单栏的样式</li>
<li>axios 的封装，请求 type 类型的封装，更好的调用接口方式</li>
</ol>


集成 react 18.2 , antd design 5 , vite , Hooks context 开发模式。 recoil 状态管理的后台管理框架

<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://github.com/GoAdminGroup/go-admin">https://github.com/GoAdminGroup/go-admin</a>&quot;&gt;
    &lt;img width=&quot;48%&quot; alt=&quot;go-admin&quot; src=&quot;<a href="http://quick.go-admin.cn/official/assets/imgs/github_logo.png">http://quick.go-admin.cn/official/assets/imgs/github_logo.png</a>&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;
&lt;p align=&quot;center&quot;&gt;
    遗失的Golang编写的数据可视化与管理平台构建框架
&lt;/p&gt;
&lt;p align=&quot;center&quot;&gt;
&lt;a href=&quot;<a href="http://drone.go-admin.com/GoAdminGroup/go-admin&quot;&gt;&lt;img">http://drone.go-admin.com/GoAdminGroup/go-admin&quot;&gt;&lt;img</a> alt=&quot;Build Status&quot; src=&quot;<a href="http://drone.go-admin.com/api/badges/GoAdminGroup/go-admin/status.svg?ref=refs/heads/master&quot;&gt;&lt;/a">http://drone.go-admin.com/api/badges/GoAdminGroup/go-admin/status.svg?ref=refs/heads/master&quot;&gt;&lt;/a</a>&gt;
  &lt;a href=&quot;<a href="https://goreportcard.com/report/github.com/GoAdminGroup/go-admin&quot;&gt;&lt;img">https://goreportcard.com/report/github.com/GoAdminGroup/go-admin&quot;&gt;&lt;img</a> alt=&quot;Go Report Card&quot; src=&quot;<a href="https://camo.githubusercontent.com/59eed852617e19c272a4a4764fd09c669957fe75/68747470733a2f2f676f7265706f7274636172642e636f6d2f62616467652f6769746875622e636f6d2f6368656e6867352f676f2d61646d696e&quot;&gt;&lt;/a">https://camo.githubusercontent.com/59eed852617e19c272a4a4764fd09c669957fe75/68747470733a2f2f676f7265706f7274636172642e636f6d2f62616467652f6769746875622e636f6d2f6368656e6867352f676f2d61646d696e&quot;&gt;&lt;/a</a>&gt;
  &lt;a href=&quot;<a href="https://goreportcard.com/report/github.com/GoAdminGroup/go-admin&quot;&gt;&lt;img">https://goreportcard.com/report/github.com/GoAdminGroup/go-admin&quot;&gt;&lt;img</a> alt=&quot;golang&quot; src=&quot;<a href="https://img.shields.io/badge/awesome-golang-blue.svg&quot;&gt;&lt;/a">https://img.shields.io/badge/awesome-golang-blue.svg&quot;&gt;&lt;/a</a>&gt;
  &lt;a href=&quot;<a href="https://t.me/joinchat/NlyH6Bch2QARZkArithKvg">https://t.me/joinchat/NlyH6Bch2QARZkArithKvg</a>&quot; rel=&quot;nofollow&quot;&gt;&lt;img alt=&quot;telegram&quot; src=&quot;<a href="https://img.shields.io/badge/chat%20on-telegram-blue">https://img.shields.io/badge/chat%20on-telegram-blue</a>&quot; style=&quot;max-width:100%;&quot;&gt;&lt;/a&gt;
  &lt;a href=&quot;<a href="https://shang.qq.com/wpa/qunwpa?idkey=ab18729bba609c220f31516a4eb9fce27f582458bd9a865b46523adb5632b873&quot;&gt;&lt;img">https://shang.qq.com/wpa/qunwpa?idkey=ab18729bba609c220f31516a4eb9fce27f582458bd9a865b46523adb5632b873&quot;&gt;&lt;img</a> alt=&quot;qq群&quot; src=&quot;<a href="https://img.shields.io/badge/QQ-874825430-yellow.svg&quot;&gt;&lt;/a">https://img.shields.io/badge/QQ-874825430-yellow.svg&quot;&gt;&lt;/a</a>&gt;
  &lt;a href=&quot;<a href="https://godoc.org/github.com/GoAdminGroup/go-admin">https://godoc.org/github.com/GoAdminGroup/go-admin</a>&quot; rel=&quot;nofollow&quot;&gt;&lt;img src=&quot;<a href="https://camo.githubusercontent.com/a9a286d43bdfff9fb41b88b25b35ea8edd2634fc/68747470733a2f2f676f646f632e6f72672f6769746875622e636f6d2f646572656b7061726b65722f64656c76653f7374617475732e737667">https://camo.githubusercontent.com/a9a286d43bdfff9fb41b88b25b35ea8edd2634fc/68747470733a2f2f676f646f632e6f72672f6769746875622e636f6d2f646572656b7061726b65722f64656c76653f7374617475732e737667</a>&quot; alt=&quot;GoDoc&quot; data-canonical-src=&quot;<a href="https://godoc.org/github.com/derekparker/delve?status.svg">https://godoc.org/github.com/derekparker/delve?status.svg</a>&quot; style=&quot;max-width:100%;&quot;&gt;&lt;/a&gt;
  &lt;a href=&quot;<a href="https://raw.githubusercontent.com/GoAdminGroup/go-admin/master/LICENSE">https://raw.githubusercontent.com/GoAdminGroup/go-admin/master/LICENSE</a>&quot; rel=&quot;nofollow&quot;&gt;&lt;img src=&quot;<a href="https://img.shields.io/badge/license-Apache2.0-blue.svg">https://img.shields.io/badge/license-Apache2.0-blue.svg</a>&quot; alt=&quot;license&quot; data-canonical-src=&quot;<a href="https://img.shields.io/badge/license-Apache2.0-blue.svg">https://img.shields.io/badge/license-Apache2.0-blue.svg</a>&quot; style=&quot;max-width:100%;&quot;&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p align=&quot;center&quot;&gt;
    由&lt;a href=&quot;<a href="https://github.com/z-song/laravel-admin">https://github.com/z-song/laravel-admin</a>&quot; target=&quot;_blank&quot;&gt;laravel-admin&lt;/a&gt;启发
&lt;/p&gt;

</p>
<h2 id="前言">前言</h2>
<p>GoAdmin 可以帮助你的golang应用快速实现数据可视化，搭建一个数据管理平台。</p>
<p>线上论坛：<a href="http://discuss.go-admin.com">http://discuss.go-admin.com</a></p>
<p>线上demo：<a href="https://demo.go-admin.cn">https://demo.go-admin.cn</a></p>
<p>上手例子：<a href="https://github.com/GoAdminGroup/example/blob/master/README_CN.md">https://github.com/GoAdminGroup/example</a></p>
<p>GoAdmin+vue 例子： <a href="https://github.com/GoAdminGroup/goadmin-vue-example">https://github.com/GoAdminGroup/goadmin-vue-example</a></p>
<p><a href="http://doc.go-admin.cn/zh">文档地址1</a> | <a href="https://book.go-admin.cn/zh">备用文档地址1</a></p>
<p><img src="http://file.go-admin.cn/introduction/interface_3.png" alt=""></p>
<h2 id="特征">特征</h2>
<ul>
<li>🚀 <strong>高生产效率</strong>: 10分钟内做一个好看的管理后台</li>
<li>🎨 <strong>主题</strong>: 默认为adminlte，更多好看的主题正在制作中，欢迎给我们留言</li>
<li>🔢 <strong>插件化</strong>: 提供插件使用，真正实现一个插件解决不了问题，那就两个</li>
<li>✅ <strong>认证</strong>: 开箱即用的rbac认证系统</li>
<li>⚙️ <strong>框架支持</strong>: 支持大部分框架接入，让你更容易去上手和扩展</li>
</ul>
<h2 id="翻译">翻译</h2>
<p>我们需要您的帮忙： <a href="https://github.com/GoAdminGroup/docs/issues/1">https://github.com/GoAdminGroup/docs/issues/1</a></p>
<h2 id="谁在使用goadmin">谁在使用GoAdmin</h2>
<p><a href="https://github.com/GoAdminGroup/go-admin/issues/71">评论这个issue告诉我们</a>.</p>
<h2 id="使用">使用</h2>
<p>提示：现在你也可以这样做。</p>
<pre><code class="language-shell">$ mkdir new_project &amp;&amp; cd new_project
$ go install github.com/GoAdminGroup/go-admin/adm
$ adm init -l cn
</code></pre>
<p>或者：（使用v1.2.16的adm）</p>
<pre><code class="language-shell">$ mkdir new_project &amp;&amp; cd new_project
$ go install github.com/GoAdminGroup/go-admin/adm
$ adm init web -l cn
</code></pre>
<p>通过以下三步运行：</p>
<h3 id="第一步：导入-sql">第一步：导入 sql</h3>
<ul>
<li><a href="https://raw.githubusercontent.com/GoAdminGroup/go-admin/master/data/admin.sql">mysql</a></li>
<li><a href="https://raw.githubusercontent.com/GoAdminGroup/go-admin/master/data/admin.mssql">mssql</a></li>
<li><a href="https://raw.githubusercontent.com/GoAdminGroup/go-admin/master/data/admin.pgsql">postgresql</a></li>
<li><a href="https://raw.githubusercontent.com/GoAdminGroup/go-admin/master/data/admin.db">sqlite</a></li>
</ul>
<h3 id="第二步：创建-maingo">第二步：创建 main.go</h3>
<p>&lt;details&gt;&lt;summary&gt;main.go&lt;/summary&gt;
&lt;p&gt;

</p>
<pre><code class="language-go">package main

import (
    &quot;github.com/gin-gonic/gin&quot;
    _ &quot;github.com/GoAdminGroup/go-admin/adapter/gin&quot;
    _ &quot;github.com/GoAdminGroup/go-admin/modules/db/drivers/mysql&quot;
    &quot;github.com/GoAdminGroup/go-admin/engine&quot;
    &quot;github.com/GoAdminGroup/go-admin/plugins/admin&quot;
    &quot;github.com/GoAdminGroup/themes/adminlte&quot;
    &quot;github.com/GoAdminGroup/go-admin/modules/config&quot;
    &quot;github.com/GoAdminGroup/go-admin/template&quot;
        &quot;github.com/GoAdminGroup/go-admin/template/chartjs&quot;
        &quot;github.com/GoAdminGroup/go-admin/template/types&quot;
    &quot;github.com/GoAdminGroup/go-admin/examples/datamodel&quot;
    &quot;github.com/GoAdminGroup/go-admin/modules/language&quot;
)

func main() {
    r := gin.Default()

    eng := engine.Default()

    // global config
    cfg := config.Config{
        Databases: config.DatabaseList{
            &quot;default&quot;: {
            Host:         &quot;127.0.0.1&quot;,
            Port:         &quot;3306&quot;,
            User:         &quot;root&quot;,
            Pwd:          &quot;root&quot;,
            Name:         &quot;goadmin&quot;,
            MaxIdleCon: 50,
            MaxOpenCon: 150,
            Driver:       &quot;mysql&quot;,
            },
            },
        UrlPrefix: &quot;admin&quot;,
        // STORE 必须设置且保证有写权限，否则增加不了新的管理员用户
        Store: config.Store{
            Path:   &quot;./uploads&quot;,
            Prefix: &quot;uploads&quot;,
        },
        Language: language.CN, 
        // 开发模式
                Debug: true,
                // 日志文件位置，需为绝对路径
                InfoLogPath: &quot;/var/logs/info.log&quot;,
                AccessLogPath: &quot;/var/logs/access.log&quot;,
                ErrorLogPath: &quot;/var/logs/error.log&quot;,
                ColorScheme: adminlte.ColorschemeSkinBlack,
    }

    // 增加 chartjs 组件
    template.AddComp(chartjs.NewChart())
    
        _ = eng.AddConfig(&amp;cfg).
            AddGenerators(datamodel.Generators).
                // 增加 generator, 第一个参数是对应的访问路由前缀
                    // 例子:
                    //
                    // &quot;user&quot; =&gt; http://localhost:9033/admin/info/user
                    //		
            AddGenerator(&quot;user&quot;, datamodel.GetUserTable).
            Use(r)
        
        // 自定义首页
        eng.HTML(&quot;GET&quot;, &quot;/admin&quot;, datamodel.GetContent)

    _ = r.Run(&quot;:9033&quot;)
}
</code></pre>
<p>&lt;/p&gt;
&lt;/details&gt;

</p>
<p>更多框架的例子: <a href="https://github.com/GoAdminGroup/go-admin/tree/master/examples">https://github.com/GoAdminGroup/go-admin/tree/master/examples</a></p>
<h3 id="第三步：运行">第三步：运行</h3>
<pre><code class="language-shell">GO111MODULE=on go run main.go
</code></pre>
<p>访问：<a href="http://localhost:9033/admin">http://localhost:9033/admin</a></p>
<p>账号: admin 密码: admin</p>
<p>更多细节详见 <a href="http://doc.go-admin.cn/zh">文档说明</a></p>
<p><a href="https://github.com/GoAdminGroup/example">这里一个超级简单上手的例子</a></p>
<h2 id="贡献">贡献</h2>
<p><a href="CONTRIBUTING_CN.md">这里有一份贡献指南</a></p>
<p>非常欢迎提pr，&lt;strong&gt;这里可以加入开发小组&lt;/strong&gt;</p>
<p>&lt;strong&gt;QQ群&lt;/strong&gt;：<a href="https://jq.qq.com/?_wv=1027&k=CnLiDoT9">874825430</a>，记得备注加群来意</p>
<p>这里是<a href="https://github.com/GoAdminGroup/go-admin/projects">开发计划</a></p>
<p>&lt;strong&gt;<a href="http://quick.go-admin.cn/resource/wechat_qrcode_02.jpg">点击这里申请加微信群（记得备注加群）</a>&lt;/strong&gt;</p>
<p>&lt;strong&gt;注：在社区中如有问题提问，请务必清晰描述，包括但不限于问题详叙/问题代码/复现方法/已经尝试过的方法，时间生命可贵，请珍惜自己和别人的时间！&lt;/strong&gt;</p>
<h2 id="十分感谢">十分感谢</h2>
<p>inspired by <a href="https://github.com/z-song/laravel-admin">laravel-admin</a></p>
<h2 id="打赏">打赏</h2>
<p>留下您的github/gitee用户名，我们将会展示在<a href="DONATION.md">捐赠名单</a>中。</p>
<blockquote>
<p>恰饭所需，作者精力时间有限，目前GoAdmin项目捐赠达666元，联系<a href="http://quick.go-admin.cn/resource/wechat_qrcode.jpg">作者</a>可进vip用户群，vip群中您的问题将得到优先解答，同时也会根据您的需求进行分析和优先安排，vip群也会提供其他关于golang的福利。🙏</p>
<p>同时您也可以联系我，雇佣我的时间帮助您干活。</p>
</blockquote>
<p>&lt;img src=&quot;<a href="http://quick.go-admin.cn/official/assets/imgs/shoukuan.jpg">http://quick.go-admin.cn/official/assets/imgs/shoukuan.jpg</a>&quot; width=&quot;650&quot; /&gt;</p>


 高生产效率: 10分钟内做一个好看的管理后台
🎨 主题: 默认为adminlte，更多好看的主题正在制作中，欢迎给我们留言
🔢 插件化: 提供插件使用，真正实现一个插件解决不了问题，那就两个
✅ 认证: 开箱即用的rbac认证系统
⚙️ 框架支持: 支持大部分框架接入，让你更容易去上手和扩展

go-admin是基于golang快速搭建可视化数据管理后台的框架

<p>&lt;div align=&quot;center&quot;&gt;
        &lt;a href=&quot;<a href="https://react-hook-form.com">https://react-hook-form.com</a>&quot; title=&quot;React Hook Form - Simple React forms validation&quot;&gt;
            &lt;img src=&quot;<a href="https://raw.githubusercontent.com/react-hook-form/react-hook-form/master/docs/logo.png">https://raw.githubusercontent.com/react-hook-form/react-hook-form/master/docs/logo.png</a>&quot; alt=&quot;React Hook Form Logo - React hook custom hook for form validation&quot; /&gt;
        &lt;/a&gt;
&lt;/div&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;

</p>
<p><a href="https://www.npmjs.com/package/react-hook-form"><img src="https://img.shields.io/npm/dm/react-hook-form.svg?style=for-the-badge" alt="npm downloads"></a>
<a href="https://www.npmjs.com/package/react-hook-form"><img src="https://img.shields.io/npm/dt/react-hook-form.svg?style=for-the-badge" alt="npm"></a>
<a href="https://github.com/react-hook-form/react-hook-form/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/react-hook-form?style=for-the-badge" alt="npm"></a>
<a href="https://discord.gg/yYv7GZ8"><img src="https://img.shields.io/discord/754891658327359538.svg?style=for-the-badge&label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" alt="Discord"></a></p>
<p>&lt;/div&gt;

</p>
<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://react-hook-form.com/get-started&quot;&gt;Get">https://react-hook-form.com/get-started&quot;&gt;Get</a> started&lt;/a&gt; | 
  &lt;a href=&quot;<a href="https://react-hook-form.com/api&quot;&gt;API&lt;/a">https://react-hook-form.com/api&quot;&gt;API&lt;/a</a>&gt; |
  &lt;a href=&quot;<a href="https://react-hook-form.com/form-builder&quot;&gt;Form">https://react-hook-form.com/form-builder&quot;&gt;Form</a> Builder&lt;/a&gt; |
  &lt;a href=&quot;<a href="https://react-hook-form.com/faqs&quot;&gt;FAQs&lt;/a">https://react-hook-form.com/faqs&quot;&gt;FAQs&lt;/a</a>&gt; |
  &lt;a href=&quot;<a href="https://github.com/bluebill1049/react-hook-form/tree/master/examples&quot;&gt;Examples&lt;/a">https://github.com/bluebill1049/react-hook-form/tree/master/examples&quot;&gt;Examples&lt;/a</a>&gt;
&lt;/p&gt;

</p>
<h3 id="features">Features</h3>
<ul>
<li>Built with performance, UX and DX in mind</li>
<li>Embraces native HTML form <a href="https://react-hook-form.com/get-started#Applyvalidation">validation</a></li>
<li>Out of the box integration with <a href="https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5">UI libraries</a></li>
<li><a href="https://bundlephobia.com/result?p=react-hook-form@latest">Small size</a> and no <a href="./package.json">dependencies</a></li>
<li>Support <a href="https://github.com/jquense/yup">Yup</a>, <a href="https://github.com/colinhacks/zod">Zod</a>, <a href="https://github.com/ajv-validator/ajv">AJV</a>, <a href="https://github.com/ianstormtaylor/superstruct">Superstruct</a>, <a href="https://github.com/hapijs/joi">Joi</a> and <a href="https://github.com/react-hook-form/resolvers">others</a></li>
</ul>
<h3 id="install">Install</h3>
<pre><code>npm install react-hook-form
</code></pre>
<h3 id="quickstart">Quickstart</h3>
<pre><code class="language-jsx">import { useForm } from &#39;react-hook-form&#39;;
function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  return (
    &lt;form onSubmit={handleSubmit((data) =&gt; console.log(data))}&gt;
      &lt;input {...register(&#39;firstName&#39;)} /&gt;
      &lt;input {...register(&#39;lastName&#39;, { required: true })} /&gt;
      {errors.lastName &amp;&amp; &lt;p&gt;Last name is required.&lt;/p&gt;}
      &lt;input {...register(&#39;age&#39;, { pattern: /\d+/ })} /&gt;
      {errors.age &amp;&amp; &lt;p&gt;Please enter number for age.&lt;/p&gt;}
      &lt;input type=&quot;submit&quot; /&gt;
    &lt;/form&gt;
  );
}
</code></pre>
<p>&lt;a href=&quot;<a href="https://ui.dev/bytes/?r=bill">https://ui.dev/bytes/?r=bill</a>&quot;&gt;
  &lt;img src=&quot;<a href="https://raw.githubusercontent.com/react-hook-form/react-hook-form/master/docs/ads-1.jpeg">https://raw.githubusercontent.com/react-hook-form/react-hook-form/master/docs/ads-1.jpeg</a>&quot; /&gt;
&lt;/a&gt;

</p>
<h3 id="sponsors">Sponsors</h3>
<p>Thanks go to these kind and lovely sponsors!</p>
<p>&lt;a
    target = _blank
    href = &#39;https://wantedlyinc.com&#39;
/&gt;
&lt;img
        width = 94
        src = &#39;https://images.opencollective.com/wantedly/d94e44e/logo/256.png&#39;
    /&gt;
&lt;/a&gt;
&lt;a
    target = _blank
    href = &#39;https://graphcms.com&#39;
/&gt;
&lt;img
        width = 94
        src = &#39;https://avatars.githubusercontent.com/u/31031438&#39;
    /&gt;
&lt;/a&gt;
&lt;a
    target = _blank
    href = &#39;https://kanamekey.com&#39;
/&gt;
&lt;img
        width = 94
        src = &#39;https://images.opencollective.com/kaname/d15fd98/logo/256.png&#39;
    /&gt;
&lt;/a&gt;
&lt;a
    target = _blank
    href = &#39;https://formcarry.com/&#39;
/&gt;
&lt;img
        width = 94
        src = &#39;https://images.opencollective.com/formcarry/a40a4ea/logo/256.png&#39;
    /&gt;
&lt;/a&gt;</p>
<h3 id="backers">Backers</h3>
<p>Thanks go to all our backers! [<a href="https://opencollective.com/react-hook-form#backer">Become a backer</a>].</p>
<p>&lt;a href=&quot;<a href="https://opencollective.com/react-hook-form#backers">https://opencollective.com/react-hook-form#backers</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://opencollective.com/react-hook-form/backers.svg?width=950">https://opencollective.com/react-hook-form/backers.svg?width=950</a>&quot; /&gt;
&lt;/a&gt;

</p>
<h3 id="contributors">Contributors</h3>
<p>Thanks go to these wonderful people! [<a href="CONTRIBUTING.md">Become a contributor</a>].</p>
<p>&lt;a href=&quot;<a href="https://github.com/react-hook-form/react-hook-form/graphs/contributors">https://github.com/react-hook-form/react-hook-form/graphs/contributors</a>&quot;&gt;
  &lt;img src=&quot;<a href="https://opencollective.com/react-hook-form/contributors.svg?width=890&amp;button=false">https://opencollective.com/react-hook-form/contributors.svg?width=890&amp;button=false</a>&quot; /&gt;
&lt;/a&gt;</p>


Built with performance, UX and DX in mind，Embraces native HTML form validation，Out of the box integration with UI libraries

https://github.com/react-hook-form/react-hook-form

<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://ahooks.js.org">https://ahooks.js.org</a>&quot;&gt;
    &lt;img width=&quot;200&quot; src=&quot;<a href="https://ahooks.js.org/logo.svg">https://ahooks.js.org/logo.svg</a>&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;

</p>
<p>一套高质量可靠的 React Hooks 库</p>
<p><a href="https://www.npmjs.com/package/ahooks"><img src="https://img.shields.io/npm/v/ahooks.svg?style=flat" alt="NPM version"></a>
<a href="https://npmjs.org/package/ahooks"><img src="https://img.shields.io/npm/dw/ahooks.svg?style=flat" alt="NPM downloads"></a>
<a href="https://www.npmjs.com/package/ahooks-v2"><img src="https://img.shields.io/npm/dw/ahooks-v2?label=downloads%28v2%29" alt="npm"></a>
<a href="https://coveralls.io/github/alibaba/hooks?branch=master"><img src="https://coveralls.io/repos/github/alibaba/hooks/badge.svg?branch=master" alt="Coverage Status"></a>
<a href="https://github.com/alibaba/hooks/issues"><img src="https://img.shields.io/github/issues/alibaba/hooks" alt="npm"></a>
<img src="https://img.badgesize.io/https:/unpkg.com/ahooks/dist/ahooks.js?label=gzip%20size&compression=gzip" alt="gzip size">
<a href="http://isitmaintained.com/project/alibaba/hooks" title="Percentage of issues still open"><img src="http://isitmaintained.com/badge/open/alibaba/hooks.svg" alt="Percentage of issues still open"></a>
<a href="http://isitmaintained.com/project/alibaba/hooks" title="Average time to resolve an issue"><img src="http://isitmaintained.com/badge/resolution/alibaba/hooks.svg" alt="Average time to resolve an issue"></a>
<img src="https://img.shields.io/github/license/alibaba/hooks" alt="GitHub"></p>
<p><a href="https://github.com/alibaba/hooks/blob/master/README.md">English</a> | 简体中文</p>
<p>&lt;/div&gt;

</p>
<h2 id="📚-文档">📚 文档</h2>
<ul>
<li><a href="https://ahooks.js.org/">English</a></li>
<li><a href="https://ahooks.js.org/zh-CN/">中文</a></li>
</ul>
<h2 id="✨-特性">✨ 特性</h2>
<ul>
<li>易学易用</li>
<li>支持 SSR</li>
<li>对输入输出函数做了特殊处理，避免闭包问题</li>
<li>包含大量提炼自业务的高级 Hooks</li>
<li>包含丰富的基础 Hooks</li>
<li>使用 TypeScript 构建，提供完整的类型定义文件</li>
</ul>
<h2 id="📦-安装">📦 安装</h2>
<pre><code class="language-bash">$ npm install --save ahooks
# or
$ yarn add ahooks
# or
$ pnpm add ahooks
</code></pre>
<h2 id="🔨-使用">🔨 使用</h2>
<pre><code class="language-js">import { useRequest } from &#39;ahooks&#39;;
</code></pre>
<h2 id="💻-在线体验">💻 在线体验</h2>
<p><a href="https://codesandbox.io/s/demo-for-ahooks-forked-fg79k?file=/src/App.js"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit demo for ahooks"></a></p>
<h2 id="🤝-参与共建">🤝 参与共建</h2>
<pre><code class="language-bash">$ git clone git@github.com:alibaba/hooks.git
$ cd hooks
$ pnpm run init
$ pnpm start
</code></pre>
<p>打开浏览器访问 <a href="http://127.0.0.1:8000">http://127.0.0.1:8000</a></p>
<p>我们欢迎所有人参与共建，请参考<a href="https://github.com/alibaba/hooks/blob/master/CONTRIBUTING.zh-CN.MD">CONTRIBUTING.MD</a></p>
<p>感谢所有贡献者：</p>
<p>&lt;a href=&quot;<a href="https://github.com/alibaba/hooks/graphs/contributors">https://github.com/alibaba/hooks/graphs/contributors</a>&quot;&gt;
  &lt;img src=&quot;<a href="https://opencollective.com/ahooks/contributors.svg?width=960&amp;button=false">https://opencollective.com/ahooks/contributors.svg?width=960&amp;button=false</a>&quot; alt=&quot;contributors&quot; /&gt;
&lt;/a&gt;

</p>
<h2 id="👥-交流讨论">👥 交流讨论</h2>
<p>&lt;img src=&quot;https://user-images.githubusercontent.com/12526493/163084546-ed7a18a8-f05b-484e-a32c-049a05c350fd.JPG&quot; width=&quot;200&quot; style=&#39;display:inline&#39;/&gt;&lt;img src=&quot;https://user-images.githubusercontent.com/12526493/163084577-bab53c55-610e-4efe-96c7-eb0dd076c100.JPG&quot; width=&quot;200&quot; style=&#39;display:inline&#39;/&gt;&lt;img src=&quot;https://user-images.githubusercontent.com/12526493/163084584-bfb789fe-b5f4-4cd6-b4a5-2444bd67c1a5.JPG&quot; width=&quot;200&quot; style=&#39;display:inline&#39;/&gt;</p>


拥有丰富的自定义 Hooks，每个 Hooks 都有丰富的在线示例供您体验。包含适合全年龄段的丰富的 React Hooks 教程，想学 React Hooks，来这里就够了。

a hooks library - 为 React Hooks 而生

<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://rsuitejs.com">https://rsuitejs.com</a>&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;
   &lt;img src=&quot;<a href="https://user-images.githubusercontent.com/1203827/65102389-7be3f100-d9fd-11e9-859e-ae9617ed2f91.png">https://user-images.githubusercontent.com/1203827/65102389-7be3f100-d9fd-11e9-859e-ae9617ed2f91.png</a>&quot; alt=&quot;React Suite logo&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;

</p>
<p><a href="https://www.npmjs.com/package/rsuite"><img src="https://img.shields.io/npm/v/rsuite" alt="npm"></a>
<a href="https://codecov.io/gh/rsuite/rsuite"><img src="https://codecov.io/gh/rsuite/rsuite/branch/main/graph/badge.svg?token=HGeKd0BD3t" alt="codecov"></a>
<a href="https://discord.gg/R8mnjwh"><img src="https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg" alt="Discord"></a>
<a href="https://gitter.im/rsuite/rsuite?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge"><img src="https://img.shields.io/gitter/room/rsuite/rsuite?label=chat-english" alt="Gitter"></a>
<a href="https://gitter.im/rsuite/rsuite-CN?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge"><img src="https://img.shields.io/gitter/room/rsuite/rsuite?label=chat-chinese" alt="Gitter"></a></p>
<p>React Suite 是一套 React 组件库，为后台产品而生。同时也是一个具有贴心设计以及对开发者友好的 UI 框架。</p>
<h3 id="ui-design">UI Design</h3>
<p>React Suite 设计原型与规范， <a href="https://rsuitejs.com/design/default">点击查看</a>。</p>
<h2 id="支持的平台">支持的平台</h2>
<h3 id="浏览器">浏览器</h3>
<p>React Suite 支持最新的，稳定版的全部主流浏览器和平台。 从 React Suite 5 开始不支持 IE10 以下版本(包括 IE10)。不推荐在移动端使用。</p>
<table>
<thead>
<tr>
<th>IE</th>
<th>Edge</th>
<th>Firefox</th>
<th>Chrome</th>
<th>Safari</th>
</tr>
</thead>
<tbody><tr>
<td>&gt;=11</td>
<td>&gt;=14</td>
<td>&gt;= 45</td>
<td>&gt;= 49</td>
<td>&gt;= 10</td>
</tr>
</tbody></table>
<h3 id="服务端">服务端</h3>
<p>React Suite 支持服务端渲染， 支持通过 <a href="https://github.com/zeit/next.js">Next.js</a> 构建应用。</p>
<h2 id="支持的开发环境">支持的开发环境</h2>
<ul>
<li>支持 React 16 +</li>
<li>支持 <a href="http://www.typescriptlang.org/">TypeScript</a></li>
<li>支持 <a href="https://electronjs.org/">Electron</a></li>
</ul>
<h2 id="安装">安装</h2>
<p>React Suite 可通过 <a href="https://www.npmjs.com/package/rsuite">npm</a> 安装。</p>
<pre><code class="language-bash">npm i rsuite --save
</code></pre>
<h2 id="使用">使用</h2>
<p>这里有一个简单的示例：</p>
<pre><code class="language-jsx">import { Button } from &#39;rsuite&#39;;
import &#39;rsuite/styles/index.less&#39;; // or &#39;rsuite/dist/rsuite.min.css&#39;
function App() {
  return &lt;Button appearance=&quot;primary&quot;&gt;Hello World&lt;/Button&gt;;
}
</code></pre>
<p>您可以在 <a href="https://codesandbox.io/s/rsuite-template-5vq6zo2z5l">CodeSandbox</a> 上查看该示例。</p>
<h3 id="文档">文档</h3>
<p>您可以阅读<a href="https://rsuitejs.com/guide/introduction">完整文档</a>，或者从下面几个章节开始学习</p>
<ul>
<li><a href="https://rsuitejs.com/guide/introduction">如何使用？</a></li>
<li><a href="https://rsuitejs.com/guide/customization">自定义主题</a></li>
<li><a href="https://rsuitejs.com/guide/intl">国际化</a></li>
<li><a href="https://rsuitejs.com/guide/intl">Right-to-left</a></li>
<li><a href="https://rsuitejs.com/components/overview">组件</a></li>
</ul>
<p>&lt;details&gt;
&lt;summary&gt;更多的示例&lt;/summary&gt;

</p>
<ul>
<li><a href="https://github.com/rsuite/rsuite-management-system">管理系统</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-babel-preset-rsuite">模块化按需加载</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/cdn">CDN 引入</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/custom-i18n">国际化方案</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/custom-multiple-themes">多主题方案</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-rtlcss">RTL 方案 - rtlcss</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-postcss-rtl">RTL 方案 - postcss-rtl</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/create-react-app">在 create-react-app 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-electron">在 Electron 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-flow">在 Flow 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-typescript">在 TypeScript 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-nextjs">在 Next.js 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-nextjs-typescript">在 Next.js 和 Typescript 中使用 </a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-umi">在 UmiJS 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-snowpack">在 Snowpack 中使用</a></li>
<li><a href="https://github.com/rsuite/rsuite/tree/master/examples/with-vite">在 Vite 中使用</a><p>&lt;/details&gt;</p>
</li>
</ul>
<h2 id="历史版本">历史版本</h2>
<p>上个大版本 4.x 将不再添加新特性，
我们推荐你升级到最新的 5.x 版本。
4.x 的功能修复仍会在一段时间内提供支持，
安全修复也会支持，直到 6.x 开始开发。</p>
<h3 id="历史版本的文档">历史版本的文档</h3>
<ul>
<li><a href="https://v4.rsuitejs.com/">4.x 版本文档</a></li>
<li><a href="https://v3.rsuitejs.com/">3.x 版本文档</a></li>
</ul>
<h2 id="更新日志">更新日志</h2>
<p>每一个版本的详细变化记录在<a href="https://github.com/rsuite/rsuite/releases">Release Notes</a></p>
<h2 id="贡献">贡献</h2>
<p>在开始之前，确保您已读<a href="https://github.com/rsuite/rsuite/blob/master/CONTRIBUTING.zh-CN.md">贡献指南</a>。</p>
<h2 id="支持-react-suite">支持 React Suite</h2>
<p>如果您喜欢 React Suite，可以通过以下方式支持我们：</p>
<ul>
<li>Star 这个项目。</li>
<li>如果您在您的项目中使用了 React Suite，欢迎在这里<a href="https://github.com/rsuite/rsuite/issues/11">留言</a>！</li>
<li>在 <a href="https://opencollective.com/rsuite#">OpenCollective</a> 上赞助我们。</li>
</ul>
<p>这个项目的存在归功于所有贡献者。</p>
<p>&lt;a href=&quot;<a href="https://github.com/rsuite/rsuite/graphs/contributors">https://github.com/rsuite/rsuite/graphs/contributors</a>&quot; target=&quot;_blank&quot;&gt;
  &lt;img src=&quot;<a href="https://contrib.rocks/image?repo=rsuite/rsuite">https://contrib.rocks/image?repo=rsuite/rsuite</a>&quot; /&gt;
&lt;/a&gt;

</p>
<p><a href="https://opencollective.com/rsuite"><img src="https://opencollective.com/rsuite/tiers/backer.svg?avatarHeight=36" alt="opencollective-now"></a></p>
<p>国内交流群, 添加 React Suite 小助手，备注 rsuite， 邀请入群。</p>
<p>&lt;img src=&quot;<a href="https://user-images.githubusercontent.com/1203827/51657342-7ace0180-1fdf-11e9-9237-5d19c7a5c7da.jpeg">https://user-images.githubusercontent.com/1203827/51657342-7ace0180-1fdf-11e9-9237-5d19c7a5c7da.jpeg</a>&quot; width=&quot;200&quot; /&gt;

</p>
<h2 id="license">License</h2>
<p>React Suite 基于 <a href="https://github.com/rsuite/rsuite/blob/master/LICENSE">MIT licensed</a> 发布。</p>


React Suite 支持最新的，稳定版的全部主流浏览器和平台。 从 React Suite 5 开始不支持 IE10 以下版本(包括 IE10)。不推荐在移动端使用

React Suite 是一套 React 组件库，为后台产品而生。同时也是一个具有贴心设计以及对开发者友好的 UI 框架

<p>&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="http://zarm.design">http://zarm.design</a>&quot;&gt;
    &lt;img width=&quot;200&quot; src=&quot;<a href="https://zarm.design/images/logo.1a6cfc30.svg">https://zarm.design/images/logo.1a6cfc30.svg</a>&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;

</p>
<p>&lt;h1 align=&quot;center&quot;&gt;Zarm&lt;/h1&gt;

</p>
<p>&lt;div align=&quot;center&quot;&gt;

</p>
<p><a href="https://github.com/ZhongAnTech/zarm/actions/workflows/test.yml"><img src="https://github.com/ZhongAnTech/zarm/actions/workflows/test.yml/badge.svg" alt="test"></a>
<a href="https://codecov.io/gh/ZhongAnTech/zarm"><img src="https://codecov.io/gh/ZhongAnTech/zarm/branch/master/graph/badge.svg?token=Qqne6VfWnk" alt="codecov"></a>
<a href="https://www.npmjs.org/package/zarm"><img src="https://img.shields.io/npm/v/zarm/latest.svg" alt="npm package"></a>
<img src="https://img.badgesize.io/https://unpkg.com/zarm@latest/dist/zarm.min.js?compression=gzip&label=zarm.min.js" alt="JS gzip size">
<img src="https://img.badgesize.io/https://unpkg.com/zarm@latest/dist/zarm.min.css?compression=gzip&label=zarm.min.css" alt="CSS gzip size">
<a href="https://npmjs.org/package/zarm"><img src="https://img.shields.io/npm/dm/zarm.svg" alt="NPM downloads"></a>
<a href="https://app.netlify.com/sites/zarm/deploys"><img src="https://api.netlify.com/api/v1/badges/7afc45a9-dcac-4475-9903-d3896bc200ed/deploy-status" alt="Netlify Status"></a>
<a href="https://app.fossa.io/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm?ref=badge_shield"><img src="https://app.fossa.io/api/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm.svg?type=shield" alt="FOSSA Status"></a>
<a href="https://gitter.im/ZhongAnTech/zarm?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge"><img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter"></a></p>
<p>众安科技基于 React 研发的一款适用于企业级的移动端 UI 组件库。</p>
<p>&lt;/div&gt;

</p>
<p>Zarm （读音 /zɑːm/，中文可发音为 扎姆）的命名，灵感来源于众安保险秉承的理念：做有温度的保险。Zarm = za + warm，za 代表 “众安”，warm 有 “温暖” 的含义，以重合的 “a” 字母为中心，各取左右两部分。追求极致的用户体验，致力于做有温度的组件库也是 zarm 项目发起的初衷。</p>
<h2 id="预览">预览</h2>
<p>&lt;img width=&quot;200&quot; src=&quot;<a href="https://user-images.githubusercontent.com/9812721/116021555-ffa29c80-a67a-11eb-8068-614bd912c894.png">https://user-images.githubusercontent.com/9812721/116021555-ffa29c80-a67a-11eb-8068-614bd912c894.png</a>&quot; /&gt;

</p>
<p><a href="https://zarm.design/demo.html#/">https://zarm.design/demo.html#/</a></p>
<h2 id="浏览器支持">浏览器支持</h2>
<ul>
<li>iOS</li>
<li>Android 4.0+</li>
</ul>
<h2 id="安装">安装</h2>
<p>npm 或 yarn 安装</p>
<pre><code class="language-bash"># npm
$ npm install zarm --save
# yarn
$ yarn add zarm
</code></pre>
<h2 id="使用">使用</h2>
<pre><code class="language-js">import { Button, Cell } from &#39;zarm&#39;;
import &#39;zarm/dist/zarm.css&#39;;
</code></pre>
<h2 id="定制主题">定制主题</h2>
<p>可以参考 <a href="https://github.com/ZhongAnTech/zarm/blob/master/packages/site/web/docs/customize-theme.md">定制主题文档</a>。</p>
<h2 id="国际化">国际化</h2>
<p>可以参考 <a href="https://github.com/ZhongAnTech/zarm/blob/master/packages/site/web/docs/i18n.md">国际化文档</a>。</p>
<h2 id="社区">社区</h2>
<table>
<thead>
<tr>
<th align="left">问题上报</th>
<th align="left">讨论交流</th>
<th align="left">微信群</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://github.com/ZhongAnTech/zarm/issues">github issues</a></td>
<td align="left"><a href="https://github.com/ZhongAnTech/zarm/discussions">github discussions</a></td>
<td align="left">&lt;img src=&quot;https://cdn-health.zhongan.com/zarm/qrcode.jpg&quot; width=&quot;80&quot; /&gt; &lt;br /&gt;备注 &quot;zarm&quot; 加好友后邀请进群</td>
</tr>
</tbody></table>
<h2 id="如何贡献">如何贡献</h2>
<p>使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR。</p>
<p>你可以使用 Gitpod 进行在线开发：</p>
<p><a href="https://gitpod.io/#https://github.com/ZhongAnTech/zarm"><img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod"></a></p>
<p>或者克隆到本地开发，请阅读我们的 <a href="https://github.com/ZhongAnTech/zarm/blob/master/packages/site/web/docs/contributing.md">贡献指南</a>。</p>
<h2 id="开源协议">开源协议</h2>
<p>MIT</p>
<p><a href="https://app.fossa.io/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm?ref=badge_large"><img src="https://app.fossa.io/api/projects/git%2Bgithub.com%2FZhongAnTech%2Fzarm.svg?type=large" alt="FOSSA Status"></a></p>


Zarm （读音 /zɑːm/，中文可发音为 扎姆）的命名，灵感来源于众安保险秉承的理念：做有温度的保险。Zarm = za + warm，za 代表 “众安”，warm 有 “温暖” 的含义，以重合的 “a” 字母为中心，各取左右两部分。追求极致的用户体验，致力于做有温度的组件库也是 zarm 项目发起的初衷。

Admin管理页面