81 lines
3.7 KiB
JSON
81 lines
3.7 KiB
JSON
{
|
||
"slug": "typography",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 排版组件：按变体与对齐方式输出标题、正文与截断文本的统一样式。",
|
||
"usage": [
|
||
"本端是 surface 桩：defineProps 声明 variant/text/align/maxLength 四项，但模板只消费 props.title，其余入参当前不产生任何渲染效果（Typography.vue3.vue:2）。",
|
||
"maxLength 用于限制字符数，配合示例里的 compact 变体演示长文本省略场景（Typography.vue3.vue:11）。",
|
||
"声明了 copy 事件，但模板里没有任何触发点，调用方监听 @copy 也不会被调用（Typography.vue3.vue:13）。",
|
||
"title 可覆盖占位标题「排版 Typography」，其余展示仍走桩模板的固定结构（Typography.vue3.vue:2）。",
|
||
"默认插槽可用于插入自定义内容，但桩模板把它放在描述之后，与 text prop 的关系并不明确（Typography.vue3.vue:2）。"
|
||
],
|
||
"bestPractices": [
|
||
"这是 surface 桩：模板只消费 props.title，variant / text / align / maxLength 声明后都没有参与渲染，传了不会看到排版差异（Typography.vue3.vue:2）。",
|
||
"copy 事件声明了但未实现，需要「复制文本」能力时应在外层自己处理，不要依赖该事件（Typography.vue3.vue:13）。",
|
||
"maxLength 为 0 表示不限制，但桩实现里连截断逻辑都未接入，长文本会原样渲染（Typography.vue3.vue:11）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "既有实现缺口：Typography.vue3.vue 是 surface 桩，模板只消费 props.title；variant/text/align/maxLength 声明未消费，copy 事件声明未实现。",
|
||
"table": [
|
||
{
|
||
"name": "variant",
|
||
"type": "String",
|
||
"desc": "变体，默认 body；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "text",
|
||
"type": "String",
|
||
"desc": "正文文本，默认「示例文本」；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "align",
|
||
"type": "String",
|
||
"desc": "对齐方式，默认 left；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "maxLength",
|
||
"type": "Number",
|
||
"desc": "最大字符数，默认 0 表示不限制；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "标题文本，默认「排版 Typography」；模板实际消费的字段"
|
||
},
|
||
{
|
||
"name": "copy",
|
||
"type": "emit(declared only)",
|
||
"desc": "源码声明了该事件但模板内没有触发点"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"标题以 strong 呈现而非 h1-h6，页面的标题层级无法被读屏与大纲工具识别（Typography.vue3.vue:2）。",
|
||
"省略与对齐都只影响视觉，若接入真实截断能力，还需确保完整文本可通过 title 或 aria-label 获得（Typography.vue3.vue:2）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Typography.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "typography 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/Typography.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"typography-ex-1",
|
||
"typography-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/Typography.vue3.vue:11 — 声明了 variant/text/align/maxLength",
|
||
"frameworks/Typography.vue3.vue:13 — 声明 copy 事件但无触发点",
|
||
"frameworks/Typography.vue3.vue:2 — 模板仅消费 props.title（surface 桩）",
|
||
"实现缺口 frameworks/Typography.vue3.vue:13 — 既有实现缺口：surface 桩，模板只消费 props.title；copy 事件声明后无触发点"
|
||
]
|
||
}
|