32 lines
3.4 KiB
Markdown
32 lines
3.4 KiB
Markdown
# 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，造成「内容驱动宽度」连锁效应。
|