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

<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. 全新技术栈的后台管理系统

<h1 id="vlife-admin-react-介绍">vlife-admin-react 介绍</h1>
<blockquote>
<p>vlife-admin-react 是<em>V-LIFE</em>快速开发平台前端 react 实现的权限管理系统，可作为大多数信息系统的基础开发骨架使用。</p>
</blockquote>
<h2 id="特点">特点</h2>
<ul>
<li><strong>[react 技术栈]:</strong> 市面上多为 vue-admin 的骨架系统，好用的 react-admin 很少，可作为项目骨架，也可作为学习 react 的参照项目，帮你快速了解 react 的方方面面.</li>
<li><strong>[UI 组件丰富]:</strong> 前端 UI 组件库使用字节跳动开源的<a href="http://semi.design">semi</a>,拥有多种作<a href="https://semi.design/dsm/landing">主题</a>(飞书、抖音、火山、剪映)和暗色模式，让你的应用显著区别 elementUi,antd 的风格系统。</li>
<li><strong>[代码可生成]:</strong> 已开放了将服务端数据模型及接口对应生成前端数据接口及 API 的访问代码(包含注释)，前端只用写页面功能即可. 基本可以告别看接口文档了</li>
<li><strong>[业务组件库]:</strong> 使用 ts4+hooks 进行组件式开发,已经封装了 10+的模块页面级的业务组件库,让你开发功能速度显著提升</li>
<li><strong>[开箱即用]:</strong> 信息系统骨架权限\用户管理功能已经全部集成进来,完成相关业务模块开发即可</li>
</ul>
<h2 id="演示地址">演示地址</h2>
<p><a href="http://admin.vlife.cc">http://admin.vlife.cc</a></p>
<h2 id="v-lfife-快速研发平台开源地址">V-LFIFE 快速研发平台开源地址</h2>
<p><a href="https://githubs.com/wwwlike/vlife">https://githubs.com/wwwlike/vlife</a></p>
<h2 id="vlife-admin-配套服务端开源地址">vlife-admin 配套服务端开源地址</h2>
<p><a href="https://githubs.com/wwwlike/vlife-admin">https://githubs.com/wwwlike/vlife-admin</a></p>
<h2 id="技术栈">技术栈</h2>
<blockquote>
<p>采用 react17+结合 hooks 进行开发</p>
</blockquote>
<ul>
<li>react</li>
<li>react-router</li>
<li>typescript4</li>
<li>react-router</li>
<li>react-redux</li>
<li>tailwindcss 原子化 css 方案植入</li>
<li>axios(http 请求模块，可用于前端任何场景，很强大 👍)</li>
<li>ahooks ：alibaba 自定义 hooks 最佳实践</li>
<li>formily： alibaba 表单解决方案，根据配置产生动态表单</li>
<li>semi： 字节跳动前端开源组件，可更换主题(飞书、抖音等)</li>
<li>echart 图标组件</li>
<li>wangeditor 富文本编辑器</li>
<li>react-draggable(拖拽模块)</li>
<li>screenfull(全屏插件)</li>
<li>animate.css(css 动画库)</li>
<li>react-loadable(代码拆分，按需加载，预加载，样样都行)</li>
</ul>
<p>其他小细节省略</p>
<h2 id="功能模块">功能模块</h2>
<h3 id="系统管理sys">系统管理(sys)</h3>
<ol>
<li>用户管理(<code>sysUser</code>)</li>
<li>部门管理(<code>sysDept</code>)</li>
<li>机构管理(<code>sysOrg</code>)</li>
<li>字典管理(<code>sysDict</code>)</li>
<li>地区管理(<code>sysArea</code>)</li>
</ol>
<h3 id="权限管理">权限管理</h3>
<ol start="6">
<li>权限资源管理(<code>sysResources</code>)</li>
<li>角色管理(<code>sysRole</code>)</li>
<li>权限组管理(<code>sysGroup</code>)</li>
<li>角色权限组绑定(<code>sysRoleGroup</code>)</li>
</ol>
<h2 id="操作权限设计">操作权限设计</h2>
<h3 id="资源角色权限组用户的关系">资源/角色/权限组/用户的关系</h3>
<blockquote>
<p><code> sysResources&lt;-sysRole -&gt;sysRoleGroup&lt;- sysGroup -&gt;sysUser</code></p>
</blockquote>
<ul>
<li>每个资源<code>sysResource</code>有一个归属角色<code>sysRole</code>,</li>
<li>角色<code>sysRole</code>与权限组<code>sysGroup</code>是多对多关联-&gt;<code>sysRoleGroup</code></li>
<li>用户<code>sysUser</code>是和权限组<code>sysGroup</code>关联的.</li>
</ul>
<p>通过这样的关联关系,让<code>用户</code>拥有该他所在权限组对应角色下的所有资源的权限.</p>
<h2 id="代码生成">代码生成</h2>
<p>访问<a href="http://admin.vlife.cc">http://admin.vlife.cc</a>上传后端<code>title.json</code> 文件可以生成和服务端匹配的出参入参数据模型定义代码,和 API 接口的调用代码.</p>
<h3 id="数据模型代码">数据模型代码</h3>
<p>示例,可生成出参\入参的数据模型接口和中文注释
<code>/src/mvc/sysArea.ts</code></p>
<pre><code class="language-typescript">// 行政区划
export interface SysArea extends DbEntity {
  code: string; // 区划编码
  pcode: string; // 上级地区编码
  level: string; // 地区类型
  name: string; // 区划名称
}
// 地区查询条件
export interface SysAreaPageReq extends PageQuery {
  level: string[]; // 地区类型
  name: string; // 区划名称
}
</code></pre>
<h3 id="api-请求代码">API 请求代码</h3>
<p>示例:可生成与服务端完全一致的 API 接口调用代码
<code>/src/mvc/sysArea.ts</code></p>
<pre><code class="language-typescript">/**
 * 保存行政区划;
 * @param dto 行政区划;
 * @return 行政区划;
 */
export const save = (dto: SysArea): Promise&lt;Result&lt;SysArea&gt;&gt; =&gt; {
  return apiClient.post(`/sysArea/save`, { params: dto });
};

/**
 * 明细查询行政区划;
 * @param id 主键id;
 * @return 行政区划;
 */
export const detail = (id: string): Promise&lt;Result&lt;SysArea&gt;&gt; =&gt; {
  return apiClient.get(`/sysArea/detail/${id}`);
};
/**
 * 逻辑删除;
 * @param id 主键id;
 * @return 已删除数量;
 */
export const remove = (id: string): Promise&lt;Result&lt;number&gt;&gt; =&gt; {
  return apiClient.delete(`/sysArea/remove/${id}`);
};
</code></pre>
<h2 id="联系帮助">联系帮助</h2>
<ul>
<li><p>QQ 讨论群：786134846
<img src="http://vlife.wwwlike.cn/static/img/qq_qun_786134846.png" alt=""></p>
</li>
<li><p>微信：vlifeBoot</p>
<p>&lt;img src=&quot;<a href="http://oa.wwwlike.cn/wx.jpg">http://oa.wwwlike.cn/wx.jpg</a>&quot; width=150 height=150 /&gt;</p>
</li>
</ul>


前端 UI 组件库使用字节跳动开源的semi,拥有多种作主题(飞书、抖音、火山、剪映)和暗色模式，让你的应用显著区别 elementUi,antd 的风格系统。

vlife-react-admin：react+ts4+semi+formily+ahooks+axios的权限管理脚手架前端应用

<p>包含有基础的架构和常用的插件，比如富文本、pdf, 视频，grid布局，响应式等等。</p>


基于react 18, redux, antd, ahooks, axios等技术