Skip to content

v0.6.5 — 全站视觉与动效重做

Latest

Choose a tag to compare

@webkubor webkubor released this 26 Oct 08:52
· 26 commits to main since this release

视觉与动效(UI)

  • 工具页改为双栏编辑式布局:此前工具页整页单栏纵排——72px 图标孤零零贴在左上角,下面是一路左对齐的文字列,右侧 144px 完全空着,图标因此显得"位置不对"。现改为 320px + 1fr 双栏:左栏是工具身份(图标 + 厂商 / 分类 + 名称 + 用途 + 来源标签 + 事实表 + 官方文档 / 源码仓库按钮 + 回到目录),随滚动 sticky 跟随;右栏是主内容(安装方式 / 常见问题 / 收录与核验范围 / 相关场景)。窄屏(≤900px)回落为单栏,身份区在上、内容在下。
  • 事实表收进左栏:分类、维护来源、GitHub Stars 与快照日期原本是占满 1040px 宽的两列表格,现在并入 88px 键 + 内容的窄列,不再与正文争夺横向空间。
  • 氛围层:网格底纹与逐点跃动:Swiss 网格原本只作为分隔细线存在,从未成为可呼吸的底纹。现在首屏与工具页首段铺一层极淡的点阵底纹,12 个品牌蓝光点按 240ms 间隔依次跃动,形成横向流动的波——做法参考 Linear 的网格点背景(逐点错峰跃动而非整体淡入淡出)。底纹用遮罩羽化到透明,不留矩形边界;同时叠一层 3.5% 的 SVG 颗粒,避免大面积平涂过于数码。
  • 品牌光晕与流动:首屏加入两团极淡的径向渐变光晕(品牌蓝 7% / 4.5%),并以 24s 周期缓慢漂移缩放,让平面版面有光源和呼吸感。整层同样羽化收尾。
  • 终端窗口的厚度:安装命令窗口改为渐变描边 + 双层投影(内高光 + 外深影),从「一个黑框」变成有厚度的窗口;悬停时抬升 2px,获得焦点时补一圈品牌蓝描边。
  • 命令逐词点亮:命令按词依次浮现(55ms 间隔)。文字本身一次给出、不增删,只是节奏上从左到右点亮——不是打字机。命令末尾加呼吸光标,标记「这里可以继续输入」。
  • 页面流动:顶部新增阅读进度条,随滚动推进(渐变细线,只用 transform 缩放);页头在滚动后转为半透明毛玻璃(blur 14px),脱离平面形成前后关系。
  • 交互反馈:目录卡片悬停时一道柔光自左向右扫过,替代整块底色突变;主按钮改用品牌渐变填充并在悬停时上浮加投影;标签悬停上浮并转品牌色;复制按钮点击后图标从「复制」翻转为「对勾」,比只换文字更直观。
  • 安装命令改为终端窗口:工具静态页原先把安装命令渲染成一个裸 <pre>,没有窗口框、没有提示符,静态页也没有复制入口。现改为完整终端窗口组件——窗口栏与三个点、$ 提示符、命令按词分色(命令名 / 标志 / 参数值)、右上角复制按钮;命令分色只按空白切分,不改写命令本身。没有经确认安装命令的工具改用明确的空状态说明,不再输出空窗口。
  • 静态页可复制安装命令:新增 src/command-copy.ts,工具页与指南页的复制按钮就地反馈「已复制」;剪贴板不可用时自动选中完整命令供手动复制,不需要刷新重试。
  • 工具页首屏层次:主视觉新增 72px 图标衬底、来源与分类标签组、GitHub Stars 与快照日期进标题区;「用途与来源」区去掉与首屏重复的图标。
  • 内容页错峰进场:工具页与指南页的面包屑、标题、区块依次浮现(延迟 0 / 60 / 120 / 180 / 240 / 300ms,360ms 进场),只改 transform 与 opacity,遵循既有动效契约;prefers-reduced-motion 下全部关闭。
  • 提示符配色修正:浅色主题下 $ 提示符原用品牌蓝,在深色终端底上只有 1.64:1,几乎不可读,改用终端内的成功绿(10.82:1);终端区全部配色最低 7.33:1。
  • 窄屏降级:640px 以下终端窗口改为命令与按钮上下排列,命令不被压缩到不可读;四阶视口(390 / 768 / 1280 / 1600)均零横向溢出。