feat(client): toast 限定主显示区/自适应宽/上限80%/超长多行居中(1.0.26)

按真相源新规:toast 改为自定义 Overlay 实现(widgets/pangolin_toast.dart),完全控制布局——
不覆盖左侧栏(left=侧栏宽 desktop204/tablet232/mobile0)、宽度自适应内容上限主区80%、超长文本
多行、主区内水平居中贴底、淡入轻起;仍走语义 token 明暗适配。自动连接改用 showPangolinToast。
同步 design/CONTRACT.md §2 toast 规格(canonical=showPangolinToast)。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-06-29 19:50:33 +08:00
parent 143104b861
commit 277d1c6e97
5 changed files with 90 additions and 18 deletions
+9 -6
View File
@@ -32,13 +32,16 @@
| 节点行 | `widgets/server_tile.dart` / `nodes_page` `_NodeGridTile` | 双列网格 |
| 指标卡 | `stats_page` `_MetricCard` | 复用 |
| 段控/开关/行 | `account_page` 内组件 | 复用 |
| Toast / 通知条 | `pangolin_theme.dart` `snackBarTheme`(全局) | 新增组件(无原型) |
| Toast / 通知条 | `widgets/pangolin_toast.dart` `showPangolinToast` | 新增组件(无原型) |
### Toast / SnackBar通知条规格
跨平台轻提示(如自动连接「正在自动连接到 X」)。**无 React 原型 → 此处即真相源**;全部走语义 token,明暗自动适配:
- 底色 `--surface`(浅=白 / 深=`#221E19`);文字 `--fg1`,Manrope 14/600;描边 `--border` 1px。
- 圆角 `md`(10);`SnackBarBehavior.floating`;阴影柔和暖调(elevation≈6,`rgba(45,30,20,…)` 体系)。
- 绝不用 Material 默认黑底。Flutter canonical:`PangolinTheme._build``snackBarTheme`(改样式只改此一处,全 app 一致)。
### Toast / 通知条规格
跨平台轻提示(如自动连接「正在自动连接到 X」)。**无 React 原型 → 此处即真相源**;全部走语义 token,明暗自动适配
**外观**:底 `--surface`(浅=白 / 深=`#221E19`)+ 文字 `--fg1`(Manrope 14/600,居中)+ 描边 `--border` 1px + 圆角 `md`(10)+ 柔和暖阴影(`shadow-sm`);淡入并轻微上移(240ms ease-out)。绝不用 Material 默认黑底
**布局**(铁律):
- **只在主显示区内**,不覆盖左侧栏(left = 侧栏宽:desktop 204 / tablet 232 / mobile 0)。
- **宽度自适应内容**,上限 = 主显示区宽度的 **80%**;超过则**文本多行**。
- 在主显示区内**水平居中**,贴底(bottom 28)。
- Canonical 实现:`widgets/pangolin_toast.dart` `showPangolinToast(context, msg)`(Overlay 实现,非 SnackBar,以完全控制上述布局)。`pangolin_theme``snackBarTheme` 只作普通 SnackBar 的兜底底色样式。
## 3. 页面像素规格(取自 tabapp.jsx