update

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

@@ -0,0 +1,31 @@
+# 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，造成「内容驱动宽度」连锁效应。

.workbuddy/memory/MEMORY.md

@@ -19,6 +19,15 @@
 - CSS 写法：能用 @apply 就 @apply；`<style>` 顶部加 `@reference "tailwindcss";`。仅保留手写：@keyframes、渐变 shimmer、!important、双时长 transition。Tailwind v4 已移除零值类（mt-0 等），零值边距保持手写。
 - 导航（Layout.astro）：**保持原样未改动**（Portfolio / Latest Projects / About / Contact / Login / Signup），含页脚 Categories + Color Studio Tools + About/Contact 链接。门禁仅由 6 个 ComingSoon 占位页承担，导航不删任何链接（用户要求 header 别动）。
 
+## Layout 陷阱（重要，2026-08-12 踩坑）
+- **Layout.astro** 把 `<slot />` 包裹在 `<div class="flex-1 flex flex-col">`（flex column 容器）。
+- **禁用 `m-auto`** 作为页内根容器（`<div class="xxx m-auto">`）：它在 flex column 容器中作为 flex item 的 cross-axis `margin: auto`，会触发 **shrink-to-fit**（content 决定宽度），导致：
+  - 内容空/少时根容器收缩到极窄（骨架 24 张空 div → .showsroot 仅 626px / 主区 350px / 卡片 164px）。
+  - 内容多时根容器被撑大（真实卡片有 img/文字 → 1042px 「看起来正常」）。
+  - 同页面在不同内容状态下宽度剧烈变化 = 抖动。
+- **正确做法**：用 `w-full`（强制 100% 父容器，常配 `max-w-[xxx]`），或 `w-full mx-auto`（保留大屏居中）。
+- 适用范围：所有 Layout 内的页内根容器（包括 showsroot / blogs / about 等），**避免 `m-auto` 单独使用**。
+
 ## 部署（Docker + Gitea Actions）
 - 仅 brands.astro 构建期 SSR 取数（用 API_SSR）；其余页面运行时相对 /api 拉取（nginx 反代 backend:8090）。
 - 交付文件：前端 Dockerfile / nginx.conf / docker-compose.yml / deploy.sh / .gitea/workflows/deploy.yml / .env.example / DEPLOY.md；后端 Dockerfile。