From 99981feb5f19e5f1c35629ab06459c70f364031e Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 12:37:16 +0800 Subject: [PATCH] =?UTF-8?q?iter(g68):=20alert=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E8=AF=AD=E4=B9=89=E5=9B=BE=E6=A0=87=E4=B8=8E=E9=80=9A=E6=A0=8F?= =?UTF-8?q?=E5=BD=A2=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/index.json | 22 ++++++++++++++++++++-- apps/demo/main.ts | 2 ++ llms-full.txt | 6 +++++- packages/skin/ui/src/alert.ts | 13 +++++++++++-- packages/skin/ui/src/types.ts | 3 +++ packages/skin/ui/ua.manifest.json | 20 +++++++++++++++++++- packages/skin/ui/ui.css | 20 ++++++++++++++++++++ 7 files changed, 80 insertions(+), 6 deletions(-) diff --git a/.ua/index.json b/.ua/index.json index 1466f13..e719fb8 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T04:35:37.103Z", + "generatedAt": "2026-10-26T04:36:57.291Z", "repoRoot": ".", "packages": [ { @@ -1028,6 +1028,23 @@ "t": "() => void", "k": 1, "d": "关闭回调，供调用方同步业务状态" + }, + { + "n": "banner", + "t": "boolean", + "df": "false", + "d": "通栏形态：去圆角、只保留下边框、左右撑满，适合页面顶部通知" + }, + { + "n": "showIcon", + "t": "boolean", + "df": "false", + "d": "显示语义图标（info ℹ / success ✓ / warning ! / danger ✕），纯装饰不进读屏" + }, + { + "n": "icon", + "t": "string | HTMLElement", + "d": "自定义图标节点，传了即覆盖语义图标" } ], "example": "alert({ message: '操作可能存在风险', variant: 'warning' })", @@ -1036,7 +1053,8 @@ "传入 message 即可，入场自带下滑动画", "需要可关闭或带操作按钮时，外层用 h() 组合 button 自行拼装，alert 只负责语义底色", "需要用户可自行消除的提示传 closable: true：点 × 淡出并从 DOM 移除，配合 onClose 同步业务状态", - "有标题与正文两层信息时传 title（加粗首行），正文仍走 message" + "有标题与正文两层信息时传 title（加粗首行），正文仍走 message", + "banner: true 出通栏形态（圆角与左右边框归零），页面顶部通知直接铺满容器即可，不需要额外包裹层" ] }, { diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 6bbe442..a0645a7 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -370,6 +370,8 @@ const content = h( 'alert：四档语义色 + 可选标题与关闭按钮，role=alert 由读屏播报。', alert({ message: '这是一条中性提示（无标题）', variant: 'info' }), alert({ title: '保存失败', message: '网络波动，请稍后重试；本次修改已保留在本地草稿。', variant: 'danger', closable: true, onClose: () => toast.warning('提示已关闭') }), + alert({ title: '发布成功', message: '构建产物已上传，5 分钟后全网生效。', variant: 'success', showIcon: true }), + alert({ message: '配额即将用尽：本月剩余 8%，超出后新请求会被限流。', variant: 'warning', showIcon: true, banner: true }), ), section( 'sec-tooltip', diff --git a/llms-full.txt b/llms-full.txt index ffc80f1..c46e7a0 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T04:35:37.103Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T04:36:57.291Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -496,6 +496,9 @@ avatar({ name: '张三' }); avatar({ name: 'Alice', size: 40, variant: 'success' - variant（默认 info）：'info' | 'success' | 'warning' | 'danger' —— 语义色；缺省 info - closable（默认 false）：boolean —— 显示 × 关闭按钮，退场后从 DOM 移除；缺省 false - onClose（回调）：() => void —— 关闭回调，供调用方同步业务状态 +- banner（默认 false）：boolean —— 通栏形态：去圆角、只保留下边框、左右撑满，适合页面顶部通知 +- showIcon（默认 false）：boolean —— 显示语义图标（info ℹ / success ✓ / warning ! / danger ✕），纯装饰不进读屏 +- icon：string | HTMLElement —— 自定义图标节点，传了即覆盖语义图标 示例： @@ -510,6 +513,7 @@ alert({ message: '操作可能存在风险', variant: 'warning' }) 3. 需要可关闭或带操作按钮时，外层用 h() 组合 button 自行拼装，alert 只负责语义底色 4. 需要用户可自行消除的提示传 closable: true：点 × 淡出并从 DOM 移除，配合 onClose 同步业务状态 5. 有标题与正文两层信息时传 title（加粗首行），正文仍走 message +6. banner: true 出通栏形态（圆角与左右边框归零），页面顶部通知直接铺满容器即可，不需要额外包裹层 现场演示：apps/docs/demo.html#sec-feedback diff --git a/packages/skin/ui/src/alert.ts b/packages/skin/ui/src/alert.ts index 77a9d3e..bdf379a 100644 --- a/packages/skin/ui/src/alert.ts +++ b/packages/skin/ui/src/alert.ts @@ -1,15 +1,24 @@ import { h } from '@ui-arch/frame'; import type { AlertProps } from './types.js'; -/*** 提示条：variant 决定语义色，可选标题与关闭按钮；关闭即退场并从 DOM 移除（内容由调用方持有） ***/ +const DEFAULT_ICON: Record = { info: 'ℹ', success: '✓', warning: '!', danger: '✕' }; // 语义缺省图标 + +/*** 提示条：variant 决定语义色，可选标题/语义图标/关闭按钮；banner 为通栏形态，关闭即退场并从 DOM 移除 ***/ export function alert(props: AlertProps): HTMLElement { + const variant = props.variant ?? 'info'; // 语义档位 const body = h( 'div', { class: 'ua-alert-body' }, props.title ? h('div', { class: 'ua-alert-title' }, props.title) : null, h('div', { class: 'ua-alert-message' }, props.message), ); - const el = h('div', { class: `ua-alert ua-alert-${props.variant ?? 'info'}`, role: 'alert' }, body); + const glyph = props.icon ?? (props.showIcon ? DEFAULT_ICON[variant] : null); // 自定义图标优先 + const el = h( + 'div', + { class: `ua-alert ua-alert-${variant}${props.banner ? ' is-banner' : ''}`, role: 'alert' }, + glyph ? h('span', { class: 'ua-alert-icon', 'aria-hidden': 'true' }, glyph) : null, // 图标纯装饰，读屏靠正文 + body, + ); if (!props.closable) return el; // 纯展示形态 el.append( diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 3f545ab..aa83ab6 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -274,6 +274,9 @@ export interface AlertProps { variant?: 'info' | 'success' | 'warning' | 'danger'; // 语义色；缺省 info closable?: boolean; // 显示 × 关闭按钮（退场后从 DOM 移除）；缺省 false onClose?: () => void; // 关闭回调，供调用方同步业务状态 + banner?: boolean; // 通栏形态：去圆角、只留下边框、左右撑满；适合页面顶部通知 + showIcon?: boolean; // 显示语义图标（info ℹ / success ✓ / warning ! / danger ✕）；缺省 false + icon?: string | HTMLElement; // 自定义图标节点，传了即覆盖语义图标 } /*** 骨架屏入参 ***/ diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 2c87ec2..7e3f4d2 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -899,6 +899,23 @@ "t": "() => void", "k": 1, "d": "关闭回调，供调用方同步业务状态" + }, + { + "n": "banner", + "t": "boolean", + "df": "false", + "d": "通栏形态：去圆角、只保留下边框、左右撑满，适合页面顶部通知" + }, + { + "n": "showIcon", + "t": "boolean", + "df": "false", + "d": "显示语义图标（info ℹ / success ✓ / warning ! / danger ✕），纯装饰不进读屏" + }, + { + "n": "icon", + "t": "string | HTMLElement", + "d": "自定义图标节点，传了即覆盖语义图标" } ], "example": "alert({ message: '操作可能存在风险', variant: 'warning' })", @@ -907,7 +924,8 @@ "传入 message 即可，入场自带下滑动画", "需要可关闭或带操作按钮时，外层用 h() 组合 button 自行拼装，alert 只负责语义底色", "需要用户可自行消除的提示传 closable: true：点 × 淡出并从 DOM 移除，配合 onClose 同步业务状态", - "有标题与正文两层信息时传 title（加粗首行），正文仍走 message" + "有标题与正文两层信息时传 title（加粗首行），正文仍走 message", + "banner: true 出通栏形态（圆角与左右边框归零），页面顶部通知直接铺满容器即可，不需要额外包裹层" ] }, { diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 918cb93..a94ef95 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -1037,6 +1037,26 @@ button.ua-step-dot:hover { transform: translateY(-6px); } } +.ua-alert-icon { + flex: none; + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + margin-top: 1px; + border: 1px solid currentColor; + border-radius: 50%; + font-size: 11px; + line-height: 1; + opacity: 0.85; +} +.ua-alert.is-banner { + padding: 10px 16px; + border-width: 0 0 1px; + border-radius: 0; +} + .ua-alert-body { flex: 1; min-width: 0;