<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快速搭建可视化数据管理后台的框架

<h1 id="react-admin--github-license"><a href="https://github.com/javaLuo/react-admin/">React-admin</a> &middot; <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="GitHub license"></h1>
<p>标准后台管理系统解决方案&lt;br/&gt;
动态菜单配置，权限精确到按钮&lt;br/&gt;</p>
<h2 id="whats-this">what&#39;s this?</h2>
<p>react+redux 后台管理系统脚手架&lt;br/&gt;
react+redux+vite+antd</p>
<p>&lt;ul&gt;
 &lt;li&gt;非服务端渲染&lt;/li&gt;
 &lt;li&gt;仿antd-pro外观，但没有使用dva和roadhog&lt;/li&gt;
&lt;/ul&gt;

</p>
<h2 id="构建-start">构建 Start</h2>
<pre><code class="language-javascript">pnpm install       // 安装依赖模块
pnpm run dev       // 运行开发环境
pnpm run build     // 正式打包，生成最终代码
pnpm run preview   // 本地运行正式打包后的最终代码
pnpm run prettier  // 一键格式化代码
</code></pre>
<h2 id="最近更新">最近更新</h2>
<ul>
<li>接入了vite打包，比自己配webpack要好多了</li>
</ul>
<h2 id="前后端分离，权限是怎么控制的">前后端分离，权限是怎么控制的</h2>
<p>在数据库里存储着权限的信息，可以在页面里各种编辑。&lt;br/&gt;
但最终实现，仍然是在页面里写死的，前端写在页面里的权限信息跟数据库里的信息一一对应就实现了权限控制。&lt;br/&gt;
更好的方法除非是使用 SSR 服务端渲染，直接把权限注入到页面中，就像传统的 JSP 那样。</p>
<h2 id="内置通用功能">内置通用功能</h2>
<p>用户管理 增删改查 分配角色&lt;br/&gt;
  角色管理 增删改查 分配菜单和权限&lt;br/&gt;
  权限管理 增删改查&lt;br/&gt;
  菜单管理 增删改查&lt;br/&gt;</p>
<p>关系：权限 依附于 菜单 依附于 角色 依附于 用户</p>
<h2 id="预览地址-demo">预览地址 Demo</h2>
<p><a href="https://isluo.com/work/admin/">https://isluo.com/work/admin/</a> &lt;br/&gt;
账号：admin / user&lt;br/&gt;
密码：123456 / 123456</p>
<h2 id="参考">参考</h2>
<p>react-luo: <a href="https://github.com/javaLuo/react-luo">https://github.com/javaLuo/react-luo</a> &lt;br/&gt;</p>


标准后台管理系统解决方案
动态菜单配置，权限精确到按钮

react-admin：动态菜单配置、权限精确到按钮、通用模块；标准后台管理系统解决方案

<h1 id="全新技术栈管理系统">全新技术栈管理系统</h1>
<p>全新技术栈的后台管理系统</p>
<ul>
<li>React</li>
<li>Recoil</li>
<li>React Query</li>
<li>React Hooks</li>
<li>Vite</li>
<li>Typescript</li>
</ul>
<h2 id="document"><a href="./README.md">Document</a></h2>
<h2 id="截图">截图</h2>
<p><img src="https://github.com/ychengcloud/react-vite-admin/screenshot1.png" alt="">
<img src="https://github.com/ychengcloud/react-vite-admin/screenshot2.png" alt=""></p>
<h2 id="安装使用">安装使用</h2>
<ul>
<li>获取项目代码</li>
</ul>
<pre><code> git clone https://github.com/ychengcloud/react-vite-admin.git
</code></pre>
<ul>
<li>安装依赖</li>
</ul>
<pre><code> cd react-vite-admin
</code></pre>
<pre><code> yarn install
</code></pre>
<ul>
<li>运行</li>
</ul>
<pre><code> yarn dev
</code></pre>
<ul>
<li>打包</li>
</ul>
<pre><code> yarn build
</code></pre>
<h2 id="如何贡献">如何贡献</h2>
<p>非常欢迎你的加入！提一个 Issue 或者提交一个 Pull Request。<a href="https://github.com/ychengcloud/react-vite-admin/contributing.md">查看如何操作</a>.</p>
<h2 id="致谢">致谢</h2>
<p>本项目的产生离不开下列优秀项目给予的灵感和代码</p>
<ul>
<li><a href="https://ant.design">Antd Design</a></li>
<li><a href="https://pro.ant.design/">Antd Design Pro</a></li>
<li><a href="https://vitejs.dev/">Vite</a></li>
<li><a href="https://react-query.tanstack.com/">React Query</a></li>
<li><a href="https://github.com/WinmezzZ/react-antd-admin.git">React antd admin</a></li>
<li><a href="https://github.com/anncwb/vue-vben-admin">vue-vben-admin</a></li>
</ul>
<p>如有遗漏，欢迎指正和补充。</p>
<h2 id="声明">声明</h2>
<p>本项目旨在学习采用最新技术栈实现一个后台管理系统，不建议在生产环境下使用，仅供学习参考之用，本人不负责使用本项目产生的任何问题。</p>
<h2 id="license">License</h2>
<p><a href="https://github.com/ychengcloud/react-vite-admin/LICENSE">MIT</a></p>


React, Recoil, React Query, React Hooks, Typescript, Axios And Vite. 全新技术栈的后台管理系统

react-vite-admin：基于React, Recoil, React Query, React Hooks, Typescript, Axios And Vite. 全新技术栈的后台管理系统

<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管理页面