116 lines
5.6 KiB
JSON
116 lines
5.6 KiB
JSON
{
|
||
"slug": "typography",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "React 端的 Typography：text 渲染成 h2 标题，说明段落是写死的，variant / align / maxLength 均未参与。",
|
||
"usage": [
|
||
"正文来自 text prop：`<h2 className=\"kole-typography-title\">{text}</h2>`，直接作为标题元素渲染（frameworks/Typography.jsx:8）。",
|
||
"说明段是组件内写死的字面量（「辅助说明文字，展示信息层级和省略。」），不来自 props（frameworks/Typography.jsx:8）。",
|
||
"variant / align / maxLength 三个 prop 声明了默认值但渲染里一次都没引用：没有按变体换标签或类名，也不做截断（frameworks/Typography.jsx:4,8）。",
|
||
"「复制文本」按钮已经把 text 传进回调：`onClick={() => onClick && onClick(text)}`，父组件拿到的就是要复制的字符串（frameworks/Typography.jsx:8）。",
|
||
"title 之类的其他 props 不存在：标题与正文的层级组合只有 text 一个入口，children 未渲染（frameworks/Typography.jsx:4,8）。",
|
||
"onChange / onClose / onSubmit / onLoadMore 都只在解构里，没有绑定（frameworks/Typography.jsx:4）。"
|
||
],
|
||
"bestPractices": [
|
||
"maxLength 不生效：长文本不会被截断或省略，示例里的 maxLength={20} 只是声明（frameworks/Typography.jsx:4,8）。",
|
||
"align 不生效：对齐方式由样式层控制，传 center 不会居中（frameworks/Typography.jsx:4,8）。",
|
||
"复制只是回调：组件不写剪贴板，需要在 onClick 里自己对 text 调 clipboard API（frameworks/Typography.jsx:8）。",
|
||
"说明段文字不可替换，想展示业务说明必须改实现（frameworks/Typography.jsx:8）。"
|
||
],
|
||
"a11y": [
|
||
"标题用 <h2> 语义标签（frameworks/Typography.jsx:8），能被读屏器识别为二级标题，但页面层级需使用方保证。",
|
||
"「复制文本」是原生 <button>，键盘可聚焦并用 Enter / 空格触发（frameworks/Typography.jsx:8）。",
|
||
"复制成功后没有 aria-live 提示，读屏用户不知道操作是否完成（frameworks/Typography.jsx:8）。",
|
||
"说明段是 <p>，语义正确，但内容与标题无 aria 关联（frameworks/Typography.jsx:8）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与一个回调：text 渲染为 h2 标题，点击复制按钮经 onClick 回传该文本；variant / align / maxLength / children 与其余 onXxx 均未参与，没有 v-model。",
|
||
"table": [
|
||
{
|
||
"name": "align",
|
||
"type": "属性",
|
||
"desc": "声明默认 left，渲染未引用，不控制对齐（frameworks/Typography.jsx:4,8）"
|
||
},
|
||
{
|
||
"name": "children",
|
||
"type": "属性",
|
||
"desc": "解构声明但 JSX 未渲染（frameworks/Typography.jsx:4）"
|
||
},
|
||
{
|
||
"name": "maxLength",
|
||
"type": "属性",
|
||
"desc": "声明默认 0，渲染未引用，不做截断（frameworks/Typography.jsx:4,8）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Typography.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "属性",
|
||
"desc": "复制按钮的唯一出口，载荷是 text 字符串（frameworks/Typography.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Typography.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onLoadMore",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Typography.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onSubmit",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Typography.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定 onChange（frameworks/Typography.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "事件",
|
||
"desc": "复制按钮上的点击，承载 onClick(text)（frameworks/Typography.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定 onClose（frameworks/Typography.jsx:4）"
|
||
},
|
||
{
|
||
"name": "children",
|
||
"type": "插槽",
|
||
"desc": "React 无插槽语法，children 即默认子节点；本实现未渲染（frameworks/Typography.jsx:4,8）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Typography.jsx",
|
||
"kind": "React",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Typography.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"typography-ex-1",
|
||
"typography-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 解构见 frameworks/Typography.jsx:4，共 10 个；渲染全在第 8 行（h2 标题 + 写死说明段 + 复制按钮）。",
|
||
"生效范围核验：第 8 行只引用 text 作为标题内容、onClick 作为复制回调；variant / align / maxLength / children 在第 4 行后再未出现。",
|
||
"实现缺口：variant / align / maxLength 未接线、说明段写死、复制不写剪贴板（frameworks/Typography.jsx:8）；按实现写，未发明截断逻辑。",
|
||
"a11y 依据：h2 标题与原生 button 见 frameworks/Typography.jsx:8；全文无 aria-live。",
|
||
"apiCarrier.table 保留了自动生成时的「属性 + 事件 + 插槽」三套同名行（onChange / onClick / onClose / children 各两次），本次只改 desc 文案，未调整行结构。"
|
||
]
|
||
}
|