iter(g275): 新增相对时间组件

This commit is contained in:
HIsheR
2026-10-26 23:00:45 +08:00
parent fa84a392fb
commit b454d5f7b0
12 changed files with 208 additions and 10 deletions
+28 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T14:58:51.630Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T15:00:29.937Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -2341,6 +2341,32 @@ loading({ active: busy, text: '正在刷新订单' }, dataTable({ ... }))
现场演示:apps/docs/demo.html#sec-loading
### relativeTime — 相对时间 RelativeTime
参数:
- value:string | number | Date —— 目标时间:ISO 串 / 时间戳(10 位按秒、13 位按毫秒)/ Date
- refresh:number —— 自动刷新间隔(ms);缺省 30000,传 0 不刷新
- threshold:number —— 超过该秒数改用绝对日期;缺省 7 天
- fallback:string —— 时间非法时的占位文案;缺省「—」
- ariaLabel:string —— 可访问名(如「下单时间」),让读屏知道这个时间是什么
示例:
```
relativeTime({ value: row.createdAt, ariaLabel: '下单时间' })
```
手把手:
1. 把后端给的时间原样交进来:ISO 串、10 位秒级戳、13 位毫秒戳、Date 都认,不用自己 new Date
2. 默认每 30 秒刷新一次文案(「3 分钟前」会在不刷新页面的情况下变「4 分钟前」);列表里条数极多时可把 refresh 调大或传 0
3. 超过 7 天自动改显示绝对日期(YYYY-MM-DD HH:mm),想更早切换就调小 threshold
4. 精确时间放在 title:鼠标悬停可看,不必为「想知道具体哪天」再点开详情
5. 时间非法(空串 / 格式错)不猜也不抛,显示 fallback(缺省「—」),列表不会因一条脏数据空白
现场演示:apps/docs/demo.html#sec-reltime
API 速览:
- button(props):按钮,variant 三档视觉强度,disabled / loading 支持布尔或信号动态同步(loading 转圈并禁点),onClick 点击回调
@@ -2427,6 +2453,7 @@ API 速览:
- codeBlock(props):代码块,等宽多行 + 行号列 + 标题行 + 一键复制原文,只展示不高亮
- signaturePad(props):手写签名板,指针绘制 + DPR 位图,返回 handle(el / clear / toDataURL / isEmpty)
- loading(props, ...children):区域加载遮罩,内容原地降透明度 + 转圈文案,带延迟出场避免快请求闪烁
- relativeTime(props):把时间戳渲染成「3 分钟前」并自动刷新,超阈值改显示绝对日期,title 恒给精确值
一行用法: