frontend_v2/.workbuddy/memory/2026-08-12.md

2026-08-12

shows.astro 骨架屏抖动修复

• 问题：加载中阶段骨架屏 <template> 被整段注释掉，网格为空；数据回来时 24 张卡片瞬间铺开导致整页高度猛增（最大抖动）。原骨架还只渲染 12 张，与首屏 24 张行数不匹配。
• 修复：
  1. 恢复骨架屏模板（去掉注释），数量绑定 skeletonCount getter = this.size（24），与首屏 data 行数一致。
  2. 骨架内部结构与真实卡片完全对齐：左图 .showscard-img(aspect 3/4)、右栏三行占位高度对齐真实 title(41px)/meta(29px)/meta-foot(29px)、底部 5 个 .showscard-thumb。
  3. 图片阶段无抖动：容器 aspect-ratio 锁定，img 仅 opacity 渐显。
• 验证：npx astro build 通过（11 页，无错），lint 干净。

shows.astro 抖动修复（第二轮，补充对齐）

• 用户再次反馈抖动：发现骨架与真实卡片内部尺寸仍有偏差 + 真实文字区块行数不固定。
• 关键修复：真实卡片文字区块锁定固定高度（不再随行数/字体加载变化）：
  • .showscard-title 加 h-[41px] overflow-hidden（line-clamp-2 × 15.5px×1.32）
  • .showscard-meta 加 h-[29px] overflow-hidden（line-clamp-2 × 9.5px×1.55）
  • .showscard-meta-foot 加 h-[38px] overflow-hidden（两行 meta-line 16px + gap 6px）
  • .showscard-meta-line 加 h-[16px] leading-[16px] overflow-hidden whitespace-nowrap
  • 骨架第三行 showsline 高度 29px → 38px 与 meta-foot 对齐
• 至此三个阶段的卡片高度公式完全一致（info=132px + strip mt10 + thumb aspect 3/4），桌面/移动（flex-col）均一致。

shows.astro 骨架图特别小（核心 root cause 修复）

• 用户第三次反馈：loading=true 时骨架「特别小」。截图实测数据：骨架 .showscard 164px / .showscard-right 16px / 真实卡片 372px（右栏 224px）。视口 1280 下 .showsroot 仅 626px（主区 350px）。
• 真正 root cause（不是骨架本身，而是宿主布局）：
  • Layout.astro 把 <slot /> 套在 <div class="flex-1 flex flex-col"> 里，slot 在 flex column 容器内作为 flex item。
  • shows.astro 的 <div class="showsroot m-auto"> 中 m-auto 在 flex column 容器内作为 cross-axis margin: auto，让 showsroot 收缩到 content width + 居中（shrink-to-fit）。
  • 骨架阶段 24 张空 div（无 img/文字）→ card min-content = 0 → 整个链条（card→grid→main→body→root）收缩到 626px → 主区 350px → 卡片 164px。
  • 数据阶段真实卡片有 <img> intrinsic + 文字 → 收缩到 1042px → 看起来「正常」。
• 修复：把 <div class="showsroot m-auto"> 改为 <div class="showsroot w-full">（取消 m-auto，强制 width 100% wrapper）。w-full 优先级覆盖 m-auto 的 shrink-to-fit 行为；max-w-[1600px] 仍保留大屏上限。
• 副作用归零：骨架/数据阶段 rootW 都是 1180px（=body 1280 - 50×2 padding），主区都是 904px，2 列都是 441px，加载中→数据完成→图片完成三阶段宽度完全一致，不再抖动。
• 验证：empty state 截图可见主区跨满 ~1000px（不再是 350px）。astro build 通过。
• 经验教训：Astro + flex 布局的页内子组件，禁用 m-auto，必须用 w-full 或显式 width。m-auto 作为 flex item 在 flex 容器中会触发 shrink-to-fit，造成「内容驱动宽度」连锁效应。