👑 [需求]能否提供一个左侧多级布局

[xiexingen]

🥰 需求描述

看vue-admin-beautiful-pro中的那个布局挺实用的

在线地址:
https://chu1204505056.gitee.io/vue-admin-beautiful-pro/#/vab/drag/cardDrag

🧐 解决方案

🚑 其他信息

[qweasd25]

对的 这种也好

[qweasd25]

https://ecs.console.aliyun.com/?spm=5176.12818093.recommends.decs.488716d0nK1mXI#/home
登陆后看控制台

[fanhualei]

左侧多级布局 这个挺好的，有赞后台也用到这种布局，使用起来很方便。

[fanhualei]

我模拟了一个

[fanhualei]

如果看不到图片，手工点击：https://gitlab.redhtc.com/antd/newPage.png

[chenshuai2144]

做成通用方案吧

[fanhualei]

做成通用方案吧

建议采取一种新的模式来做Layout。

当前的问题：
1）重口难调，每个项目都想有一个自己风格的界面。为什么不让，让网友自己去修改。
2）这么多Layout样式，放在一个程序中，程序读起来很难懂，也不便于维护。

建议
1）ProLayout的数据结构与公用函数抽象出来。
2）每种类型的模板，分别做成不同的tsx文件。
如果网友想做个性化模板，就实现一下UI的布局，做一个新模板也不麻烦了。
只要数据结构相同，发现自己的模板不好看，切换成其他人的模板也是一行代码的事情。

可以抽象的与界面无关的功能或数据结构有：
1）config.ts 文件种定义的routes
2）通过routes得到便于操作的：菜单、面包屑。当前选中的菜单
getMenuData matchMenuKeys
3）得到页面大小，修改页面Title等与页面相关的函数
useAntdMediaQuery
4）得到图标的函数
getIconReactNode
5）得到多语言的函数
useIntl

只要这些数据结构统一了，那么不同风格的模板就可以方便替换了。
另外，如果这些函数都做成hooks，调用就更方便了，实现个性化的Layout也不是难事。

如果Layout多样化，不同网友贡献自己的模板，这样感觉AntDesignPro社区也活跃一点，实际上AntDesignPro也就这个Layout变更的诉求比较多，其他哪些表单页、详情页、列表页风格上没啥要调整的。

[chenshuai2144]

这样就太复杂了，我们本来是为了减少 layout 的样式，统一成一种样式，现在又要分裂。

[holycrypto]

阿里云控制台那种是目前用来最方便的。

[chenshuai2144]

有兴趣帮忙实现一下吗