Skip to content

v0.1.3: Merge pull request #3 from huang-chunc/feat/ui-polish

Choose a tag to compare

@huang-chunc huang-chunc released this 23 Aug 08:52
· 38 commits to main since this release
8f69ea8

缺陷修复

  • 拖拽 scrub 抖动(client.js:353-373 → scrollToKey:306):拖拽中每个 rAF 都调 scrollIntoView({behavior:'smooth'}),连续触发不断打断/重启平滑动画 → 画面抽搐。改:拖拽进行中直接赋值 root.scrollTop(instant),pointerup 后再对最终目标 smooth 对齐一次。
  • resize 监听器泄漏(:111 vs :182):add 与 remove 传入的是两个不同箭头函数引用,永远移除不掉。改:提取具名 handler。
  • scan 全量重渲 + 全文读取(:19,203):extractText 读整条 textContent(长文数万字 × 每 800ms × 80 条);setMarkers(out) 每次都是新数组强制全量 reconcile。改:TreeWalker 累计到 ~220 字符即停;新旧数组按 key+preview+bm+time 浅比较,无变化不 setState。
  • 未尊重 prefers-reduced-motion:CSS 增加 reduce 媒体查询,umtl 作用域内动画过渡降为瞬时。
  • tooltip 估高失准(:272-289):estH 四档估算与实渲染可差 >10px,贴底被裁。改:渲染后一帧内 getBoundingClientRect 二次校正 top。

材质与观感升级

  • 去壳化(核心改动):现在是"94% 底 + 边框 + 阴影"的卡片壳,阅读时存在感过强。改为无壳悬浮:常态完全透明无边框无阴影、只有药丸本身;指针进入导轨区域才淡入极淡毛玻璃底(color-mix ~55% + blur(10px) saturate(1.4)),离开淡出。
  • 药丸质感:纯色扁平 → 顶部 1px inset 高光;active 光环由生硬 0 0 0 4px 改双层柔和光晕;hover 用 brand 色;全部经 color-mix 基于 --dsw-alias-* token,深浅色自洽。
  • 阴影令牌化:清掉所有硬编码 rgba(0,0,0,.08/.12/.2)(暗色下发灰发脏),统一换 token 化双阴影(ambient + key)。
  • 序号内嵌、消灭遮挡.umtl-label chip(left:46px)伸进正文盖首字。删除之;改为漏斗中心那颗放大为 30~36px 椭圆、内部居中显示序号数字。
  • tooltip 精致化:backdrop-filter 与宿主 popover 一致;头部行加 n/N 进度 + 书签图标;入场动画 translateX(4px) → scale(.98)+fade;箭头旋转方块补同色描边消缝。
  • 入场编排:首次可见时药丸 stagger 淡入(每颗 +8ms,总长 cap 350ms),仅播一次。
  • 书签标记:5px 圆点易误认状态点 → 3×7px 竖条贴 pill 上缘。