chore(build): 同步构建产物（site/** + sitemap 公网基址）——含本任务接线后的 data.json/data.js/逐端页，以及并行会话（S10/S9-P3）在途工作的生成物；其源码文件仍留在工作区未提交
This commit is contained in:
aurora-admin
+160
-1
@@ -1 +1,160 @@
|
||||
{"slug":"topmenu","mode":"scenarios","examples":[{"id":"topmenu-ex-1","title":"默认态（选中：全部订单）","titleSrc":"demo","desc":"","html":"<div class=\"demo-block\">\n <nav class=\"kole-menu\" id=\"menu-default\" role=\"navigation\" aria-label=\"主菜单\"></nav>\n</div>","preview":{"show":[[1]],"hide":[[0],[2],[3],[4],[5],[6]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"主菜单\"></nav>","jsx":"import { KoleTopMenu } from 'kole-ui/react';\n\n<KoleTopMenu />","vue3":"<template>\n <KoleTopMenu />\n</template>\n\n<script setup>\nimport { KoleTopMenu } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n <KoleTopMenu />\n</template>\n\n<script>\nimport { KoleTopMenu } from 'kole-ui/vue2';\nexport default { components: { KoleTopMenu } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"id":"topmenu-ex-2","title":"含徽章与禁用项","titleSrc":"demo","desc":"","html":"<div class=\"demo-block\">\n <nav class=\"kole-menu\" id=\"menu-badge\" role=\"navigation\" aria-label=\"带徽章的主菜单\"></nav>\n</div>","preview":{"show":[[3]],"hide":[[0],[1],[2],[4],[5],[6]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"带徽章的主菜单\"></nav>","jsx":"import { KoleTopMenu } from 'kole-ui/react';\n\n<KoleTopMenu />","vue3":"<template>\n <KoleTopMenu />\n</template>\n\n<script setup>\nimport { KoleTopMenu } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n <KoleTopMenu />\n</template>\n\n<script>\nimport { KoleTopMenu } from 'kole-ui/vue2';\nexport default { components: { KoleTopMenu } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"id":"topmenu-ex-3","title":"下拉展开态（订单 → 子项）","titleSrc":"demo","desc":"","html":"<div class=\"demo-block\">\n <nav class=\"kole-menu\" id=\"menu-alt\" role=\"navigation\" aria-label=\"主菜单替代形态\"></nav>\n</div>","preview":{"show":[[5]],"hide":[[0],[1],[2],[3],[4],[6]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"主菜单替代形态\"></nav>","jsx":"import { KoleTopMenu } from 'kole-ui/react';\n\n<KoleTopMenu />","vue3":"<template>\n <KoleTopMenu />\n</template>\n\n<script setup>\nimport { KoleTopMenu } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n <KoleTopMenu />\n</template>\n\n<script>\nimport { KoleTopMenu } from 'kole-ui/vue2';\nexport default { components: { KoleTopMenu } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}
|
||||
{
|
||||
"slug": "topmenu",
|
||||
"curated": true,
|
||||
"mode": "scenarios",
|
||||
"examples": [
|
||||
{
|
||||
"id": "topmenu-ex-1",
|
||||
"title": "默认态（选中：全部订单）",
|
||||
"titleSrc": "demo",
|
||||
"desc": "",
|
||||
"html": "<div class=\"demo-block\">\n <nav class=\"kole-menu\" id=\"menu-default\" role=\"navigation\" aria-label=\"主菜单\"></nav>\n</div>",
|
||||
"preview": {
|
||||
"show": [
|
||||
[
|
||||
1
|
||||
]
|
||||
],
|
||||
"hide": [
|
||||
[
|
||||
0
|
||||
],
|
||||
[
|
||||
2
|
||||
],
|
||||
[
|
||||
3
|
||||
],
|
||||
[
|
||||
4
|
||||
],
|
||||
[
|
||||
5
|
||||
],
|
||||
[
|
||||
6
|
||||
]
|
||||
],
|
||||
"mode": "scenarios"
|
||||
},
|
||||
"previewSafe": true,
|
||||
"previewUnsafeReasons": [],
|
||||
"source": "curated",
|
||||
"code": {
|
||||
"html": "<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"主菜单\"></nav>",
|
||||
"jsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nfunction OrderTopMenu() {\n const [activeKey, setActiveKey] = useState('order-all');\n return <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}",
|
||||
"vue3": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\nconst activeKey = ref('order-all');\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n</script>",
|
||||
"vue2": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script>\nimport { KoleTopMenu } from 'kole-ui/vue2';\nexport default {\n components: { KoleTopMenu },\n data() {\n return {\n activeKey: 'order-all',\n ITEMS: [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n ]\n };\n }\n};\n</script>",
|
||||
"tsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nfunction OrderTopMenu(): JSX.Element {\n const [activeKey, setActiveKey] = useState<string>('order-all');\n return <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}\n\nexport default OrderTopMenu;",
|
||||
"vue3ts": "<template>\n\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\nconst activeKey = ref<string>('order-all');\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n</script>",
|
||||
"vue2ts": "<template>\n\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleTopMenu },\n data(): Record<string, unknown> {\n return {\n activeKey: 'order-all',\n ITEMS: [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n ]\n };\n }\n};\n</script>"
|
||||
},
|
||||
"notes": [
|
||||
"依据 frameworks/TopMenu.html 第 45-58 行的 ITEMS 数组（key/label/icon/badge/children/disabled）与第 152 行 createMenu(..., { active: \"order-all\" })：默认态选中「全部订单」，即 activeKey=\"order-all\"。",
|
||||
"prop 名 items / activeKey 见 frameworks/TopMenu.jsx 第 14 行参数表与 frameworks/TopMenu.vue3.vue 第 59-62 行 defineProps，选中变化事件为 change（vue3 / vue2 同时 emit update:activeKey）。"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "topmenu-ex-2",
|
||||
"title": "含徽章与禁用项",
|
||||
"titleSrc": "demo",
|
||||
"desc": "",
|
||||
"html": "<div class=\"demo-block\">\n <nav class=\"kole-menu\" id=\"menu-badge\" role=\"navigation\" aria-label=\"带徽章的主菜单\"></nav>\n</div>",
|
||||
"preview": {
|
||||
"show": [
|
||||
[
|
||||
3
|
||||
]
|
||||
],
|
||||
"hide": [
|
||||
[
|
||||
0
|
||||
],
|
||||
[
|
||||
1
|
||||
],
|
||||
[
|
||||
2
|
||||
],
|
||||
[
|
||||
4
|
||||
],
|
||||
[
|
||||
5
|
||||
],
|
||||
[
|
||||
6
|
||||
]
|
||||
],
|
||||
"mode": "scenarios"
|
||||
},
|
||||
"previewSafe": true,
|
||||
"previewUnsafeReasons": [],
|
||||
"source": "curated",
|
||||
"code": {
|
||||
"html": "<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"带徽章的主菜单\"></nav>",
|
||||
"jsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\n// badge 显示条目角标，disabled 的条目不响应点击（is-disabled）\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nfunction BadgeTopMenu() {\n const [activeKey, setActiveKey] = useState('goods-list');\n return <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}",
|
||||
"vue3": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\nconst activeKey = ref('goods-list');\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n</script>",
|
||||
"vue2": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script>\nimport { KoleTopMenu } from 'kole-ui/vue2';\nexport default {\n components: { KoleTopMenu },\n data() {\n return {\n activeKey: 'goods-list',\n ITEMS: [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n ]\n };\n }\n};\n</script>",
|
||||
"tsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\n// badge 显示条目角标，disabled 的条目不响应点击（is-disabled）\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n\nfunction BadgeTopMenu(): JSX.Element {\n const [activeKey, setActiveKey] = useState<string>('goods-list');\n return <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}\n\nexport default BadgeTopMenu;",
|
||||
"vue3ts": "<template>\n\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\nconst activeKey = ref<string>('goods-list');\nconst ITEMS = [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n];\n</script>",
|
||||
"vue2ts": "<template>\n\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleTopMenu },\n data(): Record<string, unknown> {\n return {\n activeKey: 'goods-list',\n ITEMS: [\n { key: 'home', label: '工作台', icon: '⊞' },\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] },\n { key: 'data', label: '数据', icon: '▤' },\n { key: 'setting', label: '设置', icon: '⚙', disabled: true }\n ]\n };\n }\n};\n</script>"
|
||||
},
|
||||
"notes": [
|
||||
"依据 frameworks/TopMenu.html 第 153 行 createMenu(..., { active: \"goods-list\", open: \"goods\" })：本示例选中「商品列表」并带角标；角标来自 ITEMS 第 47 行的 badge: \"3\"，禁用项来自第 57 行的 disabled: true（渲染为 kole-menu-item.is-disabled，见 frameworks/TopMenu.css）。",
|
||||
"badge / disabled / icon 均为 items 数据字段而非 prop，真实用法仍是 items + activeKey 两个 prop（frameworks/TopMenu.jsx 第 14 行）。"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "topmenu-ex-3",
|
||||
"title": "下拉展开态（订单 → 子项）",
|
||||
"titleSrc": "demo",
|
||||
"desc": "",
|
||||
"html": "<div class=\"demo-block\">\n <nav class=\"kole-menu\" id=\"menu-alt\" role=\"navigation\" aria-label=\"主菜单替代形态\"></nav>\n</div>",
|
||||
"preview": {
|
||||
"show": [
|
||||
[
|
||||
5
|
||||
]
|
||||
],
|
||||
"hide": [
|
||||
[
|
||||
0
|
||||
],
|
||||
[
|
||||
1
|
||||
],
|
||||
[
|
||||
2
|
||||
],
|
||||
[
|
||||
3
|
||||
],
|
||||
[
|
||||
4
|
||||
],
|
||||
[
|
||||
6
|
||||
]
|
||||
],
|
||||
"mode": "scenarios"
|
||||
},
|
||||
"previewSafe": true,
|
||||
"previewUnsafeReasons": [],
|
||||
"source": "curated",
|
||||
"code": {
|
||||
"html": "<nav class=\"kole-menu\" role=\"navigation\" aria-label=\"主菜单替代形态\"></nav>",
|
||||
"jsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\n// 带 children 的一级项点击后在原位展开下拉面板；\n// 演示页第三块用 createMenu(..., { open: 'order' }) 预置了这一展开态。\nconst ITEMS = [\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] }\n];\n\nfunction DropdownTopMenu() {\n const [activeKey, setActiveKey] = useState('order-all');\n return <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}",
|
||||
"vue3": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\n// 一级项带 children 即渲染下拉面板，点击父级切换展开（内部 open 状态）\nconst activeKey = ref('order-all');\nconst ITEMS = [\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] }\n];\n</script>",
|
||||
"vue2": "<template>\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script>\nimport { KoleTopMenu } from 'kole-ui/vue2';\nexport default {\n components: { KoleTopMenu },\n data() {\n return {\n activeKey: 'order-all',\n ITEMS: [\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] }\n ]\n };\n }\n};\n</script>",
|
||||
"tsx": "import { useState } from 'react';\nimport { KoleTopMenu } from 'kole-ui/react';\n\n// 带 children 的一级项点击后在原位展开下拉面板；\n// 演示页第三块用 createMenu(..., { open: 'order' }) 预置了这一展开态。\nconst ITEMS = [\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] }\n];\n\nfunction DropdownTopMenu(): JSX.Element {\n const [activeKey, setActiveKey] = useState<string>('order-all');\n return <KoleTopMenu items={ITEMS} activeKey={activeKey} onChange={setActiveKey} />;\n}\n\nexport default DropdownTopMenu;",
|
||||
"vue3ts": "<template>\n\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTopMenu } from 'kole-ui/vue3';\n\n// 一级项带 children 即渲染下拉面板，点击父级切换展开（内部 open 状态）\nconst activeKey = ref<string>('order-all');\nconst ITEMS = [\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] }\n];\n</script>",
|
||||
"vue2ts": "<template>\n\n <KoleTopMenu :items=\"ITEMS\" :active-key=\"activeKey\" @change=\"activeKey = $event\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTopMenu } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleTopMenu },\n data(): Record<string, unknown> {\n return {\n activeKey: 'order-all',\n ITEMS: [\n { key: 'order', label: '订单', icon: '≡', badge: '3', children: [\n { key: 'order-all', label: '全部订单' },\n { key: 'order-ship', label: '待发货' },\n { key: 'order-refund', label: '退款' }\n ] },\n { key: 'goods', label: '商品', icon: '◇', children: [\n { key: 'goods-list', label: '商品列表' },\n { key: 'goods-cat', label: '分类管理' }\n ] }\n ]\n };\n }\n};\n</script>"
|
||||
},
|
||||
"notes": [
|
||||
"依据 frameworks/TopMenu.html 第 157 行 createMenu(..., { active: \"order-all\", open: \"order\" })：下拉展开态由 items 中 order 项的 children 决定，展开箭头/面板类名 kole-menu-children、kole-menu-arrow 见 frameworks/TopMenu.css。",
|
||||
"展开状态是组件内部 open（frameworks/TopMenu.jsx 第 16 行）而非对外 prop，因此片段只传 items + activeKey，点击父级项即切换展开。"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user