本文的开发内容是在免费开源的测试平台上，teprunner的UI界面应该算是第一个渐变，BUT，美中不足，在不同分辨率的显示器上（比如13.3寸小屏下大弹窗布局的笔记本），表现并不尽如人意。而这个是核心功能代码编辑的接口，比如写用例，写fixture，需要优化升级。另外还有滚动条的问题：垂直双滚动条和水平滚动条也影响体验。本文将对这些内容进行改造，具体如下：编写一个用例页面，将其从弹窗改成子页面。编写夹具页面并将其从弹出窗口更改为子页面。代码编辑区自适应性强。缩小左侧菜单，将工程环境和新建按钮移至同一行，扩大编辑区面积。消除所有双向滚动条。消除所有水平滚动条。语法说明在示例代码中添加了环境变量和固定装置。其他细节优化。响应式是指同一套前端代码可以适配不同的浏览器（PC、手机等）。ElementUI已经是响应式设计了。本文的响应性体现在代码编辑区的行高上。计算设置。升级效果为左侧菜单栏变窄；添加环境变量和固定装置示例代码。项目环境和新建按钮显示在同一行，扩大有效内容的可见区域。灯具的添加和编辑由弹出窗口改为子路由页面。代码编辑区自适应性强，只出现一条垂直滚动条。消除水平滚动条；减少用例描述栏以外的栏宽；用图标替换操作按钮的文本。用例的添加和编辑由弹窗变为子路由页面，代码编辑区域高度自适应，只出现一个垂直滚动条。用例运行结果的添加和编辑由弹窗改为子路由页面。代码编辑区自适应性强，只出现一条垂直滚动条。测试计划的添加、编辑、运行结果也进行了同样的调整。整体来说，有效信息的可见区域和可操作区域都被尽可能地扩大了！关键技术点的前端代码修改文件如下：比较繁琐，也没有什么新知识，这里就不一一讲解了，而是选择用到的关键技术点进行知识复习：在模板中添加
