今天的工作任务也依旧是修修补补，还是改动 UI 的一些细节和问题。
继续缩窄间距，视图按钮增加悬浮效果，会议时间如果未满一小时，不显示小时符
其中我把界面的大小修改之后，发现某个面板组件出现了问题。它使用了一个叫 React Rnd 的库用来实现拖拽和大小缩放的功能。这个面板可以以两种状态显示，一个是固定在某个位置可调高度，另一个是自由拖拽和缩放，两种状态均可反复进行切换。
这里面有个让我很无语的代码逻辑，就是其展示的宽度是根据其他面板展示的状态判断，结合 CSS calc 函数预先算出来的写死在代码里面的固定宽度。所以我一旦修改整体界面，这地方的宽度就异常了。如果想要修改，就只能把每个面板展示状态所对应的固定宽度分别进行修改，比较蛋疼。
这种问题我首先想到的就是使用 100% 的宽度替代固定的 px 值，但这样做和第三方库的设定有所违背，出现了更严重的问题。它默认会把拖拽后的 Block 设置成 Inline Block，修改大小的时候由于没有固定的 px 宽度，会继续使用百分比的模式，出现了“不跟手”的效果。从该库的 Demo 里面可以看出其默认设定和使用场景就是脱离文档流可拖拽的元素，貌似就不存在从 Fixed 和 Static 反复切换的情况。现在这种解法，更像是以一种 Bug 的形式成功解决了需求。
下午四点左右，公司的网管让我率先测试一下连接外网，我第一直觉就是公司是不是换了网络运营商，他让我把梯子软件关闭，手动配置了下 DNS，结果能够直接打开谷歌了。
他说公司申请了访问境外网络的专线，以后应该就不会再出现卡顿的情况了。一个多小时前我使用梯子软件让后端接口走代理的时候，还经常一个接口卡二十几秒呢。这么一搞，应该安装各种软件包还有各种日常资料的检索都要方便很多了，大大提高工作效率！
下班前，我还在持续着复现群里面测试提到的另外一个设备授权的问题。这个功能也是上级此前想让我更深入了解的。
简单排查发现其实是因为之前产品经理要求“手机上不要弹出过多的授权提示框”这个需求，我修改了一次代码所致的。修改前会默认弹出三次授权弹窗，从用户体验的角度上感觉比较差。首次授权会一次性要求获取「麦克风和摄像头」的权限，一旦拒绝，就会再次分别请求「麦克风」和「摄像头」的权限。我那个改动是仅弹出首次授权，一旦拒绝就没有后续了。
测试首先关闭摄像头权限，进入会议后再手动重新开启。这个步骤首先会让代码逻辑把两个设备权限都标记成“拒绝”，手动开启摄像头后会触发轮询摄像头权限的代码，所以摄像头成功开启。麦克风权限虽然是开启状态，但由于并没有造成修改（如果你开关一波就正常），是没有执行轮询代码的。
关于这个问题目前我想到的一个解法，就是即便首次授权被拒绝，后期开启麦克风或摄像头的时候再次单独弹窗获取授权，这样手机上就没有反复的授权弹窗了。在和产品经理的沟通下参考了其他竞品，就有一家看似是这样做的。具体的实施还需要研究研究，也不知道是否可行。
晚上吃完饭后去超市买了点物资，方便后天回老家使用。之后回到家尝试用原生的方式实现我前面所述的那个拖拽面板，对应 Demo 也上传了。目前完美的实现了 Fixed 和 Static 轮换的效果，Static 模式下没有绝对的坐标值，切换到 Fixed 时会自动获取 Static 时的尺寸和坐标。Fixed 切换回 Static 模式，将会清除坐标值，还原到 Static 默认的展示效果。
看起来这个功能确实完美得到了更好的解法，但还缺少了缩放大小的功能，如果这个问题后续在我手头上能得到解决，或许是个比较大的技术突破吧！公司项目的这两个新问题着实是拿捏到了我的好奇心，还是挺想整出一个更好的方案的...