Skip to content

VoxVer Launcher v0.6.2-启动器设计系统全面重构

Choose a tag to compare

View all tags
@nnkmn nnkmn released this 03 Jul 22:11
· 73 commits to main since this release
VoxVer-v0.6.2
d08f988

发布日期：2026-07-04

概述

本次更新聚焦于启动器设计系统全面重构，引入 OLED 暗色底座、Neubrutalism 设计风格、磨砂玻璃效果，并优化了启动画面的加载体验。

设计系统重构

Design Token 体系

  • src/styles/tokens.scss：定义统一的 CSS 变量驱动设计系统
  • OLED 暗色底座：四层黑色阶梯 #0a0a0a → #0d0d0d → #141414 → #1a1a1a，适配 OLED 屏幕
  • Neubrutalism 工具类：.nb-card / .nb-btn / .nb-tag — 硬边框 + 纯色偏移阴影
  • Bento Grid 布局：.bento-grid + .bento-card + span 工具类，Apple 风格模块化卡片网格

磨砂玻璃效果

  • 全局统一磨砂：侧边栏、主内容区、关于页面、版本信息区域统一 backdrop-filter: blur(8px) + color-mix 半透明
  • 文字清晰度修复：backdrop-filter 移至 ::before 伪元素，彻底解决模糊问题
  • 构建配置：electron.vite.config.ts 新增 html-inject-version 插件

组件重构

  • HomePage Bento Grid 优化：修复 grid-auto-rows: minmax(140px, auto) 导致的卡片强制撑开问题；修复第二行空白列；移除启动按钮和统计卡片
  • InstanceCard Neubrutalism 重构：硬边框 2px + 偏移阴影 + hover 位移效果
  • App.vue 样式拆分：780 行样式提取到独立 src/styles/app.scss，改善代码可维护性

启动画面优化

  • 版本号动态加载：从 package.json 读取版本号，构建时通过 transformIndexHtml 自动注入，不再硬编码
  • 进度条动画：4 秒匀速走完 100%，完成后通过 transitionend 事件 0.8s 缓慢淡出
  • 不再闪屏：等淡出动画真正完成后再移除 DOM 元素，解决启动画面闪电般消失的问题
  • Logo 替换：启动画面显示 Alogo.png

UI 细节

  • 滚动条隐藏：设置页面和侧边栏隐藏滚动条（Chrome/Safari/Firefox/IE 全覆盖）
  • 颜色选择器修复：磨砂层 ::before 加 pointer-events: none，确保颜色色块可点击
  • Hero 卡片：移除蓝色渐变背景，改为纯 --voxver-bg-tertiary
  • Logo 统一：多处 airLogo → Alogo，适配品牌形象
  • 侧边栏：移除底部版本信息；分割线移除

升级指南

从 v0.6.1 升级的用户：

  1. 所有视觉变化自动生效，无需手动配置
  2. 磨砂效果在 Windows 10+ 透明模式下效果最佳
  3. 启动画面进度条总时长约 4 秒，完成后平滑过渡到主界面
  4. 主题设置和背景自定义功能不受影响
Assets 5
Loading