iter: d23 alert 标题行 + 可关闭 + role=alert
This commit is contained in:
@@ -232,6 +232,14 @@
|
||||
"acceptance": "新增 avatar.ts:name 必填(alt / title / 首字来源),src 可选(有则图片、无则首字占位),size 可调,variant 四档语义底色;只消费 --ua-* 令牌;导出 / manifest / 文档 / llms-full.txt / demo 同步;npm run check 全绿",
|
||||
"status": "done",
|
||||
"notes": "首字占位对中文取首字、英文大写,空名兜底 ?;flex:none 保证不被挤压;首次跑 verify 被自身新门禁拦下(声明 sec-avatar 但 demo 缺区块),补独立区块后通过——门禁有效性再次得到验证"
|
||||
},
|
||||
{
|
||||
"id": "d23",
|
||||
"title": "alert 补标题行与可关闭,并补 role=alert",
|
||||
"motivation": "常驻提示无法消除(错误已处理完仍占版面),且只有单层正文放不下「结论 + 详情」;role=alert 缺失导致读屏不播报",
|
||||
"acceptance": "AlertProps 新增 title? / closable? / onClose?;关闭时先退场(opacity+上移,200ms)再从 DOM 移除;容器 role=alert;只消费 --ua-* 令牌;demo 新增 sec-alert 展示无标题与可关闭带标题两种;manifest/文档/llms-full.txt 同步;npm run check 全绿",
|
||||
"status": "done",
|
||||
"notes": "与 toast 的分工保持:alert 常驻在页面流里、toast 全局浮动;关闭后由调用方自行决定是否重新渲染;body/title/message 三层结构让 flex 布局能把 × 对齐到首行;对现有 alert({message}) 调用完全兼容"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+22
-3
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-23T09:03:43.931Z",
|
||||
"generatedAt": "2026-10-23T09:04:21.317Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -157,7 +157,7 @@
|
||||
"badge(props):徽标,variant = default | success | warning | danger",
|
||||
"tag(props):可关闭标签,variant 五档语义色,closable + onClose 支持从数据源移除(纯展示请用 badge)",
|
||||
"avatar(props):头像,有 src 渲染图片(alt 用名称)、无 src 用首字占位,size 可调 + 四档语义底色",
|
||||
"alert(props):提示条,variant = info | success | warning | danger",
|
||||
"alert(props):提示条,variant 四档语义色 + 可选 title 与 closable 关闭按钮,role=alert 读屏可播报",
|
||||
"toast.info/success/warning/error(message, duration?):消息提示工厂,右上角堆叠,默认 3s 自动消失,出入场微动画;showToast(props) 为完整入参版本(closable 显示关闭按钮,同屏最多 4 条)",
|
||||
"tooltip(props, trigger):悬浮提示,包裹触发器,hover / focus 延迟 150ms 出场,移出 / 失焦 / Esc 收起",
|
||||
"popover(props, trigger):可交互气泡卡片,包裹触发器,默认点击开合 + 点外部 / Esc 收起,content 可放按钮等交互元素",
|
||||
@@ -788,18 +788,37 @@
|
||||
"r": 1,
|
||||
"d": "提示内容"
|
||||
},
|
||||
{
|
||||
"n": "title",
|
||||
"t": "string",
|
||||
"d": "加粗标题行;缺省只渲染正文"
|
||||
},
|
||||
{
|
||||
"n": "variant",
|
||||
"t": "'info' | 'success' | 'warning' | 'danger'",
|
||||
"d": "语义色;缺省 info",
|
||||
"df": "info"
|
||||
},
|
||||
{
|
||||
"n": "closable",
|
||||
"t": "boolean",
|
||||
"d": "显示 × 关闭按钮,退场后从 DOM 移除;缺省 false",
|
||||
"df": "false"
|
||||
},
|
||||
{
|
||||
"n": "onClose",
|
||||
"t": "() => void",
|
||||
"k": 1,
|
||||
"d": "关闭回调,供调用方同步业务状态"
|
||||
}
|
||||
],
|
||||
"example": "alert({ message: '操作可能存在风险', variant: 'warning' })",
|
||||
"steps": [
|
||||
"按信息级别选 variant:info 提示、success 成功、warning 警告、danger 错误",
|
||||
"传入 message 即可,入场自带下滑动画",
|
||||
"需要可关闭或带操作按钮时,外层用 h() 组合 button 自行拼装,alert 只负责语义底色"
|
||||
"需要可关闭或带操作按钮时,外层用 h() 组合 button 自行拼装,alert 只负责语义底色",
|
||||
"需要用户可自行消除的提示传 closable: true:点 × 淡出并从 DOM 移除,配合 onClose 同步业务状态",
|
||||
"有标题与正文两层信息时传 title(加粗首行),正文仍走 message"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -27,3 +27,4 @@
|
||||
{"time": "2026-10-23T17:02:24+08:00", "id": "d20", "result": "done", "summary": "progress 支持不确定态:value 可选,缺省时 35% 填充块往复 + aria-label 进行中;定量态补 aria-valuenow;demo/manifest/llms 同步,check 全绿"}
|
||||
{"time": "2026-10-23T17:03:02+08:00", "id": "d21", "result": "done", "summary": "无障碍收尾:modal × 补 aria-label/type、spinner role=status、skeleton aria-hidden、tablist aria-label + 禁用页签 aria-disabled;conventions 记录基线;check 全绿"}
|
||||
{"time": "2026-10-23T17:03:49+08:00", "id": "d22", "result": "done", "summary": "新增头像 avatar(src 图片 / 首字占位 + size + 四档语义底色),demo 独立 sec-avatar;中途被 verify 的 demo 锚点检查拦下已补;check 全绿"}
|
||||
{"time": "2026-10-23T17:04:27+08:00", "id": "d23", "result": "done", "summary": "alert 新增 title / closable / onClose 与 role=alert,关闭走 200ms 退场后摘除;demo 独立 sec-alert;manifest/llms 同步,check 全绿"}
|
||||
|
||||
Reference in New Issue
Block a user