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

iter(g142): 间距容器支持分隔符

Browse Source
This commit is contained in:
HIsheR
2026-10-26 15:37:34 +08:00
parent 508d11a29e
commit 5af2139366
8 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.ua/backlog.json
+8
View File
@@ -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"
}
]
}
.ua/index.json
+8 -2
View File
@@ -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"
]
},
{
apps/demo/main.ts
+6
View File
@@ -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',
llms-full.txt
+3 -1
View File
@@ -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
packages/skin/ui/src/space.ts
+6 -2
View File
@@ -8,12 +8,16 @@ const ALIGN: Record<string, string> = { start: 'flex-start', center: 'center', e
// 主轴分布 → flex justify-content 取值
const JUSTIFY: Record<string, string> = { 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;
}
packages/skin/ui/src/types.ts
+1
View File
@@ -704,6 +704,7 @@ export interface SpaceProps {
justify?: 'start' | 'center' | 'end' | 'between'; // 主轴分布；缺省 start，between 用于两端撑开
wrap?: boolean; // 空间不足是否换行；缺省 false
block?: boolean; // 是否占满父容器宽度；缺省按内容收缩
split?: string; // 子元素之间的分隔符（如 · / |）；纯装饰，读屏不念，仅 2 个以上子元素时插入
}
/*** 表格扩展接口：table-core 实例 + 皮肤层用到的两个取数方法 ***/
packages/skin/ui/ua.manifest.json
+7 -1
View File
@@ -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"
]
},
{
packages/skin/ui/ui.css
+7
View File
@@ -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;
}