diff --git a/.ua/backlog.json b/.ua/backlog.json index fd932f3..334d8d1 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -1492,6 +1492,14 @@ "acceptance": "notification 新增 placement(四个角),每角独立容器与 3 条上限,顶部角落新通知贴边出现、旧的往下让;文档 props/steps 与演示同步;npm run check 全绿", "notes": "自补:既有组件可用性细节", "status": "done" + }, + { + "id": "g142", + "title": "间距容器支持分隔符 split", + "motivation": "「A · B · C」这类一行多段信息(筛选摘要、面包屑式路径)只能手写 span 分隔符再逐个调 margin,gap 与分隔符混用后间距不均,读屏还会念出「·」", + "acceptance": "space 新增 split:仅在 2 个以上子元素间插入分隔符,分隔符 aria-hidden、弱化色、不可选中;文档与演示同步;npm run check 全绿", + "notes": "自补:既有组件可用性细节", + "status": "open" } ] } diff --git a/.ua/index.json b/.ua/index.json index 6d32618..5a3a372 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T07:36:09.637Z", + "generatedAt": "2026-10-26T07:37:18.841Z", "repoRoot": ".", "packages": [ { @@ -1575,6 +1575,11 @@ "n": "block", "t": "boolean", "d": "是否占满父容器宽度;缺省按内容收缩" + }, + { + "n": "split", + "t": "string", + "d": "子元素之间的分隔符(如 · / |):纯装饰、aria-hidden,仅 2 个以上子元素时插入" } ], "example": "space({ size: 'lg' }, button({ label: '保存' }), button({ label: '取消', variant: 'ghost' })) / space({ direction: 'vertical', align: 'start' }, ...)", @@ -1582,7 +1587,8 @@ "把一排需要统一间距的元素交给 space 托管,不再各自写 margin", "调间距:size 传 sm/md/lg 走令牌,需要精确像素时直接给数字", "竖排用 direction: 'vertical',配 align: 'start' 让子元素左对齐", - "工具栏两端撑开用 justify: 'between' + block: true;窄屏放不下时加 wrap" + "工具栏两端撑开用 justify: 'between' + block: true;窄屏放不下时加 wrap", + "一行里要塞分隔符(面包屑式「A · B · C」)传 split: '·':分隔符由容器插入且读屏跳过,不要手写 span 再逐个调 margin" ] }, { diff --git a/apps/demo/main.ts b/apps/demo/main.ts index be67174..5dcab94 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -656,6 +656,12 @@ const content = h( tag({ label: '#A1024', variant: 'info' }), ), space({ direction: 'vertical', align: 'start', size: 6 }, h('span', { class: 'out' }, '竖排第一行'), h('span', { class: 'out' }, '竖排第二行(6px 精确间距)')), + space( + { size: 'sm', split: '·' }, // 分隔符由容器插入,读屏跳过 + h('span', { class: 'out' }, '全部订单'), + h('span', { class: 'out' }, '待发货'), + h('span', { class: 'out' }, '已完成'), + ), ), section( 'sec-statistic', diff --git a/llms-full.txt b/llms-full.txt index 0b6f877..9313343 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档(无图形版) -> 自动生成于 2026-10-26T07:36:09.637Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 +> 自动生成于 2026-10-26T07:37:18.841Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 > 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。 ## 快速上手 @@ -813,6 +813,7 @@ divider({ label: '更多信息' }) / divider({ vertical: true }) - justify:'start' | 'center' | 'end' | 'between' —— 主轴分布;缺省 start,between 两端撑开 - wrap:boolean —— 空间不足是否换行;缺省 false - block:boolean —— 是否占满父容器宽度;缺省按内容收缩 +- split:string —— 子元素之间的分隔符(如 · / |):纯装饰、aria-hidden,仅 2 个以上子元素时插入 示例: @@ -826,6 +827,7 @@ space({ size: 'lg' }, button({ label: '保存' }), button({ label: '取消', var 2. 调间距:size 传 sm/md/lg 走令牌,需要精确像素时直接给数字 3. 竖排用 direction: 'vertical',配 align: 'start' 让子元素左对齐 4. 工具栏两端撑开用 justify: 'between' + block: true;窄屏放不下时加 wrap +5. 一行里要塞分隔符(面包屑式「A · B · C」)传 split: '·':分隔符由容器插入且读屏跳过,不要手写 span 再逐个调 margin 现场演示:apps/docs/demo.html#sec-space diff --git a/packages/skin/ui/src/space.ts b/packages/skin/ui/src/space.ts index 3f8a4a2..f07578f 100644 --- a/packages/skin/ui/src/space.ts +++ b/packages/skin/ui/src/space.ts @@ -8,12 +8,16 @@ const ALIGN: Record = { start: 'flex-start', center: 'center', e // 主轴分布 → flex justify-content 取值 const JUSTIFY: Record = { start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between' }; -/*** 间距容器:用 flex gap 统一一排子元素的间距,方向 / 档位 / 对齐 / 换行可调 ***/ +/*** 间距容器:用 flex gap 统一一排子元素的间距,方向 / 档位 / 对齐 / 换行可调;split 在子元素之间插分隔符 ***/ export function space(props: SpaceProps, ...children: unknown[]): HTMLDivElement { const size = props.size ?? 'md'; // 缺省中档,与多数组件内边距对齐 const gap = typeof size === 'number' ? `${size}px` : GAP[size]; // 数字档位按像素透传 const cls = ['ua-space', props.direction === 'vertical' ? 'is-vertical' : '', props.block ? 'is-block' : ''].filter(Boolean).join(' '); // 内联只放几何(间距/对齐/换行),颜色与描边一律留给令牌驱动的类名 const geom = `gap:${gap};align-items:${ALIGN[props.align ?? 'center']};justify-content:${JUSTIFY[props.justify ?? 'start']};flex-wrap:${props.wrap ? 'wrap' : 'nowrap'}`; - return h('div', { class: cls, style: geom }, ...children) as HTMLDivElement; + // 分隔符:仅 2 个以上子元素时插入,aria-hidden 让读屏跳过装饰符号 + const nodes = props.split && children.length > 1 + ? children.flatMap((child, i) => (i === 0 ? [child] : [h('span', { class: 'ua-space-split', 'aria-hidden': 'true' }, props.split), child])) + : children; + return h('div', { class: cls, style: geom }, ...nodes) as HTMLDivElement; } diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 0f0ebc9..68bea5e 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -704,6 +704,7 @@ export interface SpaceProps { justify?: 'start' | 'center' | 'end' | 'between'; // 主轴分布;缺省 start,between 用于两端撑开 wrap?: boolean; // 空间不足是否换行;缺省 false block?: boolean; // 是否占满父容器宽度;缺省按内容收缩 + split?: string; // 子元素之间的分隔符(如 · / |);纯装饰,读屏不念,仅 2 个以上子元素时插入 } /*** 表格扩展接口:table-core 实例 + 皮肤层用到的两个取数方法 ***/ diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 65b2f56..c96242d 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -1446,6 +1446,11 @@ "n": "block", "t": "boolean", "d": "是否占满父容器宽度;缺省按内容收缩" + }, + { + "n": "split", + "t": "string", + "d": "子元素之间的分隔符(如 · / |):纯装饰、aria-hidden,仅 2 个以上子元素时插入" } ], "example": "space({ size: 'lg' }, button({ label: '保存' }), button({ label: '取消', variant: 'ghost' })) / space({ direction: 'vertical', align: 'start' }, ...)", @@ -1453,7 +1458,8 @@ "把一排需要统一间距的元素交给 space 托管,不再各自写 margin", "调间距:size 传 sm/md/lg 走令牌,需要精确像素时直接给数字", "竖排用 direction: 'vertical',配 align: 'start' 让子元素左对齐", - "工具栏两端撑开用 justify: 'between' + block: true;窄屏放不下时加 wrap" + "工具栏两端撑开用 justify: 'between' + block: true;窄屏放不下时加 wrap", + "一行里要塞分隔符(面包屑式「A · B · C」)传 split: '·':分隔符由容器插入且读屏跳过,不要手写 span 再逐个调 margin" ] }, { diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 7122b11..31a55ce 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -4412,3 +4412,10 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } left: var(--ua-space-4); right: auto; } + +/* —— 间距分隔符:弱化色 + 不可选中,避免被当成内容复制 —— */ +.ua-space-split { + color: var(--ua-color-text-muted); + font-size: var(--ua-font-size-sm); + user-select: none; +}