temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g68): alert 增加语义图标与通栏形态

Browse Source
This commit is contained in:
HIsheR
2026-10-26 12:37:16 +08:00
parent 1cd47317a2
commit 99981feb5f
7 changed files with 80 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.ua/index.json
+20 -2
View File
@@ -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 出通栏形态（圆角与左右边框归零），页面顶部通知直接铺满容器即可，不需要额外包裹层"
]
},
{
apps/demo/main.ts
+2
View File
@@ -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',
llms-full.txt
+5 -1
View File
@@ -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
packages/skin/ui/src/alert.ts
+11 -2
View File
@@ -1,15 +1,24 @@
import { h } from '@ui-arch/frame';
import type { AlertProps } from './types.js';
/*** 提示条：variant 决定语义色，可选标题与关闭按钮；关闭即退场并从 DOM 移除（内容由调用方持有） ***/
const DEFAULT_ICON: Record<string, string> = { 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(
packages/skin/ui/src/types.ts
+3
View File
@@ -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; // 自定义图标节点，传了即覆盖语义图标
}
/*** 骨架屏入参 ***/
packages/skin/ui/ua.manifest.json
+19 -1
View File
@@ -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 出通栏形态（圆角与左右边框归零），页面顶部通知直接铺满容器即可，不需要额外包裹层"
]
},
{
packages/skin/ui/ui.css
+20
View File
@@ -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;