这是我参与「第四届青训营」笔记创作活动的第14天。
本次项目前端中台系统所需的feature点：
-
系统需要有较为完善，简易的三端适配。
-
分为左边sidebar、头部header、右下main的页面布局。
-
左边sidebar在匹配移动端时需要隐藏，可通过位于header，临近sidebar的menuopen图标进行sidebar的打开与关闭。
- sidebar的隐藏使用transform translateX，但translateX无法移至父级框之外，即使没有显示设置其上级所有容器的宽度，如何解决？
-
关闭sidebar，header和main部分视图自动填补sidebar区域。
- 能自动填补sidebar区域，则header与mian的宽度不能设置死？
-
-
右侧settingsdrawer。
-
可通过处于两个不同组件层级的按钮进行打开。在移动端情况下，希望actionsbar栏自动隐藏。
-
settingsdrawer中更改sidebar宽度，菜单栏需实时变化。
-
左上角logo处与sidebar宽度变化过程中，logo栏下方dashed 虚线需要同步变化。
-
settingsdrawer中更改主题颜色，点击ok后，颜色需要及时变化。
- 主题颜色选择器中有预设样式。
- 主题颜色需渗透进el-menu,el-dropdownMenu,组件中菜单子项的文字hover时变化。
- vue3CSS功能：global选择器中无法使用v-bind（）
- 不通过ducument.getElementBy的非声明式方式实现样式绑定。
-
-
index页与login页背景使用vanta.js，增加页面动效，生动感。
- vanta引入问题，无ts类型声明。全通过CDN方式引入如何实现，全通过本地npm包引入方式如何实现。
- 页面全屏状态时，vanta报错，背景动效丢失问题如何解决。
- 全局黑暗/光明模式样式管理问题，如何和谐统一。（弃坑）
- 为中台可扩展路由缓存功能，路由展示使用vue3内置特殊元素实现。
-
数字化监控台dashboard。
- 展示页面grid布局根据浏览器代理模式动态调整栏数布局。
- echarts图表根据容器大小自动变化，如何确定图表最适最小宽高。
-
echarts。
-
主题更换无效。
-
图表宽高设置的最佳位置，设置在包裹echarts组件的父级容器上，还是其祖父级，或是直接设置在echarts init 上。
-
echarts图表展示穿模。
如有过路者针对以上问题有可尝试的想法，欢迎提出。
-
