语翼数字人后台

多租户模式

因为后台的需求是总部账号登录后，可以对不同区域分店的后台账号进行查看。但是如果要退出登录才能进行查看又显得过于繁琐，所以产品的要求是使用下拉列表进行租户的切换。

该项目是采用的是 cookie 的形式，需要做到用户身份的标识，采用的是租户 id 和平台 id，这个需求只需要进行下拉的时候获取接口数据，进行切换即可，同时会传入对于的身份权限，然后根据路由表的 meta 字段进行判断，在路由拦截器中，使用 addRoute 动态添加路由表，对于当前页面，需要进行路由路径的替换，不然会白屏。

日历组件

因为当时第一版采用的是 element plus 的日历组件，但是由于 ui 的调整，element plus 的样式和功能不符合目前的需求了，调整复杂。

所以决定手写一个运营日历组件，这个组件只是纯展示组件，不过使用 dayjs 对月进行了封装，将每天的组件方格进行了单独的抽离，使其后续只需要对每个组件的方格传入 render 的组件即可，不需要考虑内部月份等其他因素。同时由于 ui 只出了一个 pc 尺寸的图，不同分辨率下每行的日历方格不能过多，就比如：不能一行放 10 个。

最开始采用的是百分比的形式，借助 flex 布局，但是当高分辨率的时候，如果一行是 4 个，就会导致长度过长，并且高度是固定的，就会显得很矮。

所以最后采用的是媒体查询对不同分辨率进行兼容处理，对小屏 pc、正常 pc、大屏 pc 进行不同大小尺寸的渲染，完美满足了 ui 的需求。

由于在最开始组件的设计阶段，就做到了容器组件和渲染组件的抽离，在方案调整的时候，格外的方便。

日历组件惰性加载优化（日历 Popover 按需初始化）

面试官可能会问：在什么业务场景下发现这个问题，以及为什么要做这版优化

我们有一个月视图日历，一屏会渲染一个月的，大致 30 个日期格子，每个格子里有一个「计划列表」区域；用户 hover 到有计划的格子时，会弹出一个 Popover，展示该日期的发布计划详情。

也就是说：每个格子都挂一个 Popover 组件，但用户只有鼠标移上去才会看。

发现这个问题是因为在的mt给我code review的时候，找到的一些bug，比如我日历组件的item的key是天数+index，导致在切换其他组件的时候，状态没有被卸载干净；其次就是这个惰性组件优化方案。因为在看组件是否有被卸载干净的时候，我在mounted中打印了一下，发现会打印30次log，就顺带查了一下是否有必要全部提前创建。确认交互是只有 hover 才需要之后，就做了按需初始化的优化。

所以改成用 v-if + mouseenter 鼠标移入事件，再挂载，并且挂载后不销毁，避免同一格子重复初始化。如果对于要渲染非常多的dom元素，这个优化我觉得是很必要的。