86 lines
3.5 KiB
JSON
86 lines
3.5 KiB
JSON
{
|
||
"slug": "avatar",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 头像：用于展示成员、审批人或操作者的文字或图片头像。",
|
||
"usage": [
|
||
"本端是 surface 桩：defineProps 声明 src/avatar/size/status 四项，模板只消费 props.title 与默认插槽，图片、尺寸与状态点当前都不渲染（Avatar.vue3.vue:2）。",
|
||
"声明了 click 事件用于监听点击，但桩模板里没有触发点，监听当前不会收到回调（Avatar.vue3.vue:13）。",
|
||
"默认插槽可用于补充内容，桩模板把它渲染在描述文字之后（Avatar.vue3.vue:2）。",
|
||
"title 可覆盖占位标题「头像 Avatar」（Avatar.vue3.vue:2）。",
|
||
"没有头像加载失败回退到文字的逻辑，也没有 size 的枚举约束（Avatar.vue3.vue:8）。"
|
||
],
|
||
"bestPractices": [
|
||
"这是 surface 桩：模板只消费 props.title，avatar / src / size / status 声明后都没有参与渲染，当前不会显示真正的头像（Avatar.vue3.vue:2）。",
|
||
"status 的在线点当前不会出现，需要状态指示时请在外层自绘并注意不要与未来实现冲突（Avatar.vue3.vue:11）。",
|
||
"click 声明未实现，头像点击交互必须在父层包一个可聚焦元素（Avatar.vue3.vue:13）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "既有实现缺口：Avatar.vue3.vue 是 surface 桩，模板只消费 props.title；avatar/src/size/status 与 click 事件均声明未实现。",
|
||
"table": [
|
||
{
|
||
"name": "src",
|
||
"type": "String",
|
||
"desc": "图片资源地址，默认空串；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "avatar",
|
||
"type": "String",
|
||
"desc": "文字头像内容，默认「林」；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "String",
|
||
"desc": "尺寸，默认 40px；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "status",
|
||
"type": "String",
|
||
"desc": "状态，默认 online；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "标题文本，默认「头像 Avatar」；模板实际消费的字段"
|
||
},
|
||
{
|
||
"name": "click",
|
||
"type": "emit(declared only)",
|
||
"desc": "声明了该事件但模板内没有触发点"
|
||
},
|
||
{
|
||
"name": "default",
|
||
"type": "slot(default)",
|
||
"desc": "默认插槽，当前渲染在描述文字之后"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"当前渲染不含 img，因此没有 alt 可提供；接入真实头像时应保证图片带 alt 或用文字兜底（Avatar.vue3.vue:2）。",
|
||
"可点击头像应实现为 button 或链接而非 div 加事件，否则键盘与读屏都无法触发（Avatar.vue3.vue:13）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Avatar.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "avatar 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/Avatar.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"avatar-ex-1",
|
||
"avatar-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/Avatar.vue3.vue:9 — 声明 src/avatar/size/status",
|
||
"frameworks/Avatar.vue3.vue:13 — 声明 click 但无触发点",
|
||
"frameworks/Avatar.vue3.vue:2 — 模板仅消费 props.title（surface 桩）",
|
||
"实现缺口 frameworks/Avatar.vue3.vue:13 — 既有实现缺口：surface 桩，模板只消费 props.title；src/avatar/size/status 与 click 均声明未实现"
|
||
]
|
||
}
|