From 2316445b1e30f1f5669e7acfacbf50bb75a877cd Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 16:21:48 +0800 Subject: [PATCH] =?UTF-8?q?iter(g174):=20=E6=97=B6=E9=97=B4=E7=BA=BF?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=8F=8C=E4=BE=A7=E4=BA=A4=E6=9B=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/index.json | 9 ++++---- apps/demo/main.ts | 9 ++++++++ llms-full.txt | 5 +++-- packages/skin/ui/src/timeline.ts | 8 +++++-- packages/skin/ui/src/types.ts | 2 +- packages/skin/ui/ua.manifest.json | 7 ++++--- packages/skin/ui/ui.css | 35 +++++++++++++++++++++++++++++++ 7 files changed, 63 insertions(+), 12 deletions(-) diff --git a/.ua/index.json b/.ua/index.json index d8f6e60..0c1ec82 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T08:20:12.255Z", + "generatedAt": "2026-10-26T08:21:19.789Z", "repoRoot": ".", "packages": [ { @@ -2049,8 +2049,8 @@ }, { "n": "mode", - "t": "'left' | 'right'", - "d": "轴线与节点所在侧；缺省 left（内容在右），right 时内容左对齐轴线居右", + "t": "'left' | 'right' | 'alternate'", + "d": "轴线位置：left / right 单侧排布；alternate 双侧交替（轴线居中、奇偶左右分列，窄屏自动退回左侧）", "df": "left" }, { @@ -2067,7 +2067,8 @@ "time 是纯展示文案，格式自由（'09:12' / '10-23 18:00'），组件不做日期解析", "流程未结束时传 pending: true，末尾自动补一个虚线脉冲节点，完成后置回 false 即消失", "需要轴线居右（如右侧栏时间流）时传 mode: 'right'，条目与节点整体镜像", - "content 为纯文本；需要按钮等交互内容时改用 accordion / card 组合" + "content 为纯文本；需要按钮等交互内容时改用 accordion / card 组合", + "要做里程碑式双侧时间线就传 mode: 'alternate'：轴线居中、条目按奇偶分列左右并在窄屏退回单侧，pending 虚节点同样参与交替计数" ] }, { diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 8019a8e..67c7b2d 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -798,6 +798,15 @@ const content = h( ], pending: !flowDone(), }), + divider({ dashed: true }), + timeline({ // 双侧交替：轴线居中，奇偶左右分列，窄屏退回单列 + mode: 'alternate', + items: [ + { title: '立项评审通过', time: '10-01', content: '范围与里程碑确定', variant: 'success' }, + { title: '设计定稿', time: '10-09', content: '视觉与令牌同步交付', variant: 'success' }, + { title: '一期上线', time: '10-22', content: '灰度 10% → 全量', variant: 'warning' }, + ], + }), ), section( 'sec-list', diff --git a/llms-full.txt b/llms-full.txt index a97cb0a..15b9a8d 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T08:20:12.255Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T08:21:19.789Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -1030,7 +1030,7 @@ dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓 参数： - items（必填）：TimelineItem[] —— 条目列表，按时间顺序自上而下；每项含 title（必填）、content、time、variant -- mode（默认 left）：'left' | 'right' —— 轴线与节点所在侧；缺省 left（内容在右），right 时内容左对齐轴线居右 +- mode（默认 left）：'left' | 'right' | 'alternate' —— 轴线位置：left / right 单侧排布；alternate 双侧交替（轴线居中、奇偶左右分列，窄屏自动退回左侧） - pending（默认 false）：boolean —— 末尾追加虚线「进行中…」节点，表示流程尚未结束；缺省 false 示例： @@ -1047,6 +1047,7 @@ timeline({ items: [{ title: '提交审批', time: '09:12', variant: 'success' }, 4. 流程未结束时传 pending: true，末尾自动补一个虚线脉冲节点，完成后置回 false 即消失 5. 需要轴线居右（如右侧栏时间流）时传 mode: 'right'，条目与节点整体镜像 6. content 为纯文本；需要按钮等交互内容时改用 accordion / card 组合 +7. 要做里程碑式双侧时间线就传 mode: 'alternate'：轴线居中、条目按奇偶分列左右并在窄屏退回单侧，pending 虚节点同样参与交替计数 现场演示：apps/docs/demo.html#sec-timeline diff --git a/packages/skin/ui/src/timeline.ts b/packages/skin/ui/src/timeline.ts index 5c38f6f..ef8d33a 100644 --- a/packages/skin/ui/src/timeline.ts +++ b/packages/skin/ui/src/timeline.ts @@ -11,10 +11,14 @@ function node(item: TimelineItem, pending: boolean): HTMLElement { return h('li', { class: `ua-tl-item${pending ? ' is-pending' : ''}` }, dot, h('div', { class: 'ua-tl-body' }, head, body)); } -/*** 时间线：纵向事件流，mode 决定轴线在左还是在右；pending 为真时末尾补一个进行中节点 ***/ +/*** 时间线：纵向事件流，mode 决定轴线在左 / 右 / 双侧交替；pending 为真时末尾补一个进行中节点 ***/ export function timeline(props: TimelineProps): HTMLElement { const rows: TimelineItem[] = [...props.items]; // 复制入参，避免改动调用方数组 if (props.pending) rows.push({ title: '进行中…' }); // 尾部虚节点表示流程尚未结束 - const items = rows.map((row, i) => node(row, !!props.pending && i === rows.length - 1)); + const items = rows.map((row, i) => { + const el = node(row, !!props.pending && i === rows.length - 1); + if (props.mode === 'alternate') el.classList.add(i % 2 ? 'is-right' : 'is-left'); // 交替排布：奇偶决定左右，轴线由样式表居中 + return el; + }); return h('ol', { class: `ua-tl ua-tl-${props.mode ?? 'left'}` }, ...items); } diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 6913a19..0f21d48 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -435,7 +435,7 @@ export interface TimelineItem { /*** 时间线入参 ***/ export interface TimelineProps { items: TimelineItem[]; // 条目列表，按时间顺序自上而下 - mode?: 'left' | 'right'; // 轴线与节点所在侧；缺省 left（内容在右） + mode?: 'left' | 'right' | 'alternate'; // 轴线位置：left / right 单侧，alternate 双侧交替（轴线居中，窄屏自动退回左侧）；缺省 left pending?: boolean; // 末尾追加「进行中」虚线节点，表示流程未结束；缺省 false } diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 5a19876..497c26c 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -1920,8 +1920,8 @@ }, { "n": "mode", - "t": "'left' | 'right'", - "d": "轴线与节点所在侧；缺省 left（内容在右），right 时内容左对齐轴线居右", + "t": "'left' | 'right' | 'alternate'", + "d": "轴线位置：left / right 单侧排布；alternate 双侧交替（轴线居中、奇偶左右分列，窄屏自动退回左侧）", "df": "left" }, { @@ -1938,7 +1938,8 @@ "time 是纯展示文案，格式自由（'09:12' / '10-23 18:00'），组件不做日期解析", "流程未结束时传 pending: true，末尾自动补一个虚线脉冲节点，完成后置回 false 即消失", "需要轴线居右（如右侧栏时间流）时传 mode: 'right'，条目与节点整体镜像", - "content 为纯文本；需要按钮等交互内容时改用 accordion / card 组合" + "content 为纯文本；需要按钮等交互内容时改用 accordion / card 组合", + "要做里程碑式双侧时间线就传 mode: 'alternate'：轴线居中、条目按奇偶分列左右并在窄屏退回单侧，pending 虚节点同样参与交替计数" ] }, { diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index f9cd8da..f485dce 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -2156,6 +2156,41 @@ button.ua-step-dot:hover { .ua-tl-right .ua-tl-item:last-child { padding-bottom: 0; } +.ua-tl-alternate::before { + left: 50%; /* 双侧交替：轴线居中，圆点贴中线 */ +} +.ua-tl-alternate .ua-tl-item { + width: 50%; + padding: 0 var(--ua-space-3) var(--ua-space-3) 0; +} +.ua-tl-alternate .ua-tl-item.is-left { + text-align: right; +} +.ua-tl-alternate .ua-tl-item.is-right { + margin-left: 50%; + padding: 0 0 var(--ua-space-3) var(--ua-space-3); + text-align: left; +} +.ua-tl-alternate .ua-tl-dot { + left: auto; + right: -5px; +} +.ua-tl-alternate .is-right .ua-tl-dot { + left: -5px; + right: auto; +} +@media (max-width: 640px) { + .ua-tl-alternate::before { left: 5px; } + .ua-tl-alternate .ua-tl-item, + .ua-tl-alternate .ua-tl-item.is-right { + width: auto; + margin-left: 0; + padding: 0 0 var(--ua-space-3) 22px; + text-align: left; + } + .ua-tl-alternate .ua-tl-dot, + .ua-tl-alternate .is-right .ua-tl-dot { left: 0; right: auto; } +} .ua-tl-dot { position: absolute; left: 0;