iter(g35): 新增 notification 通知卡片组件

This commit is contained in:
HIsheR
2026-10-26 11:46:54 +08:00
parent 8711fae1af
commit 8b5f355d7e
13 changed files with 302 additions and 9 deletions
+8
View File
@@ -636,6 +636,14 @@
"acceptance": "ua info <组件id> 输出 props 表 + 步骤 + 示例,ua info <包名> 出摘要且 --json 保留原始清单;MCP get_component 支持组件 id(返回 package + component);npm run check 全绿",
"status": "done",
"notes": "自补:Agent 查询体验;--json 保留原始清单"
},
{
"id": "g35",
"title": "新增 notification 通知卡片",
"motivation": "toast 是右上角轻量瞬时提示,装不下「标题 + 描述 + 操作按钮 + 需读完」的通知场景,业务侧只能自己写浮层",
"acceptance": "notification({ title, description, variant, duration, closable, action }) 右下角堆叠(与 toast 分区)、超出 3 条挤掉最早、返回 { el, close }、duration 0 常驻;组件数 42→43 三处计数同步;npm run check 全绿",
"status": "open",
"notes": "自补:组件补充"
}
]
}
+49 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T03:45:25.126Z",
"generatedAt": "2026-10-26T03:46:32.583Z",
"repoRoot": ".",
"packages": [
{
@@ -185,7 +185,8 @@
"list(props):列表,header/footer 外壳 + 条目 avatar/title/description/extra,onItemClick 让条目可点击,items 为空回落空状态",
"carousel(props):轮播,items 横排位移,指示点/箭头/←→ 键切换,autoplay 毫秒自动前进且悬停暂停,index 信号可外部受控",
"tree(props):树形,递归节点 + 箭头展开/收起 + 点选节点,键盘 Enter 选中、→ 展开、← 收起,禁用节点不响应",
"upload(props):文件选择,点击或拖拽入列,清单可逐个移除,onChange 回传文件数组(不内置上传请求)"
"upload(props):文件选择,点击或拖拽入列,清单可逐个移除,onChange 回传文件数组(不内置上传请求)",
"notification(props):右下角通知卡片(标题 + 描述 + 操作区),返回 { el, close } 句柄,缺省常驻需手动关闭"
],
"keyTypes": [
"ButtonProps",
@@ -1946,6 +1947,52 @@
"键盘:区域可 Tab 聚焦,Enter/空格 打开选择器;拖拽时区域高亮,拖出恢复",
"disabled 时不可点选、不接受拖拽;已选清单的 × 会触发 onChange 回传剩余文件"
]
},
{
"id": "notification",
"title": "通知卡片 Notification",
"demo": "sec-notification",
"props": [
{
"n": "title",
"t": "string",
"r": 1,
"d": "通知标题"
},
{
"n": "description",
"t": "string",
"d": "补充说明;缺省不渲染"
},
{
"n": "variant",
"t": "'info' | 'success' | 'warning' | 'danger'",
"d": "语义色(左侧条与圆点);缺省 info"
},
{
"n": "duration",
"t": "number",
"d": "自动关闭毫秒;缺省 0 = 常驻不自动关"
},
{
"n": "closable",
"t": "boolean",
"d": "是否显示关闭按钮;缺省 true"
},
{
"n": "action",
"t": "unknown",
"d": "操作区内容(如按钮);缺省不渲染"
}
],
"example": "const { close } = notification({ title: '导出完成', description: 'report.csv 已开始下载', variant: 'success', duration: 4000 }); // close() 手动关闭",
"steps": [
"调用即入列:右下角堆叠,同屏最多 3 条,超出自动挤掉最早一条",
"缺省常驻(duration 0),需要自动消失就传毫秒数,如 duration: 4000",
"返回 { el, close } 句柄:程序化关闭用 close(),需要自己挂交互就用 el",
"action 放操作区(常见为按钮);variant 决定左侧条与圆点语义色",
"与 toast 的分工:toast 右上角轻量瞬时,notification 右下角可长读、可操作"
]
}
]
},