97 lines
5.2 KiB
JSON
97 lines
5.2 KiB
JSON
{
|
||
"slug": "layout",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端布局组件：一个 .kole-layout-surface 卡片，含标题与固定说明文案，正文由默认插槽填充。",
|
||
"usage": [
|
||
"模板只有一层：<div class=\"kole-layout kole-layout-surface\"> 里放标题、说明与 <slot />，没有网格与分区结构（Layout.vue2.vue:2）。",
|
||
"标题写成 {{ title || '布局 Layout' }}，但 props 里没有声明 title，所以这个插值永远走兜底值「布局 Layout」（Layout.vue2.vue:2,8-12）。",
|
||
"唯一的内容入口是默认插槽：<KoleLayout>客户详情</KoleLayout> 的文本会渲染到说明段落之后（Layout.vue2.vue:2；示例 layout-ex-1）。",
|
||
"三个 prop（direction 默认 'row'、collapsed 默认 false、gap 默认 '16px'）在模板中都没有被绑定，改值不改变渲染（Layout.vue2.vue:9-11）。",
|
||
"说明文案是模板里写死的一段中文（「搭建后台页面的侧边栏、页头、内容区与页脚…」），组件没有把它做成 prop 或插槽（Layout.vue2.vue:2）。",
|
||
"用法示例给组件传了 direction 与 gap（<KoleLayout direction=\"row\" gap=\"16px\">），这两个属性会被接收但不会反映到 DOM 上（Layout.vue2.vue:9,11；示例 layout-ex-1）。"
|
||
],
|
||
"bestPractices": [
|
||
"本端是「卡片容器桩」而不是完整后台布局：侧边栏、页头、页脚都不存在，需要真实布局请改用 CSS 端的 .kole-layout-layout 网格结构（Layout.vue2.vue:2；Layout.css:19-22）。",
|
||
"想改标题目前只能改源码；传 title=\"客户详情\" 不会生效，因为 props 未声明该字段（Layout.vue2.vue:2,8-12）。",
|
||
"collapsed 传 true 也不会折叠任何东西；折叠能力在 CSS 里（.kole-layout-layout.is-collapsed），需要在业务里手工挂类（Layout.vue2.vue:10；Layout.css:20）。",
|
||
"样式经 <style src=\"./Layout.css\"> 引入，单独拷贝 .vue2.vue 时必须带 CSS，否则 .kole-layout-surface 的卡底与描边全失效（Layout.vue2.vue:16）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端只声明三个 prop（direction/collapsed/gap）且当前都未被模板消费，真正的内容通道是默认插槽 slot；组件不派发任何事件，也没有具名插槽。",
|
||
"table": [
|
||
{
|
||
"name": "direction",
|
||
"type": "String，默认 'row'",
|
||
"desc": "声明为方向，模板未绑定，不改变渲染"
|
||
},
|
||
{
|
||
"name": "collapsed",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "声明为是否折叠，模板未绑定，不改变渲染"
|
||
},
|
||
{
|
||
"name": "gap",
|
||
"type": "String，默认 '16px'",
|
||
"desc": "声明为间距，模板未绑定，不改变渲染"
|
||
},
|
||
{
|
||
"name": "default",
|
||
"type": "默认插槽",
|
||
"desc": "内容区，渲染在说明段落之后（模板中的 <slot />）"
|
||
},
|
||
{
|
||
"name": "kole-layout",
|
||
"type": "结构类名",
|
||
"desc": "根节点作用域类名，与 surface 同时挂在根 div 上"
|
||
},
|
||
{
|
||
"name": "kole-layout-surface",
|
||
"type": "结构类名",
|
||
"desc": "卡片外观：卡底、1px 描边、圆角、低投影"
|
||
},
|
||
{
|
||
"name": "kole-layout-title",
|
||
"type": "结构类名",
|
||
"desc": "标题文字（<strong>），取标题色与 h2 字重"
|
||
},
|
||
{
|
||
"name": "kole-layout-desc",
|
||
"type": "结构类名",
|
||
"desc": "说明文字，次要色 caption 字号"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"标题用 <strong> 而非标题标签，读屏器不会把它列入标题导航，页面大纲里看不到「布局 Layout」（Layout.vue2.vue:2）。",
|
||
"根节点是普通 div，没有 role=\"region\" 或 aria-label，插槽内容与说明文案之间的分组关系未被暴露（Layout.vue2.vue:2）。",
|
||
"插槽内容由业务提供，可含交互元素；组件本身没有可聚焦节点，不存在键盘陷阱（Layout.vue2.vue:2）。",
|
||
"标题与说明分别用 --kole-color-text-title 与次要色，在卡底上保持层级，长文本按 caption 行高排布（Layout.css:5-6）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Layout.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "Layout.vue2.vue —— 本端模板（标题 + 说明 + slot）与三个未消费 prop 的声明"
|
||
},
|
||
{
|
||
"file": "frameworks/Layout.css",
|
||
"kind": "样式文件",
|
||
"desc": "Layout.css —— <style src> 引入的 .kole-layout 系列样式"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"layout-ex-1",
|
||
"layout-ex-2"
|
||
],
|
||
"notes": [
|
||
"模板结构与默认插槽：frameworks/Layout.vue2.vue:2",
|
||
"props 声明三项：frameworks/Layout.vue2.vue:9-11",
|
||
"title 未声明却参与插值：frameworks/Layout.vue2.vue:2 与 props 块 frameworks/Layout.vue2.vue:8-12 之间不一致，属实现与模板的落差，已按实现记录",
|
||
"样式引入：frameworks/Layout.vue2.vue:16",
|
||
"折叠与网格能力在 stylesheet 中：frameworks/Layout.css:19-22",
|
||
"consumedApi.props 里的 default/type 字样来自 props 声明块自身（Layout.vue2.vue:9-11），对外 props 只有 direction/collapsed/gap。"
|
||
]
|
||
}
|