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
+11 -3
View File
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import { Check } from "lucide-react";
import { AlertCircle, Check, Info } from "lucide-react";
import { IconKitSvg } from "./IconKitSvg";
import { useBodyScrollLock } from "./overlays";
import type { Product, Project, Team, User } from "../types";
@@ -261,9 +261,17 @@ export function CornerMarks() {
}
export function ToastLike({ notice }: { notice: NonNullable<Notice> }) {
// 右下角浮层:统一用设计系统 .toast(单橙 icon-box + --shadow-floating),不再随
// success/error 变绿/红边(单一 accent 铁律)。挂载后下一帧上 .show 触发滑入进场。
const [show, setShow] = useState(false);
useEffect(() => {
const raf = requestAnimationFrame(() => setShow(true));
return () => cancelAnimationFrame(raf);
}, []);
const Icon = notice.type === "error" ? AlertCircle : notice.type === "info" ? Info : Check;
return (
<div className={`inline-toast ${notice.type}`}>
<div className="ic-t"><Check size={12} /></div>
<div className={`toast${show ? " show" : ""}`} role="status" aria-live="polite">
<div className="ic-t"><Icon size={13} /></div>
<div className="txt">{notice.text}<span className="mono">[ {notice.type.toUpperCase()} ]</span></div>
</div>
);