feat(core): Wave 1 part1 — 浮层进场动画/ESC + Toast 归正 + 账户表横线

S4 浮层: overlays.tsx 新增共享 useOverlayTransition(挂载→下一帧上 .show 触发
  scale(.96→1)/translateX 进场过渡;关闭先撤 .show 播退场再卸载)+ 统一 ESC 关闭,
  应用 TeamModal/ConfirmModal/SuccessModal/Drawer;EmptyPanel 补 .ic-empty 灰 icon
S3 Toast: ToastLike 改用设计系统 .toast(右下/单橙 ic-t/shadow-floating/滑入),
  不再随 success/error 变绿红边;auth login-toast → .toast
S9 表格: account-page.css 删 tbody td border-bottom(对照 V1 account.html 确认应无行线)

验证: tsc 0 · 交互走查 toast出现+ESC关弹窗 · 14 路由回归 boot 0 报错 · 登录 643ms

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
seaislee1209
2026-06-19 03:51:30 +08:00
co-authored by Claude Opus 4.8
parent 8a0ae6a19d
commit 74e3c818c5
6 changed files with 144 additions and 21 deletions
+18 -1
View File
@@ -31,4 +31,21 @@
## Wave 1 · 系统性 CSS/组件 (S1-S9) — ⏳ 进行中
(待补)
> 为护住共享 CSS,拆两段做:**part 1 = 浮层/反馈(S3/S4/S9)**,part 2 = token/布局(S1/S2/S6/S7/S8)。
### part 1 — ✅ 完成 (2026-06-19)
| # | 项 | 状态 | 改动 / 证据 |
|---|---|---|---|
| S4 | 弹窗进场动画 + ESC | ✅ | `overlays.tsx` 新增共享 `useOverlayTransition(open, close)`:挂载→下一帧上 `.show`(触发 `.modal scale(.96→1)` / `.drawer translateX` CSS 过渡)→关闭先撤 `.show` 播退场再卸载;统一接管 ESC。应用到 TeamModal/ConfirmModal/SuccessModal/Drawer。EmptyPanel 补 `.ic-empty` 灰 icon(Inbox)。 |
| S3 | Toast 体系归正 | ✅ | `ToastLike`(app-shell)改渲染设计系统 `.toast`(右下、单橙 `.ic-t``--shadow-floating`、挂载滑入),**不再随 success/error 变绿/红边**(单一 accent 铁律);icon 按类型 Check/AlertCircle/Info,盒仍橙。`auth-screen``.login-toast``.toast`。旧 `inline-toast`/`login-toast` 渲染处全部切走(CSS 残留留到 part 2 的 styles.css 治理一并清)。 |
| S9 | 表格横线 | ✅ | `account-page.css``.billing-table tbody td { border-bottom }` + last-child 规则。**逐页对照 V1 account.html 确认**:V1 该表 `td border-bottom:0`、只有 thead 分隔 + 行 hover 底色,React 原先多画的行线是偏离,删后对齐 V1。 |
**part 1 验证:** `tsc --noEmit` 0;交互走查(playwright)`auth-toast`:`.toast.show` 出现、文案对、旧 `.login-toast` 计数 0;`team-modal`:`#open-invite` 打开 `.modal-bg.show`(scale 落定=进场动画跑过)、**ESC 成功关闭并卸载**;14 路由回归 boot 全过 0 报错、登录 643ms。截图:`_qa_shots/wave1/*.png`
### part 2 — ⏳ 待做(下一拍)
- **S1** styles.css 旧暖米 token 孤儿类迁入 design-restraint.css(改前做孤儿分析,护住 shell);顺手清 part1 留下的 `inline-toast`/`login-toast` 死 CSS。
- **S2** 抽 `.mono-10/11/12` 工具类(逐页应用并入 Wave 4 P2 扫)。
- **S6** 把 `.bulk-bar`/`.card-check` 从 products-page.css 提到 design-restraint.css(变共享,projects/library 的接线在 Wave 3)。
- **S7** 扩 `pager.tsx` 富分页器(条数循环 12/24/48/96 + 跳页 + 吸底)+ CSS;**Wave 0 暂缓的 products/projects 服务端分页在此合并**。
- **S8** hero 大数字字重 —— ⚠️ 计划写 600→700,但 design.md §2.5/§2.6 铁律「字重仅 400/500/600,700 仅 Ctrl-K 徽标」。part 2 逐页核 V1 实际字重,**上限封 600**,不引入 700(铁律优先于报告 S8)。