本次更新为Rest Code带来了脚本编辑器高度管理系统和彩虹加载动画,全面优化了编辑器交互体验,并重新设计了标题栏布局。这是一次专注于用户体验和界面美观度的重大更新。
- 拖拽调整高度:脚本编辑器底部新增可拖拽边框,支持自由调整编辑器高度
- 高度约束:智能高度限制(200-800px),防止界面异常
- 本地存储:自动保存用户偏好的编辑器高度设置
- 最大化模式:一键最大化编辑器,专注编辑体验
- Ref架构重构:采用Vue ref暴露方法替代DOM操作,提升稳定性
- 全覆盖加载:模式切换时显示华丽的彩虹渐变加载动画
- 多层旋转环:三层彩色旋转环,不同速度和方向营造立体感
- 玻璃态设计:模糊效果和发光边框,现代化视觉体验
- 智能时长控制:根据操作复杂度调整加载动画显示时间
- 全模式覆盖:专注模式、最大化模式的进入和退出都有专属动画
- 响应式调整:表格高度随编辑器高度动态调整
- 专注模式适配:专注模式下自动调整表格最大高度为50%
- 流畅过渡:所有高度变化都包含CSS过渡动画
- 功能按钮整合:将帮助和关于按钮移至标题栏,与其他功能按钮平级
- 布局优化:统一的按钮间距和样式,更加整洁美观
- 按钮顺序:专注模式 → 帮助 → 关于 → 检查更新,符合使用频率
- 样式统一:移除多余的padding和margin,保持视觉一致性
- 8色渐变:红、青、蓝、绿、黄、粉、橙、紫的流动渐变背景
- 多层动效:
- 背景:400%尺寸的彩虹渐变流动
- 旋转环:三层不同颜色和旋转方向的loading环
- 文字:彩虹渐变文字带发光效果
- 玻璃态卡片:85-90%透明度,15px模糊效果,边框发光
- 完全不透明:确保加载时完全覆盖界面变化,避免视觉跳跃
- 组件方法暴露:使用
defineExpose暴露setTemporaryHeight和restoreOriginalHeight方法 - 状态管理优化:响应式的
originalHeight、currentHeight、tableMaxHeight状态 - 父子组件通信:通过ref调用替代直接DOM操作,提升稳定性
- 内存管理:完善的生命周期管理,避免内存泄漏
- CSS关键帧动画:复杂的关键帧动画组合,包含背景流动、旋转、发光效果
- 动画时长控制:基于操作类型的智能时长分配(500-800ms)
- 性能优化:使用CSS3硬件加速,流畅的60fps动画体验
- 响应式适配:完美适配不同屏幕尺寸和分辨率
- 拖拽检测:智能识别拖拽操作,实时高度调整
- 边界约束:最小200px,最大800px的高度限制
- 视觉反馈:拖拽时显示紫色点状指示器
- 平滑过渡:所有高度变化都包含0.3s的缓动动画
- 高度适配:专注模式下脚本设计区域和编辑器各占50%高度
- 加载反馈:进入/退出专注模式都有专属加载动画和提示文本
- 滚动优化:智能滚动到底部,保持用户视线焦点
- 状态保持:退出专注模式时恢复用户之前的高度设置
- 拖拽流畅性:实时高度调整,无延迟响应
- 加载遮罩:避免界面调整时的视觉闪烁和跳跃
- 操作提示:明确的操作反馈消息
- 键盘支持:保持原有的快捷键支持
- 嵌套三元运算符:重构为清晰的if-else语句,提高可读性
- 弃用API替换:使用
navigator.userAgent替代已弃用的navigator.platform - 代码清理:移除冗余的CSS样式和未使用的代码
- 性能优化:减少不必要的DOM查询和操作
- 组件职责分离:ScriptEditor专注于脚本管理,ScriptViewer专注于代码编辑
- 状态管理统一:使用Vue 3 Composition API实现响应式状态管理
- 错误处理:完善的边界情况处理和错误恢复机制
-
拖拽调整:
- 将鼠标悬停在脚本编辑器底部边界
- 出现紫色拖拽指示器时按住拖拽
- 实时调整到理想高度后释放
-
最大化模式:
- 点击编辑器右上角的最大化按钮
- 编辑器将占满整个应用界面
- 再次点击可恢复原始大小
- 激活专注模式:使用
Cmd/Ctrl + E或点击专注按钮 - 自动布局:脚本设计区域和编辑器自动调整为50%高度分配
- 加载动画:享受华丽的彩虹加载动画过渡效果
- 帮助文档:标题栏绿色帮助按钮,快速访问使用指南
- 关于信息:标题栏灰色关于按钮,查看版本和作者信息
- 统一入口:所有主要功能都集中在标题栏,操作更便捷
- 浏览器支持:Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- 平台支持:macOS, Windows, Linux
- Vue版本:3.5.12+
- Element Plus版本:2.8.7+
- 向前兼容:完全向前兼容,不影响现有脚本和配置
- 修复嵌套三元运算符的ESLint警告
- 解决
navigator.platform弃用API警告 - 修复专注模式下界面跳跃问题
- 优化编辑器高度调整时的滚动条闪烁
- 修复加载动画在某些情况下不显示的问题
- 渲染性能:使用CSS3硬件加速,动画帧率稳定在60fps
- 内存使用:优化组件生命周期,减少内存占用
- 交互延迟:拖拽操作响应时间<16ms,确保流畅体验
- 动画性能:复杂动画采用transform和opacity,避免重绘和回流
本次更新专注于编辑器交互体验和视觉美观度,让Rest Code更加现代、流畅、美观! 🌈✨
立即更新体验全新的脚本编辑器管理系统和华丽的彩虹加载动画! 🚀