Skip to content

Latest commit

 

History

History
142 lines (109 loc) · 6.38 KB

File metadata and controls

142 lines (109 loc) · 6.38 KB

Rest Code v1.1.5 发版说明

🎉 版本亮点

本次更新为Rest Code带来了脚本编辑器高度管理系统彩虹加载动画,全面优化了编辑器交互体验,并重新设计了标题栏布局。这是一次专注于用户体验和界面美观度的重大更新。

✨ 新增功能

📏 脚本编辑器高度管理系统

  • 拖拽调整高度:脚本编辑器底部新增可拖拽边框,支持自由调整编辑器高度
  • 高度约束:智能高度限制(200-800px),防止界面异常
  • 本地存储:自动保存用户偏好的编辑器高度设置
  • 最大化模式:一键最大化编辑器,专注编辑体验
  • Ref架构重构:采用Vue ref暴露方法替代DOM操作,提升稳定性

🌈 彩虹加载动画系统

  • 全覆盖加载:模式切换时显示华丽的彩虹渐变加载动画
  • 多层旋转环:三层彩色旋转环,不同速度和方向营造立体感
  • 玻璃态设计:模糊效果和发光边框,现代化视觉体验
  • 智能时长控制:根据操作复杂度调整加载动画显示时间
  • 全模式覆盖:专注模式、最大化模式的进入和退出都有专属动画

🎯 动态表格高度管理

  • 响应式调整:表格高度随编辑器高度动态调整
  • 专注模式适配:专注模式下自动调整表格最大高度为50%
  • 流畅过渡:所有高度变化都包含CSS过渡动画

🎨 界面设计升级

标题栏重新设计

  • 功能按钮整合:将帮助和关于按钮移至标题栏,与其他功能按钮平级
  • 布局优化:统一的按钮间距和样式,更加整洁美观
  • 按钮顺序:专注模式 → 帮助 → 关于 → 检查更新,符合使用频率
  • 样式统一:移除多余的padding和margin,保持视觉一致性

彩虹加载动画设计

  • 8色渐变:红、青、蓝、绿、黄、粉、橙、紫的流动渐变背景
  • 多层动效
    • 背景:400%尺寸的彩虹渐变流动
    • 旋转环:三层不同颜色和旋转方向的loading环
    • 文字:彩虹渐变文字带发光效果
  • 玻璃态卡片:85-90%透明度,15px模糊效果,边框发光
  • 完全不透明:确保加载时完全覆盖界面变化,避免视觉跳跃

🔧 技术改进

Ref-Based架构重构

  • 组件方法暴露:使用defineExpose暴露setTemporaryHeightrestoreOriginalHeight方法
  • 状态管理优化:响应式的originalHeightcurrentHeighttableMaxHeight状态
  • 父子组件通信:通过ref调用替代直接DOM操作,提升稳定性
  • 内存管理:完善的生命周期管理,避免内存泄漏

加载动画技术实现

  • CSS关键帧动画:复杂的关键帧动画组合,包含背景流动、旋转、发光效果
  • 动画时长控制:基于操作类型的智能时长分配(500-800ms)
  • 性能优化:使用CSS3硬件加速,流畅的60fps动画体验
  • 响应式适配:完美适配不同屏幕尺寸和分辨率

拖拽交互优化

  • 拖拽检测:智能识别拖拽操作,实时高度调整
  • 边界约束:最小200px,最大800px的高度限制
  • 视觉反馈:拖拽时显示紫色点状指示器
  • 平滑过渡:所有高度变化都包含0.3s的缓动动画

📱 用户体验提升

专注模式增强

  • 高度适配:专注模式下脚本设计区域和编辑器各占50%高度
  • 加载反馈:进入/退出专注模式都有专属加载动画和提示文本
  • 滚动优化:智能滚动到底部,保持用户视线焦点
  • 状态保持:退出专注模式时恢复用户之前的高度设置

交互体验优化

  • 拖拽流畅性:实时高度调整,无延迟响应
  • 加载遮罩:避免界面调整时的视觉闪烁和跳跃
  • 操作提示:明确的操作反馈消息
  • 键盘支持:保持原有的快捷键支持

🛠️ 代码质量改进

Linter错误修复

  • 嵌套三元运算符:重构为清晰的if-else语句,提高可读性
  • 弃用API替换:使用navigator.userAgent替代已弃用的navigator.platform
  • 代码清理:移除冗余的CSS样式和未使用的代码
  • 性能优化:减少不必要的DOM查询和操作

架构优化

  • 组件职责分离:ScriptEditor专注于脚本管理,ScriptViewer专注于代码编辑
  • 状态管理统一:使用Vue 3 Composition API实现响应式状态管理
  • 错误处理:完善的边界情况处理和错误恢复机制

📚 使用指南

脚本编辑器高度调整

  1. 拖拽调整

    • 将鼠标悬停在脚本编辑器底部边界
    • 出现紫色拖拽指示器时按住拖拽
    • 实时调整到理想高度后释放
  2. 最大化模式

    • 点击编辑器右上角的最大化按钮
    • 编辑器将占满整个应用界面
    • 再次点击可恢复原始大小

专注模式体验

  1. 激活专注模式:使用Cmd/Ctrl + E或点击专注按钮
  2. 自动布局:脚本设计区域和编辑器自动调整为50%高度分配
  3. 加载动画:享受华丽的彩虹加载动画过渡效果

新增快捷功能

  • 帮助文档:标题栏绿色帮助按钮,快速访问使用指南
  • 关于信息:标题栏灰色关于按钮,查看版本和作者信息
  • 统一入口:所有主要功能都集中在标题栏,操作更便捷

🔄 兼容性说明

  • 浏览器支持: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更加现代、流畅、美观! 🌈✨

立即更新体验全新的脚本编辑器管理系统和华丽的彩虹加载动画! 🚀