使用react-amanda快速搭建管理类型的系统
管理类型的系统是开发者经常会遇到的，例如电商平台的后台管理系统、博客的发布系统、ERP、OA、MES、等等，这些系统在技术开发和用户体验上都是基本一致的。
使用 react-amanda/admin 能快速搭建此类系统的基础架构，并且使用Ta有以下优势（或者说好处）：
- 只需简单的配置即可拥有一个基本的UI布局和基础架构。
- 开箱即用，使用起来非常简单。开发人员只需编写自己的页面组件和业务逻辑，其它的基础性的东西 react-amanda/
admin已经帮你完成了。 - 能极大地减少开发人员的工作量。我厂曾经有一个小项目，预期是5个月完工，在使用了 react-amanda/
admin之后，只用了三个月多一点就完工了。 - 近乎极致的性能优化。因为是在架构层做的优化，所以即便你自己编写的页面组件中有一些性能方面的坑，对整个系统的影响也是不大的。
接下来演示一下使用 react-amanda/admin 是多么地简单。
第1步，当然是创建项目啦 ^_~
npx create-react-app APP_NAME
第2步，安装 react-amanda
npm install react-amanda
第3步，将 /src/index.js 修改成以下这个样子：
import React from 'react';
import ReactDOM from 'react-dom/client';
import Admin from 'react-amanda/admin';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Admin config={{
checkAuth: (callbackFun) => {
callbackFun(true);
},
mainNavs: [
{
title: '首页',
url: 'Index',
icon: React.lazy(() => import('@mui/icons-material/Stars'))
},
{
title: '用户',
url: 'Users',
icon: React.lazy(() => import('@mui/icons-material/Anchor'))
}
]
}}/>
);
以上示例做了两项配置，
其中，checkAuth 是用来检测用户是否处于登录状态的。通常，一个管理类型的系统是需要登录后才可访问的。你需要在这里写你自己的检测代码。如果你的系统不需要登录就可访问，那么像上面的示例一样直接 callbackFun(true) 就可以了。
有意思的是，你甚至可以连登录页都不用写，因为 react-amanda/admin 有一个默认的登录页。
另一个配置 mainNavs 是在配置主导航菜单。可以为菜单配置图标。上面的示例中，为菜单配置了 material 图标。但你可能已经注意到了，我并没有在项目中安装 material ，这是因为 react-amanda/admin 已经默认包含了 material UI —— 目前世界上最优秀、最受欢迎的 UI 库之一。
现在，运行项目后你将看到类似以下的界面：
看，我没有做任何布局，就有了一个基本的布局。
但页面中显示了 “没有找到 Index” 的提示。这是因为我还没有添加任何页面。
所有的页面都应该放在 /src/pages 目录下。
在上面的示例中，主导航菜单中有两个项，分别是“首页”和“用户”。配置中的 url 是它的访问路径，同时也是它对应的页面的文件名。因此，需要创建以下两个文件：
/src/pages/Index.js
const Index = () => {
return <div>This is Index</div>
};
export default Index;
/src/pages/Users.js
const Users = () => {
return <div>This is Users</div>
};
export default Users;
看，我们只需专注于写页面组件和业务逻辑，其它的都由 react-amanda/admin 为我们处理了。
react-amanda/admin 规范了用户体验，可以让开发者不用过多地考虑用户体验的部分。在 react-amanda/admin 中，页面有多种打开方式，可以在主选项卡中打开，也可以在右侧打开，还可以以弹窗的形式打开。通常来说，在一个主页面中进行操作需要打开的页面，应该在右侧或弹窗打开，这样可以避免用户来回地切换页面，以给用户一个良好的体验。
更多文档可参考：https://amanda.code-push.cn/