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

iter: d12 新增可关闭标签 tag 组件

Browse Source
This commit is contained in:
ui-arch-bot
2026-10-23 16:55:10 +08:00
parent d1a2864470
commit 9eefdcbd75
11 changed files with 223 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.ua/backlog.json
+8
View File
@@ -144,6 +144,14 @@
"acceptance": "ModalProps 新增 size?: 'sm'|'md'|'lg'（340/420/640）与 footer?: unknown；footer 渲染右对齐操作区带上分割线；缺省行为与旧版一致；manifest/文档/llms-full.txt/demo 同步；npm run check 全绿",
"status": "done",
"notes": "宽度档位用 .ua-modal-sm/lg 覆盖基准 md，基础宽 min(420px,90vw) 不动；footer 仅在传入时渲染（null 分支不进 DOM）；demo 的弹窗改为 size:'lg' + 取消/确定 footer 按钮"
},
{
"id": "d12",
"title": "新增可关闭标签 tag 组件",
"motivation": "badge 纯展示无法移除，筛选条件/已选关键字需要带 × 的标签；补齐 badge 的交互版",
"acceptance": "新增 tag.ts：label + variant 五档 + closable/onClose；closable 时渲染带 aria-label 的 × 按钮；只消费 --ua-* 令牌；导出 / manifest / 文档 / llms-full.txt / demo 同步；npm run check 全绿",
"status": "done",
"notes": "组件无状态：onClose 只通知，节点由调用方按信号重渲染移除（与 form/formItem 返回句柄、dataTable 委托内核的哲学一致）；demo 用 signal<string[]> + renderList 演示真实删除链路，另有四档语义色静态展示"
}
]
}
.ua/index.json
+45 -4
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-23T08:54:30.235Z",
"generatedAt": "2026-10-23T08:55:03.791Z",
"repoRoot": ".",
"packages": [
{
@@ -130,7 +130,7 @@
{
"name": "@ui-arch/ui",
"type": "skin-dom",
"description": "DOM 皮肤组件库：button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
"description": "DOM 皮肤组件库：button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / tag / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
"tags": [
"components",
"dom",
@@ -155,6 +155,7 @@
"breadcrumb(props)：面包屑，nav + ol 语义结构，末项为当前页（aria-current），有 href 走原生链接、无 href 交给 onNavigate",
"card(props, ...children)：卡片容器",
"badge(props)：徽标，variant = default | success | warning | danger",
"tag(props)：可关闭标签，variant 五档语义色，closable + onClose 支持从数据源移除（纯展示请用 badge）",
"alert(props)：提示条，variant = info | success | warning | danger",
"toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）",
"tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起",
@@ -201,7 +202,8 @@
"FormProps",
"DataTableProps",
"PopoverProps",
"SliderProps"
"SliderProps",
"TagProps"
]
},
"usage": "const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')",
@@ -211,7 +213,7 @@
"语义色 variant 四档：default|info / success / warning / danger，一律来自令牌，禁止硬编码颜色"
],
"docs": {
"intro": "25 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。",
"intro": "26 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。",
"steps": [
"安装依赖：pnpm add @ui-arch/ui @ui-arch/frame（workspace 内自动链接）",
"引入样式：在应用入口 import '@ui-arch/ui/ui.css'，暗色主题在根元素设 data-theme='dark'",
@@ -694,6 +696,45 @@
"状态语义靠 variant 承载，不要自造颜色；纯展示不可交互，需要操作请配 button"
]
},
{
"id": "tag",
"title": "标签 Tag",
"demo": "sec-tag",
"props": [
{
"n": "label",
"t": "string",
"r": 1,
"d": "标签文案"
},
{
"n": "variant",
"t": "'default' | 'success' | 'warning' | 'danger' | 'info'",
"d": "语义色；缺省 default",
"df": "default"
},
{
"n": "closable",
"t": "boolean",
"d": "显示 × 关闭按钮；缺省 false（纯展示）",
"df": "false"
},
{
"n": "onClose",
"t": "() => void",
"k": 1,
"d": "关闭回调：调用方从数据源移除该项后重新渲染"
}
],
"example": "tag({ label: '前端', variant: 'info', closable: true, onClose: () => remove('前端') })",
"steps": [
"纯展示用 badge，需要可移除的标签（筛选项 / 已选条件）用 tag",
"按语义选 variant：info 中性标记、success 通过、warning 待处理、danger 已失效",
"closable: true 时必须配 onClose：把数据源里的该项删掉再重渲染（组件无状态，不自行摘除节点）",
"组合用法：容器里用 renderList 按信号数组渲染 tag 列表，删除即写回信号",
"标签是内联元素，可直接排进 .row 等容器，自动换行由容器决定"
]
},
{
"id": "alert",
"title": "提示条 Alert",
.ua/iterations.log
+1
View File
@@ -16,3 +16,4 @@
{"time": "2026-10-23T16:53:06+08:00", "id": "d09", "result": "done", "summary": "新增滑块 slider：value 信号双向绑定 + min/max/step + 布尔|信号禁用 + showValue，原生 range 承载键盘与触屏，accent-color 令牌化；manifest/llms/demo 同步，check 全绿"}
{"time": "2026-10-23T16:53:44+08:00", "id": "d10", "result": "done", "summary": "toast 新增 closable（× 手动关闭）与同屏上限 4 条，退场统一走 dismiss() 双兜底；is-closable 才接收指针；demo/manifest/llms 同步，check 全绿"}
{"time": "2026-10-23T16:54:36+08:00", "id": "d11", "result": "done", "summary": "modal 新增 size 三档（sm/md/lg）与 footer 操作区（右对齐 + 上分割线），缺省行为不变；demo/manifest/llms 同步，check 全绿"}
{"time": "2026-10-23T16:55:10+08:00", "id": "d12", "result": "done", "summary": "新增可关闭标签 tag（五档语义色 + closable/onClose，无状态委托调用方重渲染）；demo 用 renderList 演示真实删除；manifest/llms 同步，check 全绿"}
apps/demo/main.ts
+23 -1
View File
@@ -1,4 +1,4 @@
import { h, mount, signal } from '@ui-arch/frame';
import { h, mount, renderList, signal } from '@ui-arch/frame';
import {
accordion,
alert,
@@ -23,6 +23,7 @@ import {
spinner,
switchButton,
tabs,
tag,
textarea,
textField,
toast,
@@ -98,6 +99,9 @@ const formResult = signal('');
// —— 分页联动状态：dataTable 与独立 pagination 共用同一页码信号 ——
const tablePage = signal(1);
// —— 标签列表：关闭即写回信号，容器按信号重渲染 ——
const tags = signal(['设计', '前端', '组件库']);
// —— 滑块：音量与禁用态演示 ——
const volume = signal(40);
@@ -160,6 +164,24 @@ const content = h(
radioGroup({ options: [{ value: 'x', label: '静态禁用' }], value: size, disabled: true }),
),
),
section(
'sec-tag',
'标签',
'tag：可关闭标签（badge 的交互版），关闭回调里改信号即从列表移除。',
h(
'div',
{ class: 'row' },
tag({ label: '纯展示', variant: 'default' }),
tag({ label: '通过', variant: 'success' }),
tag({ label: '待处理', variant: 'warning' }),
tag({ label: '已失效', variant: 'danger' }),
),
(() => {
const box = h('div', { class: 'row' });
renderList(box, () => tags().map((t) => tag({ label: t, variant: 'info', closable: true, onClose: () => tags(tags().filter((x) => x !== t)) })));
return box;
})(),
),
section(
'sec-slider',
'滑块',
llms-full.txt
+28 -2
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档（无图形版）
> 自动生成于 2026-10-23T08:54:30.235Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
> 自动生成于 2026-10-23T08:55:03.791Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
> 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
## 快速上手
@@ -40,7 +40,7 @@
## @ui-arch/ui（skin-dom）v0.1.0
25 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。
26 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。
### button — 按钮 Button
@@ -351,6 +351,31 @@ badge({ label: '成功', variant: 'success' })
现场演示：apps/docs/demo.html#sec-feedback
### tag — 标签 Tag
参数：
- label（必填）：string —— 标签文案
- variant（默认 default）：'default' | 'success' | 'warning' | 'danger' | 'info' —— 语义色；缺省 default
- closable（默认 false）：boolean —— 显示 × 关闭按钮；缺省 false（纯展示）
- onClose（回调）：() => void —— 关闭回调：调用方从数据源移除该项后重新渲染
示例：
```
tag({ label: '前端', variant: 'info', closable: true, onClose: () => remove('前端') })
```
手把手：
1. 纯展示用 badge，需要可移除的标签（筛选项 / 已选条件）用 tag
2. 按语义选 variant：info 中性标记、success 通过、warning 待处理、danger 已失效
3. closable: true 时必须配 onClose：把数据源里的该项删掉再重渲染（组件无状态，不自行摘除节点）
4. 组合用法：容器里用 renderList 按信号数组渲染 tag 列表，删除即写回信号
5. 标签是内联元素，可直接排进 .row 等容器，自动换行由容器决定
现场演示：apps/docs/demo.html#sec-tag
### alert — 提示条 Alert
参数：
@@ -667,6 +692,7 @@ API 速览：
- breadcrumb(props)：面包屑，nav + ol 语义结构，末项为当前页（aria-current），有 href 走原生链接、无 href 交给 onNavigate
- card(props, ...children)：卡片容器
- badge(props)：徽标，variant = default | success | warning | danger
- tag(props)：可关闭标签，variant 五档语义色，closable + onClose 支持从数据源移除（纯展示请用 badge）
- alert(props)：提示条，variant = info | success | warning | danger
- toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）
- tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起
llms.txt
+2 -1
View File
@@ -45,7 +45,7 @@
## @ui-arch/ui (v0.1.0)
- 类型: skin-dom · 目录: packages/skin/ui
- 描述: DOM 皮肤组件库：button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。
- 描述: DOM 皮肤组件库：button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / tag / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。
- API:
- button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用
- textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号禁用
@@ -60,6 +60,7 @@
- breadcrumb(props)：面包屑，nav + ol 语义结构，末项为当前页（aria-current），有 href 走原生链接、无 href 交给 onNavigate
- card(props, ...children)：卡片容器
- badge(props)：徽标，variant = default | success | warning | danger
- tag(props)：可关闭标签，variant 五档语义色，closable + onClose 支持从数据源移除（纯展示请用 badge）
- alert(props)：提示条，variant = info | success | warning | danger
- toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）
- tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起
packages/skin/ui/src/index.ts
+1
View File
@@ -12,6 +12,7 @@ export { accordion } from './accordion.js';
export { breadcrumb } from './breadcrumb.js';
export { card } from './card.js';
export { badge } from './badge.js';
export { tag } from './tag.js';
export { alert } from './alert.js';
export { toast, showToast } from './toast.js';
export { tooltip } from './tooltip.js';
packages/skin/ui/src/tag.ts
+16
View File
@@ -0,0 +1,16 @@
import { h } from '@ui-arch/frame';
import type { TagProps } from './types.js';
/*** 标签：语义色小胶囊，可选 × 关闭；与 badge 的分工是 tag 可交互（带关闭回调） ***/
export function tag(props: TagProps): HTMLElement {
const label = h('span', { class: 'ua-tag-label' }, props.label);
if (!props.closable) {
return h('span', { class: `ua-tag ua-tag-${props.variant ?? 'default'}` }, label); // 纯展示形态
}
return h(
'span',
{ class: `ua-tag is-closable ua-tag-${props.variant ?? 'default'}` },
label,
h('button', { type: 'button', class: 'ua-tag-close', 'aria-label': `移除 ${props.label}`, onClick: () => props.onClose?.() }, '×'),
);
}
packages/skin/ui/src/types.ts
+8
View File
@@ -163,6 +163,14 @@ export interface BadgeProps {
variant?: 'default' | 'success' | 'warning' | 'danger'; // 语义色；缺省 default
}
/*** 标签入参（可关闭，与纯展示的 badge 区分） ***/
export interface TagProps {
label: string; // 标签文案
variant?: 'default' | 'success' | 'warning' | 'danger' | 'info'; // 语义色；缺省 default
closable?: boolean; // 显示 × 关闭按钮；缺省 false
onClose?: () => void; // 关闭回调（调用方自行从数据源移除该项）
}
/*** 提示条入参 ***/
export interface AlertProps {
message: string; // 提示内容
packages/skin/ui/ua.manifest.json
+44 -3
View File
@@ -1,7 +1,7 @@
{
"name": "@ui-arch/ui",
"type": "skin-dom",
"description": "DOM 皮肤组件库：button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
"description": "DOM 皮肤组件库：button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / tag / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
"tags": [
"components",
"dom",
@@ -26,6 +26,7 @@
"breadcrumb(props)：面包屑，nav + ol 语义结构，末项为当前页（aria-current），有 href 走原生链接、无 href 交给 onNavigate",
"card(props, ...children)：卡片容器",
"badge(props)：徽标，variant = default | success | warning | danger",
"tag(props)：可关闭标签，variant 五档语义色，closable + onClose 支持从数据源移除（纯展示请用 badge）",
"alert(props)：提示条，variant = info | success | warning | danger",
"toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失，出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）",
"tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起",
@@ -72,7 +73,8 @@
"FormProps",
"DataTableProps",
"PopoverProps",
"SliderProps"
"SliderProps",
"TagProps"
]
},
"usage": "const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')",
@@ -82,7 +84,7 @@
"语义色 variant 四档：default|info / success / warning / danger，一律来自令牌，禁止硬编码颜色"
],
"docs": {
"intro": "25 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。",
"intro": "26 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。",
"steps": [
"安装依赖：pnpm add @ui-arch/ui @ui-arch/frame（workspace 内自动链接）",
"引入样式：在应用入口 import '@ui-arch/ui/ui.css'，暗色主题在根元素设 data-theme='dark'",
@@ -565,6 +567,45 @@
"状态语义靠 variant 承载，不要自造颜色；纯展示不可交互，需要操作请配 button"
]
},
{
"id": "tag",
"title": "标签 Tag",
"demo": "sec-tag",
"props": [
{
"n": "label",
"t": "string",
"r": 1,
"d": "标签文案"
},
{
"n": "variant",
"t": "'default' | 'success' | 'warning' | 'danger' | 'info'",
"d": "语义色；缺省 default",
"df": "default"
},
{
"n": "closable",
"t": "boolean",
"d": "显示 × 关闭按钮；缺省 false（纯展示）",
"df": "false"
},
{
"n": "onClose",
"t": "() => void",
"k": 1,
"d": "关闭回调：调用方从数据源移除该项后重新渲染"
}
],
"example": "tag({ label: '前端', variant: 'info', closable: true, onClose: () => remove('前端') })",
"steps": [
"纯展示用 badge，需要可移除的标签（筛选项 / 已选条件）用 tag",
"按语义选 variant：info 中性标记、success 通过、warning 待处理、danger 已失效",
"closable: true 时必须配 onClose：把数据源里的该项删掉再重渲染（组件无状态，不自行摘除节点）",
"组合用法：容器里用 renderList 按信号数组渲染 tag 列表，删除即写回信号",
"标签是内联元素，可直接排进 .row 等容器，自动换行由容器决定"
]
},
{
"id": "alert",
"title": "提示条 Alert",
packages/skin/ui/ui.css
+47
View File
@@ -539,6 +539,51 @@
padding-bottom: 12px;
}
/* —— 标签（可关闭） —— */
.ua-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border: 1px solid var(--ua-color-border);
border-radius: 999px;
background: var(--ua-color-surface);
color: var(--ua-color-text);
font-size: var(--ua-font-size-sm);
line-height: 1.6;
transition: border-color 0.15s, background 0.15s;
}
.ua-tag-success {
border-color: color-mix(in srgb, var(--ua-color-success) 55%, transparent);
background: color-mix(in srgb, var(--ua-color-success) 10%, var(--ua-color-bg));
}
.ua-tag-warning {
border-color: color-mix(in srgb, var(--ua-color-warning) 55%, transparent);
background: color-mix(in srgb, var(--ua-color-warning) 12%, var(--ua-color-bg));
}
.ua-tag-danger {
border-color: color-mix(in srgb, var(--ua-color-danger) 55%, transparent);
background: color-mix(in srgb, var(--ua-color-danger) 10%, var(--ua-color-bg));
}
.ua-tag-info {
border-color: color-mix(in srgb, var(--ua-color-accent) 55%, transparent);
background: color-mix(in srgb, var(--ua-color-accent) 10%, var(--ua-color-bg));
}
.ua-tag-close {
padding: 0;
border: none;
background: none;
color: var(--ua-color-text-muted);
font-size: 12px;
line-height: 1;
cursor: pointer;
transition: color 0.15s, transform 0.15s;
}
.ua-tag-close:hover {
color: var(--ua-color-text);
transform: scale(1.15);
}
/* —— 滑块 —— */
.ua-slider {
display: inline-flex;
@@ -1113,6 +1158,8 @@
.ua-crumb-link,
.ua-pop,
.ua-slider-input,
.ua-tag,
.ua-tag-close,
.ua-switch-track,
.ua-switch-thumb,
.ua-tab,