115 lines
5.5 KiB
JSON
115 lines
5.5 KiB
JSON
{
|
||
"slug": "pageheader",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "React 端的 PageHeader：title / description / secondaryText 三个 prop 填文本，返回按钮走 onClick，保存按钮无处理。",
|
||
"usage": [
|
||
"返回按钮文案来自 secondaryText 并加左箭头：`← {secondaryText}`，点击走 `onClick={() => onClick && onClick()}`，回调不带参数（frameworks/PageHeader.jsx:8）。",
|
||
"标题与副标题是两个不同标签：title 进 <strong className=\"kole-pageheader-title\">，description 进 .kole-pageheader-desc 的 div（frameworks/PageHeader.jsx:8）。",
|
||
"右侧「保存」按钮是纯装饰：没有 onClick 绑定，点了没有任何回调（frameworks/PageHeader.jsx:8）。",
|
||
"外层是 <header> 语义标签而非 div，结构里三段（返回按钮 / 标题区 / 保存按钮）由 flex 排布（frameworks/PageHeader.jsx:8）。",
|
||
"children 与 onChange / onClose / onSubmit / onLoadMore 都在解构里但未参与渲染（frameworks/PageHeader.jsx:4）。"
|
||
],
|
||
"bestPractices": [
|
||
"页面级操作只能接返回：onClick 是唯一出口，「保存」按钮的行为需要改实现或另加按钮（frameworks/PageHeader.jsx:8）。",
|
||
"onClick 无载荷，判断来源要靠外部闭包区分（frameworks/PageHeader.jsx:8）。",
|
||
"三个文案 prop 都有默认值（用户详情 / 查看并编辑用户资料 / 返回列表），不传会显示示例文案（frameworks/PageHeader.jsx:4,8）。",
|
||
"children 未渲染，想在标题区插自定义内容（如标签、状态）只能改实现（frameworks/PageHeader.jsx:4,8）。"
|
||
],
|
||
"a11y": [
|
||
"容器是 <header> 语义标签（frameworks/PageHeader.jsx:8），辅助技术可识别为页面横幅区域。",
|
||
"标题用 <strong> 而非 <h1> / <h2>，文档大纲里不会出现该页面标题（frameworks/PageHeader.jsx:8）。",
|
||
"返回按钮的可见文案是 `← 返回列表`，箭头也在可访问名里，读屏器会读出「左箭头」（frameworks/PageHeader.jsx:8）。",
|
||
"保存按钮可见文字是「保存」但无行为，键盘用户点击后没有任何反馈（frameworks/PageHeader.jsx:8）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与单一回调：title / description / secondaryText 填三段文本，返回交互经 onClick 上报（无载荷）；保存按钮未接回调，没有 v-model。",
|
||
"table": [
|
||
{
|
||
"name": "children",
|
||
"type": "属性",
|
||
"desc": "解构声明但 JSX 未渲染（frameworks/PageHeader.jsx:4）"
|
||
},
|
||
{
|
||
"name": "description",
|
||
"type": "属性",
|
||
"desc": "副标题文本，渲染进 .kole-pageheader-desc（frameworks/PageHeader.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/PageHeader.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "属性",
|
||
"desc": "唯一回调出口：返回按钮点击时调用，不带参数（frameworks/PageHeader.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/PageHeader.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onLoadMore",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/PageHeader.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onSubmit",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/PageHeader.jsx:4）"
|
||
},
|
||
{
|
||
"name": "secondaryText",
|
||
"type": "属性",
|
||
"desc": "返回按钮文案，渲染为 `← {secondaryText}`（frameworks/PageHeader.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定 onChange（frameworks/PageHeader.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "事件",
|
||
"desc": "返回按钮上的点击，承载 onClick 回调（frameworks/PageHeader.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定 onClose（frameworks/PageHeader.jsx:4）"
|
||
},
|
||
{
|
||
"name": "children",
|
||
"type": "插槽",
|
||
"desc": "React 无插槽语法，children 即默认子节点；本实现未渲染（frameworks/PageHeader.jsx:4,8）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/PageHeader.jsx",
|
||
"kind": "React",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/PageHeader.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"pageheader-ex-1",
|
||
"pageheader-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 解构见 frameworks/PageHeader.jsx:4，共 9 个；渲染全在第 8 行（header 内三段结构）。",
|
||
"onClick 的绑定点与无参数调用见 frameworks/PageHeader.jsx:8；右侧保存按钮同在第 8 行且无 onClick 绑定。",
|
||
"实现缺口：保存按钮未接回调、children 未渲染、标题非 heading 元素（frameworks/PageHeader.jsx:8）；按实现写，未补。",
|
||
"a11y 依据：<header> 语义标签与 <strong> 标题见 frameworks/PageHeader.jsx:8；全文无 aria-* 属性。",
|
||
"apiCarrier.table 保留了自动生成时的「属性 + 事件 + 插槽」三套同名行（onChange / onClick / onClose / children 各两次），本次只改 desc 文案，未调整行结构。"
|
||
]
|
||
}
|