现在部署在公司内部的系统足够使用。但未来还是想开发前后端分离的项目。

所以现在重新起了后端和React前端，但是前端的样式不想再自己搞，于是在MUI的首页发现了一个更新还挺勤快的模板：Mantis。免费版也足够了，反正我只要一个响应式的Dashboard界面。

不过因为这个项目的依赖和我目前的完全不同，因此我先打算完全吃透了这个项目的结构，再开始干活。

安装

用NPM上来就遇到了麻烦，提示有三个开发依赖还不支持ES Lint 10，于是我就把那三个开发依赖砍掉了，目前没发现问题

初步修改

做了以下几个修改

1. 字体修改成了inter，去掉了原来使用的Public-sans字体

2. 去掉了web-vitals库

3. 修改了vite.config.mjs里的基础路径，一律采用根目录

4. src/config.js里的常量，修改了APP_DEFAULT_PATH为根目录

接下来就一个一个组件的慢慢研究一下，看一下到底怎么做的。

ConfigProvider

ConfigProvider组件里，先使用了useLocalStorage加载配置。继续追下去，useLocalStorage是一个模板自己编写的LocalStorage加载库。

提供了按照Key读取本地存储的内容，如果本地存储不存在，就获取初始值。初始值配置在src/config.js文件里。

useLocalStorage中使用了useEffect，每次状态变化都尝试将状态写入到最新的本地存储去，还编写了重置和单独设置字段的函数。

可以认为useLocalStorage也是一个全局状态管理库。

只不过目前仅仅提供了字体的配置如下：

const config = {
  fontFamily: `'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif`
};

ThemeCustomization

这个组件里上来使用了useConfig，实际上就是从中拿到了字体设置数据。

然后使用了一个usememo生成字体数据，只要字体不变化，Typography生成的字体对象配置就不会变化。

接着生成一个主题配置，把断点等等内容全部都放到了里边，其中字体直接用上边的字体对象覆盖，这样就应用了全局字体。

最后利用上边的主题配置，创建createTheme来得到最终的主题对象，然后还使用这个主题设置，覆盖了很多默认组件的样式。

然后返回了一系列包裹内容

包裹内容

StyledEngineProvider是MUI自带的，使用injectFirst让这个东西放在Header的前边，这样自己写的css就能覆盖前边的。

ThemeProvider就是标准的Provider里，带了几个属性，theme就是刚才的主题钩子。由于我免费版没法切换色彩模式，所以就用不上了。

Cssbaseline也是必须得，重置所有默认css样式。

然后就是children了。

RouterProvider

这个是 React Router 7 的 新写法了，用route文件来写路由，得学习一下。

RouterProvider是React Router提供的，需要传入一个route对象。这个对象写在src/routes/index.jsx里。

其中也使用了import.meta.env.VITE_APP_BASE_NAME来当前默认的路由前缀。

这里我查找了import.meta.env.VITE_APP_BASE_NAME发现两处，所以直接就将该配置删除，然后这里不使用路由前缀，vite.config.mjs里也去掉相应的导入env文件和VITE_APP_BASE_NAME的地方，更简洁了。

路由分装在了两个文件里：MainRoutes和LoginRoutes。很显然前边是主要界面，后边的LoginRoutes不用Layout包裹，是单独的页面。

LoginRoutes组件

这个组件都使用了Lazy加载和Suspend来实现长条状的顶部加载进度条。那么自己编写的页面将来也用这个就可以。

里边路由组件按照写法分别使用了/login和/register来进行匹配。这里感觉嵌套太多了，自己尝试改一下看看。

这个写法其实就是组件的嵌套关系。匹配上路由就在上层组件里包裹内层进行渲染。

Login组件的背景

继续追进去看Login组件，看到这个组件外边包裹了一个AuthWrapper组件内层是Grid，然后使用了AuthLogin组件。

AuthWrapper实际上是一个背景。AuthLogin是表单。

这个结构就比一般的页面要编排的好，把背景和结构还有表单分离开了。

先进去看一下AuthWrapper，其实就是登录页面的背景，右边渲染了一个大的模糊的图标。

里边又使用了Authbackground，AuthFooter和Card。

这个又可以继续进去改。像Logo其实也可以统一调整掉。这里用AI在Authbackground都加上了统一的科技感点状背景加了点六角形在右上角。其他的暂时不改。

ICON 图标部分

这个模板把图标也拆解了，做的不错。

component/logo/index.jsx中的LogoSection返回的是一个根据大小来显示LogoIcon或者Logo组件的动态图标。

LogoIcon组件就是纯的图标，Logo是带有图标和右边Mantis字样的组件，本来全部都是SVG绘制而成。

我将纯图标组件改成公司的favicon，将Logo改成公司长条形的图标。这样就都显示在正确的位置了。

下一步拆解

接下来就是研究一下自带的formik和yup，以及表单组件的使用了。

并且想办法把AuthGuard和用户登录功能给编写了。

其实到这里为止布局的拆解基本上差不多了，主要是后边先把自己的逻辑弄进去。

这个组件前边几个全局包裹的内容还算是比较简单的。