<h1 id="argon-admin-dashboard-reactjs-vite-material-ui---dark--light-mode">Argon Admin Dashboard: React.js, Vite, Material UI - Dark &amp; Light Mode</h1>
<p>Welcome to Argon Admin Dashboard, a sleek and feature-rich solution built with React.js, Vite, and Material UI, offering both dark and light mode themes. Empower your project with 11 meticulously crafted pages, including data management, user interaction, and insightful chart displays.</p>
<h2 id="features">Features</h2>
<ul>
<li><strong>Dashboard Page:</strong> An overview of key metrics and insights.</li>
<li><strong>Manage Team Page:</strong> Efficiently handle team members with MUI DataGrid.</li>
<li><strong>Contacts Information:</strong> Keep track of contacts effortlessly with a DataGrid.</li>
<li><strong>Invoices Balances Page:</strong> Manage invoice balances conveniently using MUI DataGrid.</li>
<li><strong>Profile Form Page:</strong> Create new user profiles seamlessly with Formik and Yup integration.</li>
<li><strong>Calendar Page:</strong> Interactive calendar functionality powered by FullCalendar.</li>
<li><strong>FAQ Page:</strong> Provide answers to common queries using MUI Accordion.</li>
<li><strong>Charts Pages:</strong> Visualize data effectively with various chart types including Bar, Pie, Line, Geography, and Stream.</li>
</ul>
<h2 id="demo">Demo</h2>
<p>Explore the live demo of Argon Admin Dashboard <a href="https://argon-admin-dashboard.web.app/">here</a>.</p>
<h2 id="get-started">Get Started</h2>
<ol>
<li>Clone the repository: <code>git clone https://github.com/ayoubhayda/react-admin-dashboard.git</code></li>
<li>Install dependencies: <code>npm install</code> or <code>yarn install</code></li>
<li>Start the development server: <code>npm run dev</code> or <code>yarn dev</code></li>
</ol>
<h2 id="screenshots">Screenshots</h2>
<h3 id="dark-mode">Dark Mode</h3>
<p><img src="https://res.cloudinary.com/duxego3ja/image/upload/v1709215626/argon-admin-dashboard/b6jztniqlakkglakrp4e.png" alt="Dark Mode"></p>
<h3 id="light-mode">Light Mode</h3>
<p><img src="https://res.cloudinary.com/duxego3ja/image/upload/v1709215626/argon-admin-dashboard/qf006k0kwkhrgmefengy.png" alt="Light Mode"></p>
<h2 id="contributions-and-feedback">Contributions and Feedback</h2>
<p>We welcome contributions and feedback from the community to enhance and improve Argon Admin Dashboard further. Feel free to submit pull requests or open issues for any suggestions or bug reports.</p>
<h2 id="free-to-use">Free to Use</h2>
<p>Argon Admin Dashboard is open-source and completely free to use. Download it, customize it, and streamline your operations with ease.</p>
<p><strong>Keywords:</strong> React.js, Vite, Material UI, Admin Dashboard, Dark Mode, Light Mode, Data Management, Team Management, Calendar, Charts, Formik, Yup, Open Source.</p>
<p><strong>Enjoy building awesome projects with Argon Admin Dashboard!</strong></p>


Dashboard Page: An overview of key metrics and insights.
Manage Team Page: Efficiently handle team members with MUI DataGrid.
Contacts Information: Keep track of contacts effortlessly with a DataGrid.

react-admin-dashboard-Argon Admin Dashboard: React.js, Vite, Material UI - Dark & Light Mode. Manage data, users, and charts with ease. Ideal for streamlined project management

<p>&lt;div align=&quot;center&quot;&gt; 
&lt;br&gt; 
&lt;br&gt;
&lt;img src=&quot;./src/assets/images/logo.png&quot; height=&quot;140&quot; /&gt;
&lt;h3&gt; Slash Admin &lt;/h3&gt;
  &lt;p&gt;
    &lt;p style=&quot;font-size: 14px&quot;&gt;
      Slash Admin 是一款现代化的后台管理模板，基于 React 18、Vite、Ant Design 和 TypeScript 构建。它旨在帮助开发人员快速搭建功能强大的后台管理系统。
    &lt;/p&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;a href=&quot;<a href="https://admin.slashspaces.com/&quot;&gt;Preview&lt;/a">https://admin.slashspaces.com/&quot;&gt;Preview&lt;/a</a>&gt;
    ·
    &lt;a href=&quot;<a href="https://discord.gg/fXemAXVNDa&quot;&gt;Discord&lt;/a">https://discord.gg/fXemAXVNDa&quot;&gt;Discord&lt;/a</a>&gt;
    ·
    &lt;a href=&quot;<a href="https://docs-admin.slashspaces.com/&quot;&gt;Document&lt;/a">https://docs-admin.slashspaces.com/&quot;&gt;Document&lt;/a</a>&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;a href=&quot;<a href="https://trendshift.io/repositories/6387">https://trendshift.io/repositories/6387</a>&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;<a href="https://trendshift.io/api/badge/repositories/6387">https://trendshift.io/api/badge/repositories/6387</a>&quot; alt=&quot;d3george%2Fslash-admin | Trendshift&quot; style=&quot;width: 250px; height: 55px;&quot; width=&quot;250&quot; height=&quot;55&quot;/&gt;&lt;/a&gt;
&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:280px&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>
<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>


使用 React 18 hooks 进行构建。
基于 Vite 进行快速开发和热模块替换。
集成 Ant Design，提供丰富的 UI 组件和设计模式。
使用 TypeScript 编写，提供类型安全性和更好的开发体验。
响应式设计，适应各种屏幕尺寸和设备。
灵活的路由配置，支持多级嵌套路由。
集成权限管理，根据用户角色控制页面访问权限。
集成国际化支持，轻松切换多语言。

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

<p>&lt;p align=&quot;center&quot;&gt;
  &lt;img width=&quot;420&quot; src=&quot;<a href="https://cdn.jsdelivr.net/gh/baimingxuan/media-store/images/logo-r-md.png">https://cdn.jsdelivr.net/gh/baimingxuan/media-store/images/logo-r-md.png</a>&quot;&gt;
&lt;/p&gt;
&lt;p align=&quot;center&quot;&gt;
  &lt;a href=&quot;<a href="https://github.com/facebook/react">https://github.com/facebook/react</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://img.shields.io/badge/react-18.2.0-brightgreen.svg">https://img.shields.io/badge/react-18.2.0-brightgreen.svg</a>&quot; alt=&quot;react&quot;&gt;
  &lt;/a&gt;
  &lt;a href=&quot;<a href="https://github.com/remix-run/react-router">https://github.com/remix-run/react-router</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://img.shields.io/badge/react_router-6.19.0-brightgreen.svg">https://img.shields.io/badge/react_router-6.19.0-brightgreen.svg</a>&quot; alt=&quot;react-router&quot;&gt;
  &lt;/a&gt;
  &lt;a href=&quot;<a href="https://github.com/reduxjs/redux-toolkit">https://github.com/reduxjs/redux-toolkit</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://img.shields.io/badge/react_redux-8.1.3-brightgreen.svg">https://img.shields.io/badge/react_redux-8.1.3-brightgreen.svg</a>&quot; alt=&quot;redux-toolkit&quot;&gt;
  &lt;/a&gt;
  &lt;a href=&quot;<a href="https://github.com/vitejs/vite">https://github.com/vitejs/vite</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://img.shields.io/badge/vite-4.5.0-brightgreen.svg">https://img.shields.io/badge/vite-4.5.0-brightgreen.svg</a>&quot; alt=&quot;vite&quot;&gt;
  &lt;/a&gt;
  &lt;a href=&quot;<a href="https://github.com/ant-design/ant-design">https://github.com/ant-design/ant-design</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://img.shields.io/badge/antd-5.11.2-brightgreen.svg">https://img.shields.io/badge/antd-5.11.2-brightgreen.svg</a>&quot; alt=&quot;antd&quot;&gt;
  &lt;/a&gt;
 &lt;a href=&quot;<a href="https://github.com/microsoft/TypeScript">https://github.com/microsoft/TypeScript</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://img.shields.io/badge/typescript-5.2.2-brightgreen.svg">https://img.shields.io/badge/typescript-5.2.2-brightgreen.svg</a>&quot; alt=&quot;typescript&quot;&gt;
  &lt;/a&gt;
  &lt;a href=&quot;<a href="https://github.com/less">https://github.com/less</a>&quot;&gt;
    &lt;img src=&quot;<a href="https://img.shields.io/badge/less-4.2.0-brightgreen.svg">https://img.shields.io/badge/less-4.2.0-brightgreen.svg</a>&quot; alt=&quot;less&quot;&gt;
  &lt;/a&gt;
&lt;/p&gt;  

</p>
<p><strong>中文</strong> | <a href="./README.en-US.md">English</a></p>
<h2 id="简介">简介</h2>
<h4 id="react-admin-design是一个基于react18--ant-design5的后台管理系统的解决方案，它使用了最新的前端技术栈，并且提供了丰富的功能组件模块，可以帮助你快速搭建企业级中后台的前端架构。">react-admin-design是一个基于react18 + ant-design5的后台管理系统的解决方案，它使用了最新的前端技术栈，并且提供了丰富的功能组件模块，可以帮助你快速搭建企业级中后台的前端架构。</h4>
<h2 id="特性">特性</h2>
<ul>
<li><strong>技术栈</strong>：使用 React18、Vite4、TSX 等前端前沿技术开发</li>
<li><strong>主题</strong>：可配置的主题色</li>
<li><strong>国际化</strong>：内置完善的国际化方案</li>
<li><strong>Mock 数据</strong> 内置 Mock 数据方案</li>
</ul>
<h2 id="预览">预览</h2>
<blockquote>
<h5 id="演示地址：httpsbaimingxuangithubioreact-admin-design">演示地址：<a href="https://baimingxuan.github.io/react-admin-design/">https://baimingxuan.github.io/react-admin-design/</a></h5>
<h5 id="github地址：httpsgithubcombaimingxuanreact-admin-design">Github地址：<a href="https://github.com/baimingxuan/react-admin-design">https://github.com/baimingxuan/react-admin-design</a></h5>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/baimingxuan/media-store/images/home-vue3.png" alt=""></p>
<h2 id="开发">开发</h2>
<pre><code class="language-bash">// 克隆项目
git clone https://github.com/baimingxuan/react-admin-design.git

// 安装依赖
pnpm install

// 开发
pnpm run dev
</code></pre>
<h2 id="构建">构建</h2>
<pre><code class="language-bash">// 构建
pnpm run build
</code></pre>
<h2 id="浏览器支持">浏览器支持</h2>
<p>本地开发推荐使用<code>Chrome 80+</code> 浏览器</p>
<p>支持现代浏览器, 不支持 IE</p>
<table>
<thead>
<tr>
<th align="center"><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png&quot; alt=&quot; Edge&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;IE</th>
<th align="center"><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png&quot; alt=&quot; Edge&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Edge</th>
<th align="center"><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png&quot; alt=&quot;Firefox&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Firefox</th>
<th align="center"><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png&quot; alt=&quot;Chrome&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Chrome</th>
<th align="center"><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png&quot; alt=&quot;Safari&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Safari</th>
</tr>
</thead>
<tbody><tr>
<td align="center">not support</td>
<td align="center">last 2 versions</td>
<td align="center">last 2 versions</td>
<td align="center">last 2 versions</td>
<td align="center">last 2 versions</td>
</tr>
</tbody></table>
<h2 id="git-贡献提交规范">Git 贡献提交规范</h2>
<ul>
<li><code>feat</code> 增加新功能</li>
<li><code>fix</code> 修复问题/BUG</li>
<li><code>style</code> 代码风格相关无影响运行结果的</li>
<li><code>perf</code> 优化/性能提升</li>
<li><code>refactor</code> 重构</li>
<li><code>revert</code> 撤销修改</li>
<li><code>test</code> 测试相关</li>
<li><code>docs</code> 文档/注释</li>
<li><code>chore</code> 依赖更新/脚手架配置修改等</li>
</ul>


react-admin-design是一个基于react18 + ant-design5的后台管理系统的解决方案，它使用了最新的前端技术栈，并且提供了丰富的功能组件模块，可以帮助你快速搭建企业级中后台的前端架构。

基于React18、RTK2、Antd、Vite、和Typescript的中后台管理系统

<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>


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