76 lines
3.6 KiB
JSON
76 lines
3.6 KiB
JSON
{
|
||
"slug": "layout",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 布局外壳：为后台页提供方向、折叠与间距三个入参的结构容器。",
|
||
"usage": [
|
||
"KoleLayout 的模板是固定的「标题 + 描述 + 插槽」骨架，真正页面结构要写进默认插槽（Layout.vue3.vue:2）。",
|
||
"direction 控制主轴方向（默认 row），gap 控制间距（默认 16px），collapsed 是折叠布尔开关，三者都直接透传到类或样式（Layout.vue3.vue:8）。",
|
||
"title 会覆盖标题文本；不传时显示「布局 Layout」占位，说明它当前只是一层可辨识的容器（Layout.vue3.vue:2）。",
|
||
"defineEmits 传的是空数组，本端不产生任何事件，折叠状态完全由父组件通过 :collapsed 决定（Layout.vue3.vue:12）。",
|
||
"没有具名插槽（如 header / sider / footer）区分结构位，插槽内容如何排布由使用方自己负责（Layout.vue3.vue:2）。"
|
||
],
|
||
"bestPractices": [
|
||
"这是个 surface 桩：模板只消费 props.title，direction / collapsed / gap 虽然声明了但并不参与渲染，实际布局需依赖外部 CSS 或改组件（Layout.vue3.vue:2）。",
|
||
"因为 collapsed 不被模板消费，不传或传真值都不会改变页面，做折叠交互前必须先在组件里接上该 prop（Layout.vue3.vue:9）。",
|
||
"title 是桩的占位文案而非设计上的页面标题，不要在正式页面里依赖它承载真实标题（Layout.vue3.vue:2）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "既有实现缺口：Layout.vue3.vue 是 surface 桩，模板只消费 props.title，direction/collapsed/gap 声明后未被使用；表中三项仍按源码声明列出，但当前不产生布局效果。",
|
||
"table": [
|
||
{
|
||
"name": "direction",
|
||
"type": "String",
|
||
"desc": "主轴方向，默认 row；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "collapsed",
|
||
"type": "Boolean",
|
||
"desc": "折叠开关，默认 false；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "gap",
|
||
"type": "String",
|
||
"desc": "间距，默认 16px；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "标题文本，默认「布局 Layout」；模板实际消费的字段"
|
||
},
|
||
{
|
||
"name": "default",
|
||
"type": "slot(default)",
|
||
"desc": "默认插槽，页面结构内容写在这里"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"标题用 strong 渲染，不是 h1-h6，读屏没有标题层级可用；页面主标题应由业务在插槽内自行提供（Layout.vue3.vue:2）。",
|
||
"容器是纯 div 无 landmark role，不能作为 main/nav 等区域被读屏跳转（Layout.vue3.vue:2）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Layout.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "layout 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/Layout.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"layout-ex-1",
|
||
"layout-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/Layout.vue3.vue:8 — 声明了 direction/collapsed/gap 三个入参",
|
||
"frameworks/Layout.vue3.vue:12 — 空事件数组，本端不产生任何事件",
|
||
"frameworks/Layout.vue3.vue:2 — 模板仅消费 props.title，其余 props 未使用（surface 桩）",
|
||
"实现缺口 frameworks/Layout.vue3.vue:12 — 既有实现缺口：surface 桩，模板只消费 props.title，direction/collapsed/gap 声明后未被消费"
|
||
]
|
||
}
|