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

iter(e05): 新增 divider 分隔线组件

Browse Source
This commit is contained in:
HIsheR
2026-10-23 18:14:47 +08:00
parent 84d008b5fd
commit c457e0cc33
12 changed files with 175 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.ua/backlog.json
+9 -1
View File
@@ -308,6 +308,14 @@
"acceptance": "packages/skin/ui 新增 empty.ts：empty({title?, description?, action?})，居中排版，action 为可选 DOM 操作区（常见放按钮）；只消费 --ua-* 令牌；导出、manifest、文档、llms-full.txt、README 清单同步；demo 加一节演示；npm run check 全绿",
"status": "done",
"notes": "empty(props)：纯静态组件（无信号），role=status 由读屏播报；装饰符号 ⌀ 弱化为边框色且 aria-hidden；min-height 120px 撑留白（令牌只到 space-4）；demo 新增 sec-empty（信号切换有数据/无结果对比，内容用响应式函数渲染）；README 同步 32 组件"
},
{
"id": "e05",
"title": "新增 divider 分隔线组件",
"motivation": "表单分组、卡片内区块、工具栏之间需要统一分隔语义，目前只有 menu 内部私有分隔线，独立场景无组件可用",
"acceptance": "packages/skin/ui 新增 divider.ts：divider({label?, vertical?, dashed?})，水平/垂直两种方向，可带居中文案标签；只消费 --ua-* 令牌；导出、manifest、文档、llms-full.txt、README 清单同步；demo 加一节演示；npm run check 全绿",
"status": "done",
"notes": "divider(props)：水平线用 ::before/::after 双线夹 label 居中文案；vertical 单线（伪元素清空，dashed 走 border-left）；dashed 水平线 border-top 替代背景色；role=separator + aria-label；demo 新增 sec-divider（文案线/虚线/工具栏竖线三种用法）；README 同步 33 组件"
}
]
}
}
.ua/index.json
+30 -1
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-23T10:11:22.346Z",
"generatedAt": "2026-10-23T10:14:36.972Z",
"repoRoot": ".",
"packages": [
{
@@ -170,6 +170,7 @@
"stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳",
"rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配",
"empty(props)：空状态占位，title/description 可选，action 放操作区",
"divider(props)：分隔线，水平/垂直两种方向，可带居中文案标签，dashed 切虚线",
"modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区",
"drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭",
"form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit",
@@ -1210,6 +1211,34 @@
"action 传入 DOM（如 ghost 按钮）引导用户下一步操作"
]
},
{
"id": "divider",
"title": "分隔线 Divider",
"demo": "sec-divider",
"props": [
{
"n": "label",
"t": "string",
"d": "居中文案标签；缺省纯线条"
},
{
"n": "vertical",
"t": "boolean",
"d": "是否垂直分隔线（用于行内工具栏）；缺省水平"
},
{
"n": "dashed",
"t": "boolean",
"d": "是否虚线；缺省实线"
}
],
"example": "divider({ label: '更多信息' }) / divider({ vertical: true })",
"steps": [
"在区块之间插入 divider 划分内容层次",
"传 label 在水平线上显示居中文案，如「更多信息」",
"工具栏内用 vertical: true 的行内竖线，dashed: true 切虚线弱化分隔感"
]
},
{
"id": "pagination",
"title": "分页器 Pagination",
.ua/iterations.log
+1
View File
@@ -38,3 +38,4 @@
{"ts":"2026-10-23T17:57:31+08:00","id":"e02","result":"done","commit":"fc7a1e8","summary":"新增 stepper 步骤条：三态流转 + active 信号双向绑定 + clickable 回跳，门禁全绿"}
{"ts":"2026-10-23T18:03:34+08:00","id":"e03","result":"done","commit":"ee20322","summary":"新增 rate 评分组件：星标点选 + hover 预览 + 键盘方向键调节，信号双向绑定，门禁全绿"}
{"ts":"2026-10-23T18:11:46+08:00","id":"e04","result":"done","commit":"fd4ee01","summary":"新增 empty 空状态组件：title/description/action 居中占位，静态零依赖，门禁全绿"}
{"ts":"2026-10-23T18:14:46+08:00","id":"e05","result":"done","commit":"pending","summary":"新增 divider 分隔线组件：水平/垂直 + 居中文案 + 虚线，门禁全绿"}
README.md
+4 -4
View File
@@ -11,13 +11,13 @@ npm run demo # 打开演示：apps/demo/dist/demo.html
npm run docs # 生成人类文档站 apps/docs/index.html + Agent 全量文档 llms-full.txt
```
## 组件（共 32 个）
## 组件（共 33 个）
<!-- ua:components -->
accordion · alert · avatar · badge · breadcrumb · button · card · checkbox · dataTable · drawer · empty · form · inputNumber · menu · modal · pagination · popover · progress · radioGroup · rate · select · skeleton · slider · spinner · stepper · switchButton · tabs · tag · textField · textarea · toast · tooltip
accordion · alert · avatar · badge · breadcrumb · button · card · checkbox · dataTable · divider · drawer · empty · form · inputNumber · menu · modal · pagination · popover · progress · radioGroup · rate · select · skeleton · slider · spinner · stepper · switchButton · tabs · tag · textField · textarea · toast · tooltip
<!-- /ua:components -->
分组：表单（button / textField / inputNumber / textarea / checkbox / switchButton / select / radioGroup / slider / rate / form / formItem）、反馈（alert / toast / spinner / progress / skeleton / badge / empty）、浮层（tooltip / popover / modal / drawer / menu）、导航（tabs / breadcrumb / pagination / accordion / stepper）、数据（dataTable / tag / avatar / card）。
分组：表单（button / textField / inputNumber / textarea / checkbox / switchButton / select / radioGroup / slider / rate / form / formItem）、反馈（alert / toast / spinner / progress / skeleton / badge / empty）、浮层（tooltip / popover / modal / drawer / menu）、导航（tabs / breadcrumb / pagination / accordion / stepper）、数据（dataTable / tag / avatar / card）、其他（divider）。
## 目录
@@ -25,7 +25,7 @@ accordion · alert · avatar · badge · breadcrumb · button · card · checkbo
|---|---|
| `packages/core/frame` | @ui-arch/frame：signal / computed / effect + hyperscript（无虚拟 DOM） |
| `packages/core/table-core` | @ui-arch/table-core：headless 表格（filter → sort → paginate 派生管线） |
| `packages/skin/ui` | @ui-arch/ui：32 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
| `packages/skin/ui` | @ui-arch/ui：33 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
| `packages/design/tokens` | @ui-arch/tokens：设计令牌（暗色只换值不换名） |
| `packages/tools/cli` | @ui-arch/cli：`ua` 命令行与 stdio MCP server |
| `apps/demo` | 交互演示（esbuild 打包成单文件） |
apps/demo/main.ts
+18
View File
@@ -9,6 +9,7 @@ import {
card,
checkbox,
dataTable,
divider,
drawer,
empty,
form,
@@ -397,6 +398,23 @@ const content = h(
? empty({ title: '暂无匹配结果', description: '试试放宽筛选条件，或清空关键词重新搜索。', action: button({ label: '重置筛选', variant: 'ghost', onClick: () => noResult(false) }) })
: card({ title: '搜索结果' }, h('p', null, '这里展示命中的数据列表。'))),
),
section(
'sec-divider',
'分隔线',
'divider：水平线可带居中文案，dashed 切虚线；vertical 行内竖线用于工具栏。',
divider({ label: '更多信息' }),
h('p', null, '分割线上下的内容各自成组。'),
divider({ dashed: true }),
h(
'div',
{ class: 'row' },
button({ label: '保存', variant: 'ghost' }),
divider({ vertical: true }),
button({ label: '另存为', variant: 'ghost' }),
divider({ vertical: true, dashed: true }),
button({ label: '导出', variant: 'ghost' }),
),
),
section(
'sec-menu',
'下拉菜单',
llms-full.txt
+24 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档（无图形版）
> 自动生成于 2026-10-23T10:11:22.346Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
> 自动生成于 2026-10-23T10:14:36.972Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
> 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
## 快速上手
@@ -696,6 +696,28 @@ empty({ title: '暂无数据', description: '调整筛选条件后再试', actio
现场演示：apps/docs/demo.html#sec-empty
### divider — 分隔线 Divider
参数：
- label：string —— 居中文案标签；缺省纯线条
- vertical：boolean —— 是否垂直分隔线（用于行内工具栏）；缺省水平
- dashed：boolean —— 是否虚线；缺省实线
示例：
```
divider({ label: '更多信息' }) / divider({ vertical: true })
```
手把手：
1. 在区块之间插入 divider 划分内容层次
2. 传 label 在水平线上显示居中文案，如「更多信息」
3. 工具栏内用 vertical: true 的行内竖线，dashed: true 切虚线弱化分隔感
现场演示：apps/docs/demo.html#sec-divider
### pagination — 分页器 Pagination
参数：
@@ -874,6 +896,7 @@ API 速览：
- stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳
- rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配
- empty(props)：空状态占位，title/description 可选，action 放操作区
- divider(props)：分隔线，水平/垂直两种方向，可带居中文案标签，dashed 切虚线
- modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区
- drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭
- form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit
llms.txt
+1
View File
@@ -75,6 +75,7 @@
- stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳
- rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配
- empty(props)：空状态占位，title/description 可选，action 放操作区
- divider(props)：分隔线，水平/垂直两种方向，可带居中文案标签，dashed 切虚线
- modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区
- drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭
- form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit
packages/skin/ui/src/divider.ts
+11
View File
@@ -0,0 +1,11 @@
import { h } from '@ui-arch/frame';
import type { DividerProps } from './types.js';
/*** 分隔线：水平/垂直两种方向，可带居中文案标签，dashed 切虚线 ***/
export function divider(props: DividerProps): HTMLDivElement {
const cls = ['ua-divider', props.vertical ? 'ua-divider-vertical' : '', props.dashed ? 'ua-divider-dashed' : ''].filter(Boolean).join(' ');
const line = props.label && !props.vertical
? h('div', { class: cls, role: 'separator', 'aria-label': props.label }, h('span', { class: 'ua-divider-label' }, props.label))
: h('div', { class: cls, role: 'separator', 'aria-label': props.label }); // 垂直或无标签：纯线条
return line as HTMLDivElement;
}
packages/skin/ui/src/index.ts
+1
View File
@@ -27,6 +27,7 @@ export { tabs } from './tabs.js';
export { stepper } from './stepper.js';
export { rate } from './rate.js';
export { empty } from './empty.js';
export { divider } from './divider.js';
export { modal } from './modal.js';
export { drawer } from './drawer.js';
export { form, formItem } from './form.js';
packages/skin/ui/src/types.ts
+7
View File
@@ -204,6 +204,13 @@ export interface EmptyProps {
action?: unknown; // 操作区内容（常见为按钮）；缺省不渲染
}
/*** 分隔线入参 ***/
export interface DividerProps {
label?: string; // 居中文案标签；缺省纯线条
vertical?: boolean; // 是否垂直分隔线（用于行内工具栏）；缺省水平
dashed?: boolean; // 是否虚线；缺省实线
}
/*** 徽标入参 ***/
export interface BadgeProps {
label: string; // 徽标文案
packages/skin/ui/ua.manifest.json
+29
View File
@@ -41,6 +41,7 @@
"stepper(props)：步骤条，done/current/upcoming 三态，active 信号双向绑定，clickable 时已完成步骤可回跳",
"rate(props)：评分星标，value 信号双向绑定，hover 预览移出还原，键盘方向键调节，max 可配",
"empty(props)：空状态占位，title/description 可选，action 放操作区",
"divider(props)：分隔线，水平/垂直两种方向，可带居中文案标签，dashed 切虚线",
"modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区",
"drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭",
"form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit",
@@ -1081,6 +1082,34 @@
"action 传入 DOM（如 ghost 按钮）引导用户下一步操作"
]
},
{
"id": "divider",
"title": "分隔线 Divider",
"demo": "sec-divider",
"props": [
{
"n": "label",
"t": "string",
"d": "居中文案标签；缺省纯线条"
},
{
"n": "vertical",
"t": "boolean",
"d": "是否垂直分隔线（用于行内工具栏）；缺省水平"
},
{
"n": "dashed",
"t": "boolean",
"d": "是否虚线；缺省实线"
}
],
"example": "divider({ label: '更多信息' }) / divider({ vertical: true })",
"steps": [
"在区块之间插入 divider 划分内容层次",
"传 label 在水平线上显示居中文案，如「更多信息」",
"工具栏内用 vertical: true 的行内竖线，dashed: true 切虚线弱化分隔感"
]
},
{
"id": "pagination",
"title": "分页器 Pagination",
packages/skin/ui/ui.css
+40
View File
@@ -843,6 +843,46 @@ button.ua-step-dot:hover {
margin-top: var(--ua-space-1);
}
/* —— 分隔线 —— */
.ua-divider {
display: flex;
align-items: center;
gap: var(--ua-space-3);
margin: var(--ua-space-3) 0;
}
.ua-divider::before,
.ua-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--ua-color-border);
}
.ua-divider-dashed::before,
.ua-divider-dashed::after {
background: none;
border-top: 1px dashed var(--ua-color-border);
}
.ua-divider-label {
font-size: var(--ua-font-size-sm);
color: var(--ua-color-text-muted);
white-space: nowrap;
}
.ua-divider-vertical {
display: inline-block;
align-self: stretch;
width: 1px;
min-height: 20px;
margin: 0 var(--ua-space-2);
}
.ua-divider-vertical::before,
.ua-divider-vertical::after {
content: none; /* 垂直线：单线无伪元素 */
}
.ua-divider-vertical.ua-divider-dashed {
background: none;
border-left: 1px dashed var(--ua-color-border); /* 垂直虚线走边框 */
}
/* —— 徽标 —— */
.ua-badge {
display: inline-block;