Skip to content

fix(shell): 页面四边 16px 只在外壳给一次 —— PageShell + arch:check 闸门（#209） - #211

Merged
yilecoding merged 2 commits into
mainfrom
yile/24px-16px-12px-0
Nov 2, 2026
Merged

fix(shell): 页面四边 16px 只在外壳给一次 —— PageShell + arch:check 闸门（#209）#211
yilecoding merged 2 commits into
mainfrom
yile/24px-16px-12px-0

Conversation

@yilecoding

@yilecoding yilecoding commented Nov 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

改了什么、为什么

症状：短信日志 / 投递记录 / AI 调用日志三页查询区贴着标签条（顶距 0）；ai-provider 等五页 12px；其余页面桌面上顶 24 / 左右 16。全站三种顶距。

根因：页面外壳是三层 div、每页手抄，py-4 md:py-6 写在第三层（shadcn dashboard 模板带来的，那个模板没有标签条）。那三页少抄一层，且互相照抄；之前修过两次都只修了当时那一页，没有任何东西挡下一次。

修法

  • apps/web/src/routes/_auth.tsx 内容列 px-4 → p-4：四边 16px 只有这一个来源
  • 新增 packages/platform/src/pages/_shared/page-shell.tsx（fill="always" | "lg" | "none"），25 个手抄外壳的页面换成 <PageShell>；另 12 个页面去掉根元素上的上下 padding
  • pnpm arch:check 三条闸门：page-shell-handwritten · page-root-padding（根元素、第一层子 div、三元分支、委托的同文件组件、cn() 里的字面量都查）· page-root-unscanned（认不出根就报错）。反向验证见 scripts/AGENTS.md
  • 分册（pages / shell / ui / scripts）按 /ctx 记了结论，文档站中英教程里的外壳示例同步改成 <PageShell>

看得见的变化（除了顶距统一成 16）

  • 短信日志 / 投递记录 / AI 调用日志：md 起块间距 16 → 24，和其余列表页一致（原来它们的 gap 写在少抄的那一层上）
  • 参数配置顶栏：搜索框从贴着标签条变成 16px；主体底部 py-5 → pt-5
  • 内容区滚动模式下的 sticky：外壳加了 pt-4 后 sticky 的基准往下挪了 16px（基准是滚动容器 padding 的内沿）。条带类（参数配置顶栏 · 权限矩阵工具条）改 content-scroll:-top-4，吸顶时贴住最上沿、不露缝；左栏类（设置屏导航 · 审批中心 · 流程设计器 · 组件沙箱）改 content-scroll:*:top-0，吸顶落在 16px。整页滚动模式不变
  • AI 确认页卡片去掉了 py-8，顶距和别的页一样是 16

实测（Playwright，1920 和 390 两档，第一个画出东西的元素距内容列）：15 页上 = 左 = 16（文字行 17 是行高半行距）；1920 下右也是 16。参数配置：顶栏静止 / 吸顶都是 top 0、左右铺满、搜索框 16；左栏静止 85、吸顶 80。个人中心 / 审批中心左导航 16。

第二个提交处理了独立 /code-review 的意见。缩进是从 main 重跑 codemod 修的，评审建议用「隐藏空白」看 diff（git diff -w 和第一版逐字一致）。

自查清单

  • pnpm typecheck --force 过
  • pnpm lint 过
  • pnpm build 过
  • pnpm i18n:check && pnpm i18n:jsx 过
  • pnpm ctx:check 过
  • pnpm arch:check 过
  • pnpm e2e 全量没在本地跑，交给 CI；本地用临时 Playwright 脚本实测了间距和 sticky
  • 结论已追加进 packages/platform/src/pages/AGENTS.md、scripts/AGENTS.md

关联 issue

Closes #209

🤖 Generated with Claude Code

yilecoding and others added 2 commits November 2, 2026 12:01
@yilecoding @claude
fix(shell): 页面四边 16px 只在外壳给一次 —— 抽出 PageShell · 页面不写上下 padding · arch…
0d1699c 
…:check 闸门（#209）

- 内容列 px-4 → p-4，上下左右同一个值、同一个地方给
- 新增 pages/_shared/page-shell.tsx，25 个手抄三层外壳的页面换成 <PageShell>
- 去掉 12 个页面根元素上的 py-3 / py-4 md:py-6 / py-8
- 参数配置粘性顶栏不再 -mx-4 出血，搜索框落在 16px
- arch:check 新增 page-shell-handwritten / page-root-padding 两条（反向验证过）
- pages / shell / ui / scripts 分册与文档站教程同步

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@yilecoding @claude
fix(shell): 处理 #211 评审 —— 内容区 sticky 偏移 · 闸门盲区 · 缩进
5798ea4 
- 内容区滚动模式下 sticky 的基准是滚动容器 padding 内沿：参数配置顶栏 / 权限矩阵工具条
  改 content-scroll:-top-4（吸顶不再露缝），左栏类改 content-scroll:*:top-0（静止时不再被推下去）
- 参数配置顶栏恢复出血（-mx-4 -mt-4 px-4 pt-4），主体 py-5 → pt-5
- arch:check：三元分支 / 同文件组件 / 第二层 div / cn() 都认作根；放行带边框底色的卡片和
  [&>x]: 变体；新增 page-root-unscanned；stripComments 保留换行，行号不再偏
- 从 main 重跑 codemod，修正搬动后的缩进（diff -w 与上一版一致）

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@yilecoding
yilecoding merged commit 3fae0ca into main Nov 2, 2026
8 checks passed
yilecoding added a commit that referenced this pull request Nov 2, 2026
@yilecoding @claude
Merge main into fix/page-shell-polish —— #209 采用 #211 的实现
9314256 
#211（PageShell + 内容列 p-4 + arch:check 三条闸门）已经在 main 上修了 #209。
本分支的 #209 部分全部让给 main：_auth.tsx / tab-outlet / 参数配置顶栏 /
arch-check（page-vertical-padding 规则）/ 各页根元素一律取 main 的版本。
保留的只有 #210 的部分，在 main 的版本上重新加回：顶部说明改进 PageHeader、
卡片网格 grid-cols-1、调用日志空态 / 群机器人表单的两句提示。
pages 分册里本分支的「页面四边的留白」一节删掉（main 有自己的），
grid-cols-1 的结论挪进 ui 分册，pages 分册回到 500 行预算内。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This was referenced Nov 2, 2026
Merged
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

1 participant

@yilecoding