62 lines
3.4 KiB
JSON
62 lines
3.4 KiB
JSON
{
|
||
"slug": "timelinelist",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "时间轴：items 给时间、标题、描述与状态，direction 切换横向或纵向排布。",
|
||
"usage": [
|
||
"React 端状态写在数据里：每个 item 的 status 直接拼成 is-{status} 类（TimelineList.jsx:8），组件不做状态推导。",
|
||
"三个文本字段都可选：time、title 必读，desc 存在才渲染（TimelineList.jsx:12-14）。",
|
||
"横向模式只改一个类：direction=\"horizontal\" 时根节点加 is-horizontal（TimelineList.jsx:6）。",
|
||
"节点与连线是两个独立 span，分别由 CSS 定位，组件不参与布局计算（TimelineList.jsx:9-10）。",
|
||
"列表用数组索引作 key，items 是纯展示数据、不含交互（TimelineList.jsx:7）。"
|
||
],
|
||
"bestPractices": [
|
||
"status 取值需与 CSS 里已定义的 is-* 类一致（组件不校验），写错的取值只会得到无色节点。",
|
||
"items 为空时渲染空容器不做兜底，父级需要自己的空态处理。",
|
||
"时间文本格式自由（组件原样输出），同一列表内建议统一格式以免视觉错位。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "items",
|
||
"type": "Array<{ time, title, desc?, status }>",
|
||
"desc": "时间轴条目，status 拼成 is-{status} 类"
|
||
},
|
||
{
|
||
"name": "direction",
|
||
"type": "'vertical' | 'horizontal'",
|
||
"desc": "排列方向，horizontal 时加 is-horizontal"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"时间轴是纯 div/span 结构（TimelineList.jsx:6-15），没有 ol/li，事件的先后顺序对读屏不可见。",
|
||
"状态完全由颜色与节点形状表达（is-{status}），没有文本或图标标注状态含义。",
|
||
"time 文本是普通 div 而非 <time> 元素，缺少机器可读的时间语义。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/TimelineList.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/TimelineList.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"timelinelist-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/TimelineList.jsx:4 中可指到 items（Array<{ time, title, desc?, status }>）——时间轴条目，status 拼成 is-{status} 类",
|
||
"frameworks/TimelineList.jsx:4 中可指到 direction（'vertical' | 'horizontal'）——排列方向，horizontal 时加 is-horizontal",
|
||
"props 解构清单见 frameworks/TimelineList.jsx:4-4；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/TimelineList.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：2 行中 2 行是 frameworks/TimelineList.jsx 解构出的顶层 props（解构块 frameworks/TimelineList.jsx:4-4）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|