被秒了

一个Java摸鱼手，随便用用若依就搞出来一个交互良好，功能强大的管理后台，这让我这个一直用React写管理后台的前端工，很尴尬啊，一下就变小丑了，不行我得抗一波线，用React好好写一个既能对接若依，又可灵活扩展，比Antd Pro轻，用起来快乐的管理后台。

实现登陆页

登陆页，不用多复杂，但得简约，大气，最好是那种有美景的。

移动端简单适配一下即可

嗯，不错，可以了。

路由系统

约定式路由

约定式策略来实现路由已经被相当广泛的应用了，比如Nextjs，简单说就是文件结构决定路由数据。

那么为了实现这个策略，那就需要把路由数据拆分清晰，这样，才能保证约定的准确执行

所以，我把路由数据按照职责分为了三要素：

• 路由id
• 路由配置数据
• 路由结构

而真正决定路由结构的交给路由系统去实现约定式路由的生成

其中我实现完备的Ts支持，使三要素相互关联紧密，这样防止写错。

路由自动创建

我知道，代码写的再好，也没有不写代码简洁，或者某种意义说，你代码写的好就是为了不写。

全自动化的操作，你仅仅点点按钮，输入关键信息，其余交给自动化吧。

导航系统

导航系统包括菜单和Tabs，以及面包屑。

菜单

你知道若依的权限管理的策略？这么说吧，非常经典，无脑冲，一笔不改，但可以扩展啊。

如何扩展呢？其实说起来非常简单，远远比描述具体实现要容易的多。

通俗的，希望你懂的方式来说：

菜单是通往路由的入口之一，若依后端配置的便是菜单权限，只不过ta绑定了组件名称，路径等信息。

而这些数据对于前端来说是足够用了，而且还有点多，我其实仅仅就获取两个信息即可。

一个便是菜单数据的Three结构信息而另一个便是每个菜单数据绑定的组件名称，还记得我把路由分成三要素，其中便有路由id，直接在Ruoyui端配置即可。

那么核心的策略就变成了：

后端为主，前端为辅， 后端给出权限，前端给出资源， 后端给资源配置权限，前端为权限之外补充内容（也就是没被配置权限的，前端自行控制）

这种协调，兼容的策略。

Tabs

菜单大家都熟悉，但是Tabs对应每一个使用Antd pro管理后台的小伙伴来说都是隐隐约约的痛，即使有方案，也是需要折腾一番的，确实没法跟浑然一体来的实际，用起来痛快。

基本联动

独立管理Tab数据，响应路由变化，支持删除。

整个导航系统联动起来，一同与路由系统绑定。

支持拖动排序，且抗刷新

使用DndKit，性能相当不错。

拖拽有丝滑的动画效果。

拖拽顺序，支持浏览器刷洗记忆，刷新不丢失。

与KeepAlive相得益彰

项目里实现了KeepAlive，而且是改良版的方案，并不是一般的切换显示隐藏的方案，仅仅存在当前页面的dom。性能相当ok。

光拖拽就够了？拖出来当窗口吧

拖拽支持向下拖出，成为独立窗口，这个功能对于有跨路由显示页面或者分屏的小伙伴，有大用。

光拖拽怎么行，加上右键菜单。

设置系统

提供设置页面，可以针对项目中的功能制定设置项，可以通过设置生成设置文件。

项目设置

设置项目的名称，log，icon等关键信息，后续可以自行扩展。

主题设置

由配色和布局组成，配色分为“日”和“月”，组成了“明”，布局会根据不同配置提供对应效果的预览。

其他设置

可以设置路由的动画效果，提供了几种动画预设，并且可以设置为空。

状态系统

支撑整个业务功能体系的核心，通过该体系，大大降低了代码的耦合度，将数据+业务+UI清晰有效的分层，让业务可以尽可能的脱离UI的粘连，集中有效的流转，UI仅仅做触发。为此我指定

配套文档地址

这是一套状态管理策略，恰巧遇见了Redux

通过搬砖的痛点的深入理解，得出的一种可以深层次改善整个搬砖处境的策略。

• 迭代项目，尤其是迭代组件库，React最新版本，会陷入苦战。
• 业务流转混乱，业务到底在哪写心里没有个数，模棱两可的地方过多。
• Ts开发，类型定义位置无法无天，想在哪写在哪写，完全失去了对Ts类型的管理。
• 同样的业务实现的模式居然有多种，不够统一，很难找寻规律。维护成本指数上升。
• 项目逻辑几乎不分层，导致有用的没用的代码一堆，做不到心中有数。
• 跨组件的通信全靠吼，完全失去了优雅可言。
• 等等了

相信搬砖到一定程度的朋友，都会遇到这些问题，也会有一些思考，但是真正做出改变的人不多，毕竟总是在重复的任务中，从零开始，毫无沉淀，无法形成积累，自然就没有了复利。但是这件事只要你不着急，慢慢的思考怎么能事情变好一点，没事研究，自然也就能积累出一套打法，这样，工作的体验更多，最主要的是摸鱼的时间就变多了，自由无价。

当我研究出了这一套策略，恰巧，我觉得Redux比较经典，支撑我策略实现的基础功能都有，那就先用Redux做一波，有时间可以用Zustand再来一波。

整合Redux，只想说，爱你不容易

Redux除了不好用，其他的都好爆了，为啥这么说，功能多到爆炸，api全面，文档齐全，但上手难度，太高了，按照他的官方写法写出来的代码，就跟生肉一样，难以下咽。

但至少有一点，让我没觉得Redux得整，毕竟海外的外包喜欢的技术栈就是React经典全家桶：Redux就是其中之一， 好好好，客户要Redux，那就有必要折腾。

前端开发中状态管理的理念之争

理念之争这件事，经常发生。

1. 有不少人认为，可以彻底不用状态管理库。
2. 有很少一部分人觉得，完全用状态管理库，一点不用组件状态。
3. 很大一部分人觉得，一些跨组件使用的状态用状态管理库，大部分用组件状态。

对于以上方案都用过的我而言，我是怎么做的？

首先我肯定是要坚定使用状态库的，N0.1策略就被pass了。

然后我在2和3中选，但是也都不符合我的需求，于是为了实现我心中理想，我制定了一个中庸的方案，那便是：

状态管理为主，组件状态尽量少用的方式

状态管理策略，直接决定了潜力

我至于这么选，并不是说，我这个就是最对的，而是他是我经过对此的搬砖中痛苦折磨所摸索出来的一种对称。

捞干的说，代码开发来开发去，最终都要落实到看的懂，那么究竟要看懂是什么？

我觉得要看懂就是两字 ”流转“，即业务的运转流程。

而流转的关键信息往往“藏”在了组件的关系上，通过一层一层的参数传递里。

随着组件的复杂度越来越高，那么拆分的程度也会越来越高， 相对应的参数传递的脉络就会越来越长，理解和维护的成本越来越大，或者说这阻碍了项目的发展，而且重构的难度更是难上加难，积重难返，这是不利于搬砖的。

所以，一种可以根治参数传递地狱，有效改善项目发展潜力的的需求，就变得非常的迫切。

所以，我潜心制定了这个Redux Eazy的整合方案，为的就是能够让项目变得更易于维护，大大的提升了项目的发展空间，就算换组件库都像换衣服一下Eazy，其具备的灵活性为项目注入了活力。

插件系统

得益于Redux Eazy策略带来的活力，让项目能够以一种组合的方式进行发展，那便是插件系统，通过插件系统，任何人都可以把自己的业务封装成插件，通过安装和卸载的方式管理功能模块，大大的增强了扩展性。

主题插件

配色插件

布局插件

功能插件

pdf插件

一个支持预览PDF插件，直接安装，即可支持PDF显示功能。

不用了可以卸载。

winbox插件

支持多窗口的插件

• 响应主题变换
• 对窗口进行了管理，可以函数方式创建和关闭
• 可更改主题

markdown插件

rive插件

想制作一个灵动的动画，那么Rive非常适合你。

社区插件

播放器插件

一个音乐播放器，非常的酷炫，如果你要问为啥管理后台要有播放器？那你得问深红老师

感谢深红老师的为Dland打上的花火。

Ai插件-shiki

一键搭建属于自己的Gpt网站

• 代码高亮
• 轻量的代码编辑器
• 灵动的光标
• 流式的现实

github项目地址

一个非常酷炫的Ai项目就这么搭建起来了，你想问这个项目怎么自定义，那你得问注定成为大法师 的一介同学

以后我就让Ai帮我写代码了，我说的。

战役才刚刚打响，接下来该怎么打

用Mui打造Nextjs+Mui，打造一个管理后台

我是这么想的，首先Antd的组件库，太“丑”了，这不是我说的，这是客户说的，丑也不是不好看，而是西方客户的审美主要是Material风格，自然客户不接受，所以

使用MUI组件库，打造一个Nextjs+Mui的面向客户的管理后台，就搬上日程了。

正好，我之前搬砖的时候，顺手实现了一个基于Mui捶打出的一套开发友好的组件库Mui Eazy

该组件库，目前已经投入到一个Nextjs生产项目，运行良好。 其中最核心的功能就是，实现表单的功能。

可以毫不费力的通过配置数据，直接创建出复杂的表单，为之后的自动生成提供基础。

并且提供了

不断探索Ai，为实现高效搬砖，提升摸鱼时间，不懈奋斗

代码生成是个好东西，我觉得代码生成可比可视化拖拖拽拽要实际，我觉得拖拖拽拽是设计更需要一些，至于编程，尽量还是靠代码生成，那么ts我觉得是天生的好苗子，因为你在写ts类型的时候就是在写注释，那么这个注释就可以跟Ai做沟通，生成代码的路子就会变得异常容易。

项目地址和预览地址

还有好多功能细节，玩法技巧，这里就不作赘述，有兴趣的朋友可以自行探索。

预览地址

源码已经开源，前端和java都放在一起了，java用的就是Ruoyi芋道作为后端例子，有兴趣的可以自行运行起来。

前端是一个Monorepo，放在了根目录下的frontend文件夹下，直接运行npm run start即可运行。

项目地址

浪漫的事情，就是一起反卷

什么是反卷呢？

我这么跟你说，你看看能不能理解，就是外面全是野兽，我呢，想在世外找一个岛，建立一个避难所，我不停的建围墙，架武器来守卫，守护那一份珍贵的宁静。

引用一下泰戈尔说过的，“要活的像光一样，因为你不知道，谁会借着你的光走出黑暗”

我是真心希望内心光明，不想成为野兽的朋友，来闲D岛度度假，群号是551406017，这里有许多发光的人，可以为你注入能量，照亮一下前方的路。

未来有机会也可以一起做做项目赚赚刀乐，另外如果是小姐姐，咖啡福利必须安排上。

ok，就说这么多，如果你对这个搬砖项目感兴趣，有任何疑问都可以评论或者私信我，欢迎交流。