56 lines
3.1 KiB
JSON
56 lines
3.1 KiB
JSON
{
|
||
"slug": "shortcutpanel",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "快捷键面板：items 给条目，面板内的搜索框按名称或按键实时过滤。",
|
||
"usage": [
|
||
"React 端只接收 items（默认 8 条内置快捷键）（ShortcutPanel.jsx:4-15）。",
|
||
"搜索是内部状态：输入框自持 useState 的 q，过滤用 useMemo 缓存（ShortcutPanel.jsx:16-21）。",
|
||
"过滤同时匹配名称与按键文本：name 或 key 任一包含关键字即命中，均转小写比较（ShortcutPanel.jsx:19-20）。",
|
||
"空结果时渲染「无匹配快捷键」整行提示（ShortcutPanel.jsx:27）。",
|
||
"条目结构是 [{name, key}] 两个字符串字段（ShortcutPanel.jsx:5-12）。"
|
||
],
|
||
"bestPractices": [
|
||
"items 整体替换即可自定义快捷键表，注意每个条目必须同时有 name 与 key，缺少任一字段会导致过滤时抛错（ShortcutPanel.jsx:20）。",
|
||
"搜索框的值不受外部控制，若需要外部清空请输入框重挂载或改造组件。",
|
||
"按键展示用固定文本（如 Ctrl + S）而非平台探测，跨平台差异需在传入数据里自行区分。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "items",
|
||
"type": "Array<{ name, key }>",
|
||
"desc": "快捷键条目，默认内置 8 条演示数据"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"搜索框是原生 input 且有 placeholder（ShortcutPanel.jsx:25），但无 label/aria-label，读屏只能读到占位符。",
|
||
"快捷键列表是 div + span（ShortcutPanel.jsx:29-32），没有 table/list 语义，名称与按键的对应关系不会结构化播报。",
|
||
"按键文本建议用 <kbd> 提升语义，当前实现只用了普通 span。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ShortcutPanel.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/ShortcutPanel.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"shortcutpanel-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/ShortcutPanel.jsx:15 中可指到 items（Array<{ name, key }>）——快捷键条目，默认内置 8 条演示数据",
|
||
"props 解构清单见 frameworks/ShortcutPanel.jsx:15-15；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/ShortcutPanel.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：1 行中 1 行是 frameworks/ShortcutPanel.jsx 解构出的顶层 props（解构块 frameworks/ShortcutPanel.jsx:15-15）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|