主页面布局

1.用contain容器组件库，调整宽高铺满页面，加背景颜色
2.封装组件

左边菜单

1.分上下两部分，上部分顶部logo，下部分导航
2.用”导航”组件
3.将菜单搭出来（样式、图标、插槽、隐藏滚动条等）

一些设置

• 登录获得的数据需要像token一样缓存起来，不然一刷新就消失了

  store处理登录步骤
  1.帐号登录，获取token等信息
  2.获取登录用户的详细信息（角色信息）
  3.根据角色请求用户的权限（菜单menus）,（拿到他能拿到的数据）
  4.进行本地缓存
  5.页面跳转（main页面）

• 绑定index，设置默认加载菜单“系统总览”

• 动态刷新列表，v-for循环数据
• 服务器返回的图标字符串可以用动态组件设置

搭建header

布局

缩放图标、面包屑、个人信息

缩放图标应用实现

1.监听点击
2.占据状态展示不同的状态图标，记录状态，用动态组件
3.对应的meau菜单栏展开/折叠
3.1 改变宽度，子组件状态改变，传递给父组件改变宽度
3.2 设置宽度变化的过渡动画
3.3 隐藏标题文本

顶部header右边

图标

1.基本搭建
2.消息小红点样式搭建

下拉菜单dropdown

1.dropdown组件
2.组件菜单内容编辑
3.头像avatar
4.退出登录菜单：获取路由，移除cache，跳转页面

拿子组件内部的某个类，有可能拿不到，两种方法

有可能组件渲染在app的外面
1.deep，有可能也不可以
2.用global（全局）

主菜单路由映射

用普通路由会有漏洞，如果直接手动输入url进入页面，会泄露信息

动态路由：根据用户的权限信息，动态的添加路由（而不是一次性的注册所有的路由）

• 基于角色（Role）动态路由管理
  弊端：每增加一个角色都要增加一个key/value，如果要增加前端需要重新发布/后端返回这个对象，后端必须组织好这个json

const roles = {
    "superAdmin": [所有的路由]
    "admin": [一部分的路由]
    ...
}

• 基于菜单（menu）的动态路由管理
  通过动态展示菜单，将菜单映射成路由对象

  登录接口中请求的三个内容
  1.token
  2.用户信息：角色信息（role对象）
  3.菜单信息

把路由对象放到文件中进行管理，方便写一些自动化的工具

根据菜单动态的添加路由对象（独立的文件中）

1.获取菜单
2.动态获取所有的路由对象，放到数组中
定义数组
const localRoutes: RouteRecordRaw[] = []
读取router/main所有的ts文件
const files = import.meta.glob('../../router/main/**/*.ts', {eager: true})
路由对象都在独立的文件中
从文件中将所有路由对象先读取到数组中
3.根据菜单去匹配正确的路由
router.addRoute('main, xxx)
4.可以抽取封装成一个工具
5.网页刷新上述代码会重新执行，添加的动态路由不会被保存
判断目前是否登录，以及从cache中读取useMenu菜单来添加动态路由
定义一个actions

面包屑

1.需要返回菜单名，写一个工具函数（可以复用动态路由的）获取面包屑的层级
2.当切换菜单时，面包屑不会随着切换

可以使用watch监听
可以使用计算属性computed
3.点击面包屑上的一级菜单，由于没有配置路由，会进入到notfound页面
默认返回第一个菜单
在第一步获取菜单的时候，传入第一个菜单的url，用重定向。
判断逻辑：是否是第一个加入的路径

user页面布局

1.搜索表单

边框换圆角，改宽度、添加输入框前的文字，
改变行内排列：（1）自己实现flex布局；（2）用组件库的layout布局
状态表单、日期选择器（国际化，不认识的类型文件去env.d.ts文件中声明），element-plus的el-row中的el-col可以放在一起
2.content
1.头部

2.表格
3.分页