针对二级菜单比较多的情况，新做了一个layout.

[fanhualei]

针对二级菜单比较多，新做了一个layout.
没有全部用ProLayout的嵌套功能，ProLayout中考虑的功能太多了，代码重新写起来很麻烦，还不如重写。看下图

Layout的props接口写的挺好，今后所有的模板都按照这个接口来写，每一套模板单独一套代码，这样代码看起来比较简单，不用读个模板中用if判断条件来调用不同的样式与逻辑，代码看起来稍微费劲一点。

[fanhualei]

借鉴了有赞与vue admin 的界面

[fanhualei]

大佬 你这个layout是重写的npm包吗 在umi plugin-layout里面怎么切换调用到这个layout？

没有重写pro里面的layout，我单独做的一个layout。

github经常上不去，现在很少上github了。

我不是啥大佬，也是新手，抽空学习一下，断断续续的，为了防止我忘记，我把实际项目中，需要在pro中改造的地方，列出了一个大纲，过一段时间，抽出空，补充完整。 文档在这里

[johnwayen]

OK 感谢

[want-to-die-because-handsome]

大佬.有源码嘛?我目前的项目需求跟你得demo一样,麻烦给一份源码把,谢谢!

[fanhualei]

大佬.有源码嘛?我目前的项目需求跟你得demo一样,麻烦给一份源码把,谢谢!

https://gitee.com/fanhualei/wukong-admin-demo 4、5年前的代码了，现在antdesignpro已经更新了无数个版本了，一些语法都不一样，不建议参考，浪费时间。 拿新的antdesignpro框架写一个，也很简单。

[fanhualei]

antDesignProu做的越来越好了，界面可以随意定制，现在把界面改成这个样子了，发现弹出层的登录框也挺好用。

[chenshuai2144]

要不要把 splitMenus 利用一下。打开一下 splitMenus 就变成你这个样子

[fanhualei]

好的，我去研究一下，antPro里面有很多功能没有发掘出来，我要好好研究一下。 我最初的想法是将一级菜单放在最左侧，例如win10,vscode的都做了一个类似的窄菜单框。 我在看源代码时发现了splitMenus，当时没有太留意，这次可以去研究一下。

[fanhualei]

我模拟了一个界面，见下图，如果看不到图，可以手工点击：https://gitlab.redhtc.com/antd/newPage.png

[fanhualei]

学习过程中，顺手做的Demo: https://adminpro.redhtc.com/

• AntDesignPro要考虑的情况比较多，Demo就简化了很多功能，例如自适应，反正设计的初衷就是在PC上使用。

• 使用了procomponents，发现procomponents很好用。

• 用了@ant-design/charts ，觉的挺好的。

• 学习过程中，遇到问题，就在issue上问，得到很多帮助。

• 等我再学一段时间，水平提高了，也去issue上回答问题，毕竟当时学习的过程中，在issue上得到很多帮助。

[chenshuai2144]

欢迎把你上面的场景做成 prolayout 的功能

[fanhualei]

还有些细节没有想好怎么做。

我这个Demo有下面的特殊性，所以才好做：

• 菜单只有2级
• 一级菜单与二级菜单都比较多。
• 一级菜单的名字可以缩写成2个字。

AntDesignPro就不一样了，它要考虑的多。

• 有三级或四级菜单
• 一级菜单的名字过长，如果是多语言切换。

我想的解决方案，是按照win10的开始菜单来做，但是感觉效果不是太好，所以还在想怎么做效果会更好一点。

[rustdesk]

@fanhualei 漂亮

[want-to-die-because-handsome]

感谢大佬回复,这个我在当天看了您有回复,之后便去gitee上面找到了您的仓库,并且翻阅到了这个项目代码 您改造的代码是react得,我用的是vue3,虽然将代码转成了v3的形式,但是依然有诸多bug,因为是小白,并且需求太紧急,所以暂时先放弃了. 总之,感谢您的回复!谢谢! 在 2024-08-13 21:02:56，"fanhualei" ***@***.***> 写道： 大佬.有源码嘛?我目前的项目需求跟你得demo一样,麻烦给一份源码把,谢谢! https://gitee.com/fanhualei/wukong-admin-demo 4、5年前的代码了，现在antdesignpro已经更新了无数个版本了，一些语法都不一样，不建议参考，浪费时间。 拿新的antdesignpro框架写一个，也很简单。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>